@legendapp/list 2.0.13 → 2.0.15

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.0.15
+- Fix: Container allocation for sticky headers could duplicate containers, causing rendering issues
+- Fix: Sticky positioned components scrolling out of viewport after scrolling distance exceeded 5000
+
+## 2.0.14
+- Feat: Add dataVersion prop to trigger re-render when mutating the data array in place
+
 ## 2.0.13
 - Feat: Allow returning undefined in getFixedItemSize to fall back to estimated size
 - Fix: scrollToIndex viewOffset was being subtracted twice, causing incorrect scroll positioning

package/index.d.mts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ComponentProps, ReactNode, Dispatch, SetStateAction } from 'react';
+import { ComponentProps, Key, ReactNode, Dispatch, SetStateAction } from 'react';
 import { View, Animated, ScrollView, LayoutRectangle, ScrollViewComponent, ScrollResponderMixin, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from 'react-native';
 import Animated$1 from 'react-native-reanimated';
 
@@ -99,6 +99,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Extra data to trigger re-rendering when changed.
      */
     extraData?: any;
+    /**
+     * Version token that forces the list to treat data as updated even when the array reference is stable.
+     * Increment or change this when mutating the data array in place.
+     */
+    dataVersion?: Key;
     /**
      * In case you have distinct item sizes, you can provide a function to get the size of an item.
      * Use instead of FlatList's getItemLayout or FlashList overrideItemLayout if you want to have accurate initialScrollOffset, you should provide this function
@@ -241,6 +246,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
     refreshing?: boolean;
     /**
      * Render custom ScrollView component.
+     * Note: When using `stickyHeaderIndices`, you must provide an Animated ScrollView component.
      * @default (props) => <ScrollView {...props} />
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
@@ -372,6 +378,7 @@ interface InternalState {
     props: {
         alignItemsAtEnd: boolean;
         data: readonly any[];
+        dataVersion: Key | undefined;
         estimatedItemSize: number | undefined;
         getEstimatedItemSize: LegendListProps["getEstimatedItemSize"];
         getFixedItemSize: LegendListProps["getFixedItemSize"];

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ComponentProps, ReactNode, Dispatch, SetStateAction } from 'react';
+import { ComponentProps, Key, ReactNode, Dispatch, SetStateAction } from 'react';
 import { View, Animated, ScrollView, LayoutRectangle, ScrollViewComponent, ScrollResponderMixin, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps } from 'react-native';
 import Animated$1 from 'react-native-reanimated';
 
@@ -99,6 +99,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Extra data to trigger re-rendering when changed.
      */
     extraData?: any;
+    /**
+     * Version token that forces the list to treat data as updated even when the array reference is stable.
+     * Increment or change this when mutating the data array in place.
+     */
+    dataVersion?: Key;
     /**
      * In case you have distinct item sizes, you can provide a function to get the size of an item.
      * Use instead of FlatList's getItemLayout or FlashList overrideItemLayout if you want to have accurate initialScrollOffset, you should provide this function
@@ -241,6 +246,7 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
     refreshing?: boolean;
     /**
      * Render custom ScrollView component.
+     * Note: When using `stickyHeaderIndices`, you must provide an Animated ScrollView component.
      * @default (props) => <ScrollView {...props} />
      */
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
@@ -372,6 +378,7 @@ interface InternalState {
     props: {
         alignItemsAtEnd: boolean;
         data: readonly any[];
+        dataVersion: Key | undefined;
         estimatedItemSize: number | undefined;
         getEstimatedItemSize: LegendListProps["getEstimatedItemSize"];
         getFixedItemSize: LegendListProps["getFixedItemSize"];

package/index.js

@@ -286,7 +286,8 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   const transform = React2__namespace.useMemo(() => {
     if (animatedScrollY && stickyOffset !== void 0) {
       const stickyPosition = animatedScrollY.interpolate({
-        extrapolate: "clamp",
+        extrapolateLeft: "clamp",
+        extrapolateRight: "extend",
         inputRange: [position + headerSize, position + 5e3 + headerSize],
         outputRange: [position, position + 5e3]
       });
@@ -1549,7 +1550,7 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
     for (const containerIndex of stickyContainerPool) {
       const key = peek$(ctx, `containerItemKey${containerIndex}`);
       const isPendingRemoval = pendingRemovalSet.has(containerIndex);
-      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType)) {
+      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType) && !result.includes(containerIndex)) {
         result.push(containerIndex);
         if (isPendingRemoval && pendingRemovalSet.delete(containerIndex)) {
           pendingRemovalChanged = true;
@@ -2738,6 +2739,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     columnWrapperStyle,
     contentContainerStyle: contentContainerStyleProp,
     data: dataProp = [],
+    dataVersion,
     drawDistance = 250,
     enableAverages = true,
     estimatedItemSize: estimatedItemSizeProp,
@@ -2862,7 +2864,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const state = refState.current;
   const isFirst = !state.props.renderItem;
-  const didDataChange = state.props.data !== dataProp;
+  const didDataChange = state.props.dataVersion !== dataVersion || state.props.data !== dataProp;
   if (didDataChange) {
     state.dataChangeNeedsScrollUpdate = true;
   }
@@ -2870,6 +2872,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   state.props = {
     alignItemsAtEnd,
     data: dataProp,
+    dataVersion,
     enableAverages,
     estimatedItemSize,
     getEstimatedItemSize,
@@ -2909,7 +2912,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       { length: Math.min(numColumnsProp, dataProp.length) },
       (_, i) => getId(state, dataProp.length - 1 - i)
     );
-  }, [dataProp, numColumnsProp]);
+  }, [dataProp, dataVersion, numColumnsProp]);
   const initializeStateVars = () => {
     set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
@@ -2996,15 +2999,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         dataProp
       );
     }
-  }, [dataProp, numColumnsProp]);
+  }, [dataProp, dataVersion, numColumnsProp]);
   React2.useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   React2.useLayoutEffect(initializeStateVars, [
+    dataVersion,
     memoizedLastItemKeys.join(","),
     numColumnsProp,
-    stylePaddingTopState,
-    stylePaddingBottomState
+    stylePaddingBottomState,
+    stylePaddingTopState
   ]);
   React2.useEffect(() => {
     const viewability = setupViewability({

package/index.mjs

@@ -265,7 +265,8 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   const transform = React2.useMemo(() => {
     if (animatedScrollY && stickyOffset !== void 0) {
       const stickyPosition = animatedScrollY.interpolate({
-        extrapolate: "clamp",
+        extrapolateLeft: "clamp",
+        extrapolateRight: "extend",
         inputRange: [position + headerSize, position + 5e3 + headerSize],
         outputRange: [position, position + 5e3]
       });
@@ -1528,7 +1529,7 @@ function findAvailableContainers(ctx, state, numNeeded, startBuffered, endBuffer
     for (const containerIndex of stickyContainerPool) {
       const key = peek$(ctx, `containerItemKey${containerIndex}`);
       const isPendingRemoval = pendingRemovalSet.has(containerIndex);
-      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType)) {
+      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType) && !result.includes(containerIndex)) {
         result.push(containerIndex);
         if (isPendingRemoval && pendingRemovalSet.delete(containerIndex)) {
           pendingRemovalChanged = true;
@@ -2717,6 +2718,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     columnWrapperStyle,
     contentContainerStyle: contentContainerStyleProp,
     data: dataProp = [],
+    dataVersion,
     drawDistance = 250,
     enableAverages = true,
     estimatedItemSize: estimatedItemSizeProp,
@@ -2841,7 +2843,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }
   const state = refState.current;
   const isFirst = !state.props.renderItem;
-  const didDataChange = state.props.data !== dataProp;
+  const didDataChange = state.props.dataVersion !== dataVersion || state.props.data !== dataProp;
   if (didDataChange) {
     state.dataChangeNeedsScrollUpdate = true;
   }
@@ -2849,6 +2851,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   state.props = {
     alignItemsAtEnd,
     data: dataProp,
+    dataVersion,
     enableAverages,
     estimatedItemSize,
     getEstimatedItemSize,
@@ -2888,7 +2891,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       { length: Math.min(numColumnsProp, dataProp.length) },
       (_, i) => getId(state, dataProp.length - 1 - i)
     );
-  }, [dataProp, numColumnsProp]);
+  }, [dataProp, dataVersion, numColumnsProp]);
   const initializeStateVars = () => {
     set$(ctx, "lastItemKeys", memoizedLastItemKeys);
     set$(ctx, "numColumns", numColumnsProp);
@@ -2975,15 +2978,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         dataProp
       );
     }
-  }, [dataProp, numColumnsProp]);
+  }, [dataProp, dataVersion, numColumnsProp]);
   useLayoutEffect(() => {
     set$(ctx, "extraData", extraData);
   }, [extraData]);
   useLayoutEffect(initializeStateVars, [
+    dataVersion,
     memoizedLastItemKeys.join(","),
     numColumnsProp,
-    stylePaddingTopState,
-    stylePaddingBottomState
+    stylePaddingBottomState,
+    stylePaddingTopState
   ]);
   useEffect(() => {
     const viewability = setupViewability({

package/package.json

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