@react-stately/layout - npm Package Compare versions

Comparing version 3.13.10-nightly.4685 to 3.13.10-nightly.4691

dist/ListLayout.main.js

@@ -25,4 +25,5 @@ var $iId4j$reactstatelycollections = require("@react-stately/collections");
     getLayoutInfo(key) {
+        var _this_layoutNodes_get;
         this.ensureLayoutInfo(key);
-        return this.layoutInfos.get(key);
+        return ((_this_layoutNodes_get = this.layoutNodes.get(key)) === null || _this_layoutNodes_get === void 0 ? void 0 : _this_layoutNodes_get.layoutInfo) || null;
     }
@@ -45,3 +46,2 @@ getVisibleLayoutInfos(rect) {
                 res.push(node.layoutInfo);
-                if (node.header) res.push(node.header);
                 if (node.children) addNodes(node.children);
@@ -67,3 +67,3 @@ }
         // Compute the full layout and try again.
-        if (!this.layoutInfos.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
+        if (!this.layoutNodes.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
             this.requestedRect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(0, 0, Infinity, Infinity);
@@ -77,3 +77,3 @@ this.rootNodes = this.buildCollection();
     isVisible(node, rect) {
-        return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || this.virtualizer.isPersistedKey(node.layoutInfo.key);
+        return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer.isPersistedKey(node.layoutInfo.key);
     }
@@ -86,5 +86,3 @@ shouldInvalidateEverything(invalidationContext) {
     validate(invalidationContext) {
-        var _invalidationContext_layoutOptions;
         this.collection = this.virtualizer.collection;
-        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
         // Reset valid rect if we will have to invalidate everything.
@@ -99,8 +97,3 @@ // Otherwise we can reuse cached layout infos outside the current visible rect.
                 let layoutNode = this.layoutNodes.get(key);
-                if (layoutNode) {
-                    var _layoutNode_header;
-                    this.layoutInfos.delete(layoutNode.layoutInfo.key);
-                    this.layoutInfos.delete((_layoutNode_header = layoutNode.header) === null || _layoutNode_header === void 0 ? void 0 : _layoutNode_header.key);
-                    this.layoutNodes.delete(key);
-                }
+                if (layoutNode) this.layoutNodes.delete(key);
             }
@@ -113,4 +106,3 @@ }
     }
-    buildCollection() {
-        let y = this.padding;
+    buildCollection(y = 0) {
         let skipped = 0;
@@ -135,23 +127,3 @@ let nodes = [];
         }
-        if (this.isLoading) {
-            var _this_loaderHeight;
-            let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, (_this_loaderHeight = this.loaderHeight) !== null && _this_loaderHeight !== void 0 ? _this_loaderHeight : this.virtualizer.visibleRect.height);
-            let loader = new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)('loader', 'loader', rect);
-            this.layoutInfos.set('loader', loader);
-            nodes.push({
-                layoutInfo: loader
-            });
-            y = loader.rect.maxY;
-        }
-        if (nodes.length === 0 && this.enableEmptyState) {
-            var _this_placeholderHeight;
-            let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(0, y, this.virtualizer.visibleRect.width, (_this_placeholderHeight = this.placeholderHeight) !== null && _this_placeholderHeight !== void 0 ? _this_placeholderHeight : this.virtualizer.visibleRect.height);
-            let placeholder = new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)('placeholder', 'placeholder', rect);
-            this.layoutInfos.set('placeholder', placeholder);
-            nodes.push({
-                layoutInfo: placeholder
-            });
-            y = placeholder.rect.maxY;
-        }
-        this.contentSize = new (0, $iId4j$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, y + this.padding);
+        this.contentSize = new (0, $iId4j$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, y);
         return nodes;
@@ -161,3 +133,3 @@ }
         let cached = this.layoutNodes.get(node.key);
-        return !this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y && cached.layoutInfo.rect.intersects(this.validRect) && cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect));
+        return !this.invalidateEverything && cached && cached.node === node && y === cached.layoutInfo.rect.y && cached.layoutInfo.rect.intersects(this.validRect) && cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect));
     }
