@legendapp/list 0.6.4 → 1.0.0-beta.1

package/README.md

@@ -14,6 +14,10 @@ In addition to normal FlatList features:
 -   `maintainScrollAtEnd`: If true and scroll is within `maintainScrollAtEndThreshold * screen height` then changing items or heights will scroll to the bottom. This can be useful for chat interfaces.
 -   `recycleItems` prop enables toggling recycling of list items. If enabled it will reuse item components for improved performance, but it will reuse any local state in items. So if you have local state in items you likely want this disabled.
 
+## Documentation
+
+See the [documentation site](https://www.legendapp.com/open-source/list) for the full documentation.
+
 ## Usage
 
 ## Install
@@ -41,7 +45,6 @@ interface PropsOptional {
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     maintainScrollAtEnd?: boolean;

package/index.d.mts

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
-import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
@@ -19,7 +19,6 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialNumContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     onStartReachedThreshold?: number | null | undefined;
@@ -57,6 +56,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
         itemKey: string;
         itemData: ItemT;
     }) => void;
+    /**
+     * Render custom ScrollView component.
+     * @default (props) => <ScrollView {...props} />
+     */
+    renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
@@ -110,6 +114,7 @@ interface InternalState {
         top: number;
         bottom: number;
     } | undefined;
+    enableScrollForNextCalculateItemsInView: boolean;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
-import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
+import { ScrollView, StyleProp, ViewStyle, ScrollViewProps, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 declare class ScrollAdjustHandler {
@@ -19,7 +19,6 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
-    initialNumContainers?: number;
     recycleItems?: boolean;
     onEndReachedThreshold?: number | null | undefined;
     onStartReachedThreshold?: number | null | undefined;
@@ -57,6 +56,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
         itemKey: string;
         itemData: ItemT;
     }) => void;
