Masonry: Fix multi-column issues (#3564)

pinterest · May 13, 2024 · 734d7e3 · 734d7e3
1 parent 1e2ee9e
commit 734d7e3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.js b/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.js
@@ -613,12 +613,12 @@ const defaultTwoColumnModuleLayout = <T: { +[string]: mixed }>({
       const batchSize = multiColumnItems.length;
       const batches = Array.from({ length: batchSize }, (): $ReadOnlyArray<T> => []).map(
         (batch, i) => {
-          const startIndex = i === 0 ? 0 : items.indexOf(multiColumnItems[i]);
+          const startIndex = i === 0 ? 0 : itemsWithoutPositions.indexOf(multiColumnItems[i]);
           const endIndex =
             i + 1 === multiColumnItems.length
-              ? items.length
-              : items.indexOf(multiColumnItems[i + 1]);
-          return items.slice(startIndex, endIndex);
+              ? itemsWithoutPositions.length
+              : itemsWithoutPositions.indexOf(multiColumnItems[i + 1]);
+          return itemsWithoutPositions.slice(startIndex, endIndex);
         },
       );
       const { positions: paintedItemPositions, heights: paintedItemHeights } =

diff --git a/packages/gestalt/src/MasonryV2.js b/packages/gestalt/src/MasonryV2.js
@@ -330,7 +330,7 @@ function useLayout<T: { +[string]: mixed }>({
     items
       .filter((item) => item && !positionStore.has(item))
       .some((item) => typeof item.columnSpan === 'number' && item.columnSpan > 1);
-  const itemToMeasureCount = hasMultiColumnItems ? MULTI_COL_ITEMS_MEASURE_BATCH_SIZE : minCols;
+  const itemToMeasureCount = hasMultiColumnItems ? MULTI_COL_ITEMS_MEASURE_BATCH_SIZE + 1 : minCols;
   const layoutFunction = getLayoutAlgorithm({
     columnWidth,
     gutter,