@@ -169,4 +141,2 @@ buildChild(node, x, y, parentKey) {
         layoutNode.layoutInfo.parentKey = parentKey !== null && parentKey !== void 0 ? parentKey : null;
-        this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
-        if (layoutNode.header) this.layoutInfos.set(layoutNode.header.key, layoutNode.header);
         this.layoutNodes.set(node.key, layoutNode);
@@ -187,10 +157,2 @@ return layoutNode;
         let width = this.virtualizer.visibleRect.width;
-        let header = null;
-        if (node.rendered || this.forceSectionHeaders) {
-            let headerNode = this.buildSectionHeader(node, x, y);
-            header = headerNode.layoutInfo;
-            header.key += ':header';
-            header.parentKey = node.key;
-            y += header.rect.height;
-        }
         let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(0, y, width, 0);
@@ -223,3 +185,2 @@ let layoutInfo = new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);
         return {
-            header: header,
             layoutInfo: layoutInfo,
@@ -240,3 +201,3 @@ children: children,
             let previousLayoutNode = this.layoutNodes.get(node.key);
-            let previousLayoutInfo = (previousLayoutNode === null || previousLayoutNode === void 0 ? void 0 : previousLayoutNode.header) || (previousLayoutNode === null || previousLayoutNode === void 0 ? void 0 : previousLayoutNode.layoutInfo);
+            let previousLayoutInfo = previousLayoutNode === null || previousLayoutNode === void 0 ? void 0 : previousLayoutNode.layoutInfo;
             if (previousLayoutInfo) {
@@ -281,7 +242,4 @@ let curNode = this.collection.getItem(node.key);
         if (rectHeight == null) rectHeight = $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT;
-        if (typeof this.indentationForItem === 'function') x += this.indentationForItem(this.collection, node.key) || 0;
         let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(x, y, width - x, rectHeight);
         let layoutInfo = new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);
-        // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
-        layoutInfo.allowOverflow = true;
         layoutInfo.estimatedSize = isEstimated;
@@ -294,5 +252,6 @@ return {
     updateItemSize(key, size) {
-        let layoutInfo = this.layoutInfos.get(key);
+        let layoutNode = this.layoutNodes.get(key);
         // If no layoutInfo, item has been deleted/removed.
-        if (!layoutInfo) return false;
+        if (!layoutNode) return false;
+        let layoutInfo = layoutNode.layoutInfo;
         layoutInfo.estimatedSize = false;
@@ -303,3 +262,3 @@ if (layoutInfo.rect.height !== size.height) {
             newLayoutInfo.rect.height = size.height;
-            this.layoutInfos.set(key, newLayoutInfo);
+            layoutNode.layoutInfo = newLayoutInfo;
             // Items after this layoutInfo will need to be repositioned to account for the new height.
@@ -327,4 +286,3 @@ // Adjust the validRect so that only items above remain valid.
             // Replace layout info in LayoutNode
-            if (n.header === oldLayoutInfo) n.header = newLayoutInfo;
-            else if (n.layoutInfo === oldLayoutInfo) n.layoutInfo = newLayoutInfo;
+            if (n.layoutInfo === oldLayoutInfo) n.layoutInfo = newLayoutInfo;
         }
@@ -380,9 +338,2 @@ }
         this.estimatedHeadingHeight = options.estimatedHeadingHeight;
-        this.forceSectionHeaders = options.forceSectionHeaders;
-        this.padding = options.padding || 0;
-        this.indentationForItem = options.indentationForItem;
-        this.loaderHeight = options.loaderHeight;
-        this.placeholderHeight = options.placeholderHeight;
-        this.enableEmptyState = options.enableEmptyState || false;
-        this.layoutInfos = new Map();
         this.layoutNodes = new Map();
@@ -389,0 +340,0 @@ this.rootNodes = [];

dist/ListLayout.module.js

 import {getChildNodes as $img26$getChildNodes} from "@react-stately/collections";
-import {Rect as $img26$Rect, LayoutInfo as $img26$LayoutInfo, Size as $img26$Size, Point as $img26$Point, Layout as $img26$Layout} from "@react-stately/virtualizer";
+import {Rect as $img26$Rect, Size as $img26$Size, LayoutInfo as $img26$LayoutInfo, Point as $img26$Point, Layout as $img26$Layout} from "@react-stately/virtualizer";
 
@@ -19,4 +19,5 @@ /*
     getLayoutInfo(key) {
+        var _this_layoutNodes_get;
         this.ensureLayoutInfo(key);
-        return this.layoutInfos.get(key);
+        return ((_this_layoutNodes_get = this.layoutNodes.get(key)) === null || _this_layoutNodes_get === void 0 ? void 0 : _this_layoutNodes_get.layoutInfo) || null;
     }
@@ -39,3 +40,2 @@ getVisibleLayoutInfos(rect) {
                 res.push(node.layoutInfo);
-                if (node.header) res.push(node.header);
                 if (node.children) addNodes(node.children);
@@ -61,3 +61,3 @@ }
         // Compute the full layout and try again.
-        if (!this.layoutInfos.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
+        if (!this.layoutNodes.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
             this.requestedRect = new (0, $img26$Rect)(0, 0, Infinity, Infinity);
@@ -71,3 +71,3 @@ this.rootNodes = this.buildCollection();
     isVisible(node, rect) {
-        return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || this.virtualizer.isPersistedKey(node.layoutInfo.key);
+        return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer.isPersistedKey(node.layoutInfo.key);
     }
@@ -80,5 +80,3 @@ shouldInvalidateEverything(invalidationContext) {
     validate(invalidationContext) {
-        var _invalidationContext_layoutOptions;
         this.collection = this.virtualizer.collection;
-        this.isLoading = ((_invalidationContext_layoutOptions = invalidationContext.layoutOptions) === null || _invalidationContext_layoutOptions === void 0 ? void 0 : _invalidationContext_layoutOptions.isLoading) || false;
         // Reset valid rect if we will have to invalidate everything.
@@ -93,8 +91,3 @@ // Otherwise we can reuse cached layout infos outside the current visible rect.
                 let layoutNode = this.layoutNodes.get(key);
-                if (layoutNode) {
-                    var _layoutNode_header;
-                    this.layoutInfos.delete(layoutNode.layoutInfo.key);
-                    this.layoutInfos.delete((_layoutNode_header = layoutNode.header) === null || _layoutNode_header === void 0 ? void 0 : _layoutNode_header.key);
-                    this.layoutNodes.delete(key);
-                }
+                if (layoutNode) this.layoutNodes.delete(key);
             }
@@ -107,4 +100,3 @@ }
     }
-    buildCollection() {
-        let y = this.padding;
+    buildCollection(y = 0) {
         let skipped = 0;
@@ -129,23 +121,3 @@ let nodes = [];
         }
-        if (this.isLoading) {
-            var _this_loaderHeight;
-            let rect = new (0, $img26$Rect)(0, y, this.virtualizer.visibleRect.width, (_this_loaderHeight = this.loaderHeight) !== null && _this_loaderHeight !== void 0 ? _this_loaderHeight : this.virtualizer.visibleRect.height);
-            let loader = new (0, $img26$LayoutInfo)('loader', 'loader', rect);
-            this.layoutInfos.set('loader', loader);
-            nodes.push({
-                layoutInfo: loader
-            });
-            y = loader.rect.maxY;
-        }
-        if (nodes.length === 0 && this.enableEmptyState) {
-            var _this_placeholderHeight;
-            let rect = new (0, $img26$Rect)(0, y, this.virtualizer.visibleRect.width, (_this_placeholderHeight = this.placeholderHeight) !== null && _this_placeholderHeight !== void 0 ? _this_placeholderHeight : this.virtualizer.visibleRect.height);
-            let placeholder = new (0, $img26$LayoutInfo)('placeholder', 'placeholder', rect);
-            this.layoutInfos.set('placeholder', placeholder);
-            nodes.push({
-                layoutInfo: placeholder
-            });
-            y = placeholder.rect.maxY;
-        }
-        this.contentSize = new (0, $img26$Size)(this.virtualizer.visibleRect.width, y + this.padding);
+        this.contentSize = new (0, $img26$Size)(this.virtualizer.visibleRect.width, y);
         return nodes;
@@ -155,3 +127,3 @@ }
         let cached = this.layoutNodes.get(node.key);
-        return !this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y && cached.layoutInfo.rect.intersects(this.validRect) && cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect));
+        return !this.invalidateEverything && cached && cached.node === node && y === cached.layoutInfo.rect.y && cached.layoutInfo.rect.intersects(this.validRect) && cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect));
     }
@@ -163,4 +135,2 @@ buildChild(node, x, y, parentKey) {
         layoutNode.layoutInfo.parentKey = parentKey !== null && parentKey !== void 0 ? parentKey : null;
-        this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
-        if (layoutNode.header) this.layoutInfos.set(layoutNode.header.key, layoutNode.header);
         this.layoutNodes.set(node.key, layoutNode);
@@ -181,10 +151,2 @@ return layoutNode;
         let width = this.virtualizer.visibleRect.width;
-        let header = null;
-        if (node.rendered || this.forceSectionHeaders) {
-            let headerNode = this.buildSectionHeader(node, x, y);
-            header = headerNode.layoutInfo;
-            header.key += ':header';
-            header.parentKey = node.key;
-            y += header.rect.height;
-        }
         let rect = new (0, $img26$Rect)(0, y, width, 0);
@@ -217,3 +179,2 @@ let layoutInfo = new (0, $img26$LayoutInfo)(node.type, node.key, rect);
         return {
-            header: header,
             layoutInfo: layoutInfo,
@@ -234,3 +195,3 @@ children: children,
             let previousLayoutNode = this.layoutNodes.get(node.key);
-            let previousLayoutInfo = (previousLayoutNode === null || previousLayoutNode === void 0 ? void 0 : previousLayoutNode.header) || (previousLayoutNode === null || previousLayoutNode === void 0 ? void 0 : previousLayoutNode.layoutInfo);
+            let previousLayoutInfo = previousLayoutNode === null || previousLayoutNode === void 0 ? void 0 : previousLayoutNode.layoutInfo;
             if (previousLayoutInfo) {
@@ -275,7 +236,4 @@ let curNode = this.collection.getItem(node.key);
         if (rectHeight == null) rectHeight = $61ef60fc9b1041f4$var$DEFAULT_HEIGHT;
-        if (typeof this.indentationForItem === 'function') x += this.indentationForItem(this.collection, node.key) || 0;
         let rect = new (0, $img26$Rect)(x, y, width - x, rectHeight);
         let layoutInfo = new (0, $img26$LayoutInfo)(node.type, node.key, rect);
-        // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
-        layoutInfo.allowOverflow = true;
         layoutInfo.estimatedSize = isEstimated;
@@ -288,5 +246,6 @@ return {
     updateItemSize(key, size) {
-        let layoutInfo = this.layoutInfos.get(key);
+        let layoutNode = this.layoutNodes.get(key);
         // If no layoutInfo, item has been deleted/removed.
-        if (!layoutInfo) return false;
+        if (!layoutNode) return false;
+        let layoutInfo = layoutNode.layoutInfo;
         layoutInfo.estimatedSize = false;
@@ -297,3 +256,3 @@ if (layoutInfo.rect.height !== size.height) {
             newLayoutInfo.rect.height = size.height;
-            this.layoutInfos.set(key, newLayoutInfo);
+            layoutNode.layoutInfo = newLayoutInfo;
             // Items after this layoutInfo will need to be repositioned to account for the new height.
@@ -321,4 +280,3 @@ // Adjust the validRect so that only items above remain valid.
             // Replace layout info in LayoutNode
-            if (n.header === oldLayoutInfo) n.header = newLayoutInfo;
-            else if (n.layoutInfo === oldLayoutInfo) n.layoutInfo = newLayoutInfo;
+            if (n.layoutInfo === oldLayoutInfo) n.layoutInfo = newLayoutInfo;
         }
@@ -374,9 +332,2 @@ }
         this.estimatedHeadingHeight = options.estimatedHeadingHeight;
-        this.forceSectionHeaders = options.forceSectionHeaders;
-        this.padding = options.padding || 0;
-        this.indentationForItem = options.indentationForItem;
-        this.loaderHeight = options.loaderHeight;
-        this.placeholderHeight = options.placeholderHeight;
-        this.enableEmptyState = options.enableEmptyState || false;
-        this.layoutInfos = new Map();
         this.layoutNodes = new Map();
@@ -383,0 +334,0 @@ this.rootNodes = [];

dist/TableLayout.main.js

@@ -48,11 +48,9 @@ var $fe69e47e38ed0ac4$exports = require("./ListLayout.main.js");
     buildCollection() {
-        // Track whether we were previously loading. This is used to adjust the animations of async loading vs inserts.
-        let loadingState = this.collection.body.props.loadingState;
-        this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
         this.stickyColumnIndices = [];
         for (let column of this.collection.columns)// The selection cell and any other sticky columns always need to be visible.
         // In addition, row headers need to be in the DOM for accessibility labeling.
-        if (column.props.isDragButtonCell || column.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(column.key)) this.stickyColumnIndices.push(column.index);
-        let header = this.buildColumnHeader();
-        let body = this.buildBody(this.scrollContainer === 'body' ? 0 : header.layoutInfo.rect.height);
+        if (this.isStickyColumn(column) || this.collection.rowHeaderColumnKeys.has(column.key)) this.stickyColumnIndices.push(column.index);
+        let header = this.buildTableHeader();
+        this.layoutNodes.set(header.layoutInfo.key, header);
+        let body = this.buildBody(header.layoutInfo.rect.height);
         this.lastPersistedKeys = null;
@@ -66,3 +64,3 @@ body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
     }
-    buildColumnHeader() {
+    buildTableHeader() {
         var _this_collection_head;
@@ -87,3 +85,2 @@ let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(0, 0, 0, 0);
         rect.height = y;
-        this.layoutInfos.set(layoutInfo.key, layoutInfo);
         return {
@@ -122,3 +119,2 @@ layoutInfo: layoutInfo,
             child.layoutInfo = child.layoutInfo.copy();
-            this.layoutInfos.set(child.layoutInfo.key, child.layoutInfo);
             child.layoutInfo.rect.height = height;
@@ -161,4 +157,7 @@ }
     }
+    getEstimatedRowHeight() {
+        var _this_rowHeight;
+        return (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
+    }
     buildColumn(node, x, y) {
-        var _node_props, _node_props1;
         let width = this.getRenderedColumnWidth(node);
@@ -168,6 +167,5 @@ let { height: height, isEstimated: isEstimated } = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
         let layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);
-        layoutInfo.isSticky = !this.disableSticky && (((_node_props = node.props) === null || _node_props === void 0 ? void 0 : _node_props.isDragButtonCell) || ((_node_props1 = node.props) === null || _node_props1 === void 0 ? void 0 : _node_props1.isSelectionCell));
+        layoutInfo.isSticky = this.isStickyColumn(node);
         layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
         layoutInfo.estimatedSize = isEstimated;
-        layoutInfo.allowOverflow = true;
         return {
@@ -178,2 +176,7 @@ layoutInfo: layoutInfo,
     }
+    // For subclasses.
+    // eslint-disable-next-line
+    isStickyColumn(node) {
+        return false;
+    }
     buildBody(y) {
@@ -186,7 +189,6 @@ let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(0, y, 0, 0);
         let children = [];
+        let rowHeight = this.getEstimatedRowHeight();
         for (let [i, node] of [
             ...(0, $9lycG$reactstatelycollections.getChildNodes)(this.collection.body, this.collection)
         ].entries()){
-            var _this_rowHeight;
-            let rowHeight = ((_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) + 1;
             // Skip rows before the valid rectangle unless they are already cached.
@@ -210,33 +212,5 @@ if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
         }
-        if (this.isLoading) {
-            // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
-            let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(40, Math.max(y, 40), (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
-            let loader = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('loader', 'loader', rect);
-            loader.parentKey = layoutInfo.key;
-            loader.isSticky = !this.disableSticky && children.length === 0;
-            this.layoutInfos.set('loader', loader);
-            children.push({
-                layoutInfo: loader,
-                validRect: loader.rect
-            });
-            y = loader.rect.maxY;
-            width = Math.max(width, rect.width);
-        } else if (children.length === 0) {
-            if (this.enableEmptyState) {
-                let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(40, Math.max(y, 40), this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
-                let empty = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('empty', 'empty', rect);
-                empty.parentKey = layoutInfo.key;
-                empty.isSticky = !this.disableSticky;
-                this.layoutInfos.set('empty', empty);
-                children.push({
-                    layoutInfo: empty,
-                    validRect: empty.rect
-                });
-                y = empty.rect.maxY;
-                width = Math.max(width, rect.width);
-            } else y = this.virtualizer.visibleRect.maxY;
-        }
+        if (children.length === 0) y = this.virtualizer.visibleRect.maxY;
         rect.width = width;
         rect.height = y - startY;
-        this.layoutInfos.set(layoutInfo.key, layoutInfo);
         return {
@@ -290,4 +264,4 @@ layoutInfo: layoutInfo,
         var _this_collection_head_key;
-        rect.width = this.layoutInfos.get((_this_collection_head_key = (_this_collection_head = this.collection.head) === null || _this_collection_head === void 0 ? void 0 : _this_collection_head.key) !== null && _this_collection_head_key !== void 0 ? _this_collection_head_key : 'header').rect.width;
-        rect.height = height + 1; // +1 for bottom border
+        rect.width = this.layoutNodes.get((_this_collection_head_key = (_this_collection_head = this.collection.head) === null || _this_collection_head === void 0 ? void 0 : _this_collection_head.key) !== null && _this_collection_head_key !== void 0 ? _this_collection_head_key : 'header').layoutInfo.rect.width;
+        rect.height = height;
         return {
@@ -300,3 +274,2 @@ layoutInfo: layoutInfo,
     buildCell(node, x, y) {
-        var _node_props, _node_props1;
         let width = this.getRenderedColumnWidth(node);
@@ -306,3 +279,3 @@ let { height: height, isEstimated: isEstimated } = this.getEstimatedHeight(node, width, this.rowHeight, this.estimatedRowHeight);
         let layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);
-        layoutInfo.isSticky = !this.disableSticky && (((_node_props = node.props) === null || _node_props === void 0 ? void 0 : _node_props.isDragButtonCell) || ((_node_props1 = node.props) === null || _node_props1 === void 0 ? void 0 : _node_props1.isSelectionCell));
+        layoutInfo.isSticky = this.isStickyColumn(node);
         layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
@@ -319,4 +292,3 @@ layoutInfo.estimatedSize = isEstimated;
         if (rect.height > 1) {
-            var _this_rowHeight;
-            let rowHeight = ((_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) + 1; // +1 for border
+            let rowHeight = this.getEstimatedRowHeight();
             rect.y = Math.floor(rect.y / rowHeight) * rowHeight;
@@ -423,5 +395,7 @@ rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;
         for (let key of this.virtualizer.persistedKeys){
-            let layoutInfo = this.layoutInfos.get(key);
+            var _this_layoutNodes_get;
+            let layoutInfo = (_this_layoutNodes_get = this.layoutNodes.get(key)) === null || _this_layoutNodes_get === void 0 ? void 0 : _this_layoutNodes_get.layoutInfo;
             // Walk up ancestors so parents are also persisted if children are.
             while(layoutInfo && layoutInfo.parentKey){
+                var _this_layoutNodes_get1;
                 let collectionNode = this.collection.getItem(layoutInfo.key);
@@ -438,3 +412,3 @@ let indices = this.persistedIndices.get(layoutInfo.parentKey);
                 if (!indices.includes(index)) indices.push(index);
-                layoutInfo = this.layoutInfos.get(layoutInfo.parentKey);
+                layoutInfo = (_this_layoutNodes_get1 = this.layoutNodes.get(layoutInfo.parentKey)) === null || _this_layoutNodes_get1 === void 0 ? void 0 : _this_layoutNodes_get1.layoutInfo;
             }
@@ -444,15 +418,2 @@ }
     }
-    // Checks if Chrome version is 105 or greater
-    checkChrome105() {
-        var _window_navigator_userAgentData;
-        if (typeof window === 'undefined' || window.navigator == null) return false;
-        let isChrome105;
-        if (window.navigator['userAgentData']) isChrome105 = (_window_navigator_userAgentData = window.navigator['userAgentData']) === null || _window_navigator_userAgentData === void 0 ? void 0 : _window_navigator_userAgentData.brands.some((b)=>b.brand === 'Chromium' && Number(b.version) === 105);
-        else {
-            let regex = /Chrome\/(\d+)/;
-            let matches = regex.exec(window.navigator.userAgent);
-            isChrome105 = matches && matches.length >= 2 && Number(matches[1]) === 105;
-        }
-        return isChrome105;
-    }
     getDropTargetFromPoint(x, y, isValidDropTarget) {
@@ -506,8 +467,5 @@ var _this_virtualizer_layout_getVisibleLayoutInfos_find;
         super(options);
-        this.isLoading = false;
         this.lastPersistedKeys = null;
         this.persistedIndices = new Map();
-        this.scrollContainer = options.scrollContainer || 'table';
         this.stickyColumnIndices = [];
-        this.disableSticky = this.checkChrome105();
     }
@@ -514,0 +472,0 @@ }

dist/TableLayout.module.js

@@ -42,11 +42,9 @@ import {ListLayout as $61ef60fc9b1041f4$export$cacbb3924155d68e} from "./ListLayout.module.js";
     buildCollection() {
-        // Track whether we were previously loading. This is used to adjust the animations of async loading vs inserts.
-        let loadingState = this.collection.body.props.loadingState;
-        this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
         this.stickyColumnIndices = [];
         for (let column of this.collection.columns)// The selection cell and any other sticky columns always need to be visible.
         // In addition, row headers need to be in the DOM for accessibility labeling.
-        if (column.props.isDragButtonCell || column.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(column.key)) this.stickyColumnIndices.push(column.index);
-        let header = this.buildColumnHeader();
-        let body = this.buildBody(this.scrollContainer === 'body' ? 0 : header.layoutInfo.rect.height);
+        if (this.isStickyColumn(column) || this.collection.rowHeaderColumnKeys.has(column.key)) this.stickyColumnIndices.push(column.index);
+        let header = this.buildTableHeader();
+        this.layoutNodes.set(header.layoutInfo.key, header);
+        let body = this.buildBody(header.layoutInfo.rect.height);
         this.lastPersistedKeys = null;
@@ -60,3 +58,3 @@ body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
     }
-    buildColumnHeader() {
+    buildTableHeader() {
         var _this_collection_head;
@@ -81,3 +79,2 @@ let rect = new (0, $bmsJv$Rect)(0, 0, 0, 0);
         rect.height = y;
-        this.layoutInfos.set(layoutInfo.key, layoutInfo);
         return {
@@ -116,3 +113,2 @@ layoutInfo: layoutInfo,
             child.layoutInfo = child.layoutInfo.copy();
-            this.layoutInfos.set(child.layoutInfo.key, child.layoutInfo);
             child.layoutInfo.rect.height = height;
@@ -155,4 +151,7 @@ }
     }
+    getEstimatedRowHeight() {
+        var _this_rowHeight;
+        return (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
+    }
     buildColumn(node, x, y) {
-        var _node_props, _node_props1;
         let width = this.getRenderedColumnWidth(node);
@@ -162,6 +161,5 @@ let { height: height, isEstimated: isEstimated } = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
         let layoutInfo = new (0, $bmsJv$LayoutInfo)(node.type, node.key, rect);
-        layoutInfo.isSticky = !this.disableSticky && (((_node_props = node.props) === null || _node_props === void 0 ? void 0 : _node_props.isDragButtonCell) || ((_node_props1 = node.props) === null || _node_props1 === void 0 ? void 0 : _node_props1.isSelectionCell));
+        layoutInfo.isSticky = this.isStickyColumn(node);
         layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
         layoutInfo.estimatedSize = isEstimated;
-        layoutInfo.allowOverflow = true;
         return {
@@ -172,2 +170,7 @@ layoutInfo: layoutInfo,
     }
+    // For subclasses.
+    // eslint-disable-next-line
+    isStickyColumn(node) {
+        return false;
+    }
     buildBody(y) {
@@ -180,7 +183,6 @@ let rect = new (0, $bmsJv$Rect)(0, y, 0, 0);
         let children = [];
+        let rowHeight = this.getEstimatedRowHeight();
         for (let [i, node] of [
             ...(0, $bmsJv$getChildNodes)(this.collection.body, this.collection)
         ].entries()){
-            var _this_rowHeight;
-            let rowHeight = ((_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) + 1;
             // Skip rows before the valid rectangle unless they are already cached.
@@ -204,33 +206,5 @@ if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
         }
-        if (this.isLoading) {
-            // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
-            let rect = new (0, $bmsJv$Rect)(40, Math.max(y, 40), (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
-            let loader = new (0, $bmsJv$LayoutInfo)('loader', 'loader', rect);
-            loader.parentKey = layoutInfo.key;
-            loader.isSticky = !this.disableSticky && children.length === 0;
-            this.layoutInfos.set('loader', loader);
-            children.push({
-                layoutInfo: loader,
-                validRect: loader.rect
-            });
-            y = loader.rect.maxY;
-            width = Math.max(width, rect.width);
-        } else if (children.length === 0) {
-            if (this.enableEmptyState) {
-                let rect = new (0, $bmsJv$Rect)(40, Math.max(y, 40), this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
-                let empty = new (0, $bmsJv$LayoutInfo)('empty', 'empty', rect);
-                empty.parentKey = layoutInfo.key;
-                empty.isSticky = !this.disableSticky;
-                this.layoutInfos.set('empty', empty);
-                children.push({
-                    layoutInfo: empty,
-                    validRect: empty.rect
-                });
-                y = empty.rect.maxY;
-                width = Math.max(width, rect.width);
-            } else y = this.virtualizer.visibleRect.maxY;
-        }
+        if (children.length === 0) y = this.virtualizer.visibleRect.maxY;
         rect.width = width;
         rect.height = y - startY;
-        this.layoutInfos.set(layoutInfo.key, layoutInfo);
         return {
@@ -284,4 +258,4 @@ layoutInfo: layoutInfo,
         var _this_collection_head_key;
-        rect.width = this.layoutInfos.get((_this_collection_head_key = (_this_collection_head = this.collection.head) === null || _this_collection_head === void 0 ? void 0 : _this_collection_head.key) !== null && _this_collection_head_key !== void 0 ? _this_collection_head_key : 'header').rect.width;
-        rect.height = height + 1; // +1 for bottom border
+        rect.width = this.layoutNodes.get((_this_collection_head_key = (_this_collection_head = this.collection.head) === null || _this_collection_head === void 0 ? void 0 : _this_collection_head.key) !== null && _this_collection_head_key !== void 0 ? _this_collection_head_key : 'header').layoutInfo.rect.width;
+        rect.height = height;
         return {
@@ -294,3 +268,2 @@ layoutInfo: layoutInfo,
     buildCell(node, x, y) {
-        var _node_props, _node_props1;
         let width = this.getRenderedColumnWidth(node);
@@ -300,3 +273,3 @@ let { height: height, isEstimated: isEstimated } = this.getEstimatedHeight(node, width, this.rowHeight, this.estimatedRowHeight);
         let layoutInfo = new (0, $bmsJv$LayoutInfo)(node.type, node.key, rect);
-        layoutInfo.isSticky = !this.disableSticky && (((_node_props = node.props) === null || _node_props === void 0 ? void 0 : _node_props.isDragButtonCell) || ((_node_props1 = node.props) === null || _node_props1 === void 0 ? void 0 : _node_props1.isSelectionCell));
+        layoutInfo.isSticky = this.isStickyColumn(node);
         layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
@@ -313,4 +286,3 @@ layoutInfo.estimatedSize = isEstimated;
         if (rect.height > 1) {
-            var _this_rowHeight;
-            let rowHeight = ((_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) + 1; // +1 for border
+            let rowHeight = this.getEstimatedRowHeight();
             rect.y = Math.floor(rect.y / rowHeight) * rowHeight;
@@ -417,5 +389,7 @@ rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;
         for (let key of this.virtualizer.persistedKeys){
-            let layoutInfo = this.layoutInfos.get(key);
+            var _this_layoutNodes_get;
+            let layoutInfo = (_this_layoutNodes_get = this.layoutNodes.get(key)) === null || _this_layoutNodes_get === void 0 ? void 0 : _this_layoutNodes_get.layoutInfo;
             // Walk up ancestors so parents are also persisted if children are.
             while(layoutInfo && layoutInfo.parentKey){
+                var _this_layoutNodes_get1;
                 let collectionNode = this.collection.getItem(layoutInfo.key);
@@ -432,3 +406,3 @@ let indices = this.persistedIndices.get(layoutInfo.parentKey);
                 if (!indices.includes(index)) indices.push(index);
-                layoutInfo = this.layoutInfos.get(layoutInfo.parentKey);
+                layoutInfo = (_this_layoutNodes_get1 = this.layoutNodes.get(layoutInfo.parentKey)) === null || _this_layoutNodes_get1 === void 0 ? void 0 : _this_layoutNodes_get1.layoutInfo;
             }
@@ -438,15 +412,2 @@ }
     }
-    // Checks if Chrome version is 105 or greater
-    checkChrome105() {
-        var _window_navigator_userAgentData;
-        if (typeof window === 'undefined' || window.navigator == null) return false;
-        let isChrome105;
-        if (window.navigator['userAgentData']) isChrome105 = (_window_navigator_userAgentData = window.navigator['userAgentData']) === null || _window_navigator_userAgentData === void 0 ? void 0 : _window_navigator_userAgentData.brands.some((b)=>b.brand === 'Chromium' && Number(b.version) === 105);
-        else {
-            let regex = /Chrome\/(\d+)/;
-            let matches = regex.exec(window.navigator.userAgent);
-            isChrome105 = matches && matches.length >= 2 && Number(matches[1]) === 105;
-        }
-        return isChrome105;
-    }
     getDropTargetFromPoint(x, y, isValidDropTarget) {
@@ -500,8 +461,5 @@ var _this_virtualizer_layout_getVisibleLayoutInfos_find;
         super(options);
-        this.isLoading = false;
         this.lastPersistedKeys = null;
         this.persistedIndices = new Map();
-        this.scrollContainer = options.scrollContainer || 'table';
         this.stickyColumnIndices = [];
-        this.disableSticky = this.checkChrome105();
     }
@@ -508,0 +466,0 @@ }

dist/types.d.ts

@@ -5,19 +5,15 @@ import { Collection, DropTarget, DropTargetDelegate, Key, Node } from "@react-types/shared";
 import { TableCollection } from "@react-types/table";
-export type ListLayoutOptions<T> = {
-    /** The height of a row in px. */
+export interface ListLayoutOptions {
+    /** The fixed height of a row in px. */
     rowHeight?: number;
+    /** The estimated height of a row, when row heights are variable. */
     estimatedRowHeight?: number;
+    /** The fixed height of a section header in px. */
     headingHeight?: number;
+    /** The estimated height of a section header, when the height is variable. */
     estimatedHeadingHeight?: number;
-    padding?: number;
-    indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number;
-    loaderHeight?: number;
-    placeholderHeight?: number;
-    forceSectionHeaders?: boolean;
-    enableEmptyState?: boolean;
-};
+}
 export interface LayoutNode {
     node?: Node<unknown>;
     layoutInfo: LayoutInfo;
-    header?: LayoutInfo;
     children?: LayoutNode[];
@@ -27,9 +23,4 @@ validRect: Rect;
 }
-export interface ListLayoutProps {
-    isLoading?: boolean;
-}
 /**
- * The ListLayout class is an implementation of a virtualizer {@link Layout}
- * it is used for creating lists and lists with indented sub-lists.
- *
+ * The ListLayout class is an implementation of a virtualizer {@link Layout}.
  * To configure a ListLayout, you can use the properties to define the
@@ -41,3 +32,3 @@ * layouts and/or use the method for defining indentation.
  */
-export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements DropTargetDelegate {
+export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
     protected rowHeight: number;
@@ -47,17 +38,6 @@ protected estimatedRowHeight: number;
     protected estimatedHeadingHeight: number;
-    protected forceSectionHeaders: boolean;
-    protected padding: number;
-    protected indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number;
-    protected layoutInfos: Map<Key, LayoutInfo>;
     protected layoutNodes: Map<Key, LayoutNode>;
     protected contentSize: Size;
     protected collection: Collection<Node<T>>;
-    protected isLoading: boolean;
-    protected lastWidth: number;
-    protected lastCollection: Collection<Node<T>>;
     protected rootNodes: LayoutNode[];
-    protected invalidateEverything: boolean;
-    protected loaderHeight: number;
-    protected placeholderHeight: number;
-    protected enableEmptyState: boolean;
     /** The rectangle containing currently valid layout infos. */
@@ -71,12 +51,16 @@ protected validRect: Rect;
      */
-    constructor(options?: ListLayoutOptions<T>);
+    constructor(options?: ListLayoutOptions);
     getLayoutInfo(key: Key): LayoutInfo;
     getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
     protected layoutIfNeeded(rect: Rect): void;
-    protected shouldInvalidateEverything(invalidationContext: InvalidationContext<ListLayoutProps>): boolean;
-    validate(invalidationContext: InvalidationContext<ListLayoutProps>): void;
-    protected buildCollection(): LayoutNode[];
+    protected isVisible(node: LayoutNode, rect: Rect): boolean;
+    protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>): boolean;
+    validate(invalidationContext: InvalidationContext<O>): void;
+    protected buildCollection(y?: number): LayoutNode[];
     protected isValid(node: Node<T>, y: number): boolean;
     protected buildChild(node: Node<T>, x: number, y: number, parentKey: Key | null): LayoutNode;
     protected buildNode(node: Node<T>, x: number, y: number): LayoutNode;
+    protected buildSection(node: Node<T>, x: number, y: number): LayoutNode;
+    protected buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode;
+    protected buildItem(node: Node<T>, x: number, y: number): LayoutNode;
     updateItemSize(key: Key, size: Size): boolean;
@@ -86,21 +70,19 @@ getContentSize(): Size;
 }
