Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-stately/layout

Package Overview
Dependencies
Maintainers
2
Versions
825
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-e60fb427c-240930 to 3.0.0-nightly-e94e36431-241203

2

dist/GridLayout.main.js

@@ -130,3 +130,3 @@ var $7Tzdl$reactstatelyvirtualizer = require("@react-stately/virtualizer");

constructor(options){
super();
super(), this.itemSize = new (0, $7Tzdl$reactstatelyvirtualizer.Size)(), this.numColumns = 0, this.horizontalSpacing = 0, this.layoutInfos = [];
this.minItemSize = options.minItemSize || new (0, $7Tzdl$reactstatelyvirtualizer.Size)(200, 200);

@@ -133,0 +133,0 @@ this.maxItemSize = options.maxItemSize || new (0, $7Tzdl$reactstatelyvirtualizer.Size)(Infinity, Infinity);

2

dist/GridLayout.module.js

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

constructor(options){
super();
super(), this.itemSize = new (0, $ipgKF$Size)(), this.numColumns = 0, this.horizontalSpacing = 0, this.layoutInfos = [];
this.minItemSize = options.minItemSize || new (0, $ipgKF$Size)(200, 200);

@@ -127,0 +127,0 @@ this.maxItemSize = options.maxItemSize || new (0, $ipgKF$Size)(Infinity, Infinity);

66

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;
rect.y = Math.floor(rect.y / rowHeight) * rowHeight;

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

// In this case, we need to recalculate the entire layout.
return invalidationContext.sizeChanged;
return invalidationContext.sizeChanged || false;
}
update(invalidationContext) {
this.collection = this.virtualizer.collection;
let collection = this.virtualizer.collection;
// Reset valid rect if we will have to invalidate everything.

@@ -96,4 +100,4 @@ // Otherwise we can reuse cached layout infos outside the current visible rect.

// 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);

@@ -104,3 +108,3 @@ if (layoutNode) this.layoutNodes.delete(key);

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

@@ -110,7 +114,8 @@ this.validRect = this.requestedRect.copy();

buildCollection(y = 0) {
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;
// Skip rows before the valid rectangle unless they are already cached.

@@ -126,3 +131,3 @@ if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

if (node.type === 'item' && y > this.requestedRect.maxY) {
y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
y += (collection.size - (nodes.length + skipped)) * rowHeight;
break;

@@ -155,2 +160,4 @@ }

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

@@ -162,3 +169,3 @@ }

rect.width = this.virtualizer.contentSize.width;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight || $fe69e47e38ed0ac4$var$DEFAULT_HEIGHT;
return {

@@ -170,2 +177,3 @@ layoutInfo: layoutInfo,

buildSection(node, x, y) {
let collection = this.virtualizer.collection;
let width = this.virtualizer.visibleRect.width;

@@ -177,5 +185,5 @@ let rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(0, y, width, 0);

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;
// Skip rows before the valid rectangle unless they are already cached.

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

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

@@ -219,3 +227,3 @@ break;

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;

@@ -273,2 +281,3 @@ rectHeight = previousLayoutInfo.rect.height;

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

@@ -288,6 +297,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;
}

@@ -314,6 +323,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;

@@ -360,7 +370,12 @@ 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;

@@ -371,2 +386,3 @@ this.layoutNodes = new Map();

this.lastCollection = null;
this.invalidateEverything = false;
this.validRect = new (0, $iId4j$reactstatelyvirtualizer.Rect)();

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

66

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;
rect.y = Math.floor(rect.y / rowHeight) * rowHeight;

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

// In this case, we need to recalculate the entire layout.
return invalidationContext.sizeChanged;
return invalidationContext.sizeChanged || false;
}
update(invalidationContext) {
this.collection = this.virtualizer.collection;
let collection = this.virtualizer.collection;
// Reset valid rect if we will have to invalidate everything.

@@ -90,4 +94,4 @@ // Otherwise we can reuse cached layout infos outside the current visible rect.

// 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);

@@ -98,3 +102,3 @@ if (layoutNode) this.layoutNodes.delete(key);

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

@@ -104,7 +108,8 @@ this.validRect = this.requestedRect.copy();

buildCollection(y = 0) {
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;
// Skip rows before the valid rectangle unless they are already cached.

@@ -120,3 +125,3 @@ if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {

if (node.type === 'item' && y > this.requestedRect.maxY) {
y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
y += (collection.size - (nodes.length + skipped)) * rowHeight;
break;

@@ -149,2 +154,4 @@ }

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

@@ -156,3 +163,3 @@ }

rect.width = this.virtualizer.contentSize.width;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight || $61ef60fc9b1041f4$var$DEFAULT_HEIGHT;
return {

@@ -164,2 +171,3 @@ layoutInfo: layoutInfo,

buildSection(node, x, y) {
let collection = this.virtualizer.collection;
let width = this.virtualizer.visibleRect.width;

@@ -171,5 +179,5 @@ let rect = new (0, $img26$Rect)(0, y, width, 0);

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;
// Skip rows before the valid rectangle unless they are already cached.

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

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

@@ -213,3 +221,3 @@ break;

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;

@@ -267,2 +275,3 @@ rectHeight = previousLayoutInfo.rect.height;

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

@@ -282,6 +291,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;
}

@@ -308,6 +317,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;

@@ -354,7 +364,12 @@ 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;

@@ -365,2 +380,3 @@ this.layoutNodes = new Map();

this.lastCollection = null;
this.invalidateEverything = false;
this.validRect = new (0, $img26$Rect)();

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

79

dist/TableLayout.main.js

@@ -26,3 +26,8 @@ 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) {

@@ -41,3 +46,3 @@ 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);

}
} 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)({});

@@ -51,5 +56,6 @@ this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width, newCollection, new Map());

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();

