@legendapp/list 0.3.2 → 0.3.4

package/index.mjs

@@ -1,12 +1,12 @@
 import * as React6 from 'react';
-import { forwardRef, useRef, useMemo } from 'react';
-import { ScrollView, View, Dimensions, StyleSheet, unstable_batchedUpdates } from 'react-native';
+import { forwardRef, useRef, useMemo, useCallback } from 'react';
+import { ScrollView, View, StyleSheet, Dimensions, unstable_batchedUpdates } from 'react-native';
 
 // src/LegendList.tsx
-
-// src/constants.ts
-var DEFAULT_SCROLL_BUFFER = 0;
-var POSITION_OUT_OF_VIEW = -1e4;
+var LeanView = React6.forwardRef((props, ref) => {
+  return React6.createElement("RCTView", { ...props, ref });
+});
+LeanView.displayName = "RCTView";
 var ContextListener = React6.createContext(null);
 function StateProvider({ children }) {
   const [value] = React6.useState(() => ({
@@ -36,309 +36,6 @@ function set$(ctx, signalName, value) {
     (_a = listeners.get(signalName)) == null ? void 0 : _a();
   }
 }
-function applyDefaultProps(props) {
-  return {
-    ...props,
-    recycleItems: props.recycleItems || false,
-    onEndReachedThreshold: props.onEndReachedThreshold || 0.5,
-    maintainScrollAtEndThreshold: props.maintainScrollAtEndThreshold || 0.1,
-    maintainScrollAtEnd: props.maintainScrollAtEnd || false,
-    alignItemsAtEnd: props.alignItemsAtEnd || false
-  };
-}
-function allocateContainers(state) {
-  var _a, _b;
-  const { scrollLength, props, ctx, scrollBuffer } = state;
-  const averageItemSize = (_b = props.estimatedItemSize) != null ? _b : (_a = props.getEstimatedItemSize) == null ? void 0 : _a.call(props, 0, props.data[0]);
-  const numContainers = props.initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) + 4;
-  for (let i = 0; i < numContainers; i++) {
-    set$(ctx, `containerIndex${i}`, -1);
-    set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
-  }
-  set$(ctx, `numContainers`, numContainers);
-}
-function getId(state, index) {
-  const { data, keyExtractor } = state.props;
-  if (!data) {
-    return "";
-  }
-  const ret = index < data.length ? keyExtractor ? keyExtractor(data[index], index) : index : null;
-  return ret + "";
-}
-function calculateInitialOffset(props) {
-  const { data, initialScrollIndex, estimatedItemSize, getEstimatedItemSize } = props;
-  if (initialScrollIndex) {
-    if (getEstimatedItemSize) {
-      let offset = 0;
-      for (let i = 0; i < initialScrollIndex; i++) {
-        offset += getEstimatedItemSize(i, data[i]);
-      }
-      return offset;
-    } else if (estimatedItemSize) {
-      return initialScrollIndex * estimatedItemSize;
-    }
-  }
-  return void 0;
-}
-function addTotalLength(state, add) {
-  const { ctx, props } = state;
-  const totalLength = (peek$(ctx, `totalLength`) || 0) + add;
-  set$(ctx, `totalLength`, totalLength);
-  const screenLength = state.scrollLength;
-  if (props.alignItemsAtEnd) {
-    const listPaddingTop = peek$(ctx, `stylePaddingTop`);
-    set$(ctx, `paddingTop`, Math.max(0, screenLength - totalLength - listPaddingTop));
-  }
-}
-function getRenderedItem(state, index) {
-  const { data, renderItem } = state.props;
-  if (!data) {
-    return null;
-  }
-  const renderedItem = renderItem == null ? void 0 : renderItem({
-    item: data[index],
-    index
-  });
-  return renderedItem;
-}
-var getItemSize = (state, index, data) => {
-  const { getEstimatedItemSize, estimatedItemSize } = state.props;
-  return getEstimatedItemSize ? getEstimatedItemSize(index, data) : estimatedItemSize;
-};
-function calculateItemsInView(state) {
-  unstable_batchedUpdates(() => {
-    var _a, _b, _c;
-    const {
-      props: { data, onViewableRangeChanged },
-      scrollLength,
-      scroll: scrollState,
-      startNoBuffer: startNoBufferState,
-      startBuffered: startBufferedState,
-      endNoBuffer: endNoBufferState,
-      endBuffered: endBufferedState,
-      lengths,
-      positions,
-      scrollBuffer,
-      ctx
-    } = state;
-    if (!data) {
-      return;
-    }
-    const topPad = (peek$(ctx, `stylePaddingTop`) || 0) + (peek$(ctx, `headerSize`) || 0);
-    const scroll = scrollState - topPad;
-    scroll > state.scrollPrevious ? 1 : -1;
-    const scrollBufferTop = scrollBuffer;
-    const scrollBufferBottom = scrollBuffer;
-    let startNoBuffer = null;
-    let startBuffered = null;
-    let endNoBuffer = null;
-    let endBuffered = null;
-    let loopStart = startBufferedState || 0;
-    if (startBufferedState) {
-      for (let i = startBufferedState; i >= 0; i--) {
-        const id = getId(state, i);
-        const top2 = positions.get(id);
-        if (top2 !== void 0) {
-          const length = (_a = lengths.get(id)) != null ? _a : getItemSize(state, i, data[i]);
-          const bottom = top2 + length;
-          if (bottom > scroll - scrollBufferTop) {
-            loopStart = i;
-          } else {
-            break;
-          }
-        }
-      }
-    }
-    let top = loopStart > 0 ? positions.get(getId(state, loopStart)) : 0;
-    for (let i = loopStart; i < data.length; i++) {
-      const id = getId(state, i);
-      const length = (_b = lengths.get(id)) != null ? _b : getItemSize(state, i, data[i]);
-      if (positions.get(id) !== top) {
-        positions.set(id, top);
-      }
-      if (startNoBuffer === null && top + length > scroll) {
-        startNoBuffer = i;
-      }
-      if (startBuffered === null && top + length > scroll - scrollBufferTop) {
-        startBuffered = i;
-      }
-      if (startNoBuffer !== null) {
-        if (top <= scroll + scrollLength) {
-          endNoBuffer = i;
-        }
-        if (top <= scroll + scrollLength + scrollBufferBottom) {
-          endBuffered = i;
-        } else {
-          break;
-        }
-      }
-      top += length;
-    }
-    Object.assign(state, {
-      startBuffered,
-      startNoBuffer,
-      endBuffered,
-      endNoBuffer
-    });
-    if (startBuffered !== null && endBuffered !== null) {
-      const prevNumContainers = ctx.values.get("numContainers");
-      let numContainers = prevNumContainers;
-      for (let i = startBuffered; i <= endBuffered; i++) {
-        let isContained = false;
-        for (let j = 0; j < numContainers; j++) {
-          const index = peek$(ctx, `containerIndex${j}`);
-          if (index === i) {
-            isContained = true;
-            break;
-          }
-        }
-        if (!isContained) {
-          const id = getId(state, i);
-          const top2 = positions.get(id) || 0;
-          let furthestIndex = -1;
-          let furthestDistance = 0;
-          for (let u = 0; u < numContainers; u++) {
-            const index = peek$(ctx, `containerIndex${u}`);
-            if (index < 0) {
-              furthestIndex = u;
-              break;
-            }
-            const pos = peek$(ctx, `containerPosition${u}`);
-            if (index < startBuffered || index > endBuffered) {
-              const distance = Math.abs(pos - top2);
-              if (index < 0 || distance > furthestDistance) {
-                furthestDistance = distance;
-                furthestIndex = u;
-              }
-            }
-          }
-          if (furthestIndex >= 0) {
-            set$(ctx, `containerIndex${furthestIndex}`, i);
-          } else {
-            if (__DEV__) {
-              console.warn(
-                "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemLength",
-                i
-              );
-            }
-            const containerId = numContainers;
-            numContainers++;
-            set$(ctx, `containerIndex${containerId}`, i);
-            set$(ctx, `containerPosition${containerId}`, POSITION_OUT_OF_VIEW);
-          }
-        }
-      }
-      if (numContainers !== prevNumContainers) {
-        set$(ctx, `numContainers`, numContainers);
-      }
-      for (let i = 0; i < numContainers; i++) {
-        const itemIndex = peek$(ctx, `containerIndex${i}`);
-        const item = data[itemIndex];
-        if (item) {
-          const id = getId(state, itemIndex);
-          if (itemIndex < startBuffered || itemIndex > endBuffered) ; else {
-            const pos = (_c = positions.get(id)) != null ? _c : -1;
-            const prevPos = peek$(ctx, `containerPosition${i}`);
-            if (pos >= 0 && pos !== prevPos) {
-              set$(ctx, `containerPosition${i}`, pos);
-            }
-          }
-        }
-      }
-      if (onViewableRangeChanged) {
-        if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
-          onViewableRangeChanged({
-            start: startNoBuffer,
-            startBuffered,
-            end: endNoBuffer,
-            endBuffered,
-            items: data.slice(startNoBuffer, endNoBuffer + 1)
-          });
-        }
-      }
-    }
-  });
-}
-function updateItemSize(state, refScroller, index, length) {
-  const {
-    props: { data, maintainScrollAtEnd },
-    ctx,
-    lengths,
-    idsInFirstRender,
-    isAtBottom
-  } = state;
-  if (!data) {
-    return;
-  }
-  const id = getId(state, index);
-  const wasInFirstRender = idsInFirstRender.has(id);
-  const prevLength = lengths.get(id) || (wasInFirstRender ? getItemSize(state, index, data[index]) : 0);
-  if (!prevLength || prevLength !== length) {
-    lengths.set(id, length);
-    addTotalLength(state, length - prevLength);
-    if (isAtBottom && maintainScrollAtEnd) {
-      requestAnimationFrame(() => {
-        var _a;
-        (_a = refScroller.current) == null ? void 0 : _a.scrollToEnd({
-          animated: true
-        });
-      });
-    }
-    if (!state.animFrameScroll && !state.animFrameLayout) {
-      state.animFrameLayout = requestAnimationFrame(() => {
-        state.animFrameLayout = null;
-        if (!state.animFrameScroll) {
-          calculateItemsInView(state);
-        }
-      });
-    }
-  }
-}
-function checkAtBottom(state) {
-  const {
-    ctx,
-    scrollLength,
-    scroll,
-    props: { maintainScrollAtEndThreshold, onEndReached, onEndReachedThreshold }
-  } = state;
-  const totalLength = peek$(ctx, "totalLength");
-  const distanceFromEnd = totalLength - scroll - scrollLength;
-  state.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-  if (onEndReached && !state.isEndReached) {
-    if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
-      state.isEndReached = true;
-      onEndReached({ distanceFromEnd });
-    }
-  }
-}
-function handleScrollDebounced(state) {
-  calculateItemsInView(state);
-  checkAtBottom(state);
-  state.animFrameScroll = null;
-}
-function handleScroll(state, onScrollDebounced, event) {
-  var _a, _b, _c;
-  if (((_b = (_a = event.nativeEvent) == null ? void 0 : _a.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
-    return;
-  }
-  const { horizontal, onScroll } = state.props;
-  state.hasScrolled = true;
-  const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
-  state.scrollPrevious = state.scroll;
-  state.scroll = newScroll;
-  if (state && !state.animFrameScroll) {
-    state.animFrameScroll = requestAnimationFrame(onScrollDebounced);
-  }
-  onScroll == null ? void 0 : onScroll(event);
-}
-function onLayout(state, event) {
-  const scrollLength = event.nativeEvent.layout[state.props.horizontal ? "width" : "height"];
-  state.scrollLength = scrollLength;
-}
-var LeanView = React6.forwardRef((props, ref) => {
-  return React6.createElement("RCTView", { ...props, ref });
-});
-LeanView.displayName = "RCTView";
 
 // src/$View.tsx
 function $View({ $key, $style, ...rest }) {
@@ -346,27 +43,28 @@ function $View({ $key, $style, ...rest }) {
   const style = $style();
   return /* @__PURE__ */ React6.createElement(LeanView, { style, ...rest });
 }
-function InnerContainer({ id, getRenderedItem: getRenderedItem2, recycleItems, ItemSeparatorComponent }) {
+function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
   const itemIndex = use$(`containerIndex${id}`);
   const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
   if (itemIndex < 0) {
     return null;
   }
-  const renderedItem = getRenderedItem2(itemIndex);
+  const renderedItem = getRenderedItem(itemIndex);
   return /* @__PURE__ */ React6.createElement(React6.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
 }
 var Container = ({
   id,
   recycleItems,
   horizontal,
-  getRenderedItem: getRenderedItem2,
-  onLayout: onLayout2,
+  getRenderedItem,
+  onLayout,
   ItemSeparatorComponent
 }) => {
   const ctx = useStateContext();
   const createStyle = () => {
     const position = peek$(ctx, `containerPosition${id}`);
     return horizontal ? {
+      flexDirection: "row",
       position: "absolute",
       top: 0,
       bottom: 0,
@@ -389,7 +87,7 @@ var Container = ({
         const index = peek$(ctx, `containerIndex${id}`);
         if (index >= 0) {
           const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
-          onLayout2(index, length);
+          onLayout(index, length);
         }
       }
     },
@@ -397,7 +95,7 @@ var Container = ({
       InnerContainer,
       {
         id,
-        getRenderedItem: getRenderedItem2,
+        getRenderedItem,
         recycleItems,
         ItemSeparatorComponent
       }
@@ -410,8 +108,8 @@ var Containers = React6.memo(function Containers2({
   horizontal,
   recycleItems,
   ItemSeparatorComponent,
-  updateItemSize: updateItemSize2,
-  getRenderedItem: getRenderedItem2
+  updateItemSize,
+  getRenderedItem
 }) {
   const ctx = useStateContext();
   const numContainers = use$("numContainers");
@@ -425,8 +123,8 @@ var Containers = React6.memo(function Containers2({
           key: i,
           recycleItems,
           horizontal,
-          getRenderedItem: getRenderedItem2,
-          onLayout: updateItemSize2,
+          getRenderedItem,
+          onLayout: updateItemSize,
           ItemSeparatorComponent
         }
       )
@@ -464,15 +162,14 @@ var ListComponent = React6.memo(function ListComponent2({
   recycleItems,
   ItemSeparatorComponent,
   alignItemsAtEnd,
-  handleScroll: handleScroll2,
-  onLayout: onLayout2,
+  handleScroll,
+  onLayout,
   ListHeaderComponent,
   ListHeaderComponentStyle,
   ListFooterComponent,
   ListFooterComponentStyle,
-  getRenderedItem: getRenderedItem2,
-  updateItemSize: updateItemSize2,
-  addTotalLength: addTotalLength2,
+  getRenderedItem,
+  updateItemSize,
   refScroller,
   ...rest
 }) {
@@ -488,64 +185,38 @@ var ListComponent = React6.memo(function ListComponent2({
           height: "100%"
         } : {}
       ],
-      onScroll: handleScroll2,
-      onLayout: onLayout2,
+      onScroll: handleScroll,
+      onLayout,
+      scrollEventThrottle: 32,
       horizontal,
       contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       ref: refScroller
     },
     alignItemsAtEnd && /* @__PURE__ */ React6.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$(ctx, "paddingTop") }) }),
-    ListHeaderComponent && /* @__PURE__ */ React6.createElement(
-      View,
-      {
-        style: ListHeaderComponentStyle,
-        onLayout: (event) => {
-          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
-          const prevSize = peek$(ctx, "headerSize") || 0;
-          if (size !== prevSize) {
-            set$(ctx, "headerSize", size);
-            addTotalLength2(size - prevSize);
-          }
-        }
-      },
-      getComponent(ListHeaderComponent)
-    ),
+    ListHeaderComponent && /* @__PURE__ */ React6.createElement(View, { style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
     /* @__PURE__ */ React6.createElement(
       Containers,
       {
         horizontal,
         recycleItems,
-        getRenderedItem: getRenderedItem2,
+        getRenderedItem,
         ItemSeparatorComponent: ItemSeparatorComponent && getComponent(ItemSeparatorComponent),
-        updateItemSize: updateItemSize2
+        updateItemSize
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React6.createElement(
-      View,
-      {
-        style: ListFooterComponentStyle,
-        onLayout: (event) => {
-          const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
-          const prevSize = peek$(ctx, "footerSize") || 0;
-          if (size !== prevSize) {
-            set$(ctx, "footerSize", size);
-            addTotalLength2(size - prevSize);
-          }
-        }
-      },
-      getComponent(ListFooterComponent)
-    )
+    ListFooterComponent && /* @__PURE__ */ React6.createElement(View, { style: ListFooterComponentStyle }, getComponent(ListFooterComponent))
   );
 });
 
 // src/LegendList.tsx
+var DEFAULT_SCROLL_BUFFER = 0;
+var POSITION_OUT_OF_VIEW = -1e4;
 var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React6.createElement(StateProvider, null, /* @__PURE__ */ React6.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
 var LegendListInner = forwardRef(
-  function LegendListInner2(props_, forwardedRef) {
+  function LegendListInner2(props, forwardedRef) {
     var _a, _b;
-    const props = applyDefaultProps(props_);
     const {
       data,
       initialScrollIndex,
@@ -553,14 +224,61 @@ var LegendListInner = forwardRef(
       horizontal,
       style: styleProp,
       contentContainerStyle: contentContainerStyleProp,
+      initialNumContainers,
       drawDistance,
+      recycleItems = true,
+      onEndReachedThreshold = 0.5,
+      maintainScrollAtEnd = false,
+      maintainScrollAtEndThreshold = 0.1,
+      alignItemsAtEnd = false,
+      onScroll: onScrollProp,
+      keyExtractor,
+      renderItem,
+      estimatedItemSize,
+      getEstimatedItemSize,
+      onEndReached,
+      onViewableRangeChanged,
       ...rest
     } = props;
     const ctx = useStateContext();
-    const refScroller = forwardedRef || useRef(null);
+    const internalRef = useRef(null);
+    const refScroller = forwardedRef || internalRef;
     const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_SCROLL_BUFFER;
+    const styleFlattened = StyleSheet.flatten(styleProp);
+    const style = useMemo(() => styleFlattened, [JSON.stringify(styleProp)]);
+    const contentContainerStyleFlattened = StyleSheet.flatten(contentContainerStyleProp);
+    const contentContainerStyle = useMemo(
+      () => contentContainerStyleFlattened,
+      [JSON.stringify(contentContainerStyleProp)]
+    );
     const refState = useRef();
-    const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateInitialOffset.bind(void 0, props), []);
+    const getId = (index) => {
+      var _a2;
+      const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+      if (!data2) {
+        return "";
+      }
+      const ret = index < data2.length ? keyExtractor ? keyExtractor(data2[index], index) : index : null;
+      return ret + "";
+    };
+    const getItemLength = (index, data2) => {
+      return getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize;
+    };
+    const calculateInitialOffset = () => {
+      if (initialScrollIndex) {
+        if (getEstimatedItemSize) {
+          let offset = 0;
+          for (let i = 0; i < initialScrollIndex; i++) {
+            offset += getEstimatedItemSize(i, data[i]);
+          }
+          return offset;
+        } else if (estimatedItemSize) {
+          return initialScrollIndex * estimatedItemSize;
+        }
+      }
+      return void 0;
+    };
+    const initialContentOffset = initialScrollOffset != null ? initialScrollOffset : useMemo(calculateInitialOffset, [initialScrollIndex, estimatedItemSize]);
     if (!refState.current) {
       refState.current = {
         lengths: /* @__PURE__ */ new Map(),
@@ -571,6 +289,7 @@ var LegendListInner = forwardRef(
         isStartReached: false,
         isEndReached: false,
         isAtBottom: false,
+        data,
         idsInFirstRender: void 0,
         hasScrolled: false,
         scrollLength: Dimensions.get("window")[horizontal ? "width" : "height"],
@@ -578,91 +297,295 @@ var LegendListInner = forwardRef(
         startNoBuffer: 0,
         endBuffered: 0,
         endNoBuffer: 0,
-        scroll: initialContentOffset || 0,
-        scrollPrevious: initialContentOffset || 0,
-        previousViewableItems: /* @__PURE__ */ new Set(),
-        props,
-        ctx,
-        scrollBuffer
+        scroll: initialContentOffset || 0
       };
-      refState.current.idsInFirstRender = new Set(
-        data.map((_, i) => getId(refState.current, i))
-      );
+      refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     }
-    refState.current.props = props;
-    refState.current.ctx = ctx;
-    const styleFlattened = StyleSheet.flatten(styleProp);
-    const style = useMemo(() => styleFlattened, [JSON.stringify(styleProp)]);
-    const contentContainerStyleFlattened = StyleSheet.flatten(contentContainerStyleProp);
-    const contentContainerStyle = useMemo(
-      () => contentContainerStyleFlattened,
-      [JSON.stringify(contentContainerStyleProp)]
-    );
-    const fns = useMemo(
-      () => ({
-        getRenderedItem: getRenderedItem.bind(void 0, refState.current),
-        getId: getId.bind(void 0, refState.current),
-        getItemSize: getItemSize.bind(void 0, refState.current),
-        calculateItemsInView: calculateItemsInView.bind(void 0, refState.current),
-        updateItemSize: updateItemSize.bind(void 0, refState.current, refScroller),
-        checkAtBottom: checkAtBottom.bind(void 0, refState.current),
-        handleScrollDebounced: handleScrollDebounced.bind(void 0, refState.current),
-        onLayout: onLayout.bind(void 0, refState.current),
-        addTotalLength: addTotalLength.bind(void 0, refState.current),
-        handleScroll: handleScroll.bind(
-          void 0,
-          refState.current,
-          handleScrollDebounced.bind(void 0, refState.current)
-        )
-      }),
-      []
-    );
-    const {
-      calculateItemsInView: calculateItemsInView2,
-      getId: getId2,
-      getItemSize: getItemSize2,
-      checkAtBottom: checkAtBottom2,
-      updateItemSize: updateItemSize2,
-      getRenderedItem: getRenderedItem2,
-      onLayout: onLayout2,
-      handleScroll: handleScroll2,
-      addTotalLength: addTotalLength2
-    } = fns;
+    refState.current.data = data;
     set$(ctx, `numItems`, data.length);
     set$(ctx, `stylePaddingTop`, (_b = (_a = styleFlattened == null ? void 0 : styleFlattened.paddingTop) != null ? _a : contentContainerStyleFlattened == null ? void 0 : contentContainerStyleFlattened.paddingTop) != null ? _b : 0);
+    const addTotalSize = (add) => {
+      const length = (peek$(ctx, `totalLength`) || 0) + add;
+      set$(ctx, `totalLength`, length);
+      const screenLength = refState.current.scrollLength;
+      if (alignItemsAtEnd) {
+        const listPaddingTop = peek$(ctx, `stylePaddingTop`);
+        set$(ctx, `paddingTop`, Math.max(0, screenLength - length - listPaddingTop));
+      }
+    };
+    const allocateContainers = useCallback(() => {
+      const scrollLength = refState.current.scrollLength;
+      const averageItemSize = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0]);
+      const numContainers = initialNumContainers || Math.ceil((scrollLength + scrollBuffer * 2) / averageItemSize) + 4;
+      for (let i = 0; i < numContainers; i++) {
+        set$(ctx, `containerIndex${i}`, -1);
+        set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+      }
+      set$(ctx, `numContainers`, numContainers);
+    }, []);
+    const getRenderedItem = useCallback(
+      (index) => {
+        var _a2;
+        const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+        if (!data2) {
+          return null;
+        }
+        const renderedItem = renderItem == null ? void 0 : renderItem({
+          item: data2[index],
+          index
+        });
+        return renderedItem;
+      },
+      [renderItem]
+    );
+    const calculateItemsInView = useCallback(() => {
+      unstable_batchedUpdates(() => {
+        var _a2, _b2, _c;
+        const {
+          data: data2,
+          scrollLength,
+          scroll: scrollState,
+          startNoBuffer: startNoBufferState,
+          startBuffered: startBufferedState,
+          endNoBuffer: endNoBufferState,
+          endBuffered: endBufferedState
+        } = refState.current;
+        if (!data2) {
+          return;
+        }
+        const topPad = (peek$(ctx, `stylePaddingTop`) || 0) + (peek$(ctx, `headerSize`) || 0);
+        const scroll = scrollState - topPad;
+        const { lengths, positions } = refState.current;
+        let startNoBuffer = null;
+        let startBuffered = null;
+        let endNoBuffer = null;
+        let endBuffered = null;
+        let loopStart = startBufferedState || 0;
+        if (startBufferedState) {
+          for (let i = startBufferedState; i >= 0; i--) {
+            const id = getId(i);
+            const top2 = positions.get(id);
+            if (top2 !== void 0) {
+              const length = (_a2 = lengths.get(id)) != null ? _a2 : getItemLength(i, data2[i]);
+              const bottom = top2 + length;
+              if (bottom > scroll - scrollBuffer) {
+                loopStart = i;
+              } else {
+                break;
+              }
+            }
+          }
+        }
+        let top = loopStart > 0 ? positions.get(getId(loopStart)) : 0;
+        for (let i = loopStart; i < data2.length; i++) {
+          const id = getId(i);
+          const length = (_b2 = lengths.get(id)) != null ? _b2 : getItemLength(i, data2[i]);
+          if (positions.get(id) !== top) {
+            positions.set(id, top);
+          }
+          if (startNoBuffer === null && top + length > scroll) {
+            startNoBuffer = i;
+          }
+          if (startBuffered === null && top + length > scroll - scrollBuffer) {
+            startBuffered = i;
+          }
+          if (startNoBuffer !== null) {
+            if (top <= scroll + scrollLength) {
+              endNoBuffer = i;
+            }
+            if (top <= scroll + scrollLength + scrollBuffer) {
+              endBuffered = i;
+            } else {
+              break;
+            }
+          }
+          top += length;
+        }
+        Object.assign(refState.current, {
+          startBuffered,
+          startNoBuffer,
+          endBuffered,
+          endNoBuffer
+        });
+        if (startBuffered !== null && endBuffered !== null) {
+          const prevNumContainers = ctx.values.get("numContainers");
+          let numContainers = prevNumContainers;
+          for (let i = startBuffered; i <= endBuffered; i++) {
+            let isContained = false;
+            for (let j = 0; j < numContainers; j++) {
+              const index = peek$(ctx, `containerIndex${j}`);
+              if (index === i) {
+                isContained = true;
+                break;
+              }
+            }
+            if (!isContained) {
+              let didRecycle = false;
+              for (let u = 0; u < numContainers; u++) {
+                const index = peek$(ctx, `containerIndex${u}`);
+                if (index < startBuffered || index > endBuffered) {
+                  set$(ctx, `containerIndex${u}`, i);
+                  didRecycle = true;
+                  break;
+                }
+              }
+              if (!didRecycle) {
+                if (__DEV__) {
+                  console.warn(
+                    "[legend-list] No container to recycle, consider increasing initialContainers or estimatedItemSize",
+                    i
+                  );
+                }
+                const id = numContainers;
+                numContainers++;
+                set$(ctx, `containerIndex${id}`, i);
+                set$(ctx, `containerPosition${id}`, POSITION_OUT_OF_VIEW);
+              }
+            }
+          }
+          if (numContainers !== prevNumContainers) {
+            set$(ctx, `numContainers`, numContainers);
+          }
+          for (let i = 0; i < numContainers; i++) {
+            const itemIndex = peek$(ctx, `containerIndex${i}`);
+            const item = data2[itemIndex];
+            if (item) {
+              const id = getId(itemIndex);
+              if (itemIndex < startBuffered || itemIndex > endBuffered) {
+                set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+              } else {
+                const pos = (_c = positions.get(id)) != null ? _c : -1;
+                const prevPos = peek$(ctx, `containerPosition${i}`);
+                if (pos >= 0 && pos !== prevPos) {
+                  set$(ctx, `containerPosition${i}`, pos);
+                }
+              }
+            }
+          }
+          if (onViewableRangeChanged) {
+            if (startNoBuffer !== startNoBufferState || startBuffered !== startBufferedState || endNoBuffer !== endNoBufferState || endBuffered !== endBufferedState) {
+              onViewableRangeChanged({
+                start: startNoBuffer,
+                startBuffered,
+                end: endNoBuffer,
+                endBuffered,
+                items: data2.slice(startNoBuffer, endNoBuffer + 1)
+              });
+            }
+          }
+        }
+      });
+    }, [data]);
     useMemo(() => {
       var _a2, _b2;
-      allocateContainers(refState.current);
-      calculateItemsInView2();
+      allocateContainers();
+      calculateItemsInView();
       const lengths = (_a2 = refState.current) == null ? void 0 : _a2.lengths;
-      let totalLength = (peek$(ctx, `headerSize`) || 0) + (peek$(ctx, `footerSize`) || 0);
+      let totalLength = 0;
       for (let i = 0; i < data.length; i++) {
-        const id = getId2(i);
-        totalLength += (_b2 = lengths.get(id)) != null ? _b2 : getItemSize2(i, data[i]);
+        const id = getId(i);
+        totalLength += (_b2 = lengths.get(id)) != null ? _b2 : getItemLength(i, data[i]);
       }
-      addTotalLength2(totalLength);
+      addTotalSize(totalLength);
     }, []);
+    const checkAtBottom = () => {
+      var _a2;
+      const { scrollLength, scroll } = refState.current;
+      const totalLength = peek$(ctx, "totalLength");
+      const distanceFromEnd = totalLength - scroll - scrollLength;
+      if (refState.current) {
+        refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
+      }
+      if (onEndReached && !((_a2 = refState.current) == null ? void 0 : _a2.isEndReached)) {
+        if (distanceFromEnd < onEndReachedThreshold * scrollLength) {
+          if (refState.current) {
+            refState.current.isEndReached = true;
+          }
+          onEndReached({ distanceFromEnd });
+        }
+      }
+    };
     useMemo(() => {
       if (refState.current) {
         refState.current.isEndReached = false;
       }
-      calculateItemsInView2();
-      checkAtBottom2();
+      calculateItemsInView();
+      checkAtBottom();
     }, [data]);
+    const updateItemSize = useCallback((index, length) => {
+      var _a2, _b2, _c, _d;
+      const data2 = (_a2 = refState.current) == null ? void 0 : _a2.data;
+      if (!data2) {
+        return;
+      }
+      const lengths = (_b2 = refState.current) == null ? void 0 : _b2.lengths;
+      const id = getId(index);
+      const wasInFirstRender = (_c = refState.current) == null ? void 0 : _c.idsInFirstRender.has(id);
+      const prevLength = lengths.get(id) || (wasInFirstRender ? getItemLength(index, data2[index]) : 0);
+      if (!prevLength || prevLength !== length) {
+        lengths.set(id, length);
+        addTotalSize(length - prevLength);
+        if (((_d = refState.current) == null ? void 0 : _d.isAtBottom) && maintainScrollAtEnd) {
+          requestAnimationFrame(() => {
+            var _a3;
+            (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
+              animated: true
+            });
+          });
+        }
+        const state = refState.current;
+        if (!state.animFrameScroll && !state.animFrameLayout) {
+          state.animFrameLayout = requestAnimationFrame(() => {
+            state.animFrameLayout = null;
+            calculateItemsInView();
+          });
+        }
+      }
+    }, []);
+    const handleScrollDebounced = useCallback(() => {
+      calculateItemsInView();
+      checkAtBottom();
+      if (refState.current) {
+        refState.current.animFrameScroll = null;
+      }
+    }, []);
+    const onLayout = useCallback((event) => {
+      const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
+      refState.current.scrollLength = scrollLength;
+    }, []);
+    const handleScroll = useCallback(
+      (event, fromSelf) => {
+        var _a2, _b2, _c;
+        if (((_b2 = (_a2 = event.nativeEvent) == null ? void 0 : _a2.contentSize) == null ? void 0 : _b2.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
+          return;
+        }
+        refState.current.hasScrolled = true;
+        const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
+        refState.current.scroll = newScroll;
+        if (refState.current && !refState.current.animFrameScroll) {
+          refState.current.animFrameScroll = requestAnimationFrame(handleScrollDebounced);
+        }
+        if (!fromSelf) {
+          onScrollProp == null ? void 0 : onScrollProp(event);
+        }
+      },
+      []
+    );
     return /* @__PURE__ */ React6.createElement(
       ListComponent,
       {
         ...rest,
-        addTotalLength: addTotalLength2,
         contentContainerStyle,
         style,
         horizontal,
         refScroller,
         initialContentOffset,
-        getRenderedItem: getRenderedItem2,
-        updateItemSize: updateItemSize2,
-        handleScroll: handleScroll2,
-        onLayout: onLayout2
+        getRenderedItem,
+        updateItemSize,
+        handleScroll,
+        onLayout,
+        recycleItems,
+        alignItemsAtEnd
       }
     );
   }