@legendapp/list 3.0.0-beta.46 → 3.0.0-beta.48

package/index.native.mjs

@@ -353,7 +353,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
     () => getStickyPushLimit(ctx.state, index, itemKey),
     [ctx.state, index, itemKey, _totalSize]
   );
-  const stickyPosition = React2.useMemo(() => {
+  const transform = React2.useMemo(() => {
     var _a3;
     if (animatedScrollY) {
       const stickyConfigOffset = (_a3 = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a3 : 0;
@@ -378,13 +378,10 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
           outputRange: [position, position + 5e3]
         });
       }
-      return nextStickyPosition;
+      return horizontal ? [{ translateX: nextStickyPosition }] : [{ translateY: nextStickyPosition }];
     }
   }, [animatedScrollY, headerSize, position, pushLimit, stylePaddingTop, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
-  const viewStyle = React2.useMemo(
-    () => [style, { zIndex: index + 1e3 }, horizontal ? { left: stickyPosition } : { top: stickyPosition }],
-    [horizontal, index, stickyPosition, style]
-  );
+  const viewStyle = React2.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
   const renderStickyHeaderBackdrop = React2.useMemo(() => {
     if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
       return null;
@@ -837,6 +834,35 @@ var Container = typedMemo(function Container2({
 });
 
 // src/components/Containers.native.tsx
+var ContainersLayer = typedMemo(function ContainersLayer2({ children, horizontal }) {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
+  const animSize = useValue$("totalSize");
+  const otherAxisSize = useValue$("otherAxisSize");
+  const [readyToRender, numColumns] = useArr$(["readyToRender", "numColumns"]);
+  const style = horizontal ? { minHeight: otherAxisSize, opacity: readyToRender ? 1 : 0, width: animSize } : { height: animSize, minWidth: otherAxisSize, opacity: readyToRender ? 1 : 0 };
+  if (columnWrapperStyle) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    const gapX = columnGap || gap || 0;
+    const gapY = rowGap || gap || 0;
+    if (horizontal) {
+      if (gapY && numColumns > 1) {
+        style.marginVertical = -gapY / 2;
+      }
+      if (gapX) {
+        style.marginRight = -gapX;
+      }
+    } else {
+      if (gapX && numColumns > 1) {
+        style.marginHorizontal = -gapX;
+      }
+      if (gapY) {
+        style.marginBottom = -gapY;
+      }
+    }
+  }
+  return /* @__PURE__ */ React2.createElement(Animated.View, { style }, children);
+});
 var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
@@ -845,12 +871,7 @@ var Containers = typedMemo(function Containers2({
   updateItemSize: updateItemSize2,
   getRenderedItem: getRenderedItem2
 }) {
-  const ctx = useStateContext();
-  const columnWrapperStyle = ctx.columnWrapperStyle;
-  const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
-  const animSize = useValue$("totalSize");
-  const otherAxisSize = useValue$("otherAxisSize");
-  const animOpacity = useValue$("readyToRender", { getValue: (value) => value ? 1 : 0 });
+  const [numContainers] = useArr$(["numContainersPooled"]);
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
@@ -869,28 +890,7 @@ var Containers = typedMemo(function Containers2({
       )
     );
   }
-  const style = horizontal ? { minHeight: otherAxisSize, opacity: animOpacity, width: animSize } : { height: animSize, minWidth: otherAxisSize, opacity: animOpacity };
-  if (columnWrapperStyle) {
-    const { columnGap, rowGap, gap } = columnWrapperStyle;
-    const gapX = columnGap || gap || 0;
-    const gapY = rowGap || gap || 0;
-    if (horizontal) {
-      if (gapY && numColumns > 1) {
-        style.marginVertical = -gapY / 2;
-      }
-      if (gapX) {
-        style.marginRight = -gapX;
-      }
-    } else {
-      if (gapX && numColumns > 1) {
-        style.marginHorizontal = -gapX;
-      }
-      if (gapY) {
-        style.marginBottom = -gapY;
-      }
-    }
-  }
-  return /* @__PURE__ */ React2.createElement(Animated.View, { style }, containers);
+  return /* @__PURE__ */ React2.createElement(ContainersLayer, { horizontal }, containers);
 });
 var ListComponentScrollView = Animated.ScrollView;
 function ScrollAdjust() {
@@ -3680,7 +3680,7 @@ function computeViewability(state, ctx, viewabilityConfig, containerId, key, scr
 }
 function checkIsViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
   let value = ctx.mapViewabilityAmountValues.get(containerId);
-  if (!value || value.key !== key) {
+  if (!value || value.key !== key || value.index !== index) {
     value = computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index);
   }
   return value.isViewable;
@@ -3695,7 +3695,7 @@ var unstableBatchedUpdates = ReactNative.unstable_batchedUpdates;
 var batchedUpdates = typeof unstableBatchedUpdates === "function" ? unstableBatchedUpdates : (fn) => fn();
 
 // src/utils/findAvailableContainers.ts
-function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pendingRemoval, requiredItemTypes, needNewContainers) {
+function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pendingRemoval, requiredItemTypes, needNewContainers, protectedKeys) {
   const numContainers = peek$(ctx, "numContainers");
   const state = ctx.state;
   const { stickyContainerPool, containerItemTypes } = state;
@@ -3763,6 +3763,7 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
       }
       const key = peek$(ctx, `containerItemKey${u}`);
       if (key === void 0) continue;
+      if ((protectedKeys == null ? void 0 : protectedKeys.has(key)) && state.indexByKey.has(key)) continue;
       const index = state.indexByKey.get(key);
       const isOutOfView = index < startBuffered || index > endBuffered;
       if (isOutOfView) {
@@ -3898,7 +3899,7 @@ function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentSt
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
   batchedUpdates(() => {
-    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
     const {
       columns,
       columnSpans,
@@ -4000,17 +4001,31 @@ function calculateItemsInView(ctx, params = {}) {
     if (minIndexSizeChanged !== void 0) {
       state.minIndexSizeChanged = void 0;
     }
+    let protectedContainerKeys;
+    if (dataChanged && doMVCP && state.props.maintainVisibleContentPosition.data && state.didContainersLayout && state.idsInView.length > 0) {
+      const shouldRestorePosition = state.props.maintainVisibleContentPosition.shouldRestorePosition;
+      protectedContainerKeys = /* @__PURE__ */ new Set();
+      for (const id of state.idsInView) {
+        const index = indexByKey.get(id);
+        if (index === void 0) continue;
+        if (shouldRestorePosition && !shouldRestorePosition(data[index], index, data)) continue;
+        protectedContainerKeys.add(id);
+      }
+    }
+    const scrollBeforeMVCP = state.scroll;
+    const scrollAdjustPendingBeforeMVCP = (_e = peek$(ctx, "scrollAdjustPending")) != null ? _e : 0;
     checkMVCP == null ? void 0 : checkMVCP();
+    const didMVCPAdjustScroll = !!checkMVCP && (state.scroll !== scrollBeforeMVCP || ((_f = peek$(ctx, "scrollAdjustPending")) != null ? _f : 0) !== scrollAdjustPendingBeforeMVCP);
     let startNoBuffer = null;
     let startBuffered = null;
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    let loopStart = (_e = suppressInitialScrollSideEffects ? bootstrapInitialScrollState == null ? void 0 : bootstrapInitialScrollState.targetIndexSeed : void 0) != null ? _e : !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    let loopStart = (_g = suppressInitialScrollSideEffects ? bootstrapInitialScrollState == null ? void 0 : bootstrapInitialScrollState.targetIndexSeed : void 0) != null ? _g : !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
-      const id = (_f = idCache[i]) != null ? _f : getId(state, i);
+      const id = (_h = idCache[i]) != null ? _h : getId(state, i);
       const top = positions[i];
-      const size = (_g = sizes.get(id)) != null ? _g : getItemSize(ctx, id, i, data[i]);
+      const size = (_i = sizes.get(id)) != null ? _i : getItemSize(ctx, id, i, data[i]);
       const bottom = top + size;
       if (bottom > scroll - scrollBufferTop) {
         loopStart = i;
@@ -4041,8 +4056,8 @@ function calculateItemsInView(ctx, params = {}) {
     let firstFullyOnScreenIndex;
     const dataLength = data.length;
     for (let i = Math.max(0, loopStart); i < dataLength && (!foundEnd || i <= maxIndexRendered); i++) {
-      const id = (_h = idCache[i]) != null ? _h : getId(state, i);
-      const size = (_i = sizes.get(id)) != null ? _i : getItemSize(ctx, id, i, data[i]);
+      const id = (_j = idCache[i]) != null ? _j : getId(state, i);
+      const size = (_k = sizes.get(id)) != null ? _k : getItemSize(ctx, id, i, data[i]);
       const top = positions[i];
       if (!foundEnd) {
         if (startNoBuffer === null && top + size > scroll) {
@@ -4081,7 +4096,7 @@ function calculateItemsInView(ctx, params = {}) {
     const firstVisibleAnchorIndex = firstFullyOnScreenIndex != null ? firstFullyOnScreenIndex : startNoBuffer;
     if (firstVisibleAnchorIndex !== null && firstVisibleAnchorIndex !== void 0 && endNoBuffer !== null) {
       for (let i = firstVisibleAnchorIndex; i <= endNoBuffer; i++) {
-        const id = (_j = idCache[i]) != null ? _j : getId(state, i);
+        const id = (_l = idCache[i]) != null ? _l : getId(state, i);
         idsInView.push(id);
       }
     }
@@ -4114,7 +4129,7 @@ function calculateItemsInView(ctx, params = {}) {
       const needNewContainers = [];
       const needNewContainersSet = /* @__PURE__ */ new Set();
       for (let i = startBuffered; i <= endBuffered; i++) {
-        const id = (_k = idCache[i]) != null ? _k : getId(state, i);
+        const id = (_m = idCache[i]) != null ? _m : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainersSet.add(i);
           needNewContainers.push(i);
@@ -4123,7 +4138,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_l = idCache[index]) != null ? _l : getId(state, index);
+          const id = (_n = idCache[index]) != null ? _n : getId(state, index);
           if (id && !containerItemKeys.has(id) && !needNewContainersSet.has(index)) {
             needNewContainersSet.add(index);
             needNewContainers.push(index);
@@ -4156,12 +4171,13 @@ function calculateItemsInView(ctx, params = {}) {
           endBuffered,
           pendingRemoval,
           requiredItemTypes,
-          needNewContainers
+          needNewContainers,
+          protectedContainerKeys
         );
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
           const containerIndex = availableContainers[idx];
-          const id = (_m = idCache[i]) != null ? _m : getId(state, i);
+          const id = (_o = idCache[i]) != null ? _o : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
@@ -4202,7 +4218,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_n = idCache[index]) != null ? _n : getId(state, index);
+          const id = (_p = idCache[index]) != null ? _p : getId(state, index);
           const containerIndex = containerItemKeys.get(id);
           if (containerIndex !== void 0) {
             state.stickyContainerPool.add(containerIndex);
@@ -4263,16 +4279,18 @@ function calculateItemsInView(ctx, params = {}) {
       handleInitialScrollLayoutReady(ctx);
     }
     if (viewabilityConfigCallbackPairs && startNoBuffer !== null && endNoBuffer !== null) {
-      updateViewableItems(
-        ctx.state,
-        ctx,
-        viewabilityConfigCallbackPairs,
-        scrollLength,
-        startNoBuffer,
-        endNoBuffer,
-        startBuffered != null ? startBuffered : startNoBuffer,
-        endBuffered != null ? endBuffered : endNoBuffer
-      );
+      if (!didMVCPAdjustScroll) {
+        updateViewableItems(
+          ctx.state,
+          ctx,
+          viewabilityConfigCallbackPairs,
+          scrollLength,
+          startNoBuffer,
+          endNoBuffer,
+          startBuffered != null ? startBuffered : startNoBuffer,
+          endBuffered != null ? endBuffered : endNoBuffer
+        );
+      }
     }
     if (onStickyHeaderChange && stickyIndicesArr.length > 0 && nextActiveStickyIndex !== void 0 && nextActiveStickyIndex !== previousStickyIndex) {
       const item = data[nextActiveStickyIndex];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.0.0-beta.46",
+  "version": "3.0.0-beta.48",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,

package/react-native.js

@@ -374,7 +374,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
     () => getStickyPushLimit(ctx.state, index, itemKey),
     [ctx.state, index, itemKey, _totalSize]
   );
-  const stickyPosition = React2__namespace.useMemo(() => {
+  const transform = React2__namespace.useMemo(() => {
     var _a3;
     if (animatedScrollY) {
       const stickyConfigOffset = (_a3 = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a3 : 0;
@@ -399,13 +399,10 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
           outputRange: [position, position + 5e3]
         });
       }
-      return nextStickyPosition;
+      return horizontal ? [{ translateX: nextStickyPosition }] : [{ translateY: nextStickyPosition }];
     }
   }, [animatedScrollY, headerSize, position, pushLimit, stylePaddingTop, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
-  const viewStyle = React2__namespace.useMemo(
-    () => [style, { zIndex: index + 1e3 }, horizontal ? { left: stickyPosition } : { top: stickyPosition }],
-    [horizontal, index, stickyPosition, style]
-  );
+  const viewStyle = React2__namespace.useMemo(() => [style, { zIndex: index + 1e3 }, { transform }], [style, transform]);
   const renderStickyHeaderBackdrop = React2__namespace.useMemo(() => {
     if (!(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)) {
       return null;
@@ -858,6 +855,35 @@ var Container = typedMemo(function Container2({
 });
 
 // src/components/Containers.native.tsx
+var ContainersLayer = typedMemo(function ContainersLayer2({ children, horizontal }) {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
+  const animSize = useValue$("totalSize");
+  const otherAxisSize = useValue$("otherAxisSize");
+  const [readyToRender, numColumns] = useArr$(["readyToRender", "numColumns"]);
+  const style = horizontal ? { minHeight: otherAxisSize, opacity: readyToRender ? 1 : 0, width: animSize } : { height: animSize, minWidth: otherAxisSize, opacity: readyToRender ? 1 : 0 };
+  if (columnWrapperStyle) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    const gapX = columnGap || gap || 0;
+    const gapY = rowGap || gap || 0;
+    if (horizontal) {
+      if (gapY && numColumns > 1) {
+        style.marginVertical = -gapY / 2;
+      }
+      if (gapX) {
+        style.marginRight = -gapX;
+      }
+    } else {
+      if (gapX && numColumns > 1) {
+        style.marginHorizontal = -gapX;
+      }
+      if (gapY) {
+        style.marginBottom = -gapY;
+      }
+    }
+  }
+  return /* @__PURE__ */ React2__namespace.createElement(ReactNative.Animated.View, { style }, children);
+});
 var Containers = typedMemo(function Containers2({
   horizontal,
   recycleItems,
@@ -866,12 +892,7 @@ var Containers = typedMemo(function Containers2({
   updateItemSize: updateItemSize2,
   getRenderedItem: getRenderedItem2
 }) {
-  const ctx = useStateContext();
-  const columnWrapperStyle = ctx.columnWrapperStyle;
-  const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
-  const animSize = useValue$("totalSize");
-  const otherAxisSize = useValue$("otherAxisSize");
-  const animOpacity = useValue$("readyToRender", { getValue: (value) => value ? 1 : 0 });
+  const [numContainers] = useArr$(["numContainersPooled"]);
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
     containers.push(
@@ -890,28 +911,7 @@ var Containers = typedMemo(function Containers2({
       )
     );
   }
-  const style = horizontal ? { minHeight: otherAxisSize, opacity: animOpacity, width: animSize } : { height: animSize, minWidth: otherAxisSize, opacity: animOpacity };
-  if (columnWrapperStyle) {
-    const { columnGap, rowGap, gap } = columnWrapperStyle;
-    const gapX = columnGap || gap || 0;
-    const gapY = rowGap || gap || 0;
-    if (horizontal) {
-      if (gapY && numColumns > 1) {
-        style.marginVertical = -gapY / 2;
-      }
-      if (gapX) {
-        style.marginRight = -gapX;
-      }
-    } else {
-      if (gapX && numColumns > 1) {
-        style.marginHorizontal = -gapX;
-      }
-      if (gapY) {
-        style.marginBottom = -gapY;
-      }
-    }
-  }
-  return /* @__PURE__ */ React2__namespace.createElement(ReactNative.Animated.View, { style }, containers);
+  return /* @__PURE__ */ React2__namespace.createElement(ContainersLayer, { horizontal }, containers);
 });
 var ListComponentScrollView = ReactNative.Animated.ScrollView;
 function ScrollAdjust() {
@@ -3701,7 +3701,7 @@ function computeViewability(state, ctx, viewabilityConfig, containerId, key, scr
 }
 function checkIsViewable(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
   let value = ctx.mapViewabilityAmountValues.get(containerId);
-  if (!value || value.key !== key) {
+  if (!value || value.key !== key || value.index !== index) {
     value = computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index);
   }
   return value.isViewable;
@@ -3716,7 +3716,7 @@ var unstableBatchedUpdates = ReactNative__namespace.unstable_batchedUpdates;
 var batchedUpdates = typeof unstableBatchedUpdates === "function" ? unstableBatchedUpdates : (fn) => fn();
 
 // src/utils/findAvailableContainers.ts
-function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pendingRemoval, requiredItemTypes, needNewContainers) {
+function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pendingRemoval, requiredItemTypes, needNewContainers, protectedKeys) {
   const numContainers = peek$(ctx, "numContainers");
   const state = ctx.state;
   const { stickyContainerPool, containerItemTypes } = state;
@@ -3784,6 +3784,7 @@ function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pen
       }
       const key = peek$(ctx, `containerItemKey${u}`);
       if (key === void 0) continue;
+      if ((protectedKeys == null ? void 0 : protectedKeys.has(key)) && state.indexByKey.has(key)) continue;
       const index = state.indexByKey.get(key);
       const isOutOfView = index < startBuffered || index > endBuffered;
       if (isOutOfView) {
@@ -3919,7 +3920,7 @@ function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentSt
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
   batchedUpdates(() => {
-    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
     const {
       columns,
       columnSpans,
@@ -4021,17 +4022,31 @@ function calculateItemsInView(ctx, params = {}) {
     if (minIndexSizeChanged !== void 0) {
       state.minIndexSizeChanged = void 0;
     }
+    let protectedContainerKeys;
+    if (dataChanged && doMVCP && state.props.maintainVisibleContentPosition.data && state.didContainersLayout && state.idsInView.length > 0) {
+      const shouldRestorePosition = state.props.maintainVisibleContentPosition.shouldRestorePosition;
+      protectedContainerKeys = /* @__PURE__ */ new Set();
+      for (const id of state.idsInView) {
+        const index = indexByKey.get(id);
+        if (index === void 0) continue;
+        if (shouldRestorePosition && !shouldRestorePosition(data[index], index, data)) continue;
+        protectedContainerKeys.add(id);
+      }
+    }
+    const scrollBeforeMVCP = state.scroll;
+    const scrollAdjustPendingBeforeMVCP = (_e = peek$(ctx, "scrollAdjustPending")) != null ? _e : 0;
     checkMVCP == null ? void 0 : checkMVCP();
+    const didMVCPAdjustScroll = !!checkMVCP && (state.scroll !== scrollBeforeMVCP || ((_f = peek$(ctx, "scrollAdjustPending")) != null ? _f : 0) !== scrollAdjustPendingBeforeMVCP);
     let startNoBuffer = null;
     let startBuffered = null;
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    let loopStart = (_e = suppressInitialScrollSideEffects ? bootstrapInitialScrollState == null ? void 0 : bootstrapInitialScrollState.targetIndexSeed : void 0) != null ? _e : !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    let loopStart = (_g = suppressInitialScrollSideEffects ? bootstrapInitialScrollState == null ? void 0 : bootstrapInitialScrollState.targetIndexSeed : void 0) != null ? _g : !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
-      const id = (_f = idCache[i]) != null ? _f : getId(state, i);
+      const id = (_h = idCache[i]) != null ? _h : getId(state, i);
       const top = positions[i];
-      const size = (_g = sizes.get(id)) != null ? _g : getItemSize(ctx, id, i, data[i]);
+      const size = (_i = sizes.get(id)) != null ? _i : getItemSize(ctx, id, i, data[i]);
       const bottom = top + size;
       if (bottom > scroll - scrollBufferTop) {
         loopStart = i;
@@ -4062,8 +4077,8 @@ function calculateItemsInView(ctx, params = {}) {
     let firstFullyOnScreenIndex;
     const dataLength = data.length;
     for (let i = Math.max(0, loopStart); i < dataLength && (!foundEnd || i <= maxIndexRendered); i++) {
-      const id = (_h = idCache[i]) != null ? _h : getId(state, i);
-      const size = (_i = sizes.get(id)) != null ? _i : getItemSize(ctx, id, i, data[i]);
+      const id = (_j = idCache[i]) != null ? _j : getId(state, i);
+      const size = (_k = sizes.get(id)) != null ? _k : getItemSize(ctx, id, i, data[i]);
       const top = positions[i];
       if (!foundEnd) {
         if (startNoBuffer === null && top + size > scroll) {
@@ -4102,7 +4117,7 @@ function calculateItemsInView(ctx, params = {}) {
     const firstVisibleAnchorIndex = firstFullyOnScreenIndex != null ? firstFullyOnScreenIndex : startNoBuffer;
     if (firstVisibleAnchorIndex !== null && firstVisibleAnchorIndex !== void 0 && endNoBuffer !== null) {
       for (let i = firstVisibleAnchorIndex; i <= endNoBuffer; i++) {
-        const id = (_j = idCache[i]) != null ? _j : getId(state, i);
+        const id = (_l = idCache[i]) != null ? _l : getId(state, i);
         idsInView.push(id);
       }
     }
@@ -4135,7 +4150,7 @@ function calculateItemsInView(ctx, params = {}) {
       const needNewContainers = [];
       const needNewContainersSet = /* @__PURE__ */ new Set();
       for (let i = startBuffered; i <= endBuffered; i++) {
-        const id = (_k = idCache[i]) != null ? _k : getId(state, i);
+        const id = (_m = idCache[i]) != null ? _m : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainersSet.add(i);
           needNewContainers.push(i);
@@ -4144,7 +4159,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_l = idCache[index]) != null ? _l : getId(state, index);
+          const id = (_n = idCache[index]) != null ? _n : getId(state, index);
           if (id && !containerItemKeys.has(id) && !needNewContainersSet.has(index)) {
             needNewContainersSet.add(index);
             needNewContainers.push(index);
@@ -4177,12 +4192,13 @@ function calculateItemsInView(ctx, params = {}) {
           endBuffered,
           pendingRemoval,
           requiredItemTypes,
-          needNewContainers
+          needNewContainers,
+          protectedContainerKeys
         );
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
           const containerIndex = availableContainers[idx];
-          const id = (_m = idCache[i]) != null ? _m : getId(state, i);
+          const id = (_o = idCache[i]) != null ? _o : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
@@ -4223,7 +4239,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_n = idCache[index]) != null ? _n : getId(state, index);
+          const id = (_p = idCache[index]) != null ? _p : getId(state, index);
           const containerIndex = containerItemKeys.get(id);
           if (containerIndex !== void 0) {
             state.stickyContainerPool.add(containerIndex);
@@ -4284,16 +4300,18 @@ function calculateItemsInView(ctx, params = {}) {
       handleInitialScrollLayoutReady(ctx);
     }
     if (viewabilityConfigCallbackPairs && startNoBuffer !== null && endNoBuffer !== null) {
-      updateViewableItems(
-        ctx.state,
-        ctx,
-        viewabilityConfigCallbackPairs,
-        scrollLength,
-        startNoBuffer,
-        endNoBuffer,
-        startBuffered != null ? startBuffered : startNoBuffer,
-        endBuffered != null ? endBuffered : endNoBuffer
-      );
+      if (!didMVCPAdjustScroll) {
+        updateViewableItems(
+          ctx.state,
+          ctx,
+          viewabilityConfigCallbackPairs,
+          scrollLength,
+          startNoBuffer,
+          endNoBuffer,
+          startBuffered != null ? startBuffered : startNoBuffer,
+          endBuffered != null ? endBuffered : endNoBuffer
+        );
+      }
     }
     if (onStickyHeaderChange && stickyIndicesArr.length > 0 && nextActiveStickyIndex !== void 0 && nextActiveStickyIndex !== previousStickyIndex) {
       const item = data[nextActiveStickyIndex];