@@ -67,6 +73,7 @@ this.layoutNodes.set(header.layoutInfo.key, header);

buildTableHeader() {
var _this_collection_head;
var _collection_head;
let collection = this.virtualizer.collection;
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_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;

@@ -77,3 +84,3 @@ layoutInfo.zIndex = 1;

let children = [];
for (let headerRow of this.collection.headerRows){
for (let headerRow of collection.headerRows){
let layoutNode = this.buildChild(headerRow, 0, y, layoutInfo.key);

@@ -92,3 +99,3 @@ layoutNode.layoutInfo.parentKey = layoutInfo.key;

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

@@ -101,3 +108,3 @@ }

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);

@@ -130,2 +137,3 @@ layoutNode.layoutInfo.parentKey = row.key;

getRenderedColumnWidth(node) {
let collection = this.virtualizer.collection;
var _node_colspan;

@@ -137,4 +145,5 @@ let colspan = (_node_colspan = node.colspan) !== null && _node_colspan !== void 0 ? _node_colspan : 1;

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);
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;
}

@@ -155,3 +164,3 @@ return width;

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

@@ -166,8 +175,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);

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

buildBody(y) {
let collection = this.virtualizer.collection;
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 layoutInfo = new (0, $9lycG$reactstatelyvirtualizer.LayoutInfo)('rowgroup', collection.body.key, rect);
let startY = y;

@@ -199,3 +210,3 @@ let skipped = 0;

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

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

// 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;

@@ -227,3 +238,3 @@ }

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

@@ -249,3 +260,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);

@@ -255,3 +267,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) {

@@ -274,4 +286,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;

@@ -410,4 +422,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);

@@ -421,5 +433,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;
}

@@ -433,3 +445,3 @@ }

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

@@ -441,6 +453,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;

@@ -476,9 +489,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 = [];

@@ -485,0 +496,0 @@ }

79

dist/TableLayout.module.js

@@ -20,3 +20,8 @@ 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) {

@@ -35,3 +40,3 @@ 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);

}
} else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.collection)) {
} else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
let columnLayout = new (0, $bmsJv$TableColumnLayout)({});

@@ -45,5 +50,6 @@ this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.visibleRect.width, newCollection, new Map());

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();

