@react-stately/layout 4.3.1 → 4.4.0

package/src/GridLayout.ts

@@ -120,11 +120,21 @@ export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> exte
     let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
     this.gap = new Size(horizontalSpacing, minSpace.height);
 
+    // If there is a skeleton loader within the last 2 items in the collection, increment the collection size
+    // so that an additional row is added for the skeletons.
     let collection = this.virtualizer!.collection;
-    // Make sure to set rows to 0 if we performing a first time load or are rendering the empty state so that Virtualizer
-    // won't try to render its body
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
-    let rows = isEmptyOrLoading ? 0 : Math.ceil(collection.size / numColumns);
+    let collectionSize = collection.size;
+    let lastKey = collection.getLastKey();
+    for (let i = 0; i < 2 && lastKey != null; i++) {
+      let item = collection.getItem(lastKey);
+      if (item?.type === 'skeleton') {
+        collectionSize++;
+        break;
+      }
+      lastKey = collection.getKeyBefore(lastKey);
+    }
+    
+    let rows = Math.ceil(collectionSize / numColumns);
     let iterator = collection[Symbol.iterator]();
     let y = rows > 0 ? minSpace.height : 0;
     let newLayoutInfos = new Map();

package/src/ListLayout.ts

@@ -251,43 +251,49 @@ export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> exte
     this.validRect = this.requestedRect.copy();
   }
 
-  protected buildCollection(y = this.padding): LayoutNode[] {
+  protected buildCollection(y: number = this.padding): LayoutNode[] {
     let collection = this.virtualizer!.collection;
-    let skipped = 0;
+    let collectionNodes = [...collection];
+    let loaderNodes = collectionNodes.filter(node => node.type === 'loader');
     let nodes: LayoutNode[] = [];
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    let isEmptyOrLoading = collection?.size === 0;
     if (isEmptyOrLoading) {
       y = 0;
     }
 
-    for (let node of collection) {
+    for (let node of collectionNodes) {
       let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT) + this.gap;
       // Skip rows before the valid rectangle unless they are already cached.
       if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
         y += rowHeight;
-        skipped++;
         continue;
       }
 
       let layoutNode = this.buildChild(node, this.padding, y, null);
       y = layoutNode.layoutInfo.rect.maxY + this.gap;
       nodes.push(layoutNode);
-      if (node.type === 'item' && y > this.requestedRect.maxY) {
-        let itemsAfterRect = collection.size - (nodes.length + skipped);
-        let lastNode = collection.getItem(collection.getLastKey()!);
-        if (lastNode?.type === 'loader') {
-          itemsAfterRect--;
-        }
-
-        y += itemsAfterRect * rowHeight;
+      if (node.type === 'loader') {
+        let index = loaderNodes.indexOf(node);
+        loaderNodes.splice(index, 1);
+      }
 
-        // Always add the loader sentinel if present. This assumes the loader is the last option/row
-        // will need to refactor when handling multi section loading
-        if (lastNode?.type === 'loader' && nodes.at(-1)?.layoutInfo.type !== 'loader') {
-          let loader = this.buildChild(lastNode, this.padding, y, null);
+      // Build each loader that exists in the collection that is outside the visible rect so that they are persisted
+      // at the proper estimated location. If the node.type is "section" then we don't do this shortcut since we have to
+      // build the sections to see how tall they are.
+      if ((node.type === 'item' || node.type === 'loader') && y > this.requestedRect.maxY) {
+        let lastProcessedIndex = collectionNodes.indexOf(node);
+        for (let loaderNode of loaderNodes) {
+          let loaderNodeIndex = collectionNodes.indexOf(loaderNode);
+          // Subtract by an additional 1 since we've already added the current item's height to y
+          y += (loaderNodeIndex - lastProcessedIndex - 1) * rowHeight;
+          let loader = this.buildChild(loaderNode, this.padding, y, null);
           nodes.push(loader);
           y = loader.layoutInfo.rect.maxY;
+          lastProcessedIndex = loaderNodeIndex;
         }
+
+        // Account for the rest of the items after the last loader spinner, subtract by 1 since we've processed the current node's height already
+        y += (collectionNodes.length - lastProcessedIndex - 1) * rowHeight;
         break;
       }
     }
@@ -585,8 +591,24 @@ export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> exte
     let layoutInfo = this.getLayoutInfo(target.key)!;
     let rect: Rect;
     if (target.dropPosition === 'before') {
-      rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.y - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+      rect = new Rect(layoutInfo.rect.x, Math.max(0, layoutInfo.rect.y - this.dropIndicatorThickness / 2), layoutInfo.rect.width, this.dropIndicatorThickness);
     } else if (target.dropPosition === 'after') {
+      // Render after last visible descendant of the drop target.
+      let targetNode = this.collection.getItem(target.key);
+      if (targetNode) {
+        let targetLevel = targetNode.level ?? 0;
+        let currentKey = this.collection.getKeyAfter(target.key);
+
+        while (currentKey != null) {
+          let node = this.collection.getItem(currentKey);
+          if (!node || node.level <= targetLevel) {
+            break;
+          }
+
+          layoutInfo = this.getLayoutInfo(currentKey) || layoutInfo;
+          currentKey = this.collection.getKeyAfter(currentKey);
+        }
+      }
       rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
     } else {
       rect = layoutInfo.rect;

package/src/TableLayout.ts

@@ -68,9 +68,12 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     // If columnWidths were provided via layoutOptions, update those.
     // Otherwise, calculate column widths ourselves.
     if (invalidationContext.layoutOptions?.columnWidths) {
-      if (invalidationContext.layoutOptions.columnWidths !== this.columnWidths) {
-        this.columnWidths = invalidationContext.layoutOptions.columnWidths;
-        invalidationContext.sizeChanged = true;
+      for (const [key, val] of invalidationContext.layoutOptions.columnWidths) {
+        if (this.columnWidths.get(key) !== val) {
+          this.columnWidths = invalidationContext.layoutOptions.columnWidths;
+          invalidationContext.sizeChanged = true;
+          break;
+        }
       }
     } else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
       let columnLayout = new TableColumnLayout({});
@@ -274,9 +277,6 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
       if (y > this.requestedRect.maxY) {
         let rowsAfterRect = collection.size - (children.length + skipped);
         let lastNode = getLastItem(childNodes);
-        if (lastNode?.type === 'loader') {
-          rowsAfterRect--;
-        }
 
         // Estimate the remaining height for rows that we don't need to layout right now.
         y += rowsAfterRect * rowHeight;
@@ -296,7 +296,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     }
 
     // Make sure that the table body gets a height if empty or performing initial load
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    let isEmptyOrLoading = collection?.size === 0;
     if (isEmptyOrLoading) {
       y = this.virtualizer!.visibleRect.maxY;
     } else {

package/src/WaterfallLayout.ts

@@ -169,8 +169,9 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
       newLayoutInfos.set(lastNode.key, layoutInfo);
     }
 
-    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,
+    // except if we are performing skeleton loading
+    let isEmptyOrLoading = collection?.size === 0 && collection.getItem(collection.getFirstKey()!)?.type !== 'skeleton';
     let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);
     this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);
     this.layoutInfos = newLayoutInfos;