-export interface TableLayoutOptions<T> extends ListLayoutOptions<T> {
-    scrollContainer?: 'table' | 'body';
-}
-export interface TableLayoutProps extends ListLayoutProps {
+export interface TableLayoutProps {
     columnWidths?: Map<Key, number>;
 }
-export class TableLayout<T> extends ListLayout<T> {
-    collection: TableCollection<T>;
-    lastCollection: TableCollection<T>;
-    columnWidths: Map<Key, number>;
-    stickyColumnIndices: number[];
-    isLoading: boolean;
-    lastPersistedKeys: Set<Key>;
-    persistedIndices: Map<Key, number[]>;
-    scrollContainer: 'table' | 'body';
-    constructor(options: TableLayoutOptions<T>);
-    validate(invalidationContext: InvalidationContext<TableLayoutProps>): void;
+export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
+    protected collection: TableCollection<T>;
+    constructor(options: ListLayoutOptions);
+    validate(invalidationContext: InvalidationContext<O>): void;
     protected buildCollection(): LayoutNode[];
+    protected buildTableHeader(): LayoutNode;
+    protected buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode;
+    protected getEstimatedRowHeight(): number;
+    protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected isStickyColumn(node: GridNode<T>): boolean;
+    protected buildBody(y: number): LayoutNode;
     protected buildNode(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected buildCell(node: GridNode<T>, x: number, y: number): LayoutNode;
     getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
@@ -107,0 +89,0 @@ getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;

package.json

 {
   "name": "@react-stately/layout",
-  "version": "3.13.10-nightly.4685+a48d1673f",
+  "version": "3.13.10-nightly.4691+fabca84b9",
   "description": "Spectrum UI components in React",
@@ -25,8 +25,8 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-stately/collections": "3.0.0-nightly.2973+a48d1673f",
-    "@react-stately/table": "3.11.9-nightly.4685+a48d1673f",
-    "@react-stately/virtualizer": "3.7.2-nightly.4685+a48d1673f",
-    "@react-types/grid": "3.2.7-nightly.4685+a48d1673f",
-    "@react-types/shared": "3.0.0-nightly.2973+a48d1673f",
-    "@react-types/table": "3.9.6-nightly.4685+a48d1673f",
+    "@react-stately/collections": "3.0.0-nightly.2979+fabca84b9",
+    "@react-stately/table": "3.11.9-nightly.4691+fabca84b9",
+    "@react-stately/virtualizer": "3.7.2-nightly.4691+fabca84b9",
+    "@react-types/grid": "3.2.7-nightly.4691+fabca84b9",
+    "@react-types/shared": "3.0.0-nightly.2979+fabca84b9",
+    "@react-types/table": "3.9.6-nightly.4691+fabca84b9",
     "@swc/helpers": "^0.5.0"
@@ -40,3 +40,3 @@ },
   },
-  "gitHead": "a48d1673f2144714e31712e38310a8801edab550"
+  "gitHead": "fabca84b95c9c61f9062d5f1e66ebe2c920a2a5d"
 }

src/index.ts

@@ -12,5 +12,5 @@ /*
  */
-export type {ListLayoutOptions, ListLayoutProps, LayoutNode} from './ListLayout';
-export type {TableLayoutOptions, TableLayoutProps} from './TableLayout';
+export type {ListLayoutOptions, LayoutNode} from './ListLayout';
+export type {TableLayoutProps} from './TableLayout';
 export {ListLayout} from './ListLayout';
 export {TableLayout} from './TableLayout';

src/ListLayout.ts

@@ -17,15 +17,12 @@ /*
 
-export type ListLayoutOptions<T> = {
-  /** The height of a row in px. */
+export interface ListLayoutOptions {
+  /** The fixed height of a row in px. */
   rowHeight?: number,
+  /** The estimated height of a row, when row heights are variable. */
   estimatedRowHeight?: number,
+  /** The fixed height of a section header in px. */
   headingHeight?: number,
-  estimatedHeadingHeight?: number,
-  padding?: number,
-  indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number,
-  loaderHeight?: number,
-  placeholderHeight?: number,
-  forceSectionHeaders?: boolean,
-  enableEmptyState?: boolean
-};
+  /** The estimated height of a section header, when the height is variable. */
+  estimatedHeadingHeight?: number
+}
 