@@ -61,6 +67,7 @@ this.layoutNodes.set(header.layoutInfo.key, header);

buildTableHeader() {
var _this_collection_head;
var _collection_head;
let collection = this.virtualizer.collection;
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_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;

@@ -71,3 +78,3 @@ layoutInfo.zIndex = 1;

let children = [];
for (let headerRow of this.collection.headerRows){
for (let headerRow of collection.headerRows){
let layoutNode = this.buildChild(headerRow, 0, y, layoutInfo.key);

@@ -86,3 +93,3 @@ layoutNode.layoutInfo.parentKey = layoutInfo.key;

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

@@ -95,3 +102,3 @@ }

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);

@@ -124,2 +131,3 @@ layoutNode.layoutInfo.parentKey = row.key;

getRenderedColumnWidth(node) {
let collection = this.virtualizer.collection;
var _node_colspan;

@@ -131,4 +139,5 @@ let colspan = (_node_colspan = node.colspan) !== null && _node_colspan !== void 0 ? _node_colspan : 1;

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);
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;
}

@@ -149,3 +158,3 @@ return width;

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

@@ -160,8 +169,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);

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

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

@@ -193,3 +204,3 @@ let skipped = 0;

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

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

// 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,3 +232,3 @@ }

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

@@ -243,3 +254,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);

@@ -249,3 +261,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) {

@@ -268,4 +280,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;

@@ -404,4 +416,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);

@@ -415,5 +427,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;
}

@@ -427,3 +439,3 @@ }

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

@@ -435,6 +447,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;

@@ -470,9 +483,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 = [];

@@ -479,0 +490,0 @@ }

24

dist/types.d.ts

@@ -84,11 +84,11 @@ import { DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node, Collection } from "@react-types/shared";

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;
protected rowHeight: number | null;
protected estimatedRowHeight: number | null;
protected headingHeight: number | null;
protected estimatedHeadingHeight: number | null;
protected loaderHeight: number | null;
protected dropIndicatorThickness: number;
protected layoutNodes: Map<Key, LayoutNode>;
protected contentSize: Size;
protected collection: Collection<Node<T>>;
protected lastCollection: Collection<Node<T>> | null;
protected rootNodes: LayoutNode[];

@@ -104,3 +104,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[];

@@ -112,3 +113,3 @@ protected layoutIfNeeded(rect: Rect): 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;

@@ -122,3 +123,3 @@ 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;

@@ -130,4 +131,5 @@ }

export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
protected collection: TableCollection<T>;
protected lastCollection: TableCollection<T> | null;
constructor(options: ListLayoutOptions);
protected get collection(): TableCollection<T>;
update(invalidationContext: InvalidationContext<O>): void;

@@ -145,3 +147,3 @@ 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;

@@ -148,0 +150,0 @@ }

18

package.json
{
"name": "@react-stately/layout",
"version": "3.0.0-nightly-e60fb427c-240930",
"version": "3.0.0-nightly-e94e36431-241203",
"description": "Spectrum UI components in React",

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

"dependencies": {
"@react-stately/collections": "^3.0.0-nightly-e60fb427c-240930",
"@react-stately/table": "^3.0.0-nightly-e60fb427c-240930",
"@react-stately/virtualizer": "^3.0.0-nightly-e60fb427c-240930",
"@react-types/grid": "^3.0.0-nightly-e60fb427c-240930",
"@react-types/shared": "^3.0.0-nightly-e60fb427c-240930",
"@react-types/table": "^3.0.0-nightly-e60fb427c-240930",
"@react-stately/collections": "^3.0.0-nightly-e94e36431-241203",
"@react-stately/table": "^3.0.0-nightly-e94e36431-241203",
"@react-stately/virtualizer": "^3.0.0-nightly-e94e36431-241203",
"@react-types/grid": "^3.0.0-nightly-e94e36431-241203",
"@react-types/shared": "^3.0.0-nightly-e94e36431-241203",
"@react-types/table": "^3.0.0-nightly-e94e36431-241203",
"@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"
},

@@ -40,3 +40,3 @@ "publishConfig": {

},
"stableVersion": "4.0.2"
"stableVersion": "4.1.0"
}

