@legendapp/list 0.5.5 → 0.5.7

package/index.d.mts

@@ -1,8 +1,8 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 
-type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
-    data: ArrayLike<any> & T[];
+type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
+    data: ArrayLike<any> & ItemT[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
@@ -15,16 +15,16 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
-    estimatedItemSize: number;
-    getEstimatedItemSize?: (index: number, item: T) => number;
-    onEndReached?: ((info: {
-        distanceFromEnd: number;
-    }) => void) | null | undefined;
+    estimatedItemSize?: number;
+    getEstimatedItemSize?: (index: number, item: ItemT) => number;
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => void) | null | undefined;
-    keyExtractor?: (item: T, index: number) => string;
-    renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    renderItem?: (props: LegendListRenderItemProps<ItemT>) => ReactNode;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
@@ -40,6 +40,7 @@ interface InternalState {
     positions: Map<string, number>;
     columns: Map<string, number>;
     sizes: Map<string, number>;
+    sizesLaidOut: Map<string, number> | undefined;
     pendingAdjust: number;
     animFrameLayout: any;
     animFrameTotalSize: number | null;
@@ -63,6 +64,7 @@ interface InternalState {
     scrollAdjustPending: number;
     totalSize: number;
     timeouts: Set<number>;
+    timeoutSizeMessage: any;
     nativeMarginTop: number;
     indexByKey: Map<string, number>;
     contentSize: {
@@ -89,7 +91,7 @@ interface LegendListRenderItemProps<ItemT> {
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
     useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
-    useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
+    useRecyclingState: <T>(updateState: ((info: LegendListRecyclingState<ItemT>) => T) | T) => [T, React.Dispatch<T>];
 }
 type LegendListRef = {
     /**
@@ -153,7 +155,7 @@ interface ViewabilityConfig {
     /**
      * A unique ID to identify this viewability config
      */
-    id: string;
+    id?: string;
     /**
      * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
      * viewability callback will be fired. A high number means that scrolling through content without

package/index.d.ts

@@ -1,8 +1,8 @@
 import { ComponentProps, ReactNode, ForwardedRef, ReactElement } from 'react';
 import { ScrollView, StyleProp, ViewStyle, ScrollViewComponent, ScrollResponderMixin } from 'react-native';
 
-type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
-    data: ArrayLike<any> & T[];
+type LegendListProps<ItemT> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
+    data: ArrayLike<any> & ItemT[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
     drawDistance?: number;
@@ -15,16 +15,16 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
-    estimatedItemSize: number;
-    getEstimatedItemSize?: (index: number, item: T) => number;
-    onEndReached?: ((info: {
-        distanceFromEnd: number;
-    }) => void) | null | undefined;
+    estimatedItemSize?: number;
+    getEstimatedItemSize?: (index: number, item: ItemT) => number;
     onStartReached?: ((info: {
         distanceFromStart: number;
     }) => void) | null | undefined;
-    keyExtractor?: (item: T, index: number) => string;
-    renderItem?: (props: LegendListRenderItemProps<T>) => ReactNode;
+    onEndReached?: ((info: {
+        distanceFromEnd: number;
+    }) => void) | null | undefined;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    renderItem?: (props: LegendListRenderItemProps<ItemT>) => ReactNode;
     ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
     ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined;
     ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null | undefined;
@@ -40,6 +40,7 @@ interface InternalState {
     positions: Map<string, number>;
     columns: Map<string, number>;
     sizes: Map<string, number>;
+    sizesLaidOut: Map<string, number> | undefined;
     pendingAdjust: number;
     animFrameLayout: any;
     animFrameTotalSize: number | null;
@@ -63,6 +64,7 @@ interface InternalState {
     scrollAdjustPending: number;
     totalSize: number;
     timeouts: Set<number>;
+    timeoutSizeMessage: any;
     nativeMarginTop: number;
     indexByKey: Map<string, number>;
     contentSize: {
@@ -89,7 +91,7 @@ interface LegendListRenderItemProps<ItemT> {
     useViewability: (configId: string, callback: ViewabilityCallback) => void;
     useViewabilityAmount: (callback: ViewabilityAmountCallback) => void;
     useRecyclingEffect: (effect: (info: LegendListRecyclingState<ItemT>) => void | (() => void)) => void;
-    useRecyclingState: <T>(updateState: (info: LegendListRecyclingState<ItemT>) => T) => [T, React.Dispatch<T>];
+    useRecyclingState: <T>(updateState: ((info: LegendListRecyclingState<ItemT>) => T) | T) => [T, React.Dispatch<T>];
 }
 type LegendListRef = {
     /**
@@ -153,7 +155,7 @@ interface ViewabilityConfig {
     /**
      * A unique ID to identify this viewability config
      */
-    id: string;
+    id?: string;
     /**
      * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
      * viewability callback will be fired. A high number means that scrolling through content without

package/index.js

@@ -161,6 +161,8 @@ var Container = ({
         if (key !== void 0) {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
           onLayout(key, size);
+          const otherAxisSize = horizontal ? event.nativeEvent.layout.width : event.nativeEvent.layout.height;
+          set$(ctx, "otherAxisSize", Math.max(otherAxisSize, peek$(ctx, "otherAxisSize") || 0));
           const measured = peek$(ctx, `containerDidLayout${id}`);
           if (!measured) {
             requestAnimationFrame(() => {
@@ -260,6 +262,7 @@ var ListComponent = React7__namespace.memo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
+  use$("otherAxisSize") || 0;
   return /* @__PURE__ */ React7__namespace.createElement(
     $ScrollView,
     {
@@ -474,6 +477,7 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 var DEFAULT_DRAW_DISTANCE = 250;
 var INITIAL_SCROLL_ADJUST = 1e4;
 var POSITION_OUT_OF_VIEW = -1e7;
+var DEFAULT_ITEM_SIZE = 100;
 var LegendList = React7.forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React7__namespace.createElement(StateProvider, null, /* @__PURE__ */ React7__namespace.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
@@ -504,7 +508,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     ListEmptyComponent,
     ...rest
   } = props;
-  const { style, contentContainerStyle } = rest;
+  const { style, contentContainerStyle } = props;
   const ctx = useStateContext();
   const internalRef = React7.useRef(null);
   const refScroller = internalRef;
@@ -520,11 +524,12 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     return `${ret}`;
   };
   const getItemSize = (key, index, data2) => {
+    var _a2;
     const sizeKnown = refState.current.sizes.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize;
+    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
     refState.current.sizes.set(key, size);
     return size;
   };
@@ -576,7 +581,9 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       indexByKey: /* @__PURE__ */ new Map(),
       scrollHistory: [],
       scrollVelocity: 0,
-      contentSize: { width: 0, height: 0 }
+      contentSize: { width: 0, height: 0 },
+      sizesLaidOut: __DEV__ ? /* @__PURE__ */ new Map() : void 0,
+      timeoutSizeMessage: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     set$(ctx, "scrollAdjust", refState.current.scrollAdjustPending);
@@ -622,6 +629,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       scroll: scrollState,
       startBuffered: startBufferedState,
       positions,
+      sizes,
       columns
     } = state;
     if (state.animFrameLayout) {
@@ -638,6 +646,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       0,
       scrollState - topPad - (USE_CONTENT_INSET ? scrollAdjustPending : 0) + scrollExtra
     );
+    const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
     let endNoBuffer = null;
@@ -683,10 +692,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         startBuffered = i;
       }
       if (startNoBuffer !== null) {
-        if (top <= scroll + scrollLength) {
+        if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scroll + scrollLength + scrollBuffer) {
+        if (top <= scrollBottom + scrollBuffer) {
           endBuffered = i;
         } else {
           break;
@@ -767,7 +776,14 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
-          if (!(itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered)) {
+          if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
+            const prevPos = peek$(ctx, `containerPosition${i}`) - scrollAdjustPending;
+            const pos = positions.get(id) || 0;
+            const size = sizes.get(id) || 0;
+            if (pos + size >= scroll && pos <= scrollBottom || prevPos + size >= scroll && prevPos <= scrollBottom) {
+              set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+            }
+          } else {
             const pos = (positions.get(id) || 0) + scrollAdjustPending;
             const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
@@ -859,6 +875,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
   };
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractor && !isFirst && data !== refState.current.data) {
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
     refState.current.data = data;
     let totalSize = 0;
     const indexByKey = /* @__PURE__ */ new Map();
@@ -900,6 +920,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
       }
+      if (!keyExtractor) {
+        refState.current.sizes.clear();
+        refState.current.positions;
+      }
       calculateItemsInView();
       doMaintainScrollAtEnd(false);
       checkAtTop();
@@ -984,17 +1008,17 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         listen$(ctx, signal, run);
       }, []);
     };
-    const useRecyclingState = (updateState) => {
+    const useRecyclingState = (valueOrFun) => {
       const stateInfo = React7.useState(
-        () => updateState({
+        () => typeof valueOrFun === "function" ? valueOrFun({
           index,
           item: refState.current.data[index],
           prevIndex: void 0,
           prevItem: void 0
-        })
+        }) : valueOrFun
       );
       useRecyclingEffect((state2) => {
-        const newState = updateState(state2);
+        const newState = typeof valueOrFun === "function" ? valueOrFun(state2) : valueOrFun;
         stateInfo[1](newState);
       });
       return stateInfo;
@@ -1010,9 +1034,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     return renderedItem;
   }, []);
   useInit(() => {
+    var _a2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
-    const averageItemSize = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0]);
+    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;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -1028,7 +1053,8 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     if (!data2) {
       return;
     }
-    const { sizes, indexByKey, idsInFirstRender, columns } = refState.current;
+    const state = refState.current;
+    const { sizes, indexByKey, idsInFirstRender, columns, sizesLaidOut } = state;
     const index = indexByKey.get(key);
     const wasInFirstRender = idsInFirstRender.has(key);
     const prevSize = sizes.get(key) || (wasInFirstRender ? getItemSize(key, index, data2[index]) : 0);
@@ -1056,9 +1082,27 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         sizes.set(key, size);
         diff = size - prevSize;
       }
+      if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
+        sizesLaidOut.set(key, size);
+        if (state.timeoutSizeMessage) {
+          clearTimeout(state.timeoutSizeMessage);
+        }
+        state.timeoutSizeMessage = setTimeout(() => {
+          state.timeoutSizeMessage = void 0;
+          let total = 0;
+          let num = 0;
+          for (const [key2, size2] of sizesLaidOut) {
+            num++;
+            total += size2;
+          }
+          const avg = Math.round(total / num);
+          console.warn(
+            `[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
+          );
+        }, 1e3);
+      }
       addTotalSize(key, diff);
       doMaintainScrollAtEnd(true);
-      const state = refState.current;
       const scrollVelocity = state.scrollVelocity;
       if (!state.animFrameLayout && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
         state.animFrameLayout = requestAnimationFrame(() => {
@@ -1176,7 +1220,8 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       recycleItems,
       alignItemsAtEnd,
       addTotalSize,
-      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      style
     }
   );
 });

package/index.mjs

@@ -140,6 +140,8 @@ var Container = ({
         if (key !== void 0) {
           const size = event.nativeEvent.layout[horizontal ? "width" : "height"];
           onLayout(key, size);
+          const otherAxisSize = horizontal ? event.nativeEvent.layout.width : event.nativeEvent.layout.height;
+          set$(ctx, "otherAxisSize", Math.max(otherAxisSize, peek$(ctx, "otherAxisSize") || 0));
           const measured = peek$(ctx, `containerDidLayout${id}`);
           if (!measured) {
             requestAnimationFrame(() => {
@@ -239,6 +241,7 @@ var ListComponent = React7.memo(function ListComponent2({
   ...rest
 }) {
   const ctx = useStateContext();
+  use$("otherAxisSize") || 0;
   return /* @__PURE__ */ React7.createElement(
     $ScrollView,
     {
@@ -453,6 +456,7 @@ function maybeUpdateViewabilityCallback(ctx, configId, viewToken) {
 var DEFAULT_DRAW_DISTANCE = 250;
 var INITIAL_SCROLL_ADJUST = 1e4;
 var POSITION_OUT_OF_VIEW = -1e7;
+var DEFAULT_ITEM_SIZE = 100;
 var LegendList = forwardRef(function LegendList2(props, forwardedRef) {
   return /* @__PURE__ */ React7.createElement(StateProvider, null, /* @__PURE__ */ React7.createElement(LegendListInner, { ...props, ref: forwardedRef }));
 });
@@ -483,7 +487,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     ListEmptyComponent,
     ...rest
   } = props;
-  const { style, contentContainerStyle } = rest;
+  const { style, contentContainerStyle } = props;
   const ctx = useStateContext();
   const internalRef = useRef(null);
   const refScroller = internalRef;
@@ -499,11 +503,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return `${ret}`;
   };
   const getItemSize = (key, index, data2) => {
+    var _a2;
     const sizeKnown = refState.current.sizes.get(key);
     if (sizeKnown !== void 0) {
       return sizeKnown;
     }
-    const size = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize;
+    const size = (_a2 = getEstimatedItemSize ? getEstimatedItemSize(index, data2) : estimatedItemSize) != null ? _a2 : DEFAULT_ITEM_SIZE;
     refState.current.sizes.set(key, size);
     return size;
   };
@@ -555,7 +560,9 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       indexByKey: /* @__PURE__ */ new Map(),
       scrollHistory: [],
       scrollVelocity: 0,
-      contentSize: { width: 0, height: 0 }
+      contentSize: { width: 0, height: 0 },
+      sizesLaidOut: __DEV__ ? /* @__PURE__ */ new Map() : void 0,
+      timeoutSizeMessage: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     set$(ctx, "scrollAdjust", refState.current.scrollAdjustPending);
@@ -601,6 +608,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       scroll: scrollState,
       startBuffered: startBufferedState,
       positions,
+      sizes,
       columns
     } = state;
     if (state.animFrameLayout) {
@@ -617,6 +625,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       0,
       scrollState - topPad - (USE_CONTENT_INSET ? scrollAdjustPending : 0) + scrollExtra
     );
+    const scrollBottom = scroll + scrollLength;
     let startNoBuffer = null;
     let startBuffered = null;
     let endNoBuffer = null;
@@ -662,10 +671,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         startBuffered = i;
       }
       if (startNoBuffer !== null) {
-        if (top <= scroll + scrollLength) {
+        if (top <= scrollBottom) {
           endNoBuffer = i;
         }
-        if (top <= scroll + scrollLength + scrollBuffer) {
+        if (top <= scrollBottom + scrollBuffer) {
           endBuffered = i;
         } else {
           break;
@@ -746,7 +755,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         const item = data2[itemIndex];
         if (item) {
           const id = getId(itemIndex);
-          if (!(itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered)) {
+          if (itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered) {
+            const prevPos = peek$(ctx, `containerPosition${i}`) - scrollAdjustPending;
+            const pos = positions.get(id) || 0;
+            const size = sizes.get(id) || 0;
+            if (pos + size >= scroll && pos <= scrollBottom || prevPos + size >= scroll && prevPos <= scrollBottom) {
+              set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+            }
+          } else {
             const pos = (positions.get(id) || 0) + scrollAdjustPending;
             const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
@@ -838,6 +854,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   };
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
+    if (!keyExtractor && !isFirst && data !== refState.current.data) {
+      refState.current.sizes.clear();
+      refState.current.positions.clear();
+    }
     refState.current.data = data;
     let totalSize = 0;
     const indexByKey = /* @__PURE__ */ new Map();
@@ -879,6 +899,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
       }
+      if (!keyExtractor) {
+        refState.current.sizes.clear();
+        refState.current.positions;
+      }
       calculateItemsInView();
       doMaintainScrollAtEnd(false);
       checkAtTop();
@@ -963,17 +987,17 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         listen$(ctx, signal, run);
       }, []);
     };
-    const useRecyclingState = (updateState) => {
+    const useRecyclingState = (valueOrFun) => {
       const stateInfo = useState(
-        () => updateState({
+        () => typeof valueOrFun === "function" ? valueOrFun({
           index,
           item: refState.current.data[index],
           prevIndex: void 0,
           prevItem: void 0
-        })
+        }) : valueOrFun
       );
       useRecyclingEffect((state2) => {
-        const newState = updateState(state2);
+        const newState = typeof valueOrFun === "function" ? valueOrFun(state2) : valueOrFun;
         stateInfo[1](newState);
       });
       return stateInfo;
@@ -989,9 +1013,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     return renderedItem;
   }, []);
   useInit(() => {
+    var _a2;
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     const scrollLength = refState.current.scrollLength;
-    const averageItemSize = estimatedItemSize != null ? estimatedItemSize : getEstimatedItemSize == null ? void 0 : getEstimatedItemSize(0, data[0]);
+    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;
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -1007,7 +1032,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (!data2) {
       return;
     }
-    const { sizes, indexByKey, idsInFirstRender, columns } = refState.current;
+    const state = refState.current;
+    const { sizes, indexByKey, idsInFirstRender, columns, sizesLaidOut } = state;
     const index = indexByKey.get(key);
     const wasInFirstRender = idsInFirstRender.has(key);
     const prevSize = sizes.get(key) || (wasInFirstRender ? getItemSize(key, index, data2[index]) : 0);
@@ -1035,9 +1061,27 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         sizes.set(key, size);
         diff = size - prevSize;
       }
+      if (__DEV__ && !estimatedItemSize && !getEstimatedItemSize) {
+        sizesLaidOut.set(key, size);
+        if (state.timeoutSizeMessage) {
+          clearTimeout(state.timeoutSizeMessage);
+        }
+        state.timeoutSizeMessage = setTimeout(() => {
+          state.timeoutSizeMessage = void 0;
+          let total = 0;
+          let num = 0;
+          for (const [key2, size2] of sizesLaidOut) {
+            num++;
+            total += size2;
+          }
+          const avg = Math.round(total / num);
+          console.warn(
+            `[legend-list] estimatedItemSize or getEstimatedItemSize are not defined. Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
+          );
+        }, 1e3);
+      }
       addTotalSize(key, diff);
       doMaintainScrollAtEnd(true);
-      const state = refState.current;
       const scrollVelocity = state.scrollVelocity;
       if (!state.animFrameLayout && (Number.isNaN(scrollVelocity) || Math.abs(scrollVelocity) < 1)) {
         state.animFrameLayout = requestAnimationFrame(() => {
@@ -1155,7 +1199,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       recycleItems,
       alignItemsAtEnd,
       addTotalSize,
-      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0
+      ListEmptyComponent: data.length === 0 ? ListEmptyComponent : void 0,
+      style
     }
   );
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,