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

package/index.mjs

@@ -21,7 +21,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) {
@@ -172,7 +172,7 @@ function useSelector$(signalName, selector) {
 var DebugRow = ({ children }) => {
   return /* @__PURE__ */ React3.createElement(View, { style: { alignItems: "center", flexDirection: "row", justifyContent: "space-between" } }, children);
 };
-var DebugView = React3.memo(function DebugView2({ state }) {
+React3.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
   const [totalSize = 0, scrollAdjust = 0, rawScroll = 0, scroll = 0, _numContainers = 0, _numContainersPooled = 0] = useArr$([
     "totalSize",
@@ -224,7 +224,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;
@@ -307,7 +307,10 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   children,
   ...rest
 }) {
-  const [position = POSITION_OUT_OF_VIEW, activeStickyIndex] = useArr$([`containerPosition${id}`, "activeStickyIndex"]);
+  const [position = POSITION_OUT_OF_VIEW, activeStickyIndex] = useArr$([
+    `containerPosition${id}`,
+    "activeStickyIndex"
+  ]);
   const base = {
     contain: "paint layout style"
   };
@@ -337,9 +340,6 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   return /* @__PURE__ */ React3.createElement("div", { ref: refView, style: viewStyle, ...rest }, children);
 });
 var PositionView = PositionViewState;
-
-// src/constants-platform.ts
-var IsNewArchitecture = true;
 function useInit(cb) {
   useState(() => cb());
 }
@@ -550,7 +550,8 @@ function createResizeObserver(element, callback) {
 function useOnLayoutSync({
   ref,
   onLayoutProp,
-  onLayoutChange
+  onLayoutChange,
+  webLayoutResync
 }, deps) {
   useLayoutEffect(() => {
     var _a3, _b;
@@ -574,7 +575,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);
       }
@@ -600,6 +603,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,
@@ -612,6 +624,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}`,
@@ -707,7 +720,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(() => {
@@ -731,11 +745,12 @@ var Container = typedMemo(function Container2({
   const { onLayout } = useOnLayoutSync(
     {
       onLayoutChange,
-      ref
+      ref,
+      webLayoutResync: () => isInMVCPActiveMode(ctx.state)
     },
     [itemKey, layoutRenderCount]
   );
-  const PositionComponent = isSticky ? PositionViewSticky : PositionView;
+  const PositionComponent = isSticky ? stickyPositionComponentInternal ? stickyPositionComponentInternal : PositionViewSticky : PositionView;
   return /* @__PURE__ */ React3.createElement(
     PositionComponent,
     {
@@ -923,25 +938,6 @@ var Containers = typedMemo(function Containers2({
   }
   return /* @__PURE__ */ React3.createElement(ContainersInner, { horizontal, numColumns, waitForInitialLayout }, containers);
 });
-function DevNumbers() {
-  return IS_DEV && // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
-  React3.memo(function DevNumbers2() {
-    return Array.from({ length: 100 }).map((_, index) => /* @__PURE__ */ React3.createElement(
-      "div",
-      {
-        key: index,
-        style: {
-          height: 100,
-          pointerEvents: "none",
-          position: "absolute",
-          top: index * 100,
-          width: "100%"
-        }
-      },
-      /* @__PURE__ */ React3.createElement("div", { style: { color: "red" } }, index * 100)
-    ));
-  });
-}
 
 // src/platform/StyleSheet.tsx
 function flattenStyles(styles) {
@@ -1116,6 +1112,7 @@ function useValueListener$(key, callback) {
 function ScrollAdjust() {
   const ctx = useStateContext();
   const lastScrollOffsetRef = React3.useRef(0);
+  const resetPaddingRafRef = React3.useRef(void 0);
   const callback = React3.useCallback(() => {
     var _a3;
     const scrollAdjust = peek$(ctx, "scrollAdjust");
@@ -1130,13 +1127,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 {
@@ -1201,7 +1202,9 @@ var ListComponent = typedMemo(function ListComponent2({
   const ctx = useStateContext();
   const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
   const ScrollComponent = renderScrollComponent ? useMemo(
-    () => React3.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React3.forwardRef(
+      (props, ref) => renderScrollComponent({ ...props, ref })
+    ),
     [renderScrollComponent]
   ) : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
@@ -1258,7 +1261,7 @@ var ListComponent = typedMemo(function ListComponent2({
       },
       getComponent(ListFooterComponent)
     ),
-    IS_DEV && ENABLE_DEVMODE && /* @__PURE__ */ React3.createElement(DevNumbers, null)
+    IS_DEV && ENABLE_DEVMODE
   );
 });
 
@@ -1392,12 +1395,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) && (Platform.OS !== "android")) {
-    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);
@@ -1492,7 +1498,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 {
@@ -1536,14 +1542,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 });
+    }
   }
 }
 
@@ -1575,6 +1589,7 @@ function finishScrollTo(ctx) {
 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;
@@ -1585,7 +1600,10 @@ function doScrollTo(ctx, params) {
     const top = horizontal ? 0 : offset;
     node.scrollTo({ behavior: animated ? "smooth" : "auto", left, top });
     if (animated) {
-      listenForScrollEnd(ctx, node);
+      listenForScrollEnd(ctx, node, {
+        horizontal: !!horizontal,
+        targetOffset: offset
+      });
     } else {
       state.scroll = offset;
       setTimeout(() => {
@@ -1594,31 +1612,17 @@ function doScrollTo(ctx, params) {
     }
   }
 }
-function listenForScrollEnd(ctx, node) {
+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 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 = () => {
+    node.removeEventListener("scroll", onScroll2);
     if (supportsScrollEnd) {
-      node.removeEventListener("scrollend", finish);
-    } else {
-      node.removeEventListener("scroll", onScroll2);
+      node.removeEventListener("scrollend", onScrollEnd);
     }
     if (idleTimeout) {
       clearTimeout(idleTimeout);
@@ -1627,14 +1631,37 @@ function listenForScrollEnd(ctx, node) {
       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", finish, { once: true });
+    node.addEventListener("scrollend", onScrollEnd);
+    maxTimeout = setTimeout(() => finish("max"), SCROLL_END_MAX_MS);
   } else {
-    node.addEventListener("scroll", onScroll2);
-    idleTimeout = setTimeout(finish, SMOOTH_SCROLL_DURATION_MS);
-    maxTimeout = setTimeout(finish, SCROLL_END_MAX_MS);
+    idleTimeout = setTimeout(() => finish("idle"), SMOOTH_SCROLL_DURATION_MS);
+    maxTimeout = setTimeout(() => finish("max"), SCROLL_END_MAX_MS);
   }
-  return cleanup;
 }
 
 // src/core/scrollTo.ts
@@ -1652,14 +1679,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 || Platform.OS === "android") {
-    doScrollTo(ctx, { animated, horizontal, isInitialScroll, offset });
+    doScrollTo(ctx, { animated, horizontal, offset });
   } else {
     state.scroll = offset;
   }
@@ -1702,7 +1729,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;
@@ -1747,43 +1775,106 @@ 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 = [];
   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) {
       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);
@@ -1796,16 +1887,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 {
@@ -1813,20 +1906,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);
       }
     };
@@ -2481,26 +2583,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
@@ -2540,7 +2632,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) {
@@ -2561,13 +2653,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) {
@@ -2592,11 +2684,11 @@ function calculateItemsInView(ctx, params = {}) {
       props: {
         alwaysRenderIndicesArr,
         alwaysRenderIndicesSet,
+        drawDistance,
         getItemType,
         itemsAreEqual,
         keyExtractor,
-        onStickyHeaderChange,
-        scrollBuffer
+        onStickyHeaderChange
       },
       scrollForNextCalculateItemsInView,
       scrollLength,
@@ -2609,6 +2701,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;
@@ -2616,7 +2709,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;
@@ -2635,24 +2727,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);
@@ -2662,7 +2750,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;
@@ -2894,7 +2984,7 @@ function calculateItemsInView(ctx, params = {}) {
         ctx,
         stickyIndicesArr,
         scroll,
-        scrollBuffer,
+        drawDistance,
         currentStickyIdx,
         pendingRemoval,
         alwaysRenderSet
@@ -3001,12 +3091,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);
     }
   }
@@ -3150,10 +3245,10 @@ function doInitialAllocateContainers(ctx) {
     scrollLength,
     props: {
       data,
+      drawDistance,
       getEstimatedItemSize,
       getFixedItemSize,
       getItemType,
-      scrollBuffer,
       numColumns,
       estimatedItemSize
     }
@@ -3175,7 +3270,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);
@@ -3263,8 +3358,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, {
@@ -3317,7 +3412,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);
         }
@@ -3336,6 +3431,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;
@@ -3419,7 +3534,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) {
@@ -3531,7 +3646,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(),
@@ -3692,8 +3830,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) {
@@ -3765,8 +3903,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) {
@@ -3796,7 +3932,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     data: dataProp = [],
     dataVersion,
     drawDistance = 250,
-    estimatedItemSize: estimatedItemSizeProp,
+    estimatedItemSize = 100,
     estimatedListSize,
     extraData,
     getEstimatedItemSize,
@@ -3848,7 +3984,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 = {
@@ -3875,14 +4016,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     index: initialScrollIndexProp || 0,
     viewOffset: initialScrollOffsetProp || 0
   } : void 0;
-  const [canRender, setCanRender] = React3.useState(!IsNewArchitecture);
+  const [canRender, setCanRender] = React3.useState(false);
   const ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
   const refScroller = 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 = useMemo(() => {
     const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor);
@@ -3911,8 +4050,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,
@@ -3999,6 +4138,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     contentInset,
     data: dataProp,
     dataVersion,
+    drawDistance,
     estimatedItemSize,
     getEstimatedItemSize: useWrapIfItem(getEstimatedItemSize),
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
@@ -4022,10 +4162,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     overrideItemLayout,
     recycleItems: !!recycleItems,
     renderItem,
-    scrollBuffer,
     snapToIndices,
     stickyIndicesArr: stickyHeaderIndices != null ? stickyHeaderIndices : [],
     stickyIndicesSet: useMemo(() => new Set(stickyHeaderIndices != null ? stickyHeaderIndices : []), [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(",")]),
+    stickyPositionComponentInternal,
     stylePaddingBottom: stylePaddingBottomState,
     stylePaddingTop: stylePaddingTopState,
     suggestEstimatedItemSize: !!suggestEstimatedItemSize
@@ -4045,12 +4185,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);
@@ -4069,7 +4204,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;
@@ -4218,7 +4353,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
     ListComponent,
     {
-      ...rest,
+      ...restProps,
       alignItemsAtEnd,
       canRender,
       contentContainerStyle,
@@ -4252,7 +4387,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       updateItemSize: fns.updateItemSize,
       waitForInitialLayout
     }
-  ), IS_DEV && ENABLE_DEBUG_VIEW && /* @__PURE__ */ React3.createElement(DebugView, { state: refState.current }));
+  ), IS_DEV && ENABLE_DEBUG_VIEW);
 });
 
-export { LegendList, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };
+// 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."
+  );
+}
+
+export { LegendList3 as LegendList, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };