@legendapp/list 0.5.4 → 0.5.5

package/index.d.mts

@@ -1,7 +1,7 @@
 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'> & {
+type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
     data: ArrayLike<any> & T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
@@ -14,6 +14,7 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     maintainScrollAtEndThreshold?: number;
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
+    numColumns?: number;
     estimatedItemSize: number;
     getEstimatedItemSize?: (index: number, item: T) => number;
     onEndReached?: ((info: {
@@ -37,6 +38,7 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
 };
 interface InternalState {
     positions: Map<string, number>;
+    columns: Map<string, number>;
     sizes: Map<string, number>;
     pendingAdjust: number;
     animFrameLayout: any;

package/index.d.ts

@@ -1,7 +1,7 @@
 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'> & {
+type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset' | 'contentInset' | 'maintainVisibleContentPosition' | 'stickyHeaderIndices'> & {
     data: ArrayLike<any> & T[];
     initialScrollOffset?: number;
     initialScrollIndex?: number;
@@ -14,6 +14,7 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
     maintainScrollAtEndThreshold?: number;
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
+    numColumns?: number;
     estimatedItemSize: number;
     getEstimatedItemSize?: (index: number, item: T) => number;
     onEndReached?: ((info: {
@@ -37,6 +38,7 @@ type LegendListProps<T> = Omit<ComponentProps<typeof ScrollView>, 'contentOffset
 };
 interface InternalState {
     positions: Map<string, number>;
+    columns: Map<string, number>;
     sizes: Map<string, number>;
     pendingAdjust: number;
     animFrameLayout: any;

package/index.js

@@ -100,11 +100,11 @@ var LeanView = React7__namespace.forwardRef((props, ref) => {
 LeanView.displayName = "RCTView";
 
 // src/$View.tsx
-function $View({ $key, $key2, $style, ...rest }) {
+function $View({ $key, $key2, $key3, $key4, $style, ...rest }) {
   use$($key);
-  if ($key2) {
-    use$($key2);
-  }
+  $key2 && use$($key2);
+  $key3 && use$($key3);
+  $key4 && use$($key4);
   const style = $style();
   return /* @__PURE__ */ React7__namespace.createElement(LeanView, { style, ...rest });
 }
@@ -128,17 +128,23 @@ var Container = ({
   const ctx = useStateContext();
   const createStyle = () => {
     const position = peek$(ctx, `containerPosition${id}`);
+    const column = peek$(ctx, `containerColumn${id}`) || 0;
     const visible = peek$(ctx, `containerDidLayout${id}`);
+    const numColumns = peek$(ctx, "numColumns");
+    const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
+    const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
     return horizontal ? {
       flexDirection: "row",
       position: "absolute",
-      top: visible ? 0 : -1e7,
-      bottom: 0,
+      top: visible ? otherAxisPos : -1e7,
+      bottom: numColumns > 1 ? null : 0,
+      height: otherAxisSize,
       left: position
     } : {
       position: "absolute",
-      left: visible ? 0 : -1e7,
-      right: 0,
+      left: visible ? otherAxisPos : -1e7,
+      right: numColumns > 1 ? null : 0,
+      width: otherAxisSize,
       top: position
     };
   };
@@ -147,6 +153,8 @@ var Container = ({
     {
       $key: `containerPosition${id}`,
       $key2: `containerDidLayout${id}`,
+      $key3: `containerColumn${id}`,
+      $key4: "numColumns",
       $style: createStyle,
       onLayout: (event) => {
         const key = peek$(ctx, `containerItemKey${id}`);
@@ -486,6 +494,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     alignItemsAtEnd = false,
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
+    numColumns: numColumnsProp = 1,
     keyExtractor,
     renderItem,
     estimatedItemSize,
@@ -538,6 +547,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     refState.current = {
       sizes: /* @__PURE__ */ new Map(),
       positions: /* @__PURE__ */ new Map(),
+      columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
       animFrameLayout: null,
       animFrameTotalSize: null,
@@ -576,12 +586,12 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       refState.current.scrollAdjustPending -= diff;
     }
   };
-  const addTotalSize = React7.useCallback((key, add, set) => {
+  const addTotalSize = React7.useCallback((key, add) => {
     const state = refState.current;
     const index = key === null ? 0 : state.indexByKey.get(key);
     const isAbove = key !== null && index < (state.startNoBuffer || 0);
     const prev = state.totalSize;
-    if (set) {
+    if (key === null) {
       state.totalSize = add;
     } else {
       state.totalSize += add;
@@ -597,7 +607,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     if (isAbove) {
       adjustScroll(add);
     }
-    if (!prev || set) {
+    if (!prev || key === null) {
       doAdd();
     } else if (!state.animFrameTotalSize) {
       state.animFrameTotalSize = requestAnimationFrame(doAdd);
@@ -606,7 +616,14 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
   const calculateItemsInView = React7.useCallback((speed = 0) => {
     var _a2, _b2, _c2;
     const state = refState.current;
-    const { data: data2, scrollLength, scroll: scrollState, startBuffered: startBufferedState, positions } = state;
+    const {
+      data: data2,
+      scrollLength,
+      scroll: scrollState,
+      startBuffered: startBufferedState,
+      positions,
+      columns
+    } = state;
     if (state.animFrameLayout) {
       cancelAnimationFrame(state.animFrameLayout);
       state.animFrameLayout = null;
@@ -641,13 +658,24 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
         }
       }
     }
+    const numColumns = peek$(ctx, "numColumns");
+    const loopStartMod = loopStart % numColumns;
+    if (loopStartMod > 0) {
+      loopStart -= loopStartMod;
+    }
     let top = loopStart > 0 ? positions.get(getId(loopStart)) : 0;
+    let column = 1;
+    let maxSizeInRow = 0;
     for (let i = loopStart; i < data2.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data2[i]);
+      maxSizeInRow = Math.max(maxSizeInRow, size);
       if (positions.get(id) !== top) {
         positions.set(id, top);
       }
+      if (columns.get(id) !== column) {
+        columns.set(id, column);
+      }
       if (startNoBuffer === null && top + size > scroll) {
         startNoBuffer = i;
       }
@@ -664,7 +692,12 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
           break;
         }
       }
-      top += size;
+      column++;
+      if (column > numColumns) {
+        top += maxSizeInRow;
+        column = 1;
+        maxSizeInRow = 0;
+      }
     }
     Object.assign(refState.current, {
       startBuffered,
@@ -712,6 +745,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             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:",
@@ -735,10 +769,15 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
           const id = getId(itemIndex);
           if (!(itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered)) {
             const pos = (positions.get(id) || 0) + scrollAdjustPending;
+            const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
+            const prevColumn = peek$(ctx, `containerColumn${i}`);
             if (pos >= 0 && pos !== prevPos) {
               set$(ctx, `containerPosition${i}`, pos);
             }
+            if (column2 >= 0 && column2 !== prevColumn) {
+              set$(ctx, `containerColumn${i}`, column2);
+            }
           }
         }
       }
@@ -819,20 +858,29 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     }
   };
   const isFirst = !refState.current.renderItem;
-  if (isFirst || data !== refState.current.data) {
+  if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.data = data;
     let totalSize = 0;
     const indexByKey = /* @__PURE__ */ new Map();
+    let column = 1;
+    let maxSizeInRow = 0;
     for (let i = 0; i < data.length; i++) {
       const key = getId(i);
       indexByKey.set(key, i);
-      totalSize += getItemSize(key, i, data[i]);
+      const size = getItemSize(key, i, data[i]);
+      maxSizeInRow = Math.max(maxSizeInRow, size);
       if (maintainVisibleContentPosition && i < refState.current.startNoBuffer && !refState.current.indexByKey.has(key)) {
-        const size = getItemSize(key, i, data[i]);
-        adjustScroll(size);
+        const size2 = getItemSize(key, i, data[i]);
+        adjustScroll(size2);
+      }
+      column++;
+      if (column > numColumnsProp) {
+        totalSize += maxSizeInRow;
+        column = 1;
+        maxSizeInRow = 0;
       }
     }
-    addTotalSize(null, totalSize, true);
+    addTotalSize(null, totalSize);
     if (maintainVisibleContentPosition) {
       for (const [key, index] of refState.current.indexByKey) {
         if (index < refState.current.startNoBuffer && !indexByKey.has(key)) {
@@ -850,6 +898,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
       for (let i = 0; i < numContainers; i++) {
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerColumn${i}`, -1);
       }
       calculateItemsInView();
       doMaintainScrollAtEnd(false);
@@ -859,6 +908,7 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
   }
   refState.current.renderItem = renderItem;
   set$(ctx, "lastItemKey", getId(data[data.length - 1]));
+  set$(ctx, "numColumns", numColumnsProp);
   set$(
     ctx,
     "stylePaddingTop",
@@ -963,9 +1013,10 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     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);
+    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);
+      set$(ctx, `containerColumn${i}`, -1);
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
@@ -977,13 +1028,35 @@ var LegendListInner = React7.forwardRef(function LegendListInner2(props, forward
     if (!data2) {
       return;
     }
-    const { sizes, indexByKey, idsInFirstRender } = refState.current;
+    const { sizes, indexByKey, idsInFirstRender, columns } = refState.current;
     const index = indexByKey.get(key);
     const wasInFirstRender = idsInFirstRender.has(key);
     const prevSize = sizes.get(key) || (wasInFirstRender ? getItemSize(key, index, data2[index]) : 0);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
-      sizes.set(key, size);
-      addTotalSize(key, size - prevSize);
+      let diff;
+      const numColumns = peek$(ctx, "numColumns");
+      if (numColumns > 1) {
+        const column = columns.get(key);
+        const loopStart = index - (column - 1);
+        let prevMaxSizeInRow = 0;
+        for (let i = loopStart; i < loopStart + numColumns; i++) {
+          const id = getId(i);
+          const size2 = getItemSize(id, i, data2[i]);
+          prevMaxSizeInRow = Math.max(prevMaxSizeInRow, size2);
+        }
+        sizes.set(key, size);
+        let nextMaxSizeInRow = 0;
+        for (let i = loopStart; i < loopStart + numColumns; i++) {
+          const id = getId(i);
+          const size2 = getItemSize(id, i, data2[i]);
+          nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);
+        }
+        diff = nextMaxSizeInRow - prevMaxSizeInRow;
+      } else {
+        sizes.set(key, size);
+        diff = size - prevSize;
+      }
+      addTotalSize(key, diff);
       doMaintainScrollAtEnd(true);
       const state = refState.current;
       const scrollVelocity = state.scrollVelocity;

package/index.mjs

@@ -79,11 +79,11 @@ var LeanView = React7.forwardRef((props, ref) => {
 LeanView.displayName = "RCTView";
 
 // src/$View.tsx
-function $View({ $key, $key2, $style, ...rest }) {
+function $View({ $key, $key2, $key3, $key4, $style, ...rest }) {
   use$($key);
-  if ($key2) {
-    use$($key2);
-  }
+  $key2 && use$($key2);
+  $key3 && use$($key3);
+  $key4 && use$($key4);
   const style = $style();
   return /* @__PURE__ */ React7.createElement(LeanView, { style, ...rest });
 }
@@ -107,17 +107,23 @@ var Container = ({
   const ctx = useStateContext();
   const createStyle = () => {
     const position = peek$(ctx, `containerPosition${id}`);
+    const column = peek$(ctx, `containerColumn${id}`) || 0;
     const visible = peek$(ctx, `containerDidLayout${id}`);
+    const numColumns = peek$(ctx, "numColumns");
+    const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
+    const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
     return horizontal ? {
       flexDirection: "row",
       position: "absolute",
-      top: visible ? 0 : -1e7,
-      bottom: 0,
+      top: visible ? otherAxisPos : -1e7,
+      bottom: numColumns > 1 ? null : 0,
+      height: otherAxisSize,
       left: position
     } : {
       position: "absolute",
-      left: visible ? 0 : -1e7,
-      right: 0,
+      left: visible ? otherAxisPos : -1e7,
+      right: numColumns > 1 ? null : 0,
+      width: otherAxisSize,
       top: position
     };
   };
@@ -126,6 +132,8 @@ var Container = ({
     {
       $key: `containerPosition${id}`,
       $key2: `containerDidLayout${id}`,
+      $key3: `containerColumn${id}`,
+      $key4: "numColumns",
       $style: createStyle,
       onLayout: (event) => {
         const key = peek$(ctx, `containerItemKey${id}`);
@@ -465,6 +473,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     alignItemsAtEnd = false,
     maintainVisibleContentPosition = false,
     onScroll: onScrollProp,
+    numColumns: numColumnsProp = 1,
     keyExtractor,
     renderItem,
     estimatedItemSize,
@@ -517,6 +526,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     refState.current = {
       sizes: /* @__PURE__ */ new Map(),
       positions: /* @__PURE__ */ new Map(),
+      columns: /* @__PURE__ */ new Map(),
       pendingAdjust: 0,
       animFrameLayout: null,
       animFrameTotalSize: null,
@@ -555,12 +565,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       refState.current.scrollAdjustPending -= diff;
     }
   };
-  const addTotalSize = useCallback((key, add, set) => {
+  const addTotalSize = useCallback((key, add) => {
     const state = refState.current;
     const index = key === null ? 0 : state.indexByKey.get(key);
     const isAbove = key !== null && index < (state.startNoBuffer || 0);
     const prev = state.totalSize;
-    if (set) {
+    if (key === null) {
       state.totalSize = add;
     } else {
       state.totalSize += add;
@@ -576,7 +586,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (isAbove) {
       adjustScroll(add);
     }
-    if (!prev || set) {
+    if (!prev || key === null) {
       doAdd();
     } else if (!state.animFrameTotalSize) {
       state.animFrameTotalSize = requestAnimationFrame(doAdd);
@@ -585,7 +595,14 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   const calculateItemsInView = useCallback((speed = 0) => {
     var _a2, _b2, _c2;
     const state = refState.current;
-    const { data: data2, scrollLength, scroll: scrollState, startBuffered: startBufferedState, positions } = state;
+    const {
+      data: data2,
+      scrollLength,
+      scroll: scrollState,
+      startBuffered: startBufferedState,
+      positions,
+      columns
+    } = state;
     if (state.animFrameLayout) {
       cancelAnimationFrame(state.animFrameLayout);
       state.animFrameLayout = null;
@@ -620,13 +637,24 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
         }
       }
     }
+    const numColumns = peek$(ctx, "numColumns");
+    const loopStartMod = loopStart % numColumns;
+    if (loopStartMod > 0) {
+      loopStart -= loopStartMod;
+    }
     let top = loopStart > 0 ? positions.get(getId(loopStart)) : 0;
+    let column = 1;
+    let maxSizeInRow = 0;
     for (let i = loopStart; i < data2.length; i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data2[i]);
+      maxSizeInRow = Math.max(maxSizeInRow, size);
       if (positions.get(id) !== top) {
         positions.set(id, top);
       }
+      if (columns.get(id) !== column) {
+        columns.set(id, column);
+      }
       if (startNoBuffer === null && top + size > scroll) {
         startNoBuffer = i;
       }
@@ -643,7 +671,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           break;
         }
       }
-      top += size;
+      column++;
+      if (column > numColumns) {
+        top += maxSizeInRow;
+        column = 1;
+        maxSizeInRow = 0;
+      }
     }
     Object.assign(refState.current, {
       startBuffered,
@@ -691,6 +724,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
             numContainers++;
             set$(ctx, `containerItemKey${containerId}`, id);
             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:",
@@ -714,10 +748,15 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           const id = getId(itemIndex);
           if (!(itemKey !== id || itemIndex < startBuffered || itemIndex > endBuffered)) {
             const pos = (positions.get(id) || 0) + scrollAdjustPending;
+            const column2 = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
+            const prevColumn = peek$(ctx, `containerColumn${i}`);
             if (pos >= 0 && pos !== prevPos) {
               set$(ctx, `containerPosition${i}`, pos);
             }
+            if (column2 >= 0 && column2 !== prevColumn) {
+              set$(ctx, `containerColumn${i}`, column2);
+            }
           }
         }
       }
@@ -798,20 +837,29 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     }
   };
   const isFirst = !refState.current.renderItem;
-  if (isFirst || data !== refState.current.data) {
+  if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.data = data;
     let totalSize = 0;
     const indexByKey = /* @__PURE__ */ new Map();
+    let column = 1;
+    let maxSizeInRow = 0;
     for (let i = 0; i < data.length; i++) {
       const key = getId(i);
       indexByKey.set(key, i);
-      totalSize += getItemSize(key, i, data[i]);
+      const size = getItemSize(key, i, data[i]);
+      maxSizeInRow = Math.max(maxSizeInRow, size);
       if (maintainVisibleContentPosition && i < refState.current.startNoBuffer && !refState.current.indexByKey.has(key)) {
-        const size = getItemSize(key, i, data[i]);
-        adjustScroll(size);
+        const size2 = getItemSize(key, i, data[i]);
+        adjustScroll(size2);
+      }
+      column++;
+      if (column > numColumnsProp) {
+        totalSize += maxSizeInRow;
+        column = 1;
+        maxSizeInRow = 0;
       }
     }
-    addTotalSize(null, totalSize, true);
+    addTotalSize(null, totalSize);
     if (maintainVisibleContentPosition) {
       for (const [key, index] of refState.current.indexByKey) {
         if (index < refState.current.startNoBuffer && !indexByKey.has(key)) {
@@ -829,6 +877,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       for (let i = 0; i < numContainers; i++) {
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
+        set$(ctx, `containerColumn${i}`, -1);
       }
       calculateItemsInView();
       doMaintainScrollAtEnd(false);
@@ -838,6 +887,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   }
   refState.current.renderItem = renderItem;
   set$(ctx, "lastItemKey", getId(data[data.length - 1]));
+  set$(ctx, "numColumns", numColumnsProp);
   set$(
     ctx,
     "stylePaddingTop",
@@ -942,9 +992,10 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     refState.current.viewabilityConfigCallbackPairs = setupViewability(props);
     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);
+    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);
+      set$(ctx, `containerColumn${i}`, -1);
     }
     set$(ctx, "numContainers", numContainers);
     set$(ctx, "numContainersPooled", numContainers * 2);
@@ -956,13 +1007,35 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     if (!data2) {
       return;
     }
-    const { sizes, indexByKey, idsInFirstRender } = refState.current;
+    const { sizes, indexByKey, idsInFirstRender, columns } = refState.current;
     const index = indexByKey.get(key);
     const wasInFirstRender = idsInFirstRender.has(key);
     const prevSize = sizes.get(key) || (wasInFirstRender ? getItemSize(key, index, data2[index]) : 0);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {
-      sizes.set(key, size);
-      addTotalSize(key, size - prevSize);
+      let diff;
+      const numColumns = peek$(ctx, "numColumns");
+      if (numColumns > 1) {
+        const column = columns.get(key);
+        const loopStart = index - (column - 1);
+        let prevMaxSizeInRow = 0;
+        for (let i = loopStart; i < loopStart + numColumns; i++) {
+          const id = getId(i);
+          const size2 = getItemSize(id, i, data2[i]);
+          prevMaxSizeInRow = Math.max(prevMaxSizeInRow, size2);
+        }
+        sizes.set(key, size);
+        let nextMaxSizeInRow = 0;
+        for (let i = loopStart; i < loopStart + numColumns; i++) {
+          const id = getId(i);
+          const size2 = getItemSize(id, i, data2[i]);
+          nextMaxSizeInRow = Math.max(nextMaxSizeInRow, size2);
+        }
+        diff = nextMaxSizeInRow - prevMaxSizeInRow;
+      } else {
+        sizes.set(key, size);
+        diff = size - prevSize;
+      }
+      addTotalSize(key, diff);
       doMaintainScrollAtEnd(true);
       const state = refState.current;
       const scrollVelocity = state.scrollVelocity;

package/package.json

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