@@ -36,3 +33,2 @@ // A wrapper around LayoutInfo that supports hierarchy
   layoutInfo: LayoutInfo,
-  header?: LayoutInfo,
   children?: LayoutNode[],
@@ -43,12 +39,6 @@ validRect: Rect,
 
-export interface ListLayoutProps {
-  isLoading?: boolean
-}
-
 const DEFAULT_HEIGHT = 48;
 
 /**
- * The ListLayout class is an implementation of a virtualizer {@link Layout}
- * it is used for creating lists and lists with indented sub-lists.
- *
+ * The ListLayout class is an implementation of a virtualizer {@link Layout}.
  * To configure a ListLayout, you can use the properties to define the
@@ -60,3 +50,3 @@ * layouts and/or use the method for defining indentation.
  */
-export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements DropTargetDelegate {
+export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
   protected rowHeight: number;
@@ -66,17 +56,9 @@ protected estimatedRowHeight: number;
   protected estimatedHeadingHeight: number;
-  protected forceSectionHeaders: boolean;
-  protected padding: number;
-  protected indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number;
-  protected layoutInfos: Map<Key, LayoutInfo>;
   protected layoutNodes: Map<Key, LayoutNode>;
   protected contentSize: Size;
   protected collection: Collection<Node<T>>;
-  protected isLoading: boolean;
-  protected lastWidth: number;
-  protected lastCollection: Collection<Node<T>>;
+  private lastCollection: Collection<Node<T>>;
+  private lastWidth: number;
   protected rootNodes: LayoutNode[];
-  protected invalidateEverything: boolean;
-  protected loaderHeight: number;
-  protected placeholderHeight: number;
-  protected enableEmptyState: boolean;
+  private invalidateEverything: boolean;
   /** The rectangle containing currently valid layout infos. */
@@ -91,3 +73,3 @@ protected validRect: Rect;
    */
-  constructor(options: ListLayoutOptions<T> = {}) {
+  constructor(options: ListLayoutOptions = {}) {
     super();
@@ -98,9 +80,2 @@ this.rowHeight = options.rowHeight;
     this.estimatedHeadingHeight = options.estimatedHeadingHeight;
-    this.forceSectionHeaders = options.forceSectionHeaders;
-    this.padding = options.padding || 0;
-    this.indentationForItem = options.indentationForItem;
-    this.loaderHeight = options.loaderHeight;
-    this.placeholderHeight = options.placeholderHeight;
-    this.enableEmptyState = options.enableEmptyState || false;
-    this.layoutInfos = new Map();
     this.layoutNodes = new Map();
@@ -117,3 +92,3 @@ this.rootNodes = [];
     this.ensureLayoutInfo(key);
-    return this.layoutInfos.get(key)!;
+    return this.layoutNodes.get(key)?.layoutInfo || null;
   }
@@ -140,5 +115,2 @@
           res.push(node.layoutInfo);
-          if (node.header) {
-            res.push(node.header);
-          }
 
@@ -178,3 +150,3 @@ if (node.children) {
     // Compute the full layout and try again.
-    if (!this.layoutInfos.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
+    if (!this.layoutNodes.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
       this.requestedRect = new Rect(0, 0, Infinity, Infinity);
@@ -189,7 +161,7 @@ this.rootNodes = this.buildCollection();
 
-  private isVisible(node: LayoutNode, rect: Rect) {
-    return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || this.virtualizer.isPersistedKey(node.layoutInfo.key);
+  protected isVisible(node: LayoutNode, rect: Rect) {
+    return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer.isPersistedKey(node.layoutInfo.key);
   }
 
-  protected shouldInvalidateEverything(invalidationContext: InvalidationContext<ListLayoutProps>) {
+  protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>) {
     // Invalidate cache if the size of the collection changed.
@@ -200,5 +172,4 @@ // In this case, we need to recalculate the entire layout.
 
-  validate(invalidationContext: InvalidationContext<ListLayoutProps>) {
+  validate(invalidationContext: InvalidationContext<O>) {
     this.collection = this.virtualizer.collection;
-    this.isLoading = invalidationContext.layoutOptions?.isLoading || false;
 
@@ -220,4 +191,2 @@ // Reset valid rect if we will have to invalidate everything.
           if (layoutNode) {
-            this.layoutInfos.delete(layoutNode.layoutInfo.key);
-            this.layoutInfos.delete(layoutNode.header?.key);
             this.layoutNodes.delete(key);
@@ -235,8 +204,7 @@ }
 
-  protected buildCollection(): LayoutNode[] {
-    let y = this.padding;
+  protected buildCollection(y = 0): LayoutNode[] {
     let skipped = 0;
     let nodes = [];
     for (let node of this.collection) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
+      let rowHeight = this.rowHeight ?? this.estimatedRowHeight;
 
@@ -260,21 +228,3 @@ // Skip rows before the valid rectangle unless they are already cached.
 
-    if (this.isLoading) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width,
-        this.loaderHeight ?? this.virtualizer.visibleRect.height);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      this.layoutInfos.set('loader', loader);
-      nodes.push({layoutInfo: loader});
-      y = loader.rect.maxY;
-    }
-
-    if (nodes.length === 0 && this.enableEmptyState) {
-      let rect = new Rect(0, y, this.virtualizer.visibleRect.width,
-        this.placeholderHeight ?? this.virtualizer.visibleRect.height);
-      let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
-      this.layoutInfos.set('placeholder', placeholder);
-      nodes.push({layoutInfo: placeholder});
-      y = placeholder.rect.maxY;
-    }
-
-    this.contentSize = new Size(this.virtualizer.visibleRect.width, y + this.padding);
+    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
     return nodes;
@@ -289,3 +239,3 @@ }
       cached.node === node &&
-      y === (cached.header || cached.layoutInfo).rect.y &&
+      y === cached.layoutInfo.rect.y &&
       cached.layoutInfo.rect.intersects(this.validRect) &&
@@ -305,7 +255,2 @@ cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect))
     layoutNode.layoutInfo.parentKey = parentKey ?? null;
-    this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
-    if (layoutNode.header) {
-      this.layoutInfos.set(layoutNode.header.key, layoutNode.header);
-    }
-
     this.layoutNodes.set(node.key, layoutNode);
@@ -326,13 +271,4 @@ return layoutNode;
 
-  private buildSection(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
-    let header = null;
-    if (node.rendered || this.forceSectionHeaders) {
-      let headerNode = this.buildSectionHeader(node, x, y);
-      header = headerNode.layoutInfo;
-      header.key += ':header';
-      header.parentKey = node.key;
-      y += header.rect.height;
-    }
-
     let rect = new Rect(0, y, width, 0);
@@ -368,3 +304,2 @@ let layoutInfo = new LayoutInfo(node.type, node.key, rect);
     return {
-      header,
       layoutInfo,
@@ -376,3 +311,3 @@ children,
 
-  private buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
@@ -388,3 +323,3 @@ let rectHeight = this.headingHeight;
       let previousLayoutNode = this.layoutNodes.get(node.key);
-      let previousLayoutInfo = previousLayoutNode?.header || previousLayoutNode?.layoutInfo;
+      let previousLayoutInfo = previousLayoutNode?.layoutInfo;
       if (previousLayoutInfo) {
@@ -415,3 +350,3 @@ let curNode = this.collection.getItem(node.key);
 
-  private buildItem(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
@@ -440,10 +375,4 @@ let rectHeight = this.rowHeight;
 
-    if (typeof this.indentationForItem === 'function') {
-      x += this.indentationForItem(this.collection, node.key) || 0;
-    }
-
     let rect = new Rect(x, y, width - x, rectHeight);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-    // allow overflow so the focus ring/selection ring can extend outside to overlap with the adjacent items borders
-    layoutInfo.allowOverflow = true;
     layoutInfo.estimatedSize = isEstimated;
@@ -457,8 +386,9 @@ return {
   updateItemSize(key: Key, size: Size) {
-    let layoutInfo = this.layoutInfos.get(key);
+    let layoutNode = this.layoutNodes.get(key);
     // If no layoutInfo, item has been deleted/removed.
-    if (!layoutInfo) {
+    if (!layoutNode) {
       return false;
     }
 
+    let layoutInfo = layoutNode.layoutInfo;
     layoutInfo.estimatedSize = false;
@@ -469,3 +399,3 @@ if (layoutInfo.rect.height !== size.height) {
       newLayoutInfo.rect.height = size.height;
-      this.layoutInfos.set(key, newLayoutInfo);
+      layoutNode.layoutInfo = newLayoutInfo;
 
@@ -501,5 +431,3 @@ // Items after this layoutInfo will need to be repositioned to account for the new height.
       // Replace layout info in LayoutNode
-      if (n.header === oldLayoutInfo) {
-        n.header = newLayoutInfo;
-      } else if (n.layoutInfo === oldLayoutInfo) {
+      if (n.layoutInfo === oldLayoutInfo) {
         n.layoutInfo = newLayoutInfo;
@@ -506,0 +434,0 @@ }

src/TableLayout.ts

@@ -17,30 +17,20 @@ /*
 import {InvalidationContext, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
-import {LayoutNode, ListLayout, ListLayoutOptions, ListLayoutProps} from './ListLayout';
+import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout';
 import {TableCollection} from '@react-types/table';
 import {TableColumnLayout} from '@react-stately/table';
 
-export interface TableLayoutOptions<T> extends ListLayoutOptions<T> {
-  scrollContainer?: 'table' | 'body'
-}
-
-export interface TableLayoutProps extends ListLayoutProps {
+export interface TableLayoutProps {
   columnWidths?: Map<Key, number>
 }
 
-export class TableLayout<T> extends ListLayout<T> {
-  collection: TableCollection<T>;
-  lastCollection: TableCollection<T>;
-  columnWidths: Map<Key, number>;
-  stickyColumnIndices: number[];
-  isLoading = false;
-  lastPersistedKeys: Set<Key> = null;
-  persistedIndices: Map<Key, number[]> = new Map();
-  scrollContainer: 'table' | 'body';
-  private disableSticky: boolean;
+export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
+  protected collection: TableCollection<T>;
+  private columnWidths: Map<Key, number>;
+  private stickyColumnIndices: number[];
+  private lastPersistedKeys: Set<Key> = null;
+  private persistedIndices: Map<Key, number[]> = new Map();
 
-  constructor(options: TableLayoutOptions<T>) {
+  constructor(options: ListLayoutOptions) {
     super(options);
-    this.scrollContainer = options.scrollContainer || 'table';
     this.stickyColumnIndices = [];
-    this.disableSticky = this.checkChrome105();
   }
@@ -60,3 +50,3 @@
 
-  validate(invalidationContext: InvalidationContext<TableLayoutProps>): void {
+  validate(invalidationContext: InvalidationContext<O>): void {
     let newCollection = this.virtualizer.collection as TableCollection<T>;
@@ -81,5 +71,2 @@
   protected buildCollection(): LayoutNode[] {
-    // Track whether we were previously loading. This is used to adjust the animations of async loading vs inserts.
-    let loadingState = this.collection.body.props.loadingState;
-    this.isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
     this.stickyColumnIndices = [];
@@ -90,3 +77,3 @@
       // In addition, row headers need to be in the DOM for accessibility labeling.
-      if (column.props.isDragButtonCell || column.props.isSelectionCell || this.collection.rowHeaderColumnKeys.has(column.key)) {
+      if (this.isStickyColumn(column) || this.collection.rowHeaderColumnKeys.has(column.key)) {
         this.stickyColumnIndices.push(column.index);
@@ -96,4 +83,5 @@ }
 
-    let header = this.buildColumnHeader();
-    let body = this.buildBody(this.scrollContainer === 'body' ? 0 : header.layoutInfo.rect.height);
+    let header = this.buildTableHeader();
+    this.layoutNodes.set(header.layoutInfo.key, header);
+    let body = this.buildBody(header.layoutInfo.rect.height);
     this.lastPersistedKeys = null;
@@ -109,3 +97,3 @@
 
-  private buildColumnHeader(): LayoutNode {
+  protected buildTableHeader(): LayoutNode {
     let rect = new Rect(0, 0, 0, 0);
@@ -131,4 +119,2 @@ let layoutInfo = new LayoutInfo('header', this.collection.head?.key ?? 'header', rect);
 
-    this.layoutInfos.set(layoutInfo.key, layoutInfo);
-
     return {
@@ -141,3 +127,3 @@ layoutInfo,
 
-  private buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode {
+  protected buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode {
     let rect = new Rect(0, y, 0, 0);
@@ -177,4 +163,2 @@ let row = new LayoutInfo('headerrow', headerRow.key, rect);
         child.layoutInfo = child.layoutInfo.copy();
-        this.layoutInfos.set(child.layoutInfo.key, child.layoutInfo);
-
         child.layoutInfo.rect.height = height;
@@ -221,3 +205,7 @@ }
 
-  private buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {
+  protected getEstimatedRowHeight(): number {
+    return this.rowHeight ?? this.estimatedRowHeight;
+  }
+
+  protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {
     let width = this.getRenderedColumnWidth(node);
@@ -227,6 +215,5 @@ let {height, isEstimated} = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-    layoutInfo.isSticky = !this.disableSticky && (node.props?.isDragButtonCell || node.props?.isSelectionCell);
+    layoutInfo.isSticky = this.isStickyColumn(node);
     layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
     layoutInfo.estimatedSize = isEstimated;
-    layoutInfo.allowOverflow = true;
 
@@ -239,3 +226,9 @@ return {
 
-  private buildBody(y: number): LayoutNode {
+  // For subclasses.
+  // eslint-disable-next-line
+  protected isStickyColumn(node: GridNode<T>) {
+    return false;
+  }
+
+  protected buildBody(y: number): LayoutNode {
     let rect = new Rect(0, y, 0, 0);
@@ -248,5 +241,4 @@ let layoutInfo = new LayoutInfo('rowgroup', this.collection.body.key, rect);
     let children: LayoutNode[] = [];
+    let rowHeight = this.getEstimatedRowHeight();
     for (let [i, node] of [...getChildNodes(this.collection.body, this.collection)].entries()) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight) + 1;
-
       // Skip rows before the valid rectangle unless they are already cached.
@@ -273,25 +265,4 @@ if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
 
-    if (this.isLoading) {
-      // Add some margin around the loader to ensure that scrollbars don't flicker in and out.
-      let rect = new Rect(40,  Math.max(y, 40), (width || this.virtualizer.visibleRect.width) - 80, children.length === 0 ? this.virtualizer.visibleRect.height - 80 : 60);
-      let loader = new LayoutInfo('loader', 'loader', rect);
-      loader.parentKey = layoutInfo.key;
-      loader.isSticky = !this.disableSticky && children.length === 0;
-      this.layoutInfos.set('loader', loader);
-      children.push({layoutInfo: loader, validRect: loader.rect});
-      y = loader.rect.maxY;
-      width = Math.max(width, rect.width);
-    } else if (children.length === 0) {
-      if (this.enableEmptyState) {
-        let rect = new Rect(40, Math.max(y, 40), this.virtualizer.visibleRect.width - 80, this.virtualizer.visibleRect.height - 80);
-        let empty = new LayoutInfo('empty', 'empty', rect);
-        empty.parentKey = layoutInfo.key;
-        empty.isSticky = !this.disableSticky;
-        this.layoutInfos.set('empty', empty);
-        children.push({layoutInfo: empty, validRect: empty.rect});
-        y = empty.rect.maxY;
-        width = Math.max(width, rect.width);
-      } else {
-        y = this.virtualizer.visibleRect.maxY;
-      }
+    if (children.length === 0) {
+      y = this.virtualizer.visibleRect.maxY;
     }
@@ -302,4 +273,2 @@
 
-    this.layoutInfos.set(layoutInfo.key, layoutInfo);
-
     return {
@@ -328,3 +297,3 @@ layoutInfo,
 
-  private buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {
+  protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {
     let rect = new Rect(x, y, 0, 0);
@@ -357,4 +326,4 @@ let layoutInfo = new LayoutInfo('row', node.key, rect);
 
-    rect.width = this.layoutInfos.get(this.collection.head?.key ?? 'header').rect.width;
-    rect.height = height + 1; // +1 for bottom border
+    rect.width = this.layoutNodes.get(this.collection.head?.key ?? 'header').layoutInfo.rect.width;
+    rect.height = height;
 
@@ -368,3 +337,3 @@ return {
 
-  private buildCell(node: GridNode<T>, x: number, y: number): LayoutNode {
+  protected buildCell(node: GridNode<T>, x: number, y: number): LayoutNode {
     let width = this.getRenderedColumnWidth(node);
@@ -374,3 +343,3 @@ let {height, isEstimated} = this.getEstimatedHeight(node, width, this.rowHeight, this.estimatedRowHeight);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
-    layoutInfo.isSticky = !this.disableSticky && (node.props?.isDragButtonCell || node.props?.isSelectionCell);
+    layoutInfo.isSticky = this.isStickyColumn(node);
     layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
@@ -389,3 +358,3 @@ layoutInfo.estimatedSize = isEstimated;
     if (rect.height > 1) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight) + 1; // +1 for border
+      let rowHeight = this.getEstimatedRowHeight();
       rect.y = Math.floor(rect.y / rowHeight) * rowHeight;
@@ -531,3 +500,3 @@ rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;
     for (let key of this.virtualizer.persistedKeys) {
-      let layoutInfo = this.layoutInfos.get(key);
+      let layoutInfo = this.layoutNodes.get(key)?.layoutInfo;
 
@@ -550,3 +519,3 @@ // Walk up ancestors so parents are also persisted if children are.
 
-        layoutInfo = this.layoutInfos.get(layoutInfo.parentKey);
+        layoutInfo = this.layoutNodes.get(layoutInfo.parentKey)?.layoutInfo;
       }
@@ -560,20 +529,2 @@ }
 
-  // Checks if Chrome version is 105 or greater
-  private checkChrome105() {
-    if (typeof window === 'undefined' || window.navigator == null) {
-      return false;
-    }
-
-    let isChrome105;
-    if (window.navigator['userAgentData']) {
-      isChrome105 = window.navigator['userAgentData']?.brands.some(b => b.brand === 'Chromium' && Number(b.version) === 105);
-    } else {
-      let regex = /Chrome\/(\d+)/;
-      let matches = regex.exec(window.navigator.userAgent);
-      isChrome105 = matches && matches.length >= 2 && Number(matches[1]) === 105;
-    }
-
-    return isChrome105;
-  }
-
   getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
@@ -580,0 +531,0 @@ x += this.virtualizer.visibleRect.x;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

303337

decreased by-12.44%

Lines of code

3339

decreased by-10.77%

Dependency changes

• Updated@react-stately/collections@3.0.0-nightly.2979+fabca84b9

• Updated@react-stately/table@3.11.9-nightly.4691+fabca84b9

• Updated@react-stately/virtualizer@3.7.2-nightly.4691+fabca84b9

• Updated@react-types/grid@3.2.7-nightly.4691+fabca84b9

• Updated@react-types/shared@3.0.0-nightly.2979+fabca84b9

• Updated@react-types/table@3.9.6-nightly.4691+fabca84b9