New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-stately/layout

Package Overview
Dependencies
Maintainers
0
Versions
916
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-stately/layout - npm Package Compare versions

Comparing version

3.0.0-nightly-e37ad74f5-241101
to
3.0.0-nightly-e3b217ad5-250301

dist/WaterfallLayout.main.js
dist/WaterfallLayout.main.js.map
dist/WaterfallLayout.mjs
dist/WaterfallLayout.module.js
dist/WaterfallLayout.module.js.map
src/WaterfallLayout.ts

161

dist/GridLayout.main.js

@@ -20,70 +20,107 @@ var $7Tzdl$reactstatelyvirtualizer = require("@react-stately/virtualizer");

*/
const $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS = {
minItemSize: new (0, $7Tzdl$reactstatelyvirtualizer.Size)(200, 200),
maxItemSize: new (0, $7Tzdl$reactstatelyvirtualizer.Size)(Infinity, Infinity),
preserveAspectRatio: false,
minSpace: new (0, $7Tzdl$reactstatelyvirtualizer.Size)(18, 18),
maxColumns: Infinity,
dropIndicatorThickness: 2
};
class $1f7773ceb2a3b9a6$export$7d2b12578154a735 extends (0, $7Tzdl$reactstatelyvirtualizer.Layout) {
update() {
shouldInvalidateLayoutOptions(newOptions, oldOptions) {
return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || newOptions.preserveAspectRatio !== oldOptions.preserveAspectRatio || !(newOptions.minItemSize || $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.minItemSize) || !(newOptions.maxItemSize || $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.maxItemSize) || !(newOptions.minSpace || $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.minSpace);
}
update(invalidationContext) {
let { minItemSize: minItemSize = $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.minItemSize, maxItemSize: maxItemSize = $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.maxItemSize, preserveAspectRatio: preserveAspectRatio = $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.preserveAspectRatio, minSpace: minSpace = $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.minSpace, maxColumns: maxColumns = $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness: dropIndicatorThickness = $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.dropIndicatorThickness } = invalidationContext.layoutOptions || {};
this.dropIndicatorThickness = dropIndicatorThickness;
let visibleWidth = this.virtualizer.visibleRect.width;
// The max item width is always the entire viewport.
// If the max item height is infinity, scale in proportion to the max width.
let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
let maxItemHeight = Number.isFinite(this.maxItemSize.height) ? this.maxItemSize.height : Math.floor(this.minItemSize.height / this.minItemSize.width * maxItemWidth);
let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
let maxItemHeight = Number.isFinite(maxItemSize.height) ? maxItemSize.height : Math.floor(minItemSize.height / minItemSize.width * maxItemWidth);
// Compute the number of rows and columns needed to display the content
let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
let numColumns = Math.max(1, Math.min(maxColumns, columns));
// Compute the available width (minus the space between items)
let width = visibleWidth - this.minSpace.width * Math.max(0, this.numColumns);
let width = visibleWidth - minSpace.width * Math.max(0, numColumns);
// Compute the item width based on the space available
let itemWidth = Math.floor(width / this.numColumns);
itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
let itemWidth = Math.floor(width / numColumns);
itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
// Compute the item height, which is proportional to the item width
let t = (itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width);
let itemHeight = this.minItemSize.height + Math.floor((maxItemHeight - this.minItemSize.height) * t);
itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));
this.itemSize = new (0, $7Tzdl$reactstatelyvirtualizer.Size)(itemWidth, itemHeight);
let t = (itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width);
let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
// Compute the horizontal spacing and content height
this.horizontalSpacing = Math.floor((visibleWidth - this.numColumns * this.itemSize.width) / (this.numColumns + 1));
this.layoutInfos = [];
for (let node of this.virtualizer.collection)this.layoutInfos.push(this.getLayoutInfoForNode(node));
}
getVisibleLayoutInfos(rect) {
let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
let result = this.layoutInfos.slice(firstVisibleItem, lastVisibleItem + 1);
let persistedIndices = [];
for (let key of this.virtualizer.persistedKeys){
let item = this.virtualizer.collection.getItem(key);
if ((item === null || item === void 0 ? void 0 : item.index) != null) persistedIndices.push(item.index);
let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
this.gap = new (0, $7Tzdl$reactstatelyvirtualizer.Size)(horizontalSpacing, minSpace.height);
let rows = Math.ceil(this.virtualizer.collection.size / numColumns);
let iterator = this.virtualizer.collection[Symbol.iterator]();
let y = rows > 0 ? minSpace.height : 0;
let newLayoutInfos = new Map();
let skeleton = null;
let skeletonCount = 0;
for(let row = 0; row < rows; row++){
let maxHeight = 0;
let rowLayoutInfos = [];
for(let col = 0; col < numColumns; col++){
// Repeat skeleton until the end of the current row.
let node = skeleton || iterator.next().value;
if (!node) break;
if (node.type === 'skeleton') skeleton = node;
let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
let oldLayoutInfo = this.layoutInfos.get(key);
let content = node;
if (skeleton) content = oldLayoutInfo && oldLayoutInfo.content.key === key ? oldLayoutInfo.content : {
...skeleton,
key: key
};
let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
let height = itemHeight;
let estimatedSize = !preserveAspectRatio;
if (oldLayoutInfo && estimatedSize) {
height = oldLayoutInfo.rect.height;
estimatedSize = invalidationContext.layoutOptionsChanged || invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== content;
}
let rect = new (0, $7Tzdl$reactstatelyvirtualizer.Rect)(x, y, itemWidth, height);
let layoutInfo = new (0, $7Tzdl$reactstatelyvirtualizer.LayoutInfo)(node.type, key, rect);
layoutInfo.estimatedSize = estimatedSize;
layoutInfo.allowOverflow = true;
layoutInfo.content = content;
newLayoutInfos.set(key, layoutInfo);
rowLayoutInfos.push(layoutInfo);
maxHeight = Math.max(maxHeight, layoutInfo.rect.height);
}
for (let layoutInfo of rowLayoutInfos)layoutInfo.rect.height = maxHeight;
y += maxHeight + minSpace.height;
// Keep adding skeleton rows until we fill the viewport
if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) rows++;
}
persistedIndices.sort((a, b)=>a - b);
let persistedBefore = [];
for (let index of persistedIndices){
if (index < firstVisibleItem) persistedBefore.push(this.layoutInfos[index]);
else if (index > lastVisibleItem) result.push(this.layoutInfos[index]);
}
result.unshift(...persistedBefore);
return result;
this.layoutInfos = newLayoutInfos;
this.contentSize = new (0, $7Tzdl$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, y);
}
getIndexAtPoint(x, y) {
let itemHeight = this.itemSize.height + this.minSpace.height;
let itemWidth = this.itemSize.width + this.horizontalSpacing;
return Math.max(0, Math.min(this.virtualizer.collection.size - 1, Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)));
}
getLayoutInfo(key) {
let node = this.virtualizer.collection.getItem(key);
return node ? this.layoutInfos[node.index] : null;
return this.layoutInfos.get(key);
}
getLayoutInfoForNode(node) {
let idx = node.index;
let row = Math.floor(idx / this.numColumns);
let column = idx % this.numColumns;
let x = this.horizontalSpacing + column * (this.itemSize.width + this.horizontalSpacing);
let y = this.minSpace.height + row * (this.itemSize.height + this.minSpace.height);
let rect = new (0, $7Tzdl$reactstatelyvirtualizer.Rect)(x, y, this.itemSize.width, this.itemSize.height);
return new (0, $7Tzdl$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);
}
getContentSize() {
let numRows = Math.ceil(this.virtualizer.collection.size / this.numColumns);
let contentHeight = this.minSpace.height + numRows * (this.itemSize.height + this.minSpace.height);
return new (0, $7Tzdl$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, contentHeight);
return this.contentSize;
}
getVisibleLayoutInfos(rect) {
let layoutInfos = [];
for (let layoutInfo of this.layoutInfos.values())if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) layoutInfos.push(layoutInfo);
return layoutInfos;
}
updateItemSize(key, size) {
let layoutInfo = this.layoutInfos.get(key);
if (!size || !layoutInfo) return false;
if (size.height !== layoutInfo.rect.height) {
let newLayoutInfo = layoutInfo.copy();
newLayoutInfo.rect.height = size.height;
newLayoutInfo.estimatedSize = false;
this.layoutInfos.set(key, newLayoutInfo);
return true;
}
return false;
}
getDropTargetFromPoint(x, y, isValidDropTarget) {
if (this.layoutInfos.length === 0) return {
if (this.layoutInfos.size === 0) return {
type: 'root'

@@ -93,4 +130,7 @@ };

y += this.virtualizer.visibleRect.y;
let index = this.getIndexAtPoint(x, y);
let layoutInfo = this.layoutInfos[index];
let key = this.virtualizer.keyAtPoint(new (0, $7Tzdl$reactstatelyvirtualizer.Point)(x, y));
let layoutInfo = key != null ? this.getLayoutInfo(key) : null;
if (!layoutInfo) return {
type: 'root'
};
let target = {

@@ -127,13 +167,8 @@ type: 'item',

if (this.numColumns === 1) // Flip from vertical to horizontal if only one column is visible.
rect = new (0, $7Tzdl$reactstatelyvirtualizer.Rect)(layoutInfo.rect.x, target.dropPosition === 'before' ? layoutInfo.rect.y - this.minSpace.height / 2 - this.dropIndicatorThickness / 2 : layoutInfo.rect.maxY + this.minSpace.height / 2 - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
else rect = new (0, $7Tzdl$reactstatelyvirtualizer.Rect)(target.dropPosition === 'before' ? layoutInfo.rect.x - this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2 : layoutInfo.rect.maxX + this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2, layoutInfo.rect.y, this.dropIndicatorThickness, layoutInfo.rect.height);
rect = new (0, $7Tzdl$reactstatelyvirtualizer.Rect)(layoutInfo.rect.x, target.dropPosition === 'before' ? layoutInfo.rect.y - this.gap.height / 2 - this.dropIndicatorThickness / 2 : layoutInfo.rect.maxY + this.gap.height / 2 - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
else rect = new (0, $7Tzdl$reactstatelyvirtualizer.Rect)(target.dropPosition === 'before' ? layoutInfo.rect.x - this.gap.width / 2 - this.dropIndicatorThickness / 2 : layoutInfo.rect.maxX + this.gap.width / 2 - this.dropIndicatorThickness / 2, layoutInfo.rect.y, this.dropIndicatorThickness, layoutInfo.rect.height);
return new (0, $7Tzdl$reactstatelyvirtualizer.LayoutInfo)('dropIndicator', target.key + ':' + target.dropPosition, rect);
}
constructor(options){
super();
this.minItemSize = options.minItemSize || new (0, $7Tzdl$reactstatelyvirtualizer.Size)(200, 200);
this.maxItemSize = options.maxItemSize || new (0, $7Tzdl$reactstatelyvirtualizer.Size)(Infinity, Infinity);
this.minSpace = options.minSpace || new (0, $7Tzdl$reactstatelyvirtualizer.Size)(18, 18);
this.maxColumns = options.maxColumns || Infinity;
this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
constructor(...args){
super(...args), this.gap = $1f7773ceb2a3b9a6$var$DEFAULT_OPTIONS.minSpace, this.dropIndicatorThickness = 2, this.numColumns = 0, this.contentSize = new (0, $7Tzdl$reactstatelyvirtualizer.Size)(), this.layoutInfos = new Map();
}

@@ -140,0 +175,0 @@ }

163

dist/GridLayout.module.js

@@ -1,2 +0,2 @@

import {Size as $ipgKF$Size, Rect as $ipgKF$Rect, LayoutInfo as $ipgKF$LayoutInfo, Layout as $ipgKF$Layout} from "@react-stately/virtualizer";
import {Size as $ipgKF$Size, Rect as $ipgKF$Rect, LayoutInfo as $ipgKF$LayoutInfo, Point as $ipgKF$Point, Layout as $ipgKF$Layout} from "@react-stately/virtualizer";

@@ -14,70 +14,107 @@ /*

*/
const $a58592d295a170a4$var$DEFAULT_OPTIONS = {
minItemSize: new (0, $ipgKF$Size)(200, 200),
maxItemSize: new (0, $ipgKF$Size)(Infinity, Infinity),
preserveAspectRatio: false,
minSpace: new (0, $ipgKF$Size)(18, 18),
maxColumns: Infinity,
dropIndicatorThickness: 2
};
class $a58592d295a170a4$export$7d2b12578154a735 extends (0, $ipgKF$Layout) {
update() {
shouldInvalidateLayoutOptions(newOptions, oldOptions) {
return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || newOptions.preserveAspectRatio !== oldOptions.preserveAspectRatio || !(newOptions.minItemSize || $a58592d295a170a4$var$DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || $a58592d295a170a4$var$DEFAULT_OPTIONS.minItemSize) || !(newOptions.maxItemSize || $a58592d295a170a4$var$DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || $a58592d295a170a4$var$DEFAULT_OPTIONS.maxItemSize) || !(newOptions.minSpace || $a58592d295a170a4$var$DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || $a58592d295a170a4$var$DEFAULT_OPTIONS.minSpace);
}
update(invalidationContext) {
let { minItemSize: minItemSize = $a58592d295a170a4$var$DEFAULT_OPTIONS.minItemSize, maxItemSize: maxItemSize = $a58592d295a170a4$var$DEFAULT_OPTIONS.maxItemSize, preserveAspectRatio: preserveAspectRatio = $a58592d295a170a4$var$DEFAULT_OPTIONS.preserveAspectRatio, minSpace: minSpace = $a58592d295a170a4$var$DEFAULT_OPTIONS.minSpace, maxColumns: maxColumns = $a58592d295a170a4$var$DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness: dropIndicatorThickness = $a58592d295a170a4$var$DEFAULT_OPTIONS.dropIndicatorThickness } = invalidationContext.layoutOptions || {};
this.dropIndicatorThickness = dropIndicatorThickness;
let visibleWidth = this.virtualizer.visibleRect.width;
// The max item width is always the entire viewport.
// If the max item height is infinity, scale in proportion to the max width.
let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
let maxItemHeight = Number.isFinite(this.maxItemSize.height) ? this.maxItemSize.height : Math.floor(this.minItemSize.height / this.minItemSize.width * maxItemWidth);
let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
let maxItemHeight = Number.isFinite(maxItemSize.height) ? maxItemSize.height : Math.floor(minItemSize.height / minItemSize.width * maxItemWidth);
// Compute the number of rows and columns needed to display the content
let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
let numColumns = Math.max(1, Math.min(maxColumns, columns));
// Compute the available width (minus the space between items)
let width = visibleWidth - this.minSpace.width * Math.max(0, this.numColumns);
let width = visibleWidth - minSpace.width * Math.max(0, numColumns);
// Compute the item width based on the space available
let itemWidth = Math.floor(width / this.numColumns);
itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
let itemWidth = Math.floor(width / numColumns);
itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
// Compute the item height, which is proportional to the item width
let t = (itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width);
let itemHeight = this.minItemSize.height + Math.floor((maxItemHeight - this.minItemSize.height) * t);
itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));
this.itemSize = new (0, $ipgKF$Size)(itemWidth, itemHeight);
let t = (itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width);
let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
// Compute the horizontal spacing and content height
this.horizontalSpacing = Math.floor((visibleWidth - this.numColumns * this.itemSize.width) / (this.numColumns + 1));
this.layoutInfos = [];
for (let node of this.virtualizer.collection)this.layoutInfos.push(this.getLayoutInfoForNode(node));
}
getVisibleLayoutInfos(rect) {
let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
let result = this.layoutInfos.slice(firstVisibleItem, lastVisibleItem + 1);
let persistedIndices = [];
for (let key of this.virtualizer.persistedKeys){
let item = this.virtualizer.collection.getItem(key);
if ((item === null || item === void 0 ? void 0 : item.index) != null) persistedIndices.push(item.index);
let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
this.gap = new (0, $ipgKF$Size)(horizontalSpacing, minSpace.height);
let rows = Math.ceil(this.virtualizer.collection.size / numColumns);
let iterator = this.virtualizer.collection[Symbol.iterator]();
let y = rows > 0 ? minSpace.height : 0;
let newLayoutInfos = new Map();
let skeleton = null;
let skeletonCount = 0;
for(let row = 0; row < rows; row++){
let maxHeight = 0;
let rowLayoutInfos = [];
for(let col = 0; col < numColumns; col++){
// Repeat skeleton until the end of the current row.
let node = skeleton || iterator.next().value;
if (!node) break;
if (node.type === 'skeleton') skeleton = node;
let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
let oldLayoutInfo = this.layoutInfos.get(key);
let content = node;
if (skeleton) content = oldLayoutInfo && oldLayoutInfo.content.key === key ? oldLayoutInfo.content : {
...skeleton,
key: key
};
let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
let height = itemHeight;
let estimatedSize = !preserveAspectRatio;
if (oldLayoutInfo && estimatedSize) {
height = oldLayoutInfo.rect.height;
estimatedSize = invalidationContext.layoutOptionsChanged || invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== content;
}
let rect = new (0, $ipgKF$Rect)(x, y, itemWidth, height);
let layoutInfo = new (0, $ipgKF$LayoutInfo)(node.type, key, rect);
layoutInfo.estimatedSize = estimatedSize;
layoutInfo.allowOverflow = true;
layoutInfo.content = content;
newLayoutInfos.set(key, layoutInfo);
rowLayoutInfos.push(layoutInfo);
maxHeight = Math.max(maxHeight, layoutInfo.rect.height);
}
for (let layoutInfo of rowLayoutInfos)layoutInfo.rect.height = maxHeight;
y += maxHeight + minSpace.height;
// Keep adding skeleton rows until we fill the viewport
if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) rows++;
}
persistedIndices.sort((a, b)=>a - b);
let persistedBefore = [];
for (let index of persistedIndices){
if (index < firstVisibleItem) persistedBefore.push(this.layoutInfos[index]);
else if (index > lastVisibleItem) result.push(this.layoutInfos[index]);
}
result.unshift(...persistedBefore);
return result;
this.layoutInfos = newLayoutInfos;
this.contentSize = new (0, $ipgKF$Size)(this.virtualizer.visibleRect.width, y);
}
getIndexAtPoint(x, y) {
let itemHeight = this.itemSize.height + this.minSpace.height;
let itemWidth = this.itemSize.width + this.horizontalSpacing;
return Math.max(0, Math.min(this.virtualizer.collection.size - 1, Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)));
}
getLayoutInfo(key) {
let node = this.virtualizer.collection.getItem(key);
return node ? this.layoutInfos[node.index] : null;
return this.layoutInfos.get(key);
}
getLayoutInfoForNode(node) {
let idx = node.index;
let row = Math.floor(idx / this.numColumns);
let column = idx % this.numColumns;
let x = this.horizontalSpacing + column * (this.itemSize.width + this.horizontalSpacing);
let y = this.minSpace.height + row * (this.itemSize.height + this.minSpace.height);
let rect = new (0, $ipgKF$Rect)(x, y, this.itemSize.width, this.itemSize.height);
return new (0, $ipgKF$LayoutInfo)(node.type, node.key, rect);
}
getContentSize() {
let numRows = Math.ceil(this.virtualizer.collection.size / this.numColumns);
let contentHeight = this.minSpace.height + numRows * (this.itemSize.height + this.minSpace.height);
return new (0, $ipgKF$Size)(this.virtualizer.visibleRect.width, contentHeight);
return this.contentSize;
}
getVisibleLayoutInfos(rect) {
let layoutInfos = [];
for (let layoutInfo of this.layoutInfos.values())if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) layoutInfos.push(layoutInfo);
return layoutInfos;
}
updateItemSize(key, size) {
let layoutInfo = this.layoutInfos.get(key);
if (!size || !layoutInfo) return false;
if (size.height !== layoutInfo.rect.height) {
let newLayoutInfo = layoutInfo.copy();
newLayoutInfo.rect.height = size.height;
newLayoutInfo.estimatedSize = false;
this.layoutInfos.set(key, newLayoutInfo);
return true;
}
return false;
}
getDropTargetFromPoint(x, y, isValidDropTarget) {
if (this.layoutInfos.length === 0) return {
if (this.layoutInfos.size === 0) return {
type: 'root'

@@ -87,4 +124,7 @@ };

y += this.virtualizer.visibleRect.y;
let index = this.getIndexAtPoint(x, y);
let layoutInfo = this.layoutInfos[index];
let key = this.virtualizer.keyAtPoint(new (0, $ipgKF$Point)(x, y));
let layoutInfo = key != null ? this.getLayoutInfo(key) : null;
if (!layoutInfo) return {
type: 'root'
};
let target = {

@@ -121,13 +161,8 @@ type: 'item',

if (this.numColumns === 1) // Flip from vertical to horizontal if only one column is visible.
rect = new (0, $ipgKF$Rect)(layoutInfo.rect.x, target.dropPosition === 'before' ? layoutInfo.rect.y - this.minSpace.height / 2 - this.dropIndicatorThickness / 2 : layoutInfo.rect.maxY + this.minSpace.height / 2 - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
else rect = new (0, $ipgKF$Rect)(target.dropPosition === 'before' ? layoutInfo.rect.x - this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2 : layoutInfo.rect.maxX + this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2, layoutInfo.rect.y, this.dropIndicatorThickness, layoutInfo.rect.height);
rect = new (0, $ipgKF$Rect)(layoutInfo.rect.x, target.dropPosition === 'before' ? layoutInfo.rect.y - this.gap.height / 2 - this.dropIndicatorThickness / 2 : layoutInfo.rect.maxY + this.gap.height / 2 - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
else rect = new (0, $ipgKF$Rect)(target.dropPosition === 'before' ? layoutInfo.rect.x - this.gap.width / 2 - this.dropIndicatorThickness / 2 : layoutInfo.rect.maxX + this.gap.width / 2 - this.dropIndicatorThickness / 2, layoutInfo.rect.y, this.dropIndicatorThickness, layoutInfo.rect.height);
return new (0, $ipgKF$LayoutInfo)('dropIndicator', target.key + ':' + target.dropPosition, rect);
}
constructor(options){
super();
this.minItemSize = options.minItemSize || new (0, $ipgKF$Size)(200, 200);
this.maxItemSize = options.maxItemSize || new (0, $ipgKF$Size)(Infinity, Infinity);
this.minSpace = options.minSpace || new (0, $ipgKF$Size)(18, 18);
this.maxColumns = options.maxColumns || Infinity;
this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
constructor(...args){
super(...args), this.gap = $a58592d295a170a4$var$DEFAULT_OPTIONS.minSpace, this.dropIndicatorThickness = 2, this.numColumns = 0, this.contentSize = new (0, $ipgKF$Size)(), this.layoutInfos = new Map();
}

@@ -134,0 +169,0 @@ }

124

dist/ListLayout.main.js

@@ -24,2 +24,6 @@ var $iId4j$reactstatelycollections = require("@react-stately/collections");

class $fe69e47e38ed0ac4$export$cacbb3924155d68e extends (0, $iId4j$reactstatelyvirtualizer.Layout) {
// Backward compatibility for subclassing.
get collection() {
return this.virtualizer.collection;
}
getLayoutInfo(key) {

@@ -34,4 +38,4 @@ var _this_layoutNodes_get;

if (rect.height > 1) {
var _this_rowHeight;
let rowHeight = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
var _this_rowHeight, _ref;
let rowHeight = ((_ref = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) !== null && _ref !== void 0 ? _ref : $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT) + this.gap;
rect.y = Math.floor(rect.y / rowHeight) * rowHeight;

@@ -82,6 +86,12 @@ rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;

// In this case, we need to recalculate the entire layout.
return invalidationContext.sizeChanged;
// Also invalidate if fixed sizes/gaps change.
let options = invalidationContext.layoutOptions;
var _options_rowHeight, _options_headingHeight, _options_loaderHeight, _options_gap, _options_padding;
return invalidationContext.sizeChanged || this.rowHeight !== ((_options_rowHeight = options === null || options === void 0 ? void 0 : options.rowHeight) !== null && _options_rowHeight !== void 0 ? _options_rowHeight : this.rowHeight) || this.headingHeight !== ((_options_headingHeight = options === null || options === void 0 ? void 0 : options.headingHeight) !== null && _options_headingHeight !== void 0 ? _options_headingHeight : this.headingHeight) || this.loaderHeight !== ((_options_loaderHeight = options === null || options === void 0 ? void 0 : options.loaderHeight) !== null && _options_loaderHeight !== void 0 ? _options_loaderHeight : this.loaderHeight) || this.gap !== ((_options_gap = options === null || options === void 0 ? void 0 : options.gap) !== null && _options_gap !== void 0 ? _options_gap : this.gap) || this.padding !== ((_options_padding = options === null || options === void 0 ? void 0 : options.padding) !== null && _options_padding !== void 0 ? _options_padding : this.padding);
}
shouldInvalidateLayoutOptions(newOptions, oldOptions) {
return newOptions.rowHeight !== oldOptions.rowHeight || newOptions.estimatedRowHeight !== oldOptions.estimatedRowHeight || newOptions.headingHeight !== oldOptions.headingHeight || newOptions.estimatedHeadingHeight !== oldOptions.estimatedHeadingHeight || newOptions.loaderHeight !== oldOptions.loaderHeight || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || newOptions.gap !== oldOptions.gap || newOptions.padding !== oldOptions.padding;
}
update(invalidationContext) {
this.collection = this.virtualizer.collection;
let collection = this.virtualizer.collection;
// Reset valid rect if we will have to invalidate everything.

@@ -94,6 +104,23 @@ // Otherwise we can reuse cached layout infos outside the current visible rect.

}
let options = invalidationContext.layoutOptions;
var _options_rowHeight;
this.rowHeight = (_options_rowHeight = options === null || options === void 0 ? void 0 : options.rowHeight) !== null && _options_rowHeight !== void 0 ? _options_rowHeight : this.rowHeight;
var _options_estimatedRowHeight;
this.estimatedRowHeight = (_options_estimatedRowHeight = options === null || options === void 0 ? void 0 : options.estimatedRowHeight) !== null && _options_estimatedRowHeight !== void 0 ? _options_estimatedRowHeight : this.estimatedRowHeight;
var _options_headingHeight;
this.headingHeight = (_options_headingHeight = options === null || options === void 0 ? void 0 : options.headingHeight) !== null && _options_headingHeight !== void 0 ? _options_headingHeight : this.headingHeight;
var _options_estimatedHeadingHeight;
this.estimatedHeadingHeight = (_options_estimatedHeadingHeight = options === null || options === void 0 ? void 0 : options.estimatedHeadingHeight) !== null && _options_estimatedHeadingHeight !== void 0 ? _options_estimatedHeadingHeight : this.estimatedHeadingHeight;
var _options_loaderHeight;
this.loaderHeight = (_options_loaderHeight = options === null || options === void 0 ? void 0 : options.loaderHeight) !== null && _options_loaderHeight !== void 0 ? _options_loaderHeight : this.loaderHeight;
var _options_dropIndicatorThickness;
this.dropIndicatorThickness = (_options_dropIndicatorThickness = options === null || options === void 0 ? void 0 : options.dropIndicatorThickness) !== null && _options_dropIndicatorThickness !== void 0 ? _options_dropIndicatorThickness : this.dropIndicatorThickness;
var _options_gap;
this.gap = (_options_gap = options === null || options === void 0 ? void 0 : options.gap) !== null && _options_gap !== void 0 ? _options_gap : this.gap;
var _options_padding;
this.padding = (_options_padding = options === null || options === void 0 ? void 0 : options.padding) !== null && _options_padding !== void 0 ? _options_padding : this.padding;
this.rootNodes = this.buildCollection();
// Remove deleted layout nodes
if (this.lastCollection && this.collection !== this.lastCollection) {
for (let key of this.lastCollection.getKeys())if (!this.collection.getItem(key)) {
if (this.lastCollection && collection !== this.lastCollection) {
for (let key of this.lastCollection.getKeys())if (!collection.getItem(key)) {
let layoutNode = this.layoutNodes.get(key);

@@ -103,13 +130,13 @@ if (layoutNode) this.layoutNodes.delete(key);

}
this.lastWidth = this.virtualizer.visibleRect.width;
this.lastCollection = this.collection;
this.lastCollection = collection;
this.invalidateEverything = false;
this.validRect = this.requestedRect.copy();
}
buildCollection(y = 0) {
buildCollection(y = this.padding) {
let collection = this.virtualizer.collection;
let skipped = 0;
let nodes = [];
for (let node of this.collection){
var _this_rowHeight;
let rowHeight = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
for (let node of collection){
var _this_rowHeight, _ref;
let rowHeight = ((_ref = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) !== null && _ref !== void 0 ? _ref : $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT) + this.gap;
// Skip rows before the valid rectangle unless they are already cached.

@@ -121,10 +148,12 @@ if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

}
let layoutNode = this.buildChild(node, 0, y, null);
y = layoutNode.layoutInfo.rect.maxY;
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) {
y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
y += (collection.size - (nodes.length + skipped)) * rowHeight;
break;
}
}
y -= this.gap;
y += this.padding;
this.contentSize = new (0, $iId4j$reactstatelyvirtualizer.Size)(this.virtualizer.visibleRect.width, y);

@@ -154,9 +183,11 @@ return nodes;

return this.buildLoader(node, x, y);
default:
throw new Error('Unsupported node type: ' + node.type);
}
}
buildLoader(node, x, y) {
let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(x, y, 0, 0);
let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(x, y, this.padding, 0);
let layoutInfo = new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)('loader', node.key, rect);
rect.width = this.virtualizer.contentSize.width;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight;
rect.width = this.virtualizer.contentSize.width - this.padding - x;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight || $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT;
return {

@@ -168,4 +199,5 @@ layoutInfo: layoutInfo,

buildSection(node, x, y) {
let width = this.virtualizer.visibleRect.width;
let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(0, y, width, 0);
let collection = this.virtualizer.collection;
let width = this.virtualizer.visibleRect.width - this.padding;
let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(x, y, width - x, 0);
let layoutInfo = new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);

@@ -175,5 +207,5 @@ let startY = y;

let children = [];
for (let child of (0, $iId4j$reactstatelycollections.getChildNodes)(node, this.collection)){
var _this_rowHeight;
let rowHeight = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
for (let child of (0, $iId4j$reactstatelycollections.getChildNodes)(node, collection)){
var _this_rowHeight, _ref;
let rowHeight = ((_ref = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) !== null && _ref !== void 0 ? _ref : $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT) + this.gap;
// Skip rows before the valid rectangle unless they are already cached.

@@ -186,3 +218,3 @@ if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

let layoutNode = this.buildChild(child, x, y, layoutInfo.key);
y = layoutNode.layoutInfo.rect.maxY;
y = layoutNode.layoutInfo.rect.maxY + this.gap;
children.push(layoutNode);

@@ -192,3 +224,3 @@ if (y > this.requestedRect.maxY) {

y += ([
...(0, $iId4j$reactstatelycollections.getChildNodes)(node, this.collection)
...(0, $iId4j$reactstatelycollections.getChildNodes)(node, collection)
].length - (children.length + skipped)) * rowHeight;

@@ -198,2 +230,3 @@ break;

}
y -= this.gap;
rect.height = y - startY;

@@ -208,3 +241,3 @@ return {

buildSectionHeader(node, x, y) {
let width = this.virtualizer.visibleRect.width;
let width = this.virtualizer.visibleRect.width - this.padding;
let rectHeight = this.headingHeight;

@@ -220,6 +253,6 @@ let isEstimated = false;

if (previousLayoutInfo) {
let curNode = this.collection.getItem(node.key);
let curNode = this.virtualizer.collection.getItem(node.key);
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
rectHeight = previousLayoutInfo.rect.height;
isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutInfo.estimatedSize;
isEstimated = width !== previousLayoutInfo.rect.width || curNode !== lastNode || previousLayoutInfo.estimatedSize;
} else {

@@ -231,3 +264,3 @@ rectHeight = node.rendered ? this.estimatedHeadingHeight : 0;

if (rectHeight == null) rectHeight = $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT;
let headerRect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(0, y, width, rectHeight);
let headerRect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(x, y, width - x, rectHeight);
let header = new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)('header', node.key, headerRect);

@@ -243,3 +276,3 @@ header.estimatedSize = isEstimated;

buildItem(node, x, y) {
let width = this.virtualizer.visibleRect.width;
let width = this.virtualizer.visibleRect.width - this.padding - x;
let rectHeight = this.rowHeight;

@@ -255,3 +288,3 @@ let isEstimated = false;

rectHeight = previousLayoutNode.layoutInfo.rect.height;
isEstimated = width !== this.lastWidth || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
isEstimated = width !== previousLayoutNode.layoutInfo.rect.width || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
} else {

@@ -263,3 +296,3 @@ rectHeight = this.estimatedRowHeight;

if (rectHeight == null) rectHeight = $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT;
let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(x, y, width - x, rectHeight);
let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(x, y, width, rectHeight);
let layoutInfo = new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);

@@ -278,2 +311,3 @@ layoutInfo.estimatedSize = isEstimated;

if (!layoutNode) return false;
let collection = this.virtualizer.collection;
let layoutInfo = layoutNode.layoutInfo;

@@ -293,6 +327,6 @@ layoutInfo.estimatedSize = false;

this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
let node = this.collection.getItem(layoutInfo.parentKey);
let node = layoutInfo.parentKey != null ? collection.getItem(layoutInfo.parentKey) : null;
while(node){
this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
node = this.collection.getItem(node.parentKey);
node = node.parentKey != null ? collection.getItem(node.parentKey) : null;
}

@@ -319,6 +353,7 @@ return true;

let key = this.virtualizer.keyAtPoint(new (0, $iId4j$reactstatelyvirtualizer.Point)(x, y));
if (key == null || this.collection.size === 0) return {
if (key == null || this.virtualizer.collection.size === 0) return {
type: 'root'
};
let layoutInfo = this.getLayoutInfo(key);
if (!layoutInfo) return null;
let rect = layoutInfo.rect;

@@ -365,12 +400,19 @@ let target = {

super();
this.rowHeight = options.rowHeight;
this.estimatedRowHeight = options.estimatedRowHeight;
this.headingHeight = options.headingHeight;
this.estimatedHeadingHeight = options.estimatedHeadingHeight;
this.loaderHeight = options.loaderHeight;
var _options_rowHeight;
this.rowHeight = (_options_rowHeight = options.rowHeight) !== null && _options_rowHeight !== void 0 ? _options_rowHeight : null;
var _options_estimatedRowHeight;
this.estimatedRowHeight = (_options_estimatedRowHeight = options.estimatedRowHeight) !== null && _options_estimatedRowHeight !== void 0 ? _options_estimatedRowHeight : null;
var _options_headingHeight;
this.headingHeight = (_options_headingHeight = options.headingHeight) !== null && _options_headingHeight !== void 0 ? _options_headingHeight : null;
var _options_estimatedHeadingHeight;
this.estimatedHeadingHeight = (_options_estimatedHeadingHeight = options.estimatedHeadingHeight) !== null && _options_estimatedHeadingHeight !== void 0 ? _options_estimatedHeadingHeight : null;
var _options_loaderHeight;
this.loaderHeight = (_options_loaderHeight = options.loaderHeight) !== null && _options_loaderHeight !== void 0 ? _options_loaderHeight : null;
this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
this.gap = options.gap || 0;
this.padding = options.padding || 0;
this.layoutNodes = new Map();
this.rootNodes = [];
this.lastWidth = 0;
this.lastCollection = null;
this.invalidateEverything = false;
this.validRect = new (0, $iId4j$reactstatelyvirtualizer.Rect)();

@@ -377,0 +419,0 @@ this.requestedRect = new (0, $iId4j$reactstatelyvirtualizer.Rect)();

124

dist/ListLayout.module.js

@@ -18,2 +18,6 @@ import {getChildNodes as $img26$getChildNodes} from "@react-stately/collections";

class $61ef60fc9b1041f4$export$cacbb3924155d68e extends (0, $img26$Layout) {
// Backward compatibility for subclassing.
get collection() {
return this.virtualizer.collection;
}
getLayoutInfo(key) {

@@ -28,4 +32,4 @@ var _this_layoutNodes_get;

if (rect.height > 1) {
var _this_rowHeight;
let rowHeight = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
var _this_rowHeight, _ref;
let rowHeight = ((_ref = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) !== null && _ref !== void 0 ? _ref : $61ef60fc9b1041f4$var$DEFAULT_HEIGHT) + this.gap;
rect.y = Math.floor(rect.y / rowHeight) * rowHeight;

@@ -76,6 +80,12 @@ rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;

// In this case, we need to recalculate the entire layout.
return invalidationContext.sizeChanged;
// Also invalidate if fixed sizes/gaps change.
let options = invalidationContext.layoutOptions;
var _options_rowHeight, _options_headingHeight, _options_loaderHeight, _options_gap, _options_padding;
return invalidationContext.sizeChanged || this.rowHeight !== ((_options_rowHeight = options === null || options === void 0 ? void 0 : options.rowHeight) !== null && _options_rowHeight !== void 0 ? _options_rowHeight : this.rowHeight) || this.headingHeight !== ((_options_headingHeight = options === null || options === void 0 ? void 0 : options.headingHeight) !== null && _options_headingHeight !== void 0 ? _options_headingHeight : this.headingHeight) || this.loaderHeight !== ((_options_loaderHeight = options === null || options === void 0 ? void 0 : options.loaderHeight) !== null && _options_loaderHeight !== void 0 ? _options_loaderHeight : this.loaderHeight) || this.gap !== ((_options_gap = options === null || options === void 0 ? void 0 : options.gap) !== null && _options_gap !== void 0 ? _options_gap : this.gap) || this.padding !== ((_options_padding = options === null || options === void 0 ? void 0 : options.padding) !== null && _options_padding !== void 0 ? _options_padding : this.padding);
}
shouldInvalidateLayoutOptions(newOptions, oldOptions) {
return newOptions.rowHeight !== oldOptions.rowHeight || newOptions.estimatedRowHeight !== oldOptions.estimatedRowHeight || newOptions.headingHeight !== oldOptions.headingHeight || newOptions.estimatedHeadingHeight !== oldOptions.estimatedHeadingHeight || newOptions.loaderHeight !== oldOptions.loaderHeight || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || newOptions.gap !== oldOptions.gap || newOptions.padding !== oldOptions.padding;
}
update(invalidationContext) {
this.collection = this.virtualizer.collection;
let collection = this.virtualizer.collection;
// Reset valid rect if we will have to invalidate everything.

@@ -88,6 +98,23 @@ // Otherwise we can reuse cached layout infos outside the current visible rect.

}
let options = invalidationContext.layoutOptions;
var _options_rowHeight;
this.rowHeight = (_options_rowHeight = options === null || options === void 0 ? void 0 : options.rowHeight) !== null && _options_rowHeight !== void 0 ? _options_rowHeight : this.rowHeight;
var _options_estimatedRowHeight;
this.estimatedRowHeight = (_options_estimatedRowHeight = options === null || options === void 0 ? void 0 : options.estimatedRowHeight) !== null && _options_estimatedRowHeight !== void 0 ? _options_estimatedRowHeight : this.estimatedRowHeight;
var _options_headingHeight;
this.headingHeight = (_options_headingHeight = options === null || options === void 0 ? void 0 : options.headingHeight) !== null && _options_headingHeight !== void 0 ? _options_headingHeight : this.headingHeight;
var _options_estimatedHeadingHeight;
this.estimatedHeadingHeight = (_options_estimatedHeadingHeight = options === null || options === void 0 ? void 0 : options.estimatedHeadingHeight) !== null && _options_estimatedHeadingHeight !== void 0 ? _options_estimatedHeadingHeight : this.estimatedHeadingHeight;
var _options_loaderHeight;
this.loaderHeight = (_options_loaderHeight = options === null || options === void 0 ? void 0 : options.loaderHeight) !== null && _options_loaderHeight !== void 0 ? _options_loaderHeight : this.loaderHeight;
var _options_dropIndicatorThickness;
this.dropIndicatorThickness = (_options_dropIndicatorThickness = options === null || options === void 0 ? void 0 : options.dropIndicatorThickness) !== null && _options_dropIndicatorThickness !== void 0 ? _options_dropIndicatorThickness : this.dropIndicatorThickness;
var _options_gap;
this.gap = (_options_gap = options === null || options === void 0 ? void 0 : options.gap) !== null && _options_gap !== void 0 ? _options_gap : this.gap;
var _options_padding;
this.padding = (_options_padding = options === null || options === void 0 ? void 0 : options.padding) !== null && _options_padding !== void 0 ? _options_padding : this.padding;
this.rootNodes = this.buildCollection();
// Remove deleted layout nodes
if (this.lastCollection && this.collection !== this.lastCollection) {
for (let key of this.lastCollection.getKeys())if (!this.collection.getItem(key)) {
if (this.lastCollection && collection !== this.lastCollection) {
for (let key of this.lastCollection.getKeys())if (!collection.getItem(key)) {
let layoutNode = this.layoutNodes.get(key);

@@ -97,13 +124,13 @@ if (layoutNode) this.layoutNodes.delete(key);

}
this.lastWidth = this.virtualizer.visibleRect.width;
this.lastCollection = this.collection;
this.lastCollection = collection;
this.invalidateEverything = false;
this.validRect = this.requestedRect.copy();
}
buildCollection(y = 0) {
buildCollection(y = this.padding) {
let collection = this.virtualizer.collection;
let skipped = 0;
let nodes = [];
for (let node of this.collection){
var _this_rowHeight;
let rowHeight = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
for (let node of collection){
var _this_rowHeight, _ref;
let rowHeight = ((_ref = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) !== null && _ref !== void 0 ? _ref : $61ef60fc9b1041f4$var$DEFAULT_HEIGHT) + this.gap;
// Skip rows before the valid rectangle unless they are already cached.

@@ -115,10 +142,12 @@ if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

}
let layoutNode = this.buildChild(node, 0, y, null);
y = layoutNode.layoutInfo.rect.maxY;
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) {
y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
y += (collection.size - (nodes.length + skipped)) * rowHeight;
break;
}
}
y -= this.gap;
y += this.padding;
this.contentSize = new (0, $img26$Size)(this.virtualizer.visibleRect.width, y);

@@ -148,9 +177,11 @@ return nodes;

return this.buildLoader(node, x, y);
default:
throw new Error('Unsupported node type: ' + node.type);
}
}
buildLoader(node, x, y) {
let rect = new (0, $img26$Rect)(x, y, 0, 0);
let rect = new (0, $img26$Rect)(x, y, this.padding, 0);
let layoutInfo = new (0, $img26$LayoutInfo)('loader', node.key, rect);
rect.width = this.virtualizer.contentSize.width;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight;
rect.width = this.virtualizer.contentSize.width - this.padding - x;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight || $61ef60fc9b1041f4$var$DEFAULT_HEIGHT;
return {

@@ -162,4 +193,5 @@ layoutInfo: layoutInfo,

buildSection(node, x, y) {
let width = this.virtualizer.visibleRect.width;
let rect = new (0, $img26$Rect)(0, y, width, 0);
let collection = this.virtualizer.collection;
let width = this.virtualizer.visibleRect.width - this.padding;
let rect = new (0, $img26$Rect)(x, y, width - x, 0);
let layoutInfo = new (0, $img26$LayoutInfo)(node.type, node.key, rect);

@@ -169,5 +201,5 @@ let startY = y;

let children = [];
for (let child of (0, $img26$getChildNodes)(node, this.collection)){
var _this_rowHeight;
let rowHeight = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
for (let child of (0, $img26$getChildNodes)(node, collection)){
var _this_rowHeight, _ref;
let rowHeight = ((_ref = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) !== null && _ref !== void 0 ? _ref : $61ef60fc9b1041f4$var$DEFAULT_HEIGHT) + this.gap;
// Skip rows before the valid rectangle unless they are already cached.

@@ -180,3 +212,3 @@ if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

let layoutNode = this.buildChild(child, x, y, layoutInfo.key);
y = layoutNode.layoutInfo.rect.maxY;
y = layoutNode.layoutInfo.rect.maxY + this.gap;
children.push(layoutNode);

@@ -186,3 +218,3 @@ if (y > this.requestedRect.maxY) {

y += ([
...(0, $img26$getChildNodes)(node, this.collection)
...(0, $img26$getChildNodes)(node, collection)
].length - (children.length + skipped)) * rowHeight;

@@ -192,2 +224,3 @@ break;

}
y -= this.gap;
rect.height = y - startY;

@@ -202,3 +235,3 @@ return {

buildSectionHeader(node, x, y) {
let width = this.virtualizer.visibleRect.width;
let width = this.virtualizer.visibleRect.width - this.padding;
let rectHeight = this.headingHeight;

@@ -214,6 +247,6 @@ let isEstimated = false;

if (previousLayoutInfo) {
let curNode = this.collection.getItem(node.key);
let curNode = this.virtualizer.collection.getItem(node.key);
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
rectHeight = previousLayoutInfo.rect.height;
isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutInfo.estimatedSize;
isEstimated = width !== previousLayoutInfo.rect.width || curNode !== lastNode || previousLayoutInfo.estimatedSize;
} else {

@@ -225,3 +258,3 @@ rectHeight = node.rendered ? this.estimatedHeadingHeight : 0;

if (rectHeight == null) rectHeight = $61ef60fc9b1041f4$var$DEFAULT_HEIGHT;
let headerRect = new (0, $img26$Rect)(0, y, width, rectHeight);
let headerRect = new (0, $img26$Rect)(x, y, width - x, rectHeight);
let header = new (0, $img26$LayoutInfo)('header', node.key, headerRect);

@@ -237,3 +270,3 @@ header.estimatedSize = isEstimated;

buildItem(node, x, y) {
let width = this.virtualizer.visibleRect.width;
let width = this.virtualizer.visibleRect.width - this.padding - x;
let rectHeight = this.rowHeight;

@@ -249,3 +282,3 @@ let isEstimated = false;

rectHeight = previousLayoutNode.layoutInfo.rect.height;
isEstimated = width !== this.lastWidth || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
isEstimated = width !== previousLayoutNode.layoutInfo.rect.width || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
} else {

@@ -257,3 +290,3 @@ rectHeight = this.estimatedRowHeight;

if (rectHeight == null) rectHeight = $61ef60fc9b1041f4$var$DEFAULT_HEIGHT;
let rect = new (0, $img26$Rect)(x, y, width - x, rectHeight);
let rect = new (0, $img26$Rect)(x, y, width, rectHeight);
let layoutInfo = new (0, $img26$LayoutInfo)(node.type, node.key, rect);

@@ -272,2 +305,3 @@ layoutInfo.estimatedSize = isEstimated;

if (!layoutNode) return false;
let collection = this.virtualizer.collection;
let layoutInfo = layoutNode.layoutInfo;

@@ -287,6 +321,6 @@ layoutInfo.estimatedSize = false;

this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
let node = this.collection.getItem(layoutInfo.parentKey);
let node = layoutInfo.parentKey != null ? collection.getItem(layoutInfo.parentKey) : null;
while(node){
this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
node = this.collection.getItem(node.parentKey);
node = node.parentKey != null ? collection.getItem(node.parentKey) : null;
}

@@ -313,6 +347,7 @@ return true;

let key = this.virtualizer.keyAtPoint(new (0, $img26$Point)(x, y));
if (key == null || this.collection.size === 0) return {
if (key == null || this.virtualizer.collection.size === 0) return {
type: 'root'
};
let layoutInfo = this.getLayoutInfo(key);
if (!layoutInfo) return null;
let rect = layoutInfo.rect;

@@ -359,12 +394,19 @@ let target = {

super();
this.rowHeight = options.rowHeight;
this.estimatedRowHeight = options.estimatedRowHeight;
this.headingHeight = options.headingHeight;
this.estimatedHeadingHeight = options.estimatedHeadingHeight;
this.loaderHeight = options.loaderHeight;
var _options_rowHeight;
this.rowHeight = (_options_rowHeight = options.rowHeight) !== null && _options_rowHeight !== void 0 ? _options_rowHeight : null;
var _options_estimatedRowHeight;
this.estimatedRowHeight = (_options_estimatedRowHeight = options.estimatedRowHeight) !== null && _options_estimatedRowHeight !== void 0 ? _options_estimatedRowHeight : null;
var _options_headingHeight;
this.headingHeight = (_options_headingHeight = options.headingHeight) !== null && _options_headingHeight !== void 0 ? _options_headingHeight : null;
var _options_estimatedHeadingHeight;
this.estimatedHeadingHeight = (_options_estimatedHeadingHeight = options.estimatedHeadingHeight) !== null && _options_estimatedHeadingHeight !== void 0 ? _options_estimatedHeadingHeight : null;
var _options_loaderHeight;
this.loaderHeight = (_options_loaderHeight = options.loaderHeight) !== null && _options_loaderHeight !== void 0 ? _options_loaderHeight : null;
this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
this.gap = options.gap || 0;
this.padding = options.padding || 0;
this.layoutNodes = new Map();
this.rootNodes = [];
this.lastWidth = 0;
this.lastCollection = null;
this.invalidateEverything = false;
this.validRect = new (0, $img26$Rect)();

@@ -371,0 +413,0 @@ this.requestedRect = new (0, $img26$Rect)();

3

dist/main.js
var $1f7773ceb2a3b9a6$exports = require("./GridLayout.main.js");
var $fe69e47e38ed0ac4$exports = require("./ListLayout.main.js");
var $67c493497dcda343$exports = require("./TableLayout.main.js");
var $f2cd6b90da09fa37$exports = require("./WaterfallLayout.main.js");

@@ -13,2 +14,3 @@

$parcel$export(module.exports, "TableLayout", () => $67c493497dcda343$exports.TableLayout);
$parcel$export(module.exports, "WaterfallLayout", () => $f2cd6b90da09fa37$exports.WaterfallLayout);
/*

@@ -29,2 +31,3 @@ * Copyright 2020 Adobe. All rights reserved.

//# sourceMappingURL=main.js.map

4

dist/module.js
import {GridLayout as $a58592d295a170a4$export$7d2b12578154a735} from "./GridLayout.module.js";
import {ListLayout as $61ef60fc9b1041f4$export$cacbb3924155d68e} from "./ListLayout.module.js";
import {TableLayout as $a152112e902709bf$export$62444c3c724b1b20} from "./TableLayout.module.js";
import {WaterfallLayout as $f483179558aa907f$export$e9f7cda058ba8df8} from "./WaterfallLayout.module.js";

@@ -20,3 +21,4 @@ /*

export {$a58592d295a170a4$export$7d2b12578154a735 as GridLayout, $61ef60fc9b1041f4$export$cacbb3924155d68e as ListLayout, $a152112e902709bf$export$62444c3c724b1b20 as TableLayout};
export {$a58592d295a170a4$export$7d2b12578154a735 as GridLayout, $61ef60fc9b1041f4$export$cacbb3924155d68e as ListLayout, $a152112e902709bf$export$62444c3c724b1b20 as TableLayout, $f483179558aa907f$export$e9f7cda058ba8df8 as WaterfallLayout};
//# sourceMappingURL=module.js.map

115

dist/TableLayout.main.js

@@ -26,6 +26,14 @@ var $fe69e47e38ed0ac4$exports = require("./ListLayout.main.js");

const $67c493497dcda343$var$DEFAULT_ROW_HEIGHT = 48;
class $67c493497dcda343$export$62444c3c724b1b20 extends (0, $fe69e47e38ed0ac4$exports.ListLayout) {
// Backward compatibility for subclassing.
get collection() {
return this.virtualizer.collection;
}
columnsChanged(newCollection, oldCollection) {
return !oldCollection || newCollection.columns !== oldCollection.columns && newCollection.columns.length !== oldCollection.columns.length || newCollection.columns.some((c, i)=>c.key !== oldCollection.columns[i].key || c.props.width !== oldCollection.columns[i].props.width || c.props.minWidth !== oldCollection.columns[i].props.minWidth || c.props.maxWidth !== oldCollection.columns[i].props.maxWidth);
}
shouldInvalidateLayoutOptions(newOptions, oldOptions) {
return newOptions.columnWidths !== oldOptions.columnWidths || super.shouldInvalidateLayoutOptions(newOptions, oldOptions);
}
update(invalidationContext) {

@@ -41,5 +49,5 @@ var _invalidationContext_layoutOptions;

}
} else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.collection)) {
} else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
let columnLayout = new (0, $9lycG$reactstatelytable.TableColumnLayout)({});
this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width, newCollection, new Map());
this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width - this.padding * 2, newCollection, new Map());
invalidationContext.sizeChanged = true;

@@ -51,11 +59,12 @@ }

this.stickyColumnIndices = [];
for (let column of this.collection.columns)// The selection cell and any other sticky columns always need to be visible.
let collection = this.virtualizer.collection;
for (let column of 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 (this.isStickyColumn(column) || this.collection.rowHeaderColumnKeys.has(column.key)) this.stickyColumnIndices.push(column.index);
if (this.isStickyColumn(column) || 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);
let body = this.buildBody(header.layoutInfo.rect.maxY + this.gap);
this.lastPersistedKeys = null;
body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
this.contentSize = new (0, $9lycG$reactstatelyvirtualizer.Size)(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
this.contentSize = new (0, $9lycG$reactstatelyvirtualizer.Size)(body.layoutInfo.rect.width + this.padding * 2, body.layoutInfo.rect.maxY + this.padding);
return [

@@ -67,13 +76,14 @@ header,

buildTableHeader() {
var _this_collection_head;
let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(0, 0, 0, 0);
var _this_collection_head_key;
let layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('header', (_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);
var _collection_head;
let collection = this.virtualizer.collection;
let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(this.padding, this.padding, 0, 0);
var _collection_head_key;
let layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('header', (_collection_head_key = (_collection_head = collection.head) === null || _collection_head === void 0 ? void 0 : _collection_head.key) !== null && _collection_head_key !== void 0 ? _collection_head_key : 'header', rect);
layoutInfo.isSticky = true;
layoutInfo.zIndex = 1;
let y = 0;
let y = this.padding;
let width = 0;
let children = [];
for (let headerRow of this.collection.headerRows){
let layoutNode = this.buildChild(headerRow, 0, y, layoutInfo.key);
for (let headerRow of collection.headerRows){
let layoutNode = this.buildChild(headerRow, this.padding, y, layoutInfo.key);
layoutNode.layoutInfo.parentKey = layoutInfo.key;

@@ -86,3 +96,3 @@ y = layoutNode.layoutInfo.rect.maxY;

rect.width = width;
rect.height = y;
rect.height = y - this.padding;
return {

@@ -92,11 +102,11 @@ layoutInfo: layoutInfo,

validRect: layoutInfo.rect,
node: this.collection.head
node: collection.head
};
}
buildHeaderRow(headerRow, x, y) {
let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(0, y, 0, 0);
let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(x, y, 0, 0);
let row = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('headerrow', headerRow.key, rect);
let height = 0;
let columns = [];
for (let cell of (0, $9lycG$reactstatelycollections.getChildNodes)(headerRow, this.collection)){
for (let cell of (0, $9lycG$reactstatelycollections.getChildNodes)(headerRow, this.virtualizer.collection)){
let layoutNode = this.buildChild(cell, x, y, row.key);

@@ -112,3 +122,3 @@ layoutNode.layoutInfo.parentKey = row.key;

rect.height = height;
rect.width = x;
rect.width = x - rect.x;
return {

@@ -130,10 +140,12 @@ layoutInfo: row,

getRenderedColumnWidth(node) {
var _node_colspan;
let colspan = (_node_colspan = node.colspan) !== null && _node_colspan !== void 0 ? _node_colspan : 1;
let collection = this.virtualizer.collection;
var _node_colSpan;
let colSpan = (_node_colSpan = node.colSpan) !== null && _node_colSpan !== void 0 ? _node_colSpan : 1;
var _node_colIndex;
let colIndex = (_node_colIndex = node.colIndex) !== null && _node_colIndex !== void 0 ? _node_colIndex : node.index;
let width = 0;
for(let i = colIndex; i < colIndex + colspan; i++){
let column = this.collection.columns[i];
if ((column === null || column === void 0 ? void 0 : column.key) != null) width += this.columnWidths.get(column.key);
for(let i = colIndex; i < colIndex + colSpan; i++){
let column = collection.columns[i];
var _this_columnWidths_get;
if ((column === null || column === void 0 ? void 0 : column.key) != null) width += (_this_columnWidths_get = this.columnWidths.get(column.key)) !== null && _this_columnWidths_get !== void 0 ? _this_columnWidths_get : 0;
}

@@ -154,3 +166,3 @@ return width;

} else {
height = estimatedHeight;
height = estimatedHeight !== null && estimatedHeight !== void 0 ? estimatedHeight : $67c493497dcda343$var$DEFAULT_ROW_HEIGHT;
isEstimated = true;

@@ -165,8 +177,9 @@ }

getEstimatedRowHeight() {
var _this_rowHeight;
return (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
var _this_rowHeight, _ref;
return (_ref = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) !== null && _ref !== void 0 ? _ref : $67c493497dcda343$var$DEFAULT_ROW_HEIGHT;
}
buildColumn(node, x, y) {
let width = this.getRenderedColumnWidth(node);
let { height: height, isEstimated: isEstimated } = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
var _this_headingHeight, _this_estimatedHeadingHeight;
let { height: height, isEstimated: isEstimated } = this.getEstimatedHeight(node, width, (_this_headingHeight = this.headingHeight) !== null && _this_headingHeight !== void 0 ? _this_headingHeight : this.rowHeight, (_this_estimatedHeadingHeight = this.estimatedHeadingHeight) !== null && _this_estimatedHeadingHeight !== void 0 ? _this_estimatedHeadingHeight : this.estimatedRowHeight);
let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(x, y, width, height);

@@ -190,4 +203,5 @@ let layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)(node.type, node.key, rect);

buildBody(y) {
let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(0, y, 0, 0);
let layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('rowgroup', this.collection.body.key, rect);
let collection = this.virtualizer.collection;
let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(this.padding, y, 0, 0);
let layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('rowgroup', collection.body.key, rect);
let startY = y;

@@ -197,4 +211,4 @@ let skipped = 0;

let children = [];
let rowHeight = this.getEstimatedRowHeight();
for (let node of (0, $9lycG$reactstatelycollections.getChildNodes)(this.collection.body, this.collection)){
let rowHeight = this.getEstimatedRowHeight() + this.gap;
for (let node of (0, $9lycG$reactstatelycollections.getChildNodes)(collection.body, collection)){
// Skip rows before the valid rectangle unless they are already cached.

@@ -206,6 +220,6 @@ if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

}
let layoutNode = this.buildChild(node, 0, y, layoutInfo.key);
let layoutNode = this.buildChild(node, this.padding, y, layoutInfo.key);
layoutNode.layoutInfo.parentKey = layoutInfo.key;
layoutNode.index = children.length;
y = layoutNode.layoutInfo.rect.maxY;
y = layoutNode.layoutInfo.rect.maxY + this.gap;
width = Math.max(width, layoutNode.layoutInfo.rect.width);

@@ -215,3 +229,3 @@ children.push(layoutNode);

// Estimate the remaining height for rows that we don't need to layout right now.
y += (this.collection.size - (skipped + children.length)) * rowHeight;
y += (collection.size - (skipped + children.length)) * rowHeight;
break;

@@ -221,2 +235,3 @@ }

if (children.length === 0) y = this.virtualizer.visibleRect.maxY;
else y -= this.gap;
rect.width = width;

@@ -228,3 +243,3 @@ rect.height = y - startY;

validRect: layoutInfo.rect.intersection(this.requestedRect),
node: this.collection.body
node: collection.body
};

@@ -250,3 +265,4 @@ }

buildRow(node, x, y) {
var _this_collection_head;
var _collection_head;
let collection = this.virtualizer.collection;
let rect = new (0, $9lycG$reactstatelyvirtualizer.Rect)(x, y, 0, 0);

@@ -256,3 +272,3 @@ let layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('row', node.key, rect);

let height = 0;
for (let child of (0, $9lycG$reactstatelycollections.getChildNodes)(node, this.collection))if (child.type === 'cell') {
for (let child of (0, $9lycG$reactstatelycollections.getChildNodes)(node, collection))if (child.type === 'cell') {
if (x > this.requestedRect.maxX) {

@@ -275,4 +291,4 @@ // Adjust existing cached layoutInfo to ensure that it is out of view.

this.setChildHeights(children, height);
var _this_collection_head_key;
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;
var _collection_head_key;
rect.width = this.layoutNodes.get((_collection_head_key = (_collection_head = collection.head) === null || _collection_head === void 0 ? void 0 : _collection_head.key) !== null && _collection_head_key !== void 0 ? _collection_head_key : 'header').layoutInfo.rect.width;
rect.height = height;

@@ -411,4 +427,4 @@ return {

while(layoutInfo && layoutInfo.parentKey){
var _this_layoutNodes_get1;
let collectionNode = this.collection.getItem(layoutInfo.key);
var _this_layoutNodes_get1, _this_layoutNodes_get2;
let collectionNode = this.virtualizer.collection.getItem(layoutInfo.key);
let indices = this.persistedIndices.get(layoutInfo.parentKey);

@@ -422,5 +438,5 @@ if (!indices) {

}
let index = this.layoutNodes.get(layoutInfo.key).index;
if (!indices.includes(index)) indices.push(index);
layoutInfo = (_this_layoutNodes_get1 = this.layoutNodes.get(layoutInfo.parentKey)) === null || _this_layoutNodes_get1 === void 0 ? void 0 : _this_layoutNodes_get1.layoutInfo;
let index = (_this_layoutNodes_get1 = this.layoutNodes.get(layoutInfo.key)) === null || _this_layoutNodes_get1 === void 0 ? void 0 : _this_layoutNodes_get1.index;
if (index != null && !indices.includes(index)) indices.push(index);
layoutInfo = (_this_layoutNodes_get2 = this.layoutNodes.get(layoutInfo.parentKey)) === null || _this_layoutNodes_get2 === void 0 ? void 0 : _this_layoutNodes_get2.layoutInfo;
}

@@ -434,3 +450,3 @@ }

// Custom variation of this.virtualizer.keyAtPoint that ignores body
let key;
let key = null;
let point = new (0, $9lycG$reactstatelyvirtualizer.Point)(x, y);

@@ -442,6 +458,7 @@ let rectAtPoint = new (0, $9lycG$reactstatelyvirtualizer.Rect)(point.x, point.y, 1, 1);

for (let layoutInfo of layoutInfos)if (layoutInfo.rect.intersects(rectAtPoint)) key = layoutInfo.key;
if (key == null || this.collection.size === 0) return {
if (key == null || this.virtualizer.collection.size === 0) return {
type: 'root'
};
let layoutInfo = this.getLayoutInfo(key);
if (!layoutInfo) return null;
let rect = layoutInfo.rect;

@@ -477,9 +494,7 @@ let target = {

let layoutInfo = super.getDropTargetLayoutInfo(target);
layoutInfo.parentKey = this.collection.body.key;
layoutInfo.parentKey = this.virtualizer.collection.body.key;
return layoutInfo;
}
constructor(options){
super(options);
this.lastPersistedKeys = null;
this.persistedIndices = new Map();
super(options), this.lastCollection = null, this.columnWidths = new Map(), this.lastPersistedKeys = null, this.persistedIndices = new Map();
this.stickyColumnIndices = [];

@@ -486,0 +501,0 @@ }

115

dist/TableLayout.module.js

@@ -20,6 +20,14 @@ import {ListLayout as $61ef60fc9b1041f4$export$cacbb3924155d68e} from "./ListLayout.module.js";

const $a152112e902709bf$var$DEFAULT_ROW_HEIGHT = 48;
class $a152112e902709bf$export$62444c3c724b1b20 extends (0, $61ef60fc9b1041f4$export$cacbb3924155d68e) {
// Backward compatibility for subclassing.
get collection() {
return this.virtualizer.collection;
}
columnsChanged(newCollection, oldCollection) {
return !oldCollection || newCollection.columns !== oldCollection.columns && newCollection.columns.length !== oldCollection.columns.length || newCollection.columns.some((c, i)=>c.key !== oldCollection.columns[i].key || c.props.width !== oldCollection.columns[i].props.width || c.props.minWidth !== oldCollection.columns[i].props.minWidth || c.props.maxWidth !== oldCollection.columns[i].props.maxWidth);
}
shouldInvalidateLayoutOptions(newOptions, oldOptions) {
return newOptions.columnWidths !== oldOptions.columnWidths || super.shouldInvalidateLayoutOptions(newOptions, oldOptions);
}
update(invalidationContext) {

@@ -35,5 +43,5 @@ var _invalidationContext_layoutOptions;

}
} else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.collection)) {
} else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
let columnLayout = new (0, $bmsJv$TableColumnLayout)({});
this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width, newCollection, new Map());
this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width - this.padding * 2, newCollection, new Map());
invalidationContext.sizeChanged = true;

@@ -45,11 +53,12 @@ }

this.stickyColumnIndices = [];
for (let column of this.collection.columns)// The selection cell and any other sticky columns always need to be visible.
let collection = this.virtualizer.collection;
for (let column of 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 (this.isStickyColumn(column) || this.collection.rowHeaderColumnKeys.has(column.key)) this.stickyColumnIndices.push(column.index);
if (this.isStickyColumn(column) || 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);
let body = this.buildBody(header.layoutInfo.rect.maxY + this.gap);
this.lastPersistedKeys = null;
body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
this.contentSize = new (0, $bmsJv$Size)(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
this.contentSize = new (0, $bmsJv$Size)(body.layoutInfo.rect.width + this.padding * 2, body.layoutInfo.rect.maxY + this.padding);
return [

@@ -61,13 +70,14 @@ header,

buildTableHeader() {
var _this_collection_head;
let rect = new (0, $bmsJv$Rect)(0, 0, 0, 0);
var _this_collection_head_key;
let layoutInfo = new (0, $bmsJv$LayoutInfo)('header', (_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);
var _collection_head;
let collection = this.virtualizer.collection;
let rect = new (0, $bmsJv$Rect)(this.padding, this.padding, 0, 0);
var _collection_head_key;
let layoutInfo = new (0, $bmsJv$LayoutInfo)('header', (_collection_head_key = (_collection_head = collection.head) === null || _collection_head === void 0 ? void 0 : _collection_head.key) !== null && _collection_head_key !== void 0 ? _collection_head_key : 'header', rect);
layoutInfo.isSticky = true;
layoutInfo.zIndex = 1;
let y = 0;
let y = this.padding;
let width = 0;
let children = [];
for (let headerRow of this.collection.headerRows){
let layoutNode = this.buildChild(headerRow, 0, y, layoutInfo.key);
for (let headerRow of collection.headerRows){
let layoutNode = this.buildChild(headerRow, this.padding, y, layoutInfo.key);
layoutNode.layoutInfo.parentKey = layoutInfo.key;

@@ -80,3 +90,3 @@ y = layoutNode.layoutInfo.rect.maxY;

rect.width = width;
rect.height = y;
rect.height = y - this.padding;
return {

@@ -86,11 +96,11 @@ layoutInfo: layoutInfo,

validRect: layoutInfo.rect,
node: this.collection.head
node: collection.head
};
}
buildHeaderRow(headerRow, x, y) {
let rect = new (0, $bmsJv$Rect)(0, y, 0, 0);
let rect = new (0, $bmsJv$Rect)(x, y, 0, 0);
let row = new (0, $bmsJv$LayoutInfo)('headerrow', headerRow.key, rect);
let height = 0;
let columns = [];
for (let cell of (0, $bmsJv$getChildNodes)(headerRow, this.collection)){
for (let cell of (0, $bmsJv$getChildNodes)(headerRow, this.virtualizer.collection)){
let layoutNode = this.buildChild(cell, x, y, row.key);

@@ -106,3 +116,3 @@ layoutNode.layoutInfo.parentKey = row.key;

rect.height = height;
rect.width = x;
rect.width = x - rect.x;
return {

@@ -124,10 +134,12 @@ layoutInfo: row,

getRenderedColumnWidth(node) {
var _node_colspan;
let colspan = (_node_colspan = node.colspan) !== null && _node_colspan !== void 0 ? _node_colspan : 1;
let collection = this.virtualizer.collection;
var _node_colSpan;
let colSpan = (_node_colSpan = node.colSpan) !== null && _node_colSpan !== void 0 ? _node_colSpan : 1;
var _node_colIndex;
let colIndex = (_node_colIndex = node.colIndex) !== null && _node_colIndex !== void 0 ? _node_colIndex : node.index;
let width = 0;
for(let i = colIndex; i < colIndex + colspan; i++){
let column = this.collection.columns[i];
if ((column === null || column === void 0 ? void 0 : column.key) != null) width += this.columnWidths.get(column.key);
for(let i = colIndex; i < colIndex + colSpan; i++){
let column = collection.columns[i];
var _this_columnWidths_get;
if ((column === null || column === void 0 ? void 0 : column.key) != null) width += (_this_columnWidths_get = this.columnWidths.get(column.key)) !== null && _this_columnWidths_get !== void 0 ? _this_columnWidths_get : 0;
}

@@ -148,3 +160,3 @@ return width;

} else {
height = estimatedHeight;
height = estimatedHeight !== null && estimatedHeight !== void 0 ? estimatedHeight : $a152112e902709bf$var$DEFAULT_ROW_HEIGHT;
isEstimated = true;

@@ -159,8 +171,9 @@ }

getEstimatedRowHeight() {
var _this_rowHeight;
return (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight;
var _this_rowHeight, _ref;
return (_ref = (_this_rowHeight = this.rowHeight) !== null && _this_rowHeight !== void 0 ? _this_rowHeight : this.estimatedRowHeight) !== null && _ref !== void 0 ? _ref : $a152112e902709bf$var$DEFAULT_ROW_HEIGHT;
}
buildColumn(node, x, y) {
let width = this.getRenderedColumnWidth(node);
let { height: height, isEstimated: isEstimated } = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
var _this_headingHeight, _this_estimatedHeadingHeight;
let { height: height, isEstimated: isEstimated } = this.getEstimatedHeight(node, width, (_this_headingHeight = this.headingHeight) !== null && _this_headingHeight !== void 0 ? _this_headingHeight : this.rowHeight, (_this_estimatedHeadingHeight = this.estimatedHeadingHeight) !== null && _this_estimatedHeadingHeight !== void 0 ? _this_estimatedHeadingHeight : this.estimatedRowHeight);
let rect = new (0, $bmsJv$Rect)(x, y, width, height);

@@ -184,4 +197,5 @@ let layoutInfo = new (0, $bmsJv$LayoutInfo)(node.type, node.key, rect);

buildBody(y) {
let rect = new (0, $bmsJv$Rect)(0, y, 0, 0);
let layoutInfo = new (0, $bmsJv$LayoutInfo)('rowgroup', this.collection.body.key, rect);
let collection = this.virtualizer.collection;
let rect = new (0, $bmsJv$Rect)(this.padding, y, 0, 0);
let layoutInfo = new (0, $bmsJv$LayoutInfo)('rowgroup', collection.body.key, rect);
let startY = y;

@@ -191,4 +205,4 @@ let skipped = 0;

let children = [];
let rowHeight = this.getEstimatedRowHeight();
for (let node of (0, $bmsJv$getChildNodes)(this.collection.body, this.collection)){
let rowHeight = this.getEstimatedRowHeight() + this.gap;
for (let node of (0, $bmsJv$getChildNodes)(collection.body, collection)){
// Skip rows before the valid rectangle unless they are already cached.

@@ -200,6 +214,6 @@ if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

}
let layoutNode = this.buildChild(node, 0, y, layoutInfo.key);
let layoutNode = this.buildChild(node, this.padding, y, layoutInfo.key);
layoutNode.layoutInfo.parentKey = layoutInfo.key;
layoutNode.index = children.length;
y = layoutNode.layoutInfo.rect.maxY;
y = layoutNode.layoutInfo.rect.maxY + this.gap;
width = Math.max(width, layoutNode.layoutInfo.rect.width);

@@ -209,3 +223,3 @@ children.push(layoutNode);

// Estimate the remaining height for rows that we don't need to layout right now.
y += (this.collection.size - (skipped + children.length)) * rowHeight;
y += (collection.size - (skipped + children.length)) * rowHeight;
break;

@@ -215,2 +229,3 @@ }

if (children.length === 0) y = this.virtualizer.visibleRect.maxY;
else y -= this.gap;
rect.width = width;

@@ -222,3 +237,3 @@ rect.height = y - startY;

validRect: layoutInfo.rect.intersection(this.requestedRect),
node: this.collection.body
node: collection.body
};

@@ -244,3 +259,4 @@ }

buildRow(node, x, y) {
var _this_collection_head;
var _collection_head;
let collection = this.virtualizer.collection;
let rect = new (0, $bmsJv$Rect)(x, y, 0, 0);

@@ -250,3 +266,3 @@ let layoutInfo = new (0, $bmsJv$LayoutInfo)('row', node.key, rect);

let height = 0;
for (let child of (0, $bmsJv$getChildNodes)(node, this.collection))if (child.type === 'cell') {
for (let child of (0, $bmsJv$getChildNodes)(node, collection))if (child.type === 'cell') {
if (x > this.requestedRect.maxX) {

@@ -269,4 +285,4 @@ // Adjust existing cached layoutInfo to ensure that it is out of view.

this.setChildHeights(children, height);
var _this_collection_head_key;
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;
var _collection_head_key;
rect.width = this.layoutNodes.get((_collection_head_key = (_collection_head = collection.head) === null || _collection_head === void 0 ? void 0 : _collection_head.key) !== null && _collection_head_key !== void 0 ? _collection_head_key : 'header').layoutInfo.rect.width;
rect.height = height;

@@ -405,4 +421,4 @@ return {

while(layoutInfo && layoutInfo.parentKey){
var _this_layoutNodes_get1;
let collectionNode = this.collection.getItem(layoutInfo.key);
var _this_layoutNodes_get1, _this_layoutNodes_get2;
let collectionNode = this.virtualizer.collection.getItem(layoutInfo.key);
let indices = this.persistedIndices.get(layoutInfo.parentKey);

@@ -416,5 +432,5 @@ if (!indices) {

}
let index = this.layoutNodes.get(layoutInfo.key).index;
if (!indices.includes(index)) indices.push(index);
layoutInfo = (_this_layoutNodes_get1 = this.layoutNodes.get(layoutInfo.parentKey)) === null || _this_layoutNodes_get1 === void 0 ? void 0 : _this_layoutNodes_get1.layoutInfo;
let index = (_this_layoutNodes_get1 = this.layoutNodes.get(layoutInfo.key)) === null || _this_layoutNodes_get1 === void 0 ? void 0 : _this_layoutNodes_get1.index;
if (index != null && !indices.includes(index)) indices.push(index);
layoutInfo = (_this_layoutNodes_get2 = this.layoutNodes.get(layoutInfo.parentKey)) === null || _this_layoutNodes_get2 === void 0 ? void 0 : _this_layoutNodes_get2.layoutInfo;
}

@@ -428,3 +444,3 @@ }

// Custom variation of this.virtualizer.keyAtPoint that ignores body
let key;
let key = null;
let point = new (0, $bmsJv$Point)(x, y);

@@ -436,6 +452,7 @@ let rectAtPoint = new (0, $bmsJv$Rect)(point.x, point.y, 1, 1);

for (let layoutInfo of layoutInfos)if (layoutInfo.rect.intersects(rectAtPoint)) key = layoutInfo.key;
if (key == null || this.collection.size === 0) return {
if (key == null || this.virtualizer.collection.size === 0) return {
type: 'root'
};
let layoutInfo = this.getLayoutInfo(key);
if (!layoutInfo) return null;
let rect = layoutInfo.rect;

@@ -471,9 +488,7 @@ let target = {

let layoutInfo = super.getDropTargetLayoutInfo(target);
layoutInfo.parentKey = this.collection.body.key;
layoutInfo.parentKey = this.virtualizer.collection.body.key;
return layoutInfo;
}
constructor(options){
super(options);
this.lastPersistedKeys = null;
this.persistedIndices = new Map();
super(options), this.lastCollection = null, this.columnWidths = new Map(), this.lastPersistedKeys = null, this.persistedIndices = new Map();
this.stickyColumnIndices = [];

@@ -480,0 +495,0 @@ }

155

dist/types.d.ts

@@ -1,3 +0,3 @@

import { DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node, Collection } from "@react-types/shared";
import { Layout, LayoutInfo, Rect, Size, InvalidationContext } from "@react-stately/virtualizer";
import { DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node, Collection, LayoutDelegate } from "@react-types/shared";
import { InvalidationContext, Layout, LayoutInfo, Rect, Size } from "@react-stately/virtualizer";
import { GridNode } from "@react-types/grid";

@@ -17,2 +17,9 @@ import { TableCollection } from "@react-types/table";

/**
* Whether to preserve the aspect ratio of the `minItemSize`.
* By default, grid rows may have variable heights. When `preserveAspectRatio`
* is true, all rows will have equal heights.
* @default false
*/
preserveAspectRatio?: boolean;
/**
* The minimum space required between items.

@@ -33,19 +40,18 @@ * @default 18 x 18

}
export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
protected minItemSize: Size;
protected maxItemSize: Size;
protected minSpace: Size;
protected maxColumns: number;
/**
* GridLayout is a virtualizer Layout implementation
* that arranges its items in a grid.
* The items are sized between a minimum and maximum size
* depending on the width of the container.
*/
export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> extends Layout<Node<T>, O> implements DropTargetDelegate {
protected gap: Size;
protected dropIndicatorThickness: number;
protected itemSize: Size;
protected numColumns: number;
protected horizontalSpacing: number;
protected layoutInfos: LayoutInfo[];
constructor(options: GridLayoutOptions);
update(): void;
shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
update(invalidationContext: InvalidationContext<O>): void;
getLayoutInfo(key: Key): LayoutInfo;
getContentSize(): Size;
getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
protected getIndexAtPoint(x: number, y: number): number;
getLayoutInfo(key: Key): LayoutInfo | null;
protected getLayoutInfoForNode(node: Node<T>): LayoutInfo;
getContentSize(): Size;
updateItemSize(key: Key, size: Size): boolean;
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;

@@ -55,16 +61,37 @@ getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;

export interface ListLayoutOptions {
/** The fixed height of a row in px. */
/**
* The fixed height of a row in px.
* @default 48
*/
rowHeight?: number;
/** The estimated height of a row, when row heights are variable. */
estimatedRowHeight?: number;
/** The fixed height of a section header in px. */
/**
* The fixed height of a section header in px.
* @default 48
*/
headingHeight?: number;
/** The estimated height of a section header, when the height is variable. */
estimatedHeadingHeight?: number;
/** The fixed height of a loader element in px. This loader is specifically for
/**
* The fixed height of a loader element in px. This loader is specifically for
* "load more" elements rendered when loading more rows at the root level or inside nested row/sections.
* @default 48
*/
loaderHeight?: number;
/** The thickness of the drop indicator. */
/**
* The thickness of the drop indicator.
* @default 2
*/
dropIndicatorThickness?: number;
/**
* The gap between items.
* @default 0
*/
gap?: number;
/**
* The padding around the list.
* @default 0
*/
padding?: number;
}

@@ -79,19 +106,18 @@ export interface LayoutNode {

/**
* The ListLayout class is an implementation of a virtualizer {@link Layout}.
* To configure a ListLayout, you can use the properties to define the
* layouts and/or use the method for defining indentation.
* The {@link ListKeyboardDelegate} extends the existing virtualizer
* delegate with an additional method to do this (it uses the same delegate object as
* the virtualizer itself).
* ListLayout is a virtualizer Layout implementation
* that arranges its items in a vertical stack. It supports both fixed
* and variable height items.
*/
export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
protected rowHeight: number;
protected estimatedRowHeight: number;
protected headingHeight: number;
protected estimatedHeadingHeight: number;
protected loaderHeight: number;
export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> extends Layout<Node<T>, O> implements DropTargetDelegate {
protected rowHeight: number | null;
protected estimatedRowHeight: number | null;
protected headingHeight: number | null;
protected estimatedHeadingHeight: number | null;
protected loaderHeight: number | null;
protected dropIndicatorThickness: number;
protected gap: number;
protected padding: number;
protected layoutNodes: Map<Key, LayoutNode>;
protected contentSize: Size;
protected collection: Collection<Node<T>>;
protected lastCollection: Collection<Node<T>> | null;
protected rootNodes: LayoutNode[];

@@ -107,3 +133,4 @@ /** The rectangle containing currently valid layout infos. */

constructor(options?: ListLayoutOptions);
getLayoutInfo(key: Key): LayoutInfo;
protected get collection(): Collection<Node<T>>;
getLayoutInfo(key: Key): LayoutInfo | null;
getVisibleLayoutInfos(rect: Rect): LayoutInfo[];

@@ -113,5 +140,6 @@ protected layoutIfNeeded(rect: Rect): void;

protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>): boolean;
shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
update(invalidationContext: InvalidationContext<O>): void;
protected buildCollection(y?: number): LayoutNode[];
protected isValid(node: Node<T>, y: number): boolean;
protected isValid(node: Node<T>, y: number): boolean | undefined;
protected buildChild(node: Node<T>, x: number, y: number, parentKey: Key | null): LayoutNode;

@@ -125,11 +153,17 @@ protected buildNode(node: Node<T>, x: number, y: number): LayoutNode;

getContentSize(): Size;
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null;
getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
}
export interface TableLayoutProps {
export interface TableLayoutProps extends ListLayoutOptions {
columnWidths?: Map<Key, number>;
}
/**
* TableLayout is a virtualizer Layout implementation that arranges
* items in rows and columns.
*/
export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
protected collection: TableCollection<T>;
constructor(options: ListLayoutOptions);
protected lastCollection: TableCollection<T> | null;
constructor(options?: ListLayoutOptions);
protected get collection(): TableCollection<T>;
shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
update(invalidationContext: InvalidationContext<O>): void;

@@ -147,6 +181,47 @@ protected buildCollection(): LayoutNode[];

getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null;
getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
}
export interface WaterfallLayoutOptions {
/**
* The minimum item size.
* @default 200 x 200
*/
minItemSize?: Size;
/**
* The maximum item size.
* @default Infinity
*/
maxItemSize?: Size;
/**
* The minimum space required between items.
* @default 18 x 18
*/
minSpace?: Size;
/**
* The maximum number of columns.
* @default Infinity
*/
maxColumns?: number;
/**
* The thickness of the drop indicator.
* @default 2
*/
dropIndicatorThickness?: number;
}
export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {
protected numColumns: number;
protected dropIndicatorThickness: number;
shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
update(invalidationContext: InvalidationContext<O>): void;
getLayoutInfo(key: Key): LayoutInfo;
getContentSize(): Size;
getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
updateItemSize(key: Key, size: Size): boolean;
getKeyRightOf(key: Key): Key | null;
getKeyLeftOf(key: Key): Key | null;
getKeyRange(from: Key, to: Key): Key[];
getDropTargetFromPoint(x: number, y: number): DropTarget;
}
//# sourceMappingURL=types.d.ts.map

20

package.json
{
"name": "@react-stately/layout",
"version": "3.0.0-nightly-e37ad74f5-241101",
"version": "3.0.0-nightly-e3b217ad5-250301",
"description": "Spectrum UI components in React",

@@ -25,17 +25,17 @@ "license": "Apache-2.0",

"dependencies": {
"@react-stately/collections": "^3.0.0-nightly-e37ad74f5-241101",
"@react-stately/table": "^3.0.0-nightly-e37ad74f5-241101",
"@react-stately/virtualizer": "^3.0.0-nightly-e37ad74f5-241101",
"@react-types/grid": "^3.0.0-nightly-e37ad74f5-241101",
"@react-types/shared": "^3.0.0-nightly-e37ad74f5-241101",
"@react-types/table": "^3.0.0-nightly-e37ad74f5-241101",
"@react-stately/collections": "3.0.0-nightly-e3b217ad5-250301",
"@react-stately/table": "3.0.0-nightly-e3b217ad5-250301",
"@react-stately/virtualizer": "3.0.0-nightly-e3b217ad5-250301",
"@react-types/grid": "3.0.0-nightly-e3b217ad5-250301",
"@react-types/shared": "3.0.0-nightly-e3b217ad5-250301",
"@react-types/table": "3.0.0-nightly-e3b217ad5-250301",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
},
"publishConfig": {
"access": "public"
},
"stableVersion": "4.0.3"
}
}

251

src/GridLayout.ts

@@ -14,3 +14,3 @@ /*

import {DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node} from '@react-types/shared';
import {Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
import {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';

@@ -29,2 +29,9 @@ export interface GridLayoutOptions {

/**
* Whether to preserve the aspect ratio of the `minItemSize`.
* By default, grid rows may have variable heights. When `preserveAspectRatio`
* is true, all rows will have equal heights.
* @default false
*/
preserveAspectRatio?: boolean,
/**
* The minimum space required between items.

@@ -46,125 +53,183 @@ * @default 18 x 18

export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
protected minItemSize: Size;
protected maxItemSize: Size;
protected minSpace: Size;
protected maxColumns: number;
protected dropIndicatorThickness: number;
protected itemSize: Size;
protected numColumns: number;
protected horizontalSpacing: number;
protected layoutInfos: LayoutInfo[];
const DEFAULT_OPTIONS = {
minItemSize: new Size(200, 200),
maxItemSize: new Size(Infinity, Infinity),
preserveAspectRatio: false,
minSpace: new Size(18, 18),
maxColumns: Infinity,
dropIndicatorThickness: 2
};
constructor(options: GridLayoutOptions) {
super();
this.minItemSize = options.minItemSize || new Size(200, 200);
this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);
this.minSpace = options.minSpace || new Size(18, 18);
this.maxColumns = options.maxColumns || Infinity;
this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
/**
* GridLayout is a virtualizer Layout implementation
* that arranges its items in a grid.
* The items are sized between a minimum and maximum size
* depending on the width of the container.
*/
export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> extends Layout<Node<T>, O> implements DropTargetDelegate {
protected gap: Size = DEFAULT_OPTIONS.minSpace;
protected dropIndicatorThickness = 2;
protected numColumns: number = 0;
private contentSize: Size = new Size();
private layoutInfos: Map<Key, LayoutInfo> = new Map();
shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
return newOptions.maxColumns !== oldOptions.maxColumns
|| newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness
|| newOptions.preserveAspectRatio !== oldOptions.preserveAspectRatio
|| (!(newOptions.minItemSize || DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || DEFAULT_OPTIONS.minItemSize))
|| (!(newOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize))
|| (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace));
}
update(): void {
let visibleWidth = this.virtualizer.visibleRect.width;
update(invalidationContext: InvalidationContext<O>): void {
let {
minItemSize = DEFAULT_OPTIONS.minItemSize,
maxItemSize = DEFAULT_OPTIONS.maxItemSize,
preserveAspectRatio = DEFAULT_OPTIONS.preserveAspectRatio,
minSpace = DEFAULT_OPTIONS.minSpace,
maxColumns = DEFAULT_OPTIONS.maxColumns,
dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness
} = invalidationContext.layoutOptions || {};
this.dropIndicatorThickness = dropIndicatorThickness;
let visibleWidth = this.virtualizer!.visibleRect.width;
// The max item width is always the entire viewport.
// If the max item height is infinity, scale in proportion to the max width.
let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
let maxItemHeight = Number.isFinite(this.maxItemSize.height)
? this.maxItemSize.height
: Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);
let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
let maxItemHeight = Number.isFinite(maxItemSize.height)
? maxItemSize.height
: Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);
// Compute the number of rows and columns needed to display the content
let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
let numColumns = Math.max(1, Math.min(maxColumns, columns));
// Compute the available width (minus the space between items)
let width = visibleWidth - (this.minSpace.width * Math.max(0, this.numColumns));
let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));
// Compute the item width based on the space available
let itemWidth = Math.floor(width / this.numColumns);
itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
let itemWidth = Math.floor(width / numColumns);
itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
// Compute the item height, which is proportional to the item width
let t = ((itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width));
let itemHeight = this.minItemSize.height + Math.floor((maxItemHeight - this.minItemSize.height) * t);
itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));
this.itemSize = new Size(itemWidth, itemHeight);
let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));
let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
// Compute the horizontal spacing and content height
this.horizontalSpacing = Math.floor((visibleWidth - this.numColumns * this.itemSize.width) / (this.numColumns + 1));
let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
this.gap = new Size(horizontalSpacing, minSpace.height);
this.layoutInfos = [];
for (let node of this.virtualizer.collection) {
this.layoutInfos.push(this.getLayoutInfoForNode(node));
}
}
let rows = Math.ceil(this.virtualizer!.collection.size / numColumns);
let iterator = this.virtualizer!.collection[Symbol.iterator]();
let y = rows > 0 ? minSpace.height : 0;
let newLayoutInfos = new Map();
let skeleton: Node<T> | null = null;
let skeletonCount = 0;
for (let row = 0; row < rows; row++) {
let maxHeight = 0;
let rowLayoutInfos: LayoutInfo[] = [];
for (let col = 0; col < numColumns; col++) {
// Repeat skeleton until the end of the current row.
let node = skeleton || iterator.next().value;
if (!node) {
break;
}
getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
let result = this.layoutInfos.slice(firstVisibleItem, lastVisibleItem + 1);
let persistedIndices: number[] = [];
for (let key of this.virtualizer.persistedKeys) {
let item = this.virtualizer.collection.getItem(key);
if (item?.index != null) {
persistedIndices.push(item.index);
if (node.type === 'skeleton') {
skeleton = node;
}
let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
let oldLayoutInfo = this.layoutInfos.get(key);
let content = node;
if (skeleton) {
content = oldLayoutInfo && oldLayoutInfo.content.key === key ? oldLayoutInfo.content : {...skeleton, key};
}
let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
let height = itemHeight;
let estimatedSize = !preserveAspectRatio;
if (oldLayoutInfo && estimatedSize) {
height = oldLayoutInfo.rect.height;
estimatedSize = invalidationContext.layoutOptionsChanged || invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);
}
let rect = new Rect(x, y, itemWidth, height);
let layoutInfo = new LayoutInfo(node.type, key, rect);
layoutInfo.estimatedSize = estimatedSize;
layoutInfo.allowOverflow = true;
layoutInfo.content = content;
newLayoutInfos.set(key, layoutInfo);
rowLayoutInfos.push(layoutInfo);
maxHeight = Math.max(maxHeight, layoutInfo.rect.height);
}
}
persistedIndices.sort((a, b) => a - b);
let persistedBefore: LayoutInfo[] = [];
for (let index of persistedIndices) {
if (index < firstVisibleItem) {
persistedBefore.push(this.layoutInfos[index]);
} else if (index > lastVisibleItem) {
result.push(this.layoutInfos[index]);
for (let layoutInfo of rowLayoutInfos) {
layoutInfo.rect.height = maxHeight;
}
y += maxHeight + minSpace.height;
// Keep adding skeleton rows until we fill the viewport
if (skeleton && row === rows - 1 && y < this.virtualizer!.visibleRect.height) {
rows++;
}
}
result.unshift(...persistedBefore);
return result;
this.layoutInfos = newLayoutInfos;
this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);
}
protected getIndexAtPoint(x: number, y: number) {
let itemHeight = this.itemSize.height + this.minSpace.height;
let itemWidth = this.itemSize.width + this.horizontalSpacing;
return Math.max(0,
Math.min(
this.virtualizer.collection.size - 1,
Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)
)
);
getLayoutInfo(key: Key): LayoutInfo {
return this.layoutInfos.get(key)!;
}
getLayoutInfo(key: Key): LayoutInfo | null {
let node = this.virtualizer.collection.getItem(key);
return node ? this.layoutInfos[node.index] : null;
getContentSize(): Size {
return this.contentSize;
}
protected getLayoutInfoForNode(node: Node<T>): LayoutInfo {
let idx = node.index;
let row = Math.floor(idx / this.numColumns);
let column = idx % this.numColumns;
let x = this.horizontalSpacing + column * (this.itemSize.width + this.horizontalSpacing);
let y = this.minSpace.height + row * (this.itemSize.height + this.minSpace.height);
let rect = new Rect(x, y, this.itemSize.width, this.itemSize.height);
return new LayoutInfo(node.type, node.key, rect);
getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
let layoutInfos: LayoutInfo[] = [];
for (let layoutInfo of this.layoutInfos.values()) {
if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {
layoutInfos.push(layoutInfo);
}
}
return layoutInfos;
}
getContentSize(): Size {
let numRows = Math.ceil(this.virtualizer.collection.size / this.numColumns);
let contentHeight = this.minSpace.height + numRows * (this.itemSize.height + this.minSpace.height);
return new Size(this.virtualizer.visibleRect.width, contentHeight);
updateItemSize(key: Key, size: Size) {
let layoutInfo = this.layoutInfos.get(key);
if (!size || !layoutInfo) {
return false;
}
if (size.height !== layoutInfo.rect.height) {
let newLayoutInfo = layoutInfo.copy();
newLayoutInfo.rect.height = size.height;
newLayoutInfo.estimatedSize = false;
this.layoutInfos.set(key, newLayoutInfo);
return true;
}
return false;
}
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
if (this.layoutInfos.length === 0) {
if (this.layoutInfos.size === 0) {
return {type: 'root'};
}
x += this.virtualizer.visibleRect.x;
y += this.virtualizer.visibleRect.y;
let index = this.getIndexAtPoint(x, y);
x += this.virtualizer!.visibleRect.x;
y += this.virtualizer!.visibleRect.y;
let layoutInfo = this.layoutInfos[index];
let key = this.virtualizer!.keyAtPoint(new Point(x, y));
let layoutInfo = key != null ? this.getLayoutInfo(key) : null;
if (!layoutInfo) {
return {type: 'root'};
}
let target: DropTarget = {

@@ -201,3 +266,3 @@ type: 'item',

getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
let layoutInfo = this.getLayoutInfo(target.key);
let layoutInfo = this.getLayoutInfo(target.key)!;
let rect: Rect;

@@ -209,4 +274,4 @@ if (this.numColumns === 1) {

target.dropPosition === 'before'
? layoutInfo.rect.y - this.minSpace.height / 2 - this.dropIndicatorThickness / 2
: layoutInfo.rect.maxY + this.minSpace.height / 2 - this.dropIndicatorThickness / 2,
? layoutInfo.rect.y - this.gap.height / 2 - this.dropIndicatorThickness / 2
: layoutInfo.rect.maxY + this.gap.height / 2 - this.dropIndicatorThickness / 2,
layoutInfo.rect.width,

@@ -218,4 +283,4 @@ this.dropIndicatorThickness

target.dropPosition === 'before'
? layoutInfo.rect.x - this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2
: layoutInfo.rect.maxX + this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2,
? layoutInfo.rect.x - this.gap.width / 2 - this.dropIndicatorThickness / 2
: layoutInfo.rect.maxX + this.gap.width / 2 - this.dropIndicatorThickness / 2,
layoutInfo.rect.y,

@@ -222,0 +287,0 @@ this.dropIndicatorThickness,

2

src/index.ts

@@ -15,4 +15,6 @@ /*

export type {TableLayoutProps} from './TableLayout';
export type {WaterfallLayoutOptions} from './WaterfallLayout';
export {GridLayout} from './GridLayout';
export {ListLayout} from './ListLayout';
export {TableLayout} from './TableLayout';
export {WaterfallLayout} from './WaterfallLayout';

206

src/ListLayout.ts

@@ -18,16 +18,37 @@ /*

export interface ListLayoutOptions {
/** The fixed height of a row in px. */
/**
* The fixed height of a row in px.
* @default 48
*/
rowHeight?: number,
/** The estimated height of a row, when row heights are variable. */
estimatedRowHeight?: number,
/** The fixed height of a section header in px. */
/**
* The fixed height of a section header in px.
* @default 48
*/
headingHeight?: number,
/** The estimated height of a section header, when the height is variable. */
estimatedHeadingHeight?: number,
/** The fixed height of a loader element in px. This loader is specifically for
/**
* The fixed height of a loader element in px. This loader is specifically for
* "load more" elements rendered when loading more rows at the root level or inside nested row/sections.
* @default 48
*/
loaderHeight?: number,
/** The thickness of the drop indicator. */
dropIndicatorThickness?: number
/**
* The thickness of the drop indicator.
* @default 2
*/
dropIndicatorThickness?: number,
/**
* The gap between items.
* @default 0
*/
gap?: number,
/**
* The padding around the list.
* @default 0
*/
padding?: number
}

@@ -47,21 +68,18 @@

/**
* The ListLayout class is an implementation of a virtualizer {@link Layout}.
* To configure a ListLayout, you can use the properties to define the
* layouts and/or use the method for defining indentation.
* The {@link ListKeyboardDelegate} extends the existing virtualizer
* delegate with an additional method to do this (it uses the same delegate object as
* the virtualizer itself).
* ListLayout is a virtualizer Layout implementation
* that arranges its items in a vertical stack. It supports both fixed
* and variable height items.
*/
export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
protected rowHeight: number;
protected estimatedRowHeight: number;
protected headingHeight: number;
protected estimatedHeadingHeight: number;
protected loaderHeight: number;
export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> extends Layout<Node<T>, O> implements DropTargetDelegate {
protected rowHeight: number | null;
protected estimatedRowHeight: number | null;
protected headingHeight: number | null;
protected estimatedHeadingHeight: number | null;
protected loaderHeight: number | null;
protected dropIndicatorThickness: number;
protected gap: number;
protected padding: number;
protected layoutNodes: Map<Key, LayoutNode>;
protected contentSize: Size;
protected collection: Collection<Node<T>>;
private lastCollection: Collection<Node<T>>;
private lastWidth: number;
protected lastCollection: Collection<Node<T>> | null;
protected rootNodes: LayoutNode[];

@@ -80,12 +98,14 @@ private invalidateEverything: boolean;

super();
this.rowHeight = options.rowHeight;
this.estimatedRowHeight = options.estimatedRowHeight;
this.headingHeight = options.headingHeight;
this.estimatedHeadingHeight = options.estimatedHeadingHeight;
this.loaderHeight = options.loaderHeight;
this.rowHeight = options.rowHeight ?? null;
this.estimatedRowHeight = options.estimatedRowHeight ?? null;
this.headingHeight = options.headingHeight ?? null;
this.estimatedHeadingHeight = options.estimatedHeadingHeight ?? null;
this.loaderHeight = options.loaderHeight ?? null;
this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
this.gap = options.gap || 0;
this.padding = options.padding || 0;
this.layoutNodes = new Map();
this.rootNodes = [];
this.lastWidth = 0;
this.lastCollection = null;
this.invalidateEverything = false;
this.validRect = new Rect();

@@ -96,2 +116,7 @@ this.requestedRect = new Rect();

// Backward compatibility for subclassing.
protected get collection(): Collection<Node<T>> {
return this.virtualizer!.collection;
}
getLayoutInfo(key: Key) {

@@ -106,3 +131,3 @@ this.ensureLayoutInfo(key);

if (rect.height > 1) {
let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT) + this.gap;
rect.y = Math.floor(rect.y / rowHeight) * rowHeight;

@@ -145,3 +170,3 @@ rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;

// Ensure all of the persisted keys are available.
for (let key of this.virtualizer.persistedKeys) {
for (let key of this.virtualizer!.persistedKeys) {
if (this.ensureLayoutInfo(key)) {

@@ -168,13 +193,31 @@ return;

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);
return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer!.isPersistedKey(node.layoutInfo.key);
}
protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>) {
protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>): boolean {
// Invalidate cache if the size of the collection changed.
// In this case, we need to recalculate the entire layout.
return invalidationContext.sizeChanged;
// Also invalidate if fixed sizes/gaps change.
let options = invalidationContext.layoutOptions;
return invalidationContext.sizeChanged
|| this.rowHeight !== (options?.rowHeight ?? this.rowHeight)
|| this.headingHeight !== (options?.headingHeight ?? this.headingHeight)
|| this.loaderHeight !== (options?.loaderHeight ?? this.loaderHeight)
|| this.gap !== (options?.gap ?? this.gap)
|| this.padding !== (options?.padding ?? this.padding);
}
shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
return newOptions.rowHeight !== oldOptions.rowHeight
|| newOptions.estimatedRowHeight !== oldOptions.estimatedRowHeight
|| newOptions.headingHeight !== oldOptions.headingHeight
|| newOptions.estimatedHeadingHeight !== oldOptions.estimatedHeadingHeight
|| newOptions.loaderHeight !== oldOptions.loaderHeight
|| newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness
|| newOptions.gap !== oldOptions.gap
|| newOptions.padding !== oldOptions.padding;
}
update(invalidationContext: InvalidationContext<O>) {
this.collection = this.virtualizer.collection;
let collection = this.virtualizer!.collection;

@@ -185,12 +228,22 @@ // Reset valid rect if we will have to invalidate everything.

if (this.invalidateEverything) {
this.requestedRect = this.virtualizer.visibleRect.copy();
this.requestedRect = this.virtualizer!.visibleRect.copy();
this.layoutNodes.clear();
}
let options = invalidationContext.layoutOptions;
this.rowHeight = options?.rowHeight ?? this.rowHeight;
this.estimatedRowHeight = options?.estimatedRowHeight ?? this.estimatedRowHeight;
this.headingHeight = options?.headingHeight ?? this.headingHeight;
this.estimatedHeadingHeight = options?.estimatedHeadingHeight ?? this.estimatedHeadingHeight;
this.loaderHeight = options?.loaderHeight ?? this.loaderHeight;
this.dropIndicatorThickness = options?.dropIndicatorThickness ?? this.dropIndicatorThickness;
this.gap = options?.gap ?? this.gap;
this.padding = options?.padding ?? this.padding;
this.rootNodes = this.buildCollection();
// Remove deleted layout nodes
if (this.lastCollection && this.collection !== this.lastCollection) {
if (this.lastCollection && collection !== this.lastCollection) {
for (let key of this.lastCollection.getKeys()) {
if (!this.collection.getItem(key)) {
if (!collection.getItem(key)) {
let layoutNode = this.layoutNodes.get(key);

@@ -204,4 +257,3 @@ if (layoutNode) {

this.lastWidth = this.virtualizer.visibleRect.width;
this.lastCollection = this.collection;
this.lastCollection = collection;
this.invalidateEverything = false;

@@ -211,7 +263,8 @@ this.validRect = this.requestedRect.copy();

protected buildCollection(y = 0): LayoutNode[] {
protected buildCollection(y = this.padding): LayoutNode[] {
let collection = this.virtualizer!.collection;
let skipped = 0;
let nodes = [];
for (let node of this.collection) {
let rowHeight = this.rowHeight ?? this.estimatedRowHeight;
let nodes: LayoutNode[] = [];
for (let node of collection) {
let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT) + this.gap;

@@ -225,8 +278,8 @@ // Skip rows before the valid rectangle unless they are already cached.

let layoutNode = this.buildChild(node, 0, y, null);
y = layoutNode.layoutInfo.rect.maxY;
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) {
y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
y += (collection.size - (nodes.length + skipped)) * rowHeight;
break;

@@ -236,3 +289,5 @@ }

this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
y -= this.gap;
y += this.padding;
this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);
return nodes;

@@ -255,3 +310,3 @@ }

if (this.isValid(node, y)) {
return this.layoutNodes.get(node.key);
return this.layoutNodes.get(node.key)!;
}

@@ -276,2 +331,4 @@

return this.buildLoader(node, x, y);
default:
throw new Error('Unsupported node type: ' + node.type);
}

@@ -281,6 +338,6 @@ }

protected buildLoader(node: Node<T>, x: number, y: number): LayoutNode {
let rect = new Rect(x, y, 0, 0);
let rect = new Rect(x, y, this.padding, 0);
let layoutInfo = new LayoutInfo('loader', node.key, rect);
rect.width = this.virtualizer.contentSize.width;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight;
rect.width = this.virtualizer!.contentSize.width - this.padding - x;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight || DEFAULT_HEIGHT;

@@ -294,4 +351,5 @@ return {

protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
let width = this.virtualizer.visibleRect.width;
let rect = new Rect(0, y, width, 0);
let collection = this.virtualizer!.collection;
let width = this.virtualizer!.visibleRect.width - this.padding;
let rect = new Rect(x, y, width - x, 0);
let layoutInfo = new LayoutInfo(node.type, node.key, rect);

@@ -301,5 +359,5 @@

let skipped = 0;
let children = [];
for (let child of getChildNodes(node, this.collection)) {
let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
let children: LayoutNode[] = [];
for (let child of getChildNodes(node, collection)) {
let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT) + this.gap;

@@ -314,3 +372,3 @@ // Skip rows before the valid rectangle unless they are already cached.

let layoutNode = this.buildChild(child, x, y, layoutInfo.key);
y = layoutNode.layoutInfo.rect.maxY;
y = layoutNode.layoutInfo.rect.maxY + this.gap;
children.push(layoutNode);

@@ -320,3 +378,3 @@

// Estimate the remaining height for rows that we don't need to layout right now.
y += ([...getChildNodes(node, this.collection)].length - (children.length + skipped)) * rowHeight;
y += ([...getChildNodes(node, collection)].length - (children.length + skipped)) * rowHeight;
break;

@@ -326,2 +384,3 @@ }

y -= this.gap;
rect.height = y - startY;

@@ -338,3 +397,3 @@

protected buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
let width = this.virtualizer.visibleRect.width;
let width = this.virtualizer!.visibleRect.width - this.padding;
let rectHeight = this.headingHeight;

@@ -351,6 +410,6 @@ let isEstimated = false;

if (previousLayoutInfo) {
let curNode = this.collection.getItem(node.key);
let curNode = this.virtualizer!.collection.getItem(node.key);
let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
rectHeight = previousLayoutInfo.rect.height;
isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutInfo.estimatedSize;
isEstimated = width !== previousLayoutInfo.rect.width || curNode !== lastNode || previousLayoutInfo.estimatedSize;
} else {

@@ -366,3 +425,3 @@ rectHeight = (node.rendered ? this.estimatedHeadingHeight : 0);

let headerRect = new Rect(0, y, width, rectHeight);
let headerRect = new Rect(x, y, width - x, rectHeight);
let header = new LayoutInfo('header', node.key, headerRect);

@@ -379,3 +438,3 @@ header.estimatedSize = isEstimated;

protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {
let width = this.virtualizer.visibleRect.width;
let width = this.virtualizer!.visibleRect.width - this.padding - x;
let rectHeight = this.rowHeight;

@@ -392,3 +451,3 @@ let isEstimated = false;

rectHeight = previousLayoutNode.layoutInfo.rect.height;
isEstimated = width !== this.lastWidth || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
isEstimated = width !== previousLayoutNode.layoutInfo.rect.width || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
} else {

@@ -404,3 +463,3 @@ rectHeight = this.estimatedRowHeight;

let rect = new Rect(x, y, width - x, rectHeight);
let rect = new Rect(x, y, width, rectHeight);
let layoutInfo = new LayoutInfo(node.type, node.key, rect);

@@ -423,2 +482,3 @@ layoutInfo.estimatedSize = isEstimated;

let collection = this.virtualizer!.collection;
let layoutInfo = layoutNode.layoutInfo;

@@ -442,6 +502,6 @@ layoutInfo.estimatedSize = false;

let node = this.collection.getItem(layoutInfo.parentKey);
let node = layoutInfo.parentKey != null ? collection.getItem(layoutInfo.parentKey) : null;
while (node) {
this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
node = this.collection.getItem(node.parentKey);
node = node.parentKey != null ? collection.getItem(node.parentKey) : null;
}

@@ -472,8 +532,8 @@

getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
x += this.virtualizer.visibleRect.x;
y += this.virtualizer.visibleRect.y;
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
x += this.virtualizer!.visibleRect.x;
y += this.virtualizer!.visibleRect.y;
let key = this.virtualizer.keyAtPoint(new Point(x, y));
if (key == null || this.collection.size === 0) {
let key = this.virtualizer!.keyAtPoint(new Point(x, y));
if (key == null || this.virtualizer!.collection.size === 0) {
return {type: 'root'};

@@ -483,2 +543,6 @@ }

let layoutInfo = this.getLayoutInfo(key);
if (!layoutInfo) {
return null;
}
let rect = layoutInfo.rect;

@@ -510,3 +574,3 @@ let target: DropTarget = {

getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
let layoutInfo = this.getLayoutInfo(target.key);
let layoutInfo = this.getLayoutInfo(target.key)!;
let rect: Rect;

@@ -513,0 +577,0 @@ if (target.dropPosition === 'before') {

136

src/TableLayout.ts

@@ -21,14 +21,20 @@ /*

export interface TableLayoutProps {
export interface TableLayoutProps extends ListLayoutOptions {
columnWidths?: Map<Key, number>
}
const DEFAULT_ROW_HEIGHT = 48;
/**
* TableLayout is a virtualizer Layout implementation that arranges
* items in rows and columns.
*/
export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
protected collection: TableCollection<T>;
private columnWidths: Map<Key, number>;
protected lastCollection: TableCollection<T> | null = null;
private columnWidths: Map<Key, number> = new Map();
private stickyColumnIndices: number[];
private lastPersistedKeys: Set<Key> = null;
private lastPersistedKeys: Set<Key> | null = null;
private persistedIndices: Map<Key, number[]> = new Map();
constructor(options: ListLayoutOptions) {
constructor(options?: ListLayoutOptions) {
super(options);

@@ -38,2 +44,7 @@ this.stickyColumnIndices = [];

// Backward compatibility for subclassing.
protected get collection(): TableCollection<T> {
return this.virtualizer!.collection as TableCollection<T>;
}
private columnsChanged(newCollection: TableCollection<T>, oldCollection: TableCollection<T> | null) {

@@ -51,4 +62,9 @@ return !oldCollection ||

shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
return newOptions.columnWidths !== oldOptions.columnWidths
|| super.shouldInvalidateLayoutOptions(newOptions, oldOptions);
}
update(invalidationContext: InvalidationContext<O>): void {
let newCollection = this.virtualizer.collection as TableCollection<T>;
let newCollection = this.virtualizer!.collection as TableCollection<T>;

@@ -62,5 +78,5 @@ // If columnWidths were provided via layoutOptions, update those.

}
} else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.collection)) {
} else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
let columnLayout = new TableColumnLayout({});
this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width, newCollection, new Map());
this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer!.visibleRect.width - this.padding * 2, newCollection, new Map());
invalidationContext.sizeChanged = true;

@@ -75,6 +91,7 @@ }

for (let column of this.collection.columns) {
let collection = this.virtualizer!.collection as TableCollection<T>;
for (let column of 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 (this.isStickyColumn(column) || this.collection.rowHeaderColumnKeys.has(column.key)) {
if (this.isStickyColumn(column) || collection.rowHeaderColumnKeys.has(column.key)) {
this.stickyColumnIndices.push(column.index);

@@ -86,7 +103,7 @@ }

this.layoutNodes.set(header.layoutInfo.key, header);
let body = this.buildBody(header.layoutInfo.rect.height);
let body = this.buildBody(header.layoutInfo.rect.maxY + this.gap);
this.lastPersistedKeys = null;
body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
this.contentSize = new Size(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
this.contentSize = new Size(body.layoutInfo.rect.width + this.padding * 2, body.layoutInfo.rect.maxY + this.padding);
return [

@@ -99,12 +116,13 @@ header,

protected buildTableHeader(): LayoutNode {
let rect = new Rect(0, 0, 0, 0);
let layoutInfo = new LayoutInfo('header', this.collection.head?.key ?? 'header', rect);
let collection = this.virtualizer!.collection as TableCollection<T>;
let rect = new Rect(this.padding, this.padding, 0, 0);
let layoutInfo = new LayoutInfo('header', collection.head?.key ?? 'header', rect);
layoutInfo.isSticky = true;
layoutInfo.zIndex = 1;
let y = 0;
let y = this.padding;
let width = 0;
let children: LayoutNode[] = [];
for (let headerRow of this.collection.headerRows) {
let layoutNode = this.buildChild(headerRow, 0, y, layoutInfo.key);
for (let headerRow of collection.headerRows) {
let layoutNode = this.buildChild(headerRow, this.padding, y, layoutInfo.key);
layoutNode.layoutInfo.parentKey = layoutInfo.key;

@@ -118,3 +136,3 @@ y = layoutNode.layoutInfo.rect.maxY;

rect.width = width;
rect.height = y;
rect.height = y - this.padding;

@@ -125,3 +143,3 @@ return {

validRect: layoutInfo.rect,
node: this.collection.head
node: collection.head
};

@@ -131,3 +149,3 @@ }

protected buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode {
let rect = new Rect(0, y, 0, 0);
let rect = new Rect(x, y, 0, 0);
let row = new LayoutInfo('headerrow', headerRow.key, rect);

@@ -137,3 +155,3 @@

let columns: LayoutNode[] = [];
for (let cell of getChildNodes(headerRow, this.collection)) {
for (let cell of getChildNodes(headerRow, this.virtualizer!.collection)) {
let layoutNode = this.buildChild(cell, x, y, row.key);

@@ -153,3 +171,3 @@ layoutNode.layoutInfo.parentKey = row.key;

rect.height = height;
rect.width = x;
rect.width = x - rect.x;

@@ -176,9 +194,10 @@ return {

private getRenderedColumnWidth(node: GridNode<T>) {
let colspan = node.colspan ?? 1;
let collection = this.virtualizer!.collection as TableCollection<T>;
let colSpan = node.colSpan ?? 1;
let colIndex = node.colIndex ?? node.index;
let width = 0;
for (let i = colIndex; i < colIndex + colspan; i++) {
let column = this.collection.columns[i];
for (let i = colIndex; i < colIndex + colSpan; i++) {
let column = collection.columns[i];
if (column?.key != null) {
width += this.columnWidths.get(column.key);
width += this.columnWidths.get(column.key) ?? 0;
}

@@ -190,3 +209,3 @@ }

private getEstimatedHeight(node: GridNode<T>, width: number, height: number, estimatedHeight: number) {
private getEstimatedHeight(node: GridNode<T>, width: number, height: number | null, estimatedHeight: number | null) {
let isEstimated = false;

@@ -204,3 +223,3 @@

} else {
height = estimatedHeight;
height = estimatedHeight ?? DEFAULT_ROW_HEIGHT;
isEstimated = true;

@@ -214,3 +233,3 @@ }

protected getEstimatedRowHeight(): number {
return this.rowHeight ?? this.estimatedRowHeight;
return this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_ROW_HEIGHT;
}

@@ -220,3 +239,3 @@

let width = this.getRenderedColumnWidth(node);
let {height, isEstimated} = this.getEstimatedHeight(node, width, this.headingHeight, this.estimatedHeadingHeight);
let {height, isEstimated} = this.getEstimatedHeight(node, width, this.headingHeight ?? this.rowHeight, this.estimatedHeadingHeight ?? this.estimatedRowHeight);
let rect = new Rect(x, y, width, height);

@@ -243,4 +262,5 @@ let layoutInfo = new LayoutInfo(node.type, node.key, rect);

protected buildBody(y: number): LayoutNode {
let rect = new Rect(0, y, 0, 0);
let layoutInfo = new LayoutInfo('rowgroup', this.collection.body.key, rect);
let collection = this.virtualizer!.collection as TableCollection<T>;
let rect = new Rect(this.padding, y, 0, 0);
let layoutInfo = new LayoutInfo('rowgroup', collection.body.key, rect);

@@ -251,4 +271,4 @@ let startY = y;

let children: LayoutNode[] = [];
let rowHeight = this.getEstimatedRowHeight();
for (let node of getChildNodes(this.collection.body, this.collection)) {
let rowHeight = this.getEstimatedRowHeight() + this.gap;
for (let node of getChildNodes(collection.body, collection)) {
// Skip rows before the valid rectangle unless they are already cached.

@@ -261,6 +281,6 @@ if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

let layoutNode = this.buildChild(node, 0, y, layoutInfo.key);
let layoutNode = this.buildChild(node, this.padding, y, layoutInfo.key);
layoutNode.layoutInfo.parentKey = layoutInfo.key;
layoutNode.index = children.length;
y = layoutNode.layoutInfo.rect.maxY;
y = layoutNode.layoutInfo.rect.maxY + this.gap;
width = Math.max(width, layoutNode.layoutInfo.rect.width);

@@ -271,3 +291,3 @@ children.push(layoutNode);

// Estimate the remaining height for rows that we don't need to layout right now.
y += (this.collection.size - (skipped + children.length)) * rowHeight;
y += (collection.size - (skipped + children.length)) * rowHeight;
break;

@@ -278,3 +298,5 @@ }

if (children.length === 0) {
y = this.virtualizer.visibleRect.maxY;
y = this.virtualizer!.visibleRect.maxY;
} else {
y -= this.gap;
}

@@ -289,3 +311,3 @@

validRect: layoutInfo.rect.intersection(this.requestedRect),
node: this.collection.body
node: collection.body
};

@@ -313,2 +335,3 @@ }

protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {
let collection = this.virtualizer!.collection as TableCollection<T>;
let rect = new Rect(x, y, 0, 0);

@@ -319,3 +342,3 @@ let layoutInfo = new LayoutInfo('row', node.key, rect);

let height = 0;
for (let child of getChildNodes(node, this.collection)) {
for (let child of getChildNodes(node, collection)) {
if (child.type === 'cell') {

@@ -344,3 +367,3 @@ if (x > this.requestedRect.maxX) {

rect.width = this.layoutNodes.get(this.collection.head?.key ?? 'header').layoutInfo.rect.width;
rect.width = this.layoutNodes.get(collection.head?.key ?? 'header')!.layoutInfo.rect.width;
rect.height = height;

@@ -509,11 +532,11 @@

private buildPersistedIndices() {
if (this.virtualizer.persistedKeys === this.lastPersistedKeys) {
if (this.virtualizer!.persistedKeys === this.lastPersistedKeys) {
return;
}
this.lastPersistedKeys = this.virtualizer.persistedKeys;
this.lastPersistedKeys = this.virtualizer!.persistedKeys;
this.persistedIndices.clear();
// Build a map of parentKey => indices of children to persist.
for (let key of this.virtualizer.persistedKeys) {
for (let key of this.virtualizer!.persistedKeys) {
let layoutInfo = this.layoutNodes.get(key)?.layoutInfo;

@@ -523,3 +546,3 @@

while (layoutInfo && layoutInfo.parentKey) {
let collectionNode = this.collection.getItem(layoutInfo.key);
let collectionNode = this.virtualizer!.collection.getItem(layoutInfo.key);
let indices = this.persistedIndices.get(layoutInfo.parentKey);

@@ -532,5 +555,4 @@ if (!indices) {

let index = this.layoutNodes.get(layoutInfo.key).index;
if (!indices.includes(index)) {
let index = this.layoutNodes.get(layoutInfo.key)?.index;
if (index != null && !indices.includes(index)) {
indices.push(index);

@@ -548,11 +570,11 @@ }

getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
x += this.virtualizer.visibleRect.x;
y += this.virtualizer.visibleRect.y;
getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null {
x += this.virtualizer!.visibleRect.x;
y += this.virtualizer!.visibleRect.y;
// Custom variation of this.virtualizer.keyAtPoint that ignores body
let key: Key;
let key: Key | null = null;
let point = new Point(x, y);
let rectAtPoint = new Rect(point.x, point.y, 1, 1);
let layoutInfos = this.virtualizer.layout.getVisibleLayoutInfos(rectAtPoint).filter(info => info.type === 'row');
let layoutInfos = this.virtualizer!.layout.getVisibleLayoutInfos(rectAtPoint).filter(info => info.type === 'row');

@@ -567,3 +589,3 @@ // Layout may return multiple layout infos in the case of

if (key == null || this.collection.size === 0) {
if (key == null || this.virtualizer!.collection.size === 0) {
return {type: 'root'};

@@ -573,2 +595,6 @@ }

let layoutInfo = this.getLayoutInfo(key);
if (!layoutInfo) {
return null;
}
let rect = layoutInfo.rect;

@@ -601,5 +627,5 @@ let target: DropTarget = {

let layoutInfo = super.getDropTargetLayoutInfo(target);
layoutInfo.parentKey = this.collection.body.key;
layoutInfo.parentKey = (this.virtualizer!.collection as TableCollection<T>).body.key;
return layoutInfo;
}
}
dist/GridLayout.main.js.map

Sorry, the diff of this file is not supported yet

dist/GridLayout.mjs

Sorry, the diff of this file is not supported yet

dist/GridLayout.module.js.map

Sorry, the diff of this file is not supported yet

dist/import.mjs

Sorry, the diff of this file is not supported yet

dist/ListLayout.main.js.map

Sorry, the diff of this file is not supported yet

dist/ListLayout.mjs

Sorry, the diff of this file is not supported yet

dist/ListLayout.module.js.map

Sorry, the diff of this file is not supported yet

dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet

dist/TableLayout.main.js.map

Sorry, the diff of this file is not supported yet

dist/TableLayout.mjs

Sorry, the diff of this file is not supported yet

dist/TableLayout.module.js.map

Sorry, the diff of this file is not supported yet

dist/types.d.ts.map

Sorry, the diff of this file is not supported yet