@legendapp/list 3.3.8 → 3.3.10

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 3.3.10
+
+- Fix: Changing `dataKey` no longer loses the new dataset's initial scroll position when React retries a render.
+
+## 3.3.9
+
+- Fix: Rows after an item that changes size stay in the correct positions while scrolling
+
 ## 3.3.8
 
 - Feat: Add `experimental_hideItemsUntilMeasured` to make items never display at provisional layouts and wait for correct sizing, at the cost of an extra render per recycled row. This fixes cases where slow item renders could display with gaps/overlaps when scrolling up quickly on slow phones.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.3.8",
+  "version": "3.3.10",
   "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

@@ -4391,7 +4391,9 @@ function calculateItemsInView(ctx, params = {}) {
     const optimizeForVisibleWindow = !forceFullItemPositions && !dataChanged && numColumns > 1 && minIndexSizeChanged !== void 0;
     updateItemPositions(ctx, dataChanged, {
       doMVCP,
-      forceFullUpdate: !!forceFullItemPositions,
+      // A changed size shifts every following position. The scrolling early-exit
+      // would leave the untouched suffix in the old coordinate space.
+      forceFullUpdate: !!forceFullItemPositions || minIndexSizeChanged !== void 0,
       optimizeForVisibleWindow,
       scrollBottomBuffered,
       scrollVelocity: speed,
@@ -7468,6 +7470,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current = ctx.state;
   }
   const state = refState.current;
+  const handledDataChangeEpochRef = React2.useRef(state.dataChangeEpoch);
+  const handledFreshDataTransitionEpochRef = React2.useRef(state.freshDataTransitionEpoch);
   const isFirstLocal = state.isFirst;
   const previousAdaptiveRender = state.props.adaptiveRender;
   const previousHideItemsUntilMeasured = state.props.hideItemsUntilMeasured;
@@ -7493,6 +7497,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (shouldResetFreshDataLayout) {
     state.freshDataTransitionEpoch += 1;
   }
+  const dataChangeEpoch = state.dataChangeEpoch;
+  const freshDataTransitionEpoch = state.freshDataTransitionEpoch;
   const throttledOnScroll = useThrottledOnScroll(onScrollProp != null ? onScrollProp : noopOnScroll, scrollEventThrottle != null ? scrollEventThrottle : 0);
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? throttledOnScroll : onScrollProp;
   const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_q = state.props.anchoredEndSpace) == null ? void 0 : _q.anchorIndex) !== (anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
@@ -7620,7 +7626,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     useDevChecks(props);
   }
   React2.useLayoutEffect(() => {
-    if (shouldResetFreshDataLayout) {
+    const didDataChange = handledDataChangeEpochRef.current !== dataChangeEpoch;
+    const didStartFreshData = handledFreshDataTransitionEpochRef.current !== freshDataTransitionEpoch;
+    handledDataChangeEpochRef.current = dataChangeEpoch;
+    handledFreshDataTransitionEpochRef.current = freshDataTransitionEpoch;
+    if (didStartFreshData) {
       resetInitialRenderState(ctx, {
         resetInitialScroll: !!initialScrollProp,
         resetLayout: true
@@ -7628,8 +7638,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     handleInitialScrollDataChange(ctx, {
       dataLength: dataProp.length,
-      didDataChange: didDataChangeLocal,
-      didStartFreshData: shouldResetFreshDataLayout,
+      didDataChange,
+      didStartFreshData,
       initialScrollAtEnd,
       latestInitialScroll: initialScrollProp,
       latestInitialScrollSessionKind: initialScrollUsesOffsetOnly ? "offset" : "bootstrap",
@@ -7639,8 +7649,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [
     dataProp.length,
     dataKey,
-    didDataChangeLocal,
-    shouldResetFreshDataLayout,
+    dataChangeEpoch,
+    freshDataTransitionEpoch,
     initialScrollAtEnd,
     stylePaddingEndState,
     usesBootstrapInitialScroll

package/react-native.mjs

@@ -4370,7 +4370,9 @@ function calculateItemsInView(ctx, params = {}) {
     const optimizeForVisibleWindow = !forceFullItemPositions && !dataChanged && numColumns > 1 && minIndexSizeChanged !== void 0;
     updateItemPositions(ctx, dataChanged, {
       doMVCP,
-      forceFullUpdate: !!forceFullItemPositions,
+      // A changed size shifts every following position. The scrolling early-exit
+      // would leave the untouched suffix in the old coordinate space.
+      forceFullUpdate: !!forceFullItemPositions || minIndexSizeChanged !== void 0,
       optimizeForVisibleWindow,
       scrollBottomBuffered,
       scrollVelocity: speed,
@@ -7447,6 +7449,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current = ctx.state;
   }
   const state = refState.current;
+  const handledDataChangeEpochRef = useRef(state.dataChangeEpoch);
+  const handledFreshDataTransitionEpochRef = useRef(state.freshDataTransitionEpoch);
   const isFirstLocal = state.isFirst;
   const previousAdaptiveRender = state.props.adaptiveRender;
   const previousHideItemsUntilMeasured = state.props.hideItemsUntilMeasured;
@@ -7472,6 +7476,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (shouldResetFreshDataLayout) {
     state.freshDataTransitionEpoch += 1;
   }
+  const dataChangeEpoch = state.dataChangeEpoch;
+  const freshDataTransitionEpoch = state.freshDataTransitionEpoch;
   const throttledOnScroll = useThrottledOnScroll(onScrollProp != null ? onScrollProp : noopOnScroll, scrollEventThrottle != null ? scrollEventThrottle : 0);
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? throttledOnScroll : onScrollProp;
   const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_q = state.props.anchoredEndSpace) == null ? void 0 : _q.anchorIndex) !== (anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
@@ -7599,7 +7605,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     useDevChecks(props);
   }
   useLayoutEffect(() => {
-    if (shouldResetFreshDataLayout) {
+    const didDataChange = handledDataChangeEpochRef.current !== dataChangeEpoch;
+    const didStartFreshData = handledFreshDataTransitionEpochRef.current !== freshDataTransitionEpoch;
+    handledDataChangeEpochRef.current = dataChangeEpoch;
+    handledFreshDataTransitionEpochRef.current = freshDataTransitionEpoch;
+    if (didStartFreshData) {
       resetInitialRenderState(ctx, {
         resetInitialScroll: !!initialScrollProp,
         resetLayout: true
@@ -7607,8 +7617,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     handleInitialScrollDataChange(ctx, {
       dataLength: dataProp.length,
-      didDataChange: didDataChangeLocal,
-      didStartFreshData: shouldResetFreshDataLayout,
+      didDataChange,
+      didStartFreshData,
       initialScrollAtEnd,
       latestInitialScroll: initialScrollProp,
       latestInitialScrollSessionKind: initialScrollUsesOffsetOnly ? "offset" : "bootstrap",
@@ -7618,8 +7628,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [
     dataProp.length,
     dataKey,
-    didDataChangeLocal,
-    shouldResetFreshDataLayout,
+    dataChangeEpoch,
+    freshDataTransitionEpoch,
     initialScrollAtEnd,
     stylePaddingEndState,
     usesBootstrapInitialScroll

package/react-native.web.js

@@ -4420,7 +4420,9 @@ function calculateItemsInView(ctx, params = {}) {
     const optimizeForVisibleWindow = !forceFullItemPositions && !dataChanged && numColumns > 1 && minIndexSizeChanged !== void 0;
     updateItemPositions(ctx, dataChanged, {
       doMVCP,
-      forceFullUpdate: !!forceFullItemPositions,
+      // A changed size shifts every following position. The scrolling early-exit
+      // would leave the untouched suffix in the old coordinate space.
+      forceFullUpdate: !!forceFullItemPositions || minIndexSizeChanged !== void 0,
       optimizeForVisibleWindow,
       scrollBottomBuffered,
       scrollVelocity: speed,
@@ -8073,6 +8075,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current = ctx.state;
   }
   const state = refState.current;
+  const handledDataChangeEpochRef = React3.useRef(state.dataChangeEpoch);
+  const handledFreshDataTransitionEpochRef = React3.useRef(state.freshDataTransitionEpoch);
   const isFirstLocal = state.isFirst;
   const previousAdaptiveRender = state.props.adaptiveRender;
   const previousHideItemsUntilMeasured = state.props.hideItemsUntilMeasured;
@@ -8098,6 +8102,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (shouldResetFreshDataLayout) {
     state.freshDataTransitionEpoch += 1;
   }
+  const dataChangeEpoch = state.dataChangeEpoch;
+  const freshDataTransitionEpoch = state.freshDataTransitionEpoch;
   const throttledOnScroll = useThrottledOnScroll(onScrollProp != null ? onScrollProp : noopOnScroll, scrollEventThrottle != null ? scrollEventThrottle : 0);
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? throttledOnScroll : onScrollProp;
   const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_q = state.props.anchoredEndSpace) == null ? void 0 : _q.anchorIndex) !== (anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
@@ -8220,7 +8226,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     useDevChecks(props);
   }
   React3.useLayoutEffect(() => {
-    if (shouldResetFreshDataLayout) {
+    const didDataChange = handledDataChangeEpochRef.current !== dataChangeEpoch;
+    const didStartFreshData = handledFreshDataTransitionEpochRef.current !== freshDataTransitionEpoch;
+    handledDataChangeEpochRef.current = dataChangeEpoch;
+    handledFreshDataTransitionEpochRef.current = freshDataTransitionEpoch;
+    if (didStartFreshData) {
       resetInitialRenderState(ctx, {
         resetInitialScroll: !!initialScrollProp,
         resetLayout: true
@@ -8228,8 +8238,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     handleInitialScrollDataChange(ctx, {
       dataLength: dataProp.length,
-      didDataChange: didDataChangeLocal,
-      didStartFreshData: shouldResetFreshDataLayout,
+      didDataChange,
+      didStartFreshData,
       initialScrollAtEnd,
       latestInitialScroll: initialScrollProp,
       latestInitialScrollSessionKind: initialScrollUsesOffsetOnly ? "offset" : "bootstrap",
@@ -8239,8 +8249,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [
     dataProp.length,
     dataKey,
-    didDataChangeLocal,
-    shouldResetFreshDataLayout,
+    dataChangeEpoch,
+    freshDataTransitionEpoch,
     initialScrollAtEnd,
     stylePaddingEndState,
     usesBootstrapInitialScroll

package/react-native.web.mjs

@@ -4399,7 +4399,9 @@ function calculateItemsInView(ctx, params = {}) {
     const optimizeForVisibleWindow = !forceFullItemPositions && !dataChanged && numColumns > 1 && minIndexSizeChanged !== void 0;
     updateItemPositions(ctx, dataChanged, {
       doMVCP,
-      forceFullUpdate: !!forceFullItemPositions,
+      // A changed size shifts every following position. The scrolling early-exit
+      // would leave the untouched suffix in the old coordinate space.
+      forceFullUpdate: !!forceFullItemPositions || minIndexSizeChanged !== void 0,
       optimizeForVisibleWindow,
       scrollBottomBuffered,
       scrollVelocity: speed,
@@ -8052,6 +8054,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current = ctx.state;
   }
   const state = refState.current;
+  const handledDataChangeEpochRef = useRef(state.dataChangeEpoch);
+  const handledFreshDataTransitionEpochRef = useRef(state.freshDataTransitionEpoch);
   const isFirstLocal = state.isFirst;
   const previousAdaptiveRender = state.props.adaptiveRender;
   const previousHideItemsUntilMeasured = state.props.hideItemsUntilMeasured;
@@ -8077,6 +8081,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (shouldResetFreshDataLayout) {
     state.freshDataTransitionEpoch += 1;
   }
+  const dataChangeEpoch = state.dataChangeEpoch;
+  const freshDataTransitionEpoch = state.freshDataTransitionEpoch;
   const throttledOnScroll = useThrottledOnScroll(onScrollProp != null ? onScrollProp : noopOnScroll, scrollEventThrottle != null ? scrollEventThrottle : 0);
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? throttledOnScroll : onScrollProp;
   const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_q = state.props.anchoredEndSpace) == null ? void 0 : _q.anchorIndex) !== (anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
@@ -8199,7 +8205,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     useDevChecks(props);
   }
   useLayoutEffect(() => {
-    if (shouldResetFreshDataLayout) {
+    const didDataChange = handledDataChangeEpochRef.current !== dataChangeEpoch;
+    const didStartFreshData = handledFreshDataTransitionEpochRef.current !== freshDataTransitionEpoch;
+    handledDataChangeEpochRef.current = dataChangeEpoch;
+    handledFreshDataTransitionEpochRef.current = freshDataTransitionEpoch;
+    if (didStartFreshData) {
       resetInitialRenderState(ctx, {
         resetInitialScroll: !!initialScrollProp,
         resetLayout: true
@@ -8207,8 +8217,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     handleInitialScrollDataChange(ctx, {
       dataLength: dataProp.length,
-      didDataChange: didDataChangeLocal,
-      didStartFreshData: shouldResetFreshDataLayout,
+      didDataChange,
+      didStartFreshData,
       initialScrollAtEnd,
       latestInitialScroll: initialScrollProp,
       latestInitialScrollSessionKind: initialScrollUsesOffsetOnly ? "offset" : "bootstrap",
@@ -8218,8 +8228,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [
     dataProp.length,
     dataKey,
-    didDataChangeLocal,
-    shouldResetFreshDataLayout,
+    dataChangeEpoch,
+    freshDataTransitionEpoch,
     initialScrollAtEnd,
     stylePaddingEndState,
     usesBootstrapInitialScroll

package/react.js

@@ -4420,7 +4420,9 @@ function calculateItemsInView(ctx, params = {}) {
     const optimizeForVisibleWindow = !forceFullItemPositions && !dataChanged && numColumns > 1 && minIndexSizeChanged !== void 0;
     updateItemPositions(ctx, dataChanged, {
       doMVCP,
-      forceFullUpdate: !!forceFullItemPositions,
+      // A changed size shifts every following position. The scrolling early-exit
+      // would leave the untouched suffix in the old coordinate space.
+      forceFullUpdate: !!forceFullItemPositions || minIndexSizeChanged !== void 0,
       optimizeForVisibleWindow,
       scrollBottomBuffered,
       scrollVelocity: speed,
@@ -8073,6 +8075,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current = ctx.state;
   }
   const state = refState.current;
+  const handledDataChangeEpochRef = React3.useRef(state.dataChangeEpoch);
+  const handledFreshDataTransitionEpochRef = React3.useRef(state.freshDataTransitionEpoch);
   const isFirstLocal = state.isFirst;
   const previousAdaptiveRender = state.props.adaptiveRender;
   const previousHideItemsUntilMeasured = state.props.hideItemsUntilMeasured;
@@ -8098,6 +8102,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (shouldResetFreshDataLayout) {
     state.freshDataTransitionEpoch += 1;
   }
+  const dataChangeEpoch = state.dataChangeEpoch;
+  const freshDataTransitionEpoch = state.freshDataTransitionEpoch;
   const throttledOnScroll = useThrottledOnScroll(onScrollProp != null ? onScrollProp : noopOnScroll, scrollEventThrottle != null ? scrollEventThrottle : 0);
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? throttledOnScroll : onScrollProp;
   const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_q = state.props.anchoredEndSpace) == null ? void 0 : _q.anchorIndex) !== (anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
@@ -8220,7 +8226,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     useDevChecks(props);
   }
   React3.useLayoutEffect(() => {
-    if (shouldResetFreshDataLayout) {
+    const didDataChange = handledDataChangeEpochRef.current !== dataChangeEpoch;
+    const didStartFreshData = handledFreshDataTransitionEpochRef.current !== freshDataTransitionEpoch;
+    handledDataChangeEpochRef.current = dataChangeEpoch;
+    handledFreshDataTransitionEpochRef.current = freshDataTransitionEpoch;
+    if (didStartFreshData) {
       resetInitialRenderState(ctx, {
         resetInitialScroll: !!initialScrollProp,
         resetLayout: true
@@ -8228,8 +8238,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     handleInitialScrollDataChange(ctx, {
       dataLength: dataProp.length,
-      didDataChange: didDataChangeLocal,
-      didStartFreshData: shouldResetFreshDataLayout,
+      didDataChange,
+      didStartFreshData,
       initialScrollAtEnd,
       latestInitialScroll: initialScrollProp,
       latestInitialScrollSessionKind: initialScrollUsesOffsetOnly ? "offset" : "bootstrap",
@@ -8239,8 +8249,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [
     dataProp.length,
     dataKey,
-    didDataChangeLocal,
-    shouldResetFreshDataLayout,
+    dataChangeEpoch,
+    freshDataTransitionEpoch,
     initialScrollAtEnd,
     stylePaddingEndState,
     usesBootstrapInitialScroll

package/react.mjs

@@ -4399,7 +4399,9 @@ function calculateItemsInView(ctx, params = {}) {
     const optimizeForVisibleWindow = !forceFullItemPositions && !dataChanged && numColumns > 1 && minIndexSizeChanged !== void 0;
     updateItemPositions(ctx, dataChanged, {
       doMVCP,
-      forceFullUpdate: !!forceFullItemPositions,
+      // A changed size shifts every following position. The scrolling early-exit
+      // would leave the untouched suffix in the old coordinate space.
+      forceFullUpdate: !!forceFullItemPositions || minIndexSizeChanged !== void 0,
       optimizeForVisibleWindow,
       scrollBottomBuffered,
       scrollVelocity: speed,
@@ -8052,6 +8054,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     refState.current = ctx.state;
   }
   const state = refState.current;
+  const handledDataChangeEpochRef = useRef(state.dataChangeEpoch);
+  const handledFreshDataTransitionEpochRef = useRef(state.freshDataTransitionEpoch);
   const isFirstLocal = state.isFirst;
   const previousAdaptiveRender = state.props.adaptiveRender;
   const previousHideItemsUntilMeasured = state.props.hideItemsUntilMeasured;
@@ -8077,6 +8081,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   if (shouldResetFreshDataLayout) {
     state.freshDataTransitionEpoch += 1;
   }
+  const dataChangeEpoch = state.dataChangeEpoch;
+  const freshDataTransitionEpoch = state.freshDataTransitionEpoch;
   const throttledOnScroll = useThrottledOnScroll(onScrollProp != null ? onScrollProp : noopOnScroll, scrollEventThrottle != null ? scrollEventThrottle : 0);
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? throttledOnScroll : onScrollProp;
   const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_q = state.props.anchoredEndSpace) == null ? void 0 : _q.anchorIndex) !== (anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
@@ -8199,7 +8205,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     useDevChecks(props);
   }
   useLayoutEffect(() => {
-    if (shouldResetFreshDataLayout) {
+    const didDataChange = handledDataChangeEpochRef.current !== dataChangeEpoch;
+    const didStartFreshData = handledFreshDataTransitionEpochRef.current !== freshDataTransitionEpoch;
+    handledDataChangeEpochRef.current = dataChangeEpoch;
+    handledFreshDataTransitionEpochRef.current = freshDataTransitionEpoch;
+    if (didStartFreshData) {
       resetInitialRenderState(ctx, {
         resetInitialScroll: !!initialScrollProp,
         resetLayout: true
@@ -8207,8 +8217,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     handleInitialScrollDataChange(ctx, {
       dataLength: dataProp.length,
-      didDataChange: didDataChangeLocal,
-      didStartFreshData: shouldResetFreshDataLayout,
+      didDataChange,
+      didStartFreshData,
       initialScrollAtEnd,
       latestInitialScroll: initialScrollProp,
       latestInitialScrollSessionKind: initialScrollUsesOffsetOnly ? "offset" : "bootstrap",
@@ -8218,8 +8228,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [
     dataProp.length,
     dataKey,
-    didDataChangeLocal,
-    shouldResetFreshDataLayout,
+    dataChangeEpoch,
+    freshDataTransitionEpoch,
     initialScrollAtEnd,
     stylePaddingEndState,
     usesBootstrapInitialScroll