+    /**
+     * Render custom ScrollView component.
+     * @default (props) => <ScrollView {...props} />
+     */
+    renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
 };
 type LegendListProps<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof ScrollView>>;
 interface InternalState {
@@ -110,6 +114,7 @@ interface InternalState {
         top: number;
         bottom: number;
     } | undefined;
+    enableScrollForNextCalculateItemsInView: boolean;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.js

@@ -208,14 +208,19 @@ var ListComponent = React4__namespace.memo(function ListComponent2({
   updateItemSize,
   refScrollView,
   maintainVisibleContentPosition,
+  renderScrollComponent,
   ...rest
 }) {
   const ctx = useStateContext();
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
+  const ScrollComponent = renderScrollComponent ? React4.useMemo(
+    () => React4__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    [renderScrollComponent]
+  ) : reactNative.ScrollView;
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
   return /* @__PURE__ */ React4__namespace.createElement(
-    reactNative.ScrollView,
+    ScrollComponent,
     {
       ...rest,
       style,
@@ -469,7 +474,6 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
-    initialNumContainers,
     drawDistance = 250,
     recycleItems = false,
     onEndReachedThreshold = 0.5,
@@ -573,7 +577,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
       layoutsPending: /* @__PURE__ */ new Set(),
-      scrollForNextCalculateItemsInView: void 0
+      scrollForNextCalculateItemsInView: void 0,
+      enableScrollForNextCalculateItemsInView: true
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -651,7 +656,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     }
     let rowHeight = 0;
     const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp; i++) {
+    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -692,7 +697,6 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     return res;
   };
   const calculateItemsInView = React4.useCallback((speed) => {
-    var _a2, _b2, _c2, _d2;
     const state = refState.current;
     const {
       data: data2,
@@ -715,8 +719,8 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
-    if (refState.current.scrollForNextCalculateItemsInView) {
-      const { top: top2, bottom } = refState.current.scrollForNextCalculateItemsInView;
+    if (state.scrollForNextCalculateItemsInView) {
+      const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
       if (scroll > top2 && scroll < bottom) {
         return;
       }
@@ -759,13 +763,13 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a3;
+      var _a2;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         topOffset = initialContentOffset || 0;
       }
       return topOffset;
@@ -807,7 +811,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         maxSizeInRow = 0;
       }
     }
-    Object.assign(refState.current, {
+    Object.assign(state, {
       startBuffered,
       startBufferedId,
       startNoBuffer,
@@ -818,10 +822,12 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
     const nextBottom = Math.floor(
       endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
     );
-    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
-      top: nextTop,
-      bottom: nextBottom
-    } : void 0;
+    if (state.enableScrollForNextCalculateItemsInView) {
+      state.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+        top: nextTop,
+        bottom: nextBottom
+      } : void 0;
+    }
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
@@ -845,7 +851,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
               furthestIndex = u;
               break;
             }
-            const index = (_a2 = refState.current) == null ? void 0 : _a2.indexByKey.get(key);
+            const index = state.indexByKey.get(key);
             const pos = peek$(ctx, `containerPosition${u}`);
             if (index < startBuffered || index > endBuffered) {
               const distance = Math.abs(pos - top2);
@@ -857,19 +863,19 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
           }
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
-            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
-            const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${containerId}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
               console.warn(
-                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize. numContainers:",
+                "[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too small. Consider increasing estimatedItemSize. numContainers:",
                 numContainers
               );
             }
@@ -884,7 +890,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        const itemIndex = (_d2 = refState.current) == null ? void 0 : _d2.indexByKey.get(itemKey);
+        const itemIndex = state.indexByKey.get(itemKey);
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
@@ -920,11 +926,11 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
       }
       layoutsPending.clear();
     }
-    if (refState.current.viewabilityConfigCallbackPairs) {
+    if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
-        refState.current,
+        state,
         ctx,
-        refState.current.viewabilityConfigCallbackPairs,
+        state.viewabilityConfigCallbackPairs,
         getId,
         scrollLength,
         startNoBuffer,
@@ -1062,6 +1068,9 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         maxSizeInRow = 0;
       }
     }
+    if (maxSizeInRow > 0) {
+      totalSize += maxSizeInRow;
+    }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   }
   React4.useEffect(() => {
@@ -1179,17 +1188,20 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
   }, []);
   useInit(() => {
     var _a2;
-    refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
-    const scrollLength = refState.current.scrollLength;
+    const state = refState.current;
+    const viewability = setupViewability(props);
+    state.viewabilityConfigCallbackPairs = viewability;
+    state.enableScrollForNextCalculateItemsInView = !viewability;
+    const scrollLength = state.scrollLength;
     const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = (initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize)) * numColumnsProp;
+    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(refState.current.scrollVelocity);
+    calculateItemsInView(state.scrollVelocity);
   });
   const updateItemSize = React4.useCallback((containerId, itemKey, size) => {
     var _a2;
@@ -1215,7 +1227,7 @@ var LegendListInner = React4.forwardRef(function LegendListInner2(props, forward
         const column = columns.get(itemKey);
         const loopStart = index - (column - 1);
         let nextMaxSizeInRow = 0;
-        for (let i = loopStart; i < loopStart + numColumns; i++) {
+        for (let i = loopStart; i < loopStart + numColumns && i < data2.length; i++) {
           const id = getId(i);
           const size2 = getItemSize(id, i, data2[i]);
           nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);

package/index.mjs

@@ -1,5 +1,5 @@
 import * as React4 from 'react';
-import React4__default, { forwardRef, useRef, useMemo, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
+import React4__default, { useMemo, forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useSyncExternalStore, useState } from 'react';
 import { Animated, ScrollView, View, Dimensions, StyleSheet, Platform, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
 
 // src/LegendList.tsx
@@ -187,14 +187,19 @@ var ListComponent = React4.memo(function ListComponent2({
   updateItemSize,
   refScrollView,
   maintainVisibleContentPosition,
+  renderScrollComponent,
   ...rest
 }) {
   const ctx = useStateContext();
   const animPaddingTop = useValue$("paddingTop");
   const animScrollAdjust = useValue$("scrollAdjust");
+  const ScrollComponent = renderScrollComponent ? useMemo(
+    () => React4.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    [renderScrollComponent]
+  ) : ScrollView;
   const additionalSize = { marginTop: animScrollAdjust, paddingTop: animPaddingTop };
   return /* @__PURE__ */ React4.createElement(
-    ScrollView,
+    ScrollComponent,
     {
       ...rest,
       style,
@@ -448,7 +453,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     initialScrollIndex,
     initialScrollOffset,
     horizontal,
-    initialNumContainers,
     drawDistance = 250,
     recycleItems = false,
     onEndReachedThreshold = 0.5,
@@ -552,7 +556,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
       layoutsPending: /* @__PURE__ */ new Set(),
-      scrollForNextCalculateItemsInView: void 0
+      scrollForNextCalculateItemsInView: void 0,
+      enableScrollForNextCalculateItemsInView: true
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -630,7 +635,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
     let rowHeight = 0;
     const startEl = n * numColumnsProp;
-    for (let i = startEl; i < startEl + numColumnsProp; i++) {
+    for (let i = startEl; i < startEl + numColumnsProp && i < data.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i]);
       rowHeight = Math.max(rowHeight, size);
@@ -671,7 +676,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return res;
   };
   const calculateItemsInView = useCallback((speed) => {
-    var _a2, _b2, _c2, _d2;
     const state = refState.current;
     const {
       data: data2,
@@ -694,8 +698,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
     const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     const scroll = scrollState - previousScrollAdjust - topPad - scrollExtra;
-    if (refState.current.scrollForNextCalculateItemsInView) {
-      const { top: top2, bottom } = refState.current.scrollForNextCalculateItemsInView;
+    if (state.scrollForNextCalculateItemsInView) {
+      const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
       if (scroll > top2 && scroll < bottom) {
         return;
       }
@@ -738,13 +742,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     let column = 1;
     let maxSizeInRow = 0;
     const getInitialTop = (i) => {
-      var _a3;
+      var _a2;
       const id = getId(i);
       let topOffset = 0;
       if (positions.get(id)) {
         topOffset = positions.get(id);
       }
-      if (id === ((_a3 = state.anchorElement) == null ? void 0 : _a3.id)) {
+      if (id === ((_a2 = state.anchorElement) == null ? void 0 : _a2.id)) {
         topOffset = initialContentOffset || 0;
       }
       return topOffset;
@@ -786,7 +790,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         maxSizeInRow = 0;
       }
     }
-    Object.assign(refState.current, {
+    Object.assign(state, {
       startBuffered,
       startBufferedId,
       startNoBuffer,
@@ -797,10 +801,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const nextBottom = Math.floor(
       endBuffered ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
     );
-    refState.current.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
-      top: nextTop,
-      bottom: nextBottom
-    } : void 0;
+    if (state.enableScrollForNextCalculateItemsInView) {
+      state.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+        top: nextTop,
+        bottom: nextBottom
+      } : void 0;
+    }
     if (startBuffered !== null && endBuffered !== null) {
       const prevNumContainers = ctx.values.get("numContainers");
       let numContainers = prevNumContainers;
@@ -824,7 +830,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
               furthestIndex = u;
               break;
             }
-            const index = (_a2 = refState.current) == null ? void 0 : _a2.indexByKey.get(key);
+            const index = state.indexByKey.get(key);
             const pos = peek$(ctx, `containerPosition${u}`);
             if (index < startBuffered || index > endBuffered) {
               const distance = Math.abs(pos - top2);
@@ -836,19 +842,19 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           }
           if (furthestIndex >= 0) {
             set$(ctx, `containerItemKey${furthestIndex}`, id);
-            const index = (_b2 = refState.current) == null ? void 0 : _b2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${furthestIndex}`, data2[index]);
           } else {
             const containerId = numContainers;
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
-            const index = (_c2 = refState.current) == null ? void 0 : _c2.indexByKey.get(id);
+            const index = state.indexByKey.get(id);
             set$(ctx, `containerItemData${containerId}`, data2[index]);
             set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${containerId}`, -1);
             if (__DEV__ && numContainers > peek$(ctx, "numContainersPooled")) {
               console.warn(
-                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize. numContainers:",
+                "[legend-list] No container to recycle, so creating one on demand. This can be a performance issue and is likely caused by the estimatedItemSize being too small. Consider increasing estimatedItemSize. numContainers:",
                 numContainers
               );
             }
@@ -863,7 +869,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       for (let i = 0; i < numContainers; i++) {
         const itemKey = peek$(ctx, `containerItemKey${i}`);
-        const itemIndex = (_d2 = refState.current) == null ? void 0 : _d2.indexByKey.get(itemKey);
+        const itemIndex = state.indexByKey.get(itemKey);
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
@@ -899,11 +905,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       }
       layoutsPending.clear();
     }
-    if (refState.current.viewabilityConfigCallbackPairs) {
+    if (state.viewabilityConfigCallbackPairs) {
       updateViewableItems(
-        refState.current,
+        state,
         ctx,
-        refState.current.viewabilityConfigCallbackPairs,
+        state.viewabilityConfigCallbackPairs,
         getId,
         scrollLength,
         startNoBuffer,
@@ -1041,6 +1047,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         maxSizeInRow = 0;
       }
     }
+    if (maxSizeInRow > 0) {
+      totalSize += maxSizeInRow;
+    }
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   }
   useEffect(() => {
@@ -1158,17 +1167,20 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   }, []);
   useInit(() => {
     var _a2;
-    refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
-    const scrollLength = refState.current.scrollLength;
+    const state = refState.current;
+    const viewability = setupViewability(props);
+    state.viewabilityConfigCallbackPairs = viewability;
+    state.enableScrollForNextCalculateItemsInView = !viewability;
+    const scrollLength = state.scrollLength;
     const averageItemSize = (_a2 = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0])) != null ? _a2 : DEFAULT_ITEM_SIZE;
-    const numContainers = (initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize)) * numColumnsProp;
+    const numContainers = Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) * numColumnsProp;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
-    calculateItemsInView(refState.current.scrollVelocity);
+    calculateItemsInView(state.scrollVelocity);
   });
   const updateItemSize = useCallback((containerId, itemKey, size) => {
     var _a2;
@@ -1194,7 +1206,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         const column = columns.get(itemKey);
         const loopStart = index - (column - 1);
         let nextMaxSizeInRow = 0;
-        for (let i = loopStart; i < loopStart + numColumns; i++) {
+        for (let i = loopStart; i < loopStart + numColumns && i < data2.length; i++) {
           const id = getId(i);
           const size2 = getItemSize(id, i, data2[i]);
           nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.6.4",
+  "version": "1.0.0-beta.1",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,