30

src/GridLayout.ts

@@ -50,6 +50,6 @@ /*

protected dropIndicatorThickness: number;
protected itemSize: Size;
protected numColumns: number;
protected horizontalSpacing: number;
protected layoutInfos: LayoutInfo[];
protected itemSize: Size = new Size();
protected numColumns: number = 0;
protected horizontalSpacing: number = 0;
protected layoutInfos: LayoutInfo[] = [];

@@ -66,3 +66,3 @@ constructor(options: GridLayoutOptions) {

update(): void {
let visibleWidth = this.virtualizer.visibleRect.width;
let visibleWidth = this.virtualizer!.visibleRect.width;

@@ -97,3 +97,3 @@ // The max item width is always the entire viewport.

this.layoutInfos = [];
for (let node of this.virtualizer.collection) {
for (let node of this.virtualizer!.collection) {
this.layoutInfos.push(this.getLayoutInfoForNode(node));

@@ -108,4 +108,4 @@ }

let persistedIndices: number[] = [];
for (let key of this.virtualizer.persistedKeys) {
let item = this.virtualizer.collection.getItem(key);
for (let key of this.virtualizer!.persistedKeys) {
let item = this.virtualizer!.collection.getItem(key);
if (item?.index != null) {

@@ -134,3 +134,3 @@ persistedIndices.push(item.index);

Math.min(
this.virtualizer.collection.size - 1,
this.virtualizer!.collection.size - 1,
Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)

@@ -142,3 +142,3 @@ )

getLayoutInfo(key: Key): LayoutInfo | null {
let node = this.virtualizer.collection.getItem(key);
let node = this.virtualizer!.collection.getItem(key);
return node ? this.layoutInfos[node.index] : null;

@@ -158,5 +158,5 @@ }

getContentSize(): Size {
let numRows = Math.ceil(this.virtualizer.collection.size / this.numColumns);
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);
return new Size(this.virtualizer!.visibleRect.width, contentHeight);
}

@@ -169,4 +169,4 @@

x += this.virtualizer.visibleRect.x;
y += this.virtualizer.visibleRect.y;
x += this.virtualizer!.visibleRect.x;
y += this.virtualizer!.visibleRect.y;
let index = this.getIndexAtPoint(x, y);

@@ -206,3 +206,3 @@

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

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

106

src/ListLayout.ts

@@ -54,12 +54,11 @@ /*

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;
protected rowHeight: number | null;
protected estimatedRowHeight: number | null;
protected headingHeight: number | null;
protected estimatedHeadingHeight: number | null;
protected loaderHeight: number | null;
protected dropIndicatorThickness: number;
protected layoutNodes: Map<Key, LayoutNode>;
protected contentSize: Size;
protected collection: Collection<Node<T>>;
private lastCollection: Collection<Node<T>>;
protected lastCollection: Collection<Node<T>> | null;
private lastWidth: number;

@@ -79,7 +78,7 @@ protected rootNodes: LayoutNode[];

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;

@@ -90,2 +89,3 @@ this.layoutNodes = new Map();

this.lastCollection = null;
this.invalidateEverything = false;
this.validRect = new Rect();

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

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

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

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

@@ -145,3 +150,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,3 +173,3 @@ 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);
}

@@ -175,7 +180,7 @@

// In this case, we need to recalculate the entire layout.
return invalidationContext.sizeChanged;
return invalidationContext.sizeChanged || false;
}
update(invalidationContext: InvalidationContext<O>) {
this.collection = this.virtualizer.collection;
let collection = this.virtualizer!.collection;

@@ -186,3 +191,3 @@ // 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();

@@ -194,5 +199,5 @@ }

// 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);

@@ -206,4 +211,4 @@ if (layoutNode) {

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

@@ -214,6 +219,7 @@ this.validRect = this.requestedRect.copy();

protected buildCollection(y = 0): 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;

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

if (node.type === 'item' && y > this.requestedRect.maxY) {
y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
y += (collection.size - (nodes.length + skipped)) * rowHeight;
break;

@@ -238,3 +244,3 @@ }

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

@@ -257,3 +263,3 @@ }

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

@@ -278,2 +284,4 @@

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

@@ -285,4 +293,4 @@ }

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;
rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight || DEFAULT_HEIGHT;

@@ -296,3 +304,4 @@ return {

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

@@ -303,5 +312,5 @@ let layoutInfo = new LayoutInfo(node.type, node.key, rect);

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);

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

// 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;

@@ -338,3 +347,3 @@ }

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

@@ -351,3 +360,3 @@ 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;

@@ -378,3 +387,3 @@ rectHeight = previousLayoutInfo.rect.height;

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

@@ -420,2 +429,3 @@ let isEstimated = false;

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

@@ -439,6 +449,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;
}

@@ -469,8 +479,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'};

@@ -480,2 +490,6 @@ }

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

@@ -507,3 +521,3 @@ let target: DropTarget = {

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

@@ -510,0 +524,0 @@ if (target.dropPosition === 'before') {

93

src/TableLayout.ts

@@ -25,7 +25,9 @@ /*

const DEFAULT_ROW_HEIGHT = 48;
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();

@@ -38,2 +40,7 @@

// 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) {

@@ -52,3 +59,3 @@ return !oldCollection ||

update(invalidationContext: InvalidationContext<O>): void {
let newCollection = this.virtualizer.collection as TableCollection<T>;
let newCollection = this.virtualizer!.collection as TableCollection<T>;

@@ -62,5 +69,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, newCollection, new Map());
invalidationContext.sizeChanged = true;

@@ -75,6 +82,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);

@@ -98,4 +106,5 @@ }

protected buildTableHeader(): LayoutNode {
let collection = this.virtualizer!.collection as TableCollection<T>;
let rect = new Rect(0, 0, 0, 0);
let layoutInfo = new LayoutInfo('header', this.collection.head?.key ?? 'header', rect);
let layoutInfo = new LayoutInfo('header', collection.head?.key ?? 'header', rect);
layoutInfo.isSticky = true;

@@ -107,3 +116,3 @@ layoutInfo.zIndex = 1;

let children: LayoutNode[] = [];
for (let headerRow of this.collection.headerRows) {
for (let headerRow of collection.headerRows) {
let layoutNode = this.buildChild(headerRow, 0, y, layoutInfo.key);

@@ -124,3 +133,3 @@ layoutNode.layoutInfo.parentKey = layoutInfo.key;

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

@@ -135,3 +144,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);

@@ -173,2 +182,3 @@ layoutNode.layoutInfo.parentKey = row.key;

private getRenderedColumnWidth(node: GridNode<T>) {
let collection = this.virtualizer!.collection as TableCollection<T>;
let colspan = node.colspan ?? 1;

@@ -178,5 +188,5 @@ let colIndex = node.colIndex ?? node.index;

for (let i = colIndex; i < colIndex + colspan; i++) {
let column = this.collection.columns[i];
let column = collection.columns[i];
if (column?.key != null) {
width += this.columnWidths.get(column.key);
width += this.columnWidths.get(column.key) ?? 0;
}

@@ -188,3 +198,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;

@@ -202,3 +212,3 @@

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

@@ -212,3 +222,3 @@ }

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

@@ -218,3 +228,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);

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

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

@@ -250,3 +261,3 @@ let startY = y;

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

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

// 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;

@@ -275,3 +286,3 @@ }

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

@@ -286,3 +297,3 @@

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

@@ -310,2 +321,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);

@@ -316,3 +328,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') {

@@ -341,3 +353,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;

@@ -506,11 +518,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;

@@ -520,3 +532,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);

@@ -529,5 +541,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);

@@ -545,11 +556,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');

@@ -564,3 +575,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'};

@@ -570,2 +581,6 @@ }

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

@@ -598,5 +613,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/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/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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc