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

@react-stately/table

Package Overview
Dependencies
Maintainers
2
Versions
789
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-stately/table - npm Package Compare versions

Comparing version 3.0.0-nightly.2904 to 3.0.0-nightly-641446f65-240905

dist/Cell.main.js
dist/Cell.main.js.map
dist/Cell.mjs
dist/Cell.module.js
dist/Cell.module.js.map
dist/Column.main.js
dist/Column.main.js.map
dist/Column.mjs
dist/Column.module.js
dist/Column.module.js.map
dist/import.mjs
dist/Row.main.js
dist/Row.main.js.map
dist/Row.mjs
dist/Row.module.js
dist/Row.module.js.map
dist/TableBody.main.js
dist/TableBody.main.js.map
dist/TableBody.mjs
dist/TableBody.module.js
dist/TableBody.module.js.map
dist/TableCollection.main.js
dist/TableCollection.main.js.map
dist/TableCollection.mjs
dist/TableCollection.module.js
dist/TableCollection.module.js.map
dist/TableColumnLayout.main.js
dist/TableColumnLayout.main.js.map
dist/TableColumnLayout.mjs
dist/TableColumnLayout.module.js
dist/TableColumnLayout.module.js.map
dist/TableHeader.main.js
dist/TableHeader.main.js.map
dist/TableHeader.mjs
dist/TableHeader.module.js
dist/TableHeader.module.js.map
dist/TableUtils.main.js
dist/TableUtils.main.js.map
dist/TableUtils.mjs
dist/TableUtils.module.js
dist/TableUtils.module.js.map
dist/useTableColumnResizeState.main.js
dist/useTableColumnResizeState.main.js.map
dist/useTableColumnResizeState.mjs
dist/useTableColumnResizeState.module.js
dist/useTableColumnResizeState.module.js.map
dist/useTableState.main.js
dist/useTableState.main.js.map
dist/useTableState.mjs
dist/useTableState.module.js
dist/useTableState.module.js.map
dist/useTreeGridState.main.js
dist/useTreeGridState.main.js.map
dist/useTreeGridState.mjs
dist/useTreeGridState.module.js
dist/useTreeGridState.module.js.map
src/TableColumnLayout.ts
src/TableUtils.ts
src/useTableColumnResizeState.ts
src/useTreeGridState.ts

658

dist/main.js

@@ -1,603 +0,30 @@

var _react2 = require("react");
var $7aa22d80cd4ca621$exports = require("./useTableColumnResizeState.main.js");
var $e3f7784147dde23d$exports = require("./useTableState.main.js");
var $f45775f5d6f744fa$exports = require("./TableHeader.main.js");
var $6ec527db6a3a5692$exports = require("./TableBody.main.js");
var $714483d9f6ca4c55$exports = require("./Column.main.js");
var $9ec6912e32cc0d81$exports = require("./Row.main.js");
var $ad4ab0a21c733e1f$exports = require("./Cell.main.js");
var $7f5a58334d8866a5$exports = require("./TableCollection.main.js");
var $2240a72410c17d51$exports = require("./TableColumnLayout.main.js");
var $ed4e0b68b470dcfd$exports = require("./useTreeGridState.main.js");
var $56JBj$reactstatelycollections = require("@react-stately/collections");
var _react = $parcel$interopDefault(_react2);
var {
useMemo
} = _react2;
var {
useGridState,
GridCollection
} = require("@react-stately/grid");
var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
var {
Section,
useCollection
} = require("@react-stately/collections");
exports.Section = Section;
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
let $d9913277217ff808e9725ade85bf7$var$_Symbol$iterator;
const $d9913277217ff808e9725ade85bf7$var$ROW_HEADER_COLUMN_KEY = 'row-header-column-' + Math.random().toString(36).slice(2);
function $d9913277217ff808e9725ade85bf7$var$buildHeaderRows(keyMap, columnNodes) {
let columns = [];
let seen = new Map();
for (let column of columnNodes) {
let parentKey = column.parentKey;
let col = [column];
while (parentKey) {
let parent = keyMap.get(parentKey); // If we've already seen this parent, than it is shared
// with a previous column. If the current column is taller
// than the previous column, than we need to shift the parent
// in the previous column so it's level with the current column.
if (seen.has(parent)) {
parent.colspan++;
let {
column,
index
} = seen.get(parent);
if (index > col.length) {
break;
}
for (let i = index; i < col.length; i++) {
column.splice(i, 0, null);
} // Adjust shifted indices
for (let i = col.length; i < column.length; i++) {
if (column[i] && seen.has(column[i])) {
seen.get(column[i]).index = i;
}
}
} else {
parent.colspan = 1;
col.push(parent);
seen.set(parent, {
column: col,
index: col.length - 1
});
}
parentKey = parent.parentKey;
}
columns.push(col);
column.index = columns.length - 1;
}
let maxLength = Math.max(...columns.map(c => c.length));
let headerRows = Array(maxLength).fill(0).map(() => []); // Convert columns into rows.
let colIndex = 0;
for (let column of columns) {
let i = maxLength - 1;
for (let item of column) {
if (item) {
// Fill the space up until the current column with a placeholder
let row = headerRows[i];
let rowLength = row.reduce((p, c) => p + c.colspan, 0);
if (rowLength < colIndex) {
let placeholder = {
type: 'placeholder',
key: 'placeholder-' + item.key,
colspan: colIndex - rowLength,
index: rowLength,
value: null,
rendered: null,
level: i,
hasChildNodes: false,
childNodes: [],
textValue: null
};
if (row.length > 0) {
row[row.length - 1].nextKey = placeholder.key;
placeholder.prevKey = row[row.length - 1].key;
}
row.push(placeholder);
}
if (row.length > 0) {
row[row.length - 1].nextKey = item.key;
item.prevKey = row[row.length - 1].key;
}
item.level = i;
item.index = colIndex;
row.push(item);
}
i--;
}
colIndex++;
} // Add placeholders at the end of each row that is shorter than the maximum
let i = 0;
for (let row of headerRows) {
let rowLength = row.reduce((p, c) => p + c.colspan, 0);
if (rowLength < columnNodes.length) {
let placeholder = {
type: 'placeholder',
key: 'placeholder-' + row[row.length - 1].key,
colspan: columnNodes.length - rowLength,
index: rowLength,
value: null,
rendered: null,
level: i,
hasChildNodes: false,
childNodes: [],
textValue: null,
prevKey: row[row.length - 1].key
};
row.push(placeholder);
}
i++;
}
return headerRows.map((childNodes, index) => {
let row = {
type: 'headerrow',
key: 'headerrow-' + index,
index,
value: null,
rendered: null,
level: 0,
hasChildNodes: true,
childNodes,
textValue: null
};
return row;
});
}
$d9913277217ff808e9725ade85bf7$var$_Symbol$iterator = Symbol.iterator;
class $d9913277217ff808e9725ade85bf7$export$TableCollection extends GridCollection {
constructor(nodes, prev, opts) {
let rowHeaderColumnKeys = new Set();
let body;
let columns = []; // Add cell for selection checkboxes if needed.
if (opts != null && opts.showSelectionCheckboxes) {
let rowHeaderColumn = {
type: 'column',
key: $d9913277217ff808e9725ade85bf7$var$ROW_HEADER_COLUMN_KEY,
value: null,
textValue: '',
level: 0,
index: 0,
hasChildNodes: false,
rendered: null,
childNodes: [],
props: {
isSelectionCell: true
}
};
columns.unshift(rowHeaderColumn);
}
let rows = [];
let columnKeyMap = new Map();
let visit = node => {
switch (node.type) {
case 'body':
body = node;
break;
case 'column':
columnKeyMap.set(node.key, node);
if (!node.hasChildNodes) {
columns.push(node);
if (node.props.isRowHeader) {
rowHeaderColumnKeys.add(node.key);
}
}
break;
case 'item':
rows.push(node);
return;
// do not go into childNodes
}
for (let child of node.childNodes) {
visit(child);
}
};
for (let node of nodes) {
visit(node);
}
let headerRows = $d9913277217ff808e9725ade85bf7$var$buildHeaderRows(columnKeyMap, columns);
headerRows.forEach((row, i) => rows.splice(i, 0, row));
super({
columnCount: columns.length,
items: rows,
visitNode: node => {
node.column = columns[node.index];
return node;
}
});
this.headerRows = void 0;
this.columns = void 0;
this.rowHeaderColumnKeys = void 0;
this.body = void 0;
this.columns = columns;
this.rowHeaderColumnKeys = rowHeaderColumnKeys;
this.body = body;
this.headerRows = headerRows; // Default row header column to the first one.
if (this.rowHeaderColumnKeys.size === 0) {
this.rowHeaderColumnKeys.add(this.columns[opts != null && opts.showSelectionCheckboxes ? 1 : 0].key);
}
}
*[$d9913277217ff808e9725ade85bf7$var$_Symbol$iterator]() {
yield* this.body.childNodes;
}
get size() {
return [...this.body.childNodes].length;
}
getKeys() {
return this.keyMap.keys();
}
getKeyBefore(key) {
let node = this.keyMap.get(key);
return node ? node.prevKey : null;
}
getKeyAfter(key) {
let node = this.keyMap.get(key);
return node ? node.nextKey : null;
}
getFirstKey() {
var _;
return (_ = [...this.body.childNodes][0]) == null ? void 0 : _.key;
}
getLastKey() {
var _rows;
let rows = [...this.body.childNodes];
return (_rows = rows[rows.length - 1]) == null ? void 0 : _rows.key;
}
getItem(key) {
return this.keyMap.get(key);
}
at(idx) {
const keys = [...this.getKeys()];
return this.getItem(keys[idx]);
}
}
const $fa2b602e6c27f83e5a67fb320894ec22$var$OPPOSITE_SORT_DIRECTION = {
ascending: 'descending',
descending: 'ascending'
};
/**
* Provides state management for a table component. Handles building a collection
* of columns and rows from props. In addition, it tracks row selection and manages sort order changes.
*/
function useTableState(props) {
let {
selectionMode = 'none'
} = props;
let context = useMemo(() => ({
showSelectionCheckboxes: props.showSelectionCheckboxes && selectionMode !== 'none',
selectionMode,
columns: []
}), [props.children, props.showSelectionCheckboxes, selectionMode]);
let collection = useCollection(props, (nodes, prev) => new $d9913277217ff808e9725ade85bf7$export$TableCollection(nodes, prev, context), context);
let {
disabledKeys,
selectionManager
} = useGridState(_babelRuntimeHelpersExtends({}, props, {
collection
}));
return {
collection,
disabledKeys,
selectionManager,
showSelectionCheckboxes: props.showSelectionCheckboxes || false,
sortDescriptor: props.sortDescriptor,
sort(columnKey) {
var _props$sortDescriptor;
props.onSortChange({
column: columnKey,
direction: ((_props$sortDescriptor = props.sortDescriptor) == null ? void 0 : _props$sortDescriptor.column) === columnKey ? $fa2b602e6c27f83e5a67fb320894ec22$var$OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction] : 'ascending'
});
}
};
}
exports.useTableState = useTableState;
function $ef783a8decb4b36dcc38cbf124dc6824$var$TableHeader(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
$ef783a8decb4b36dcc38cbf124dc6824$var$TableHeader.getCollectionNode = function* getCollectionNode(props) {
let {
children,
columns
} = props;
if (typeof children === 'function') {
if (!columns) {
throw new Error('props.children was a function but props.columns is missing');
}
for (let column of columns) {
yield {
type: 'column',
value: column,
renderer: children
};
}
} else {
let columns = [];
_react.Children.forEach(children, column => {
columns.push({
type: 'column',
element: column
});
});
yield* columns;
}
};
/**
* A TableHeader is a container for the Column elements in a Table. Columns can be statically defined
* as children, or generated dynamically using a function based on the data passed to the `columns` prop.
*/
// We don't want getCollectionNode to show up in the type definition
let TableHeader = $ef783a8decb4b36dcc38cbf124dc6824$var$TableHeader;
exports.TableHeader = TableHeader;
function $ce24f1f5e076734d069a0bfb95a30678$var$TableBody(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
$ce24f1f5e076734d069a0bfb95a30678$var$TableBody.getCollectionNode = function* getCollectionNode(props) {
let {
children,
items
} = props;
yield {
type: 'body',
hasChildNodes: true,
props,
*childNodes() {
if (typeof children === 'function') {
if (!items) {
throw new Error('props.children was a function but props.items is missing');
}
for (let item of items) {
yield {
type: 'item',
value: item,
renderer: children
};
}
} else {
let items = [];
_react.Children.forEach(children, item => {
items.push({
type: 'item',
element: item
});
});
yield* items;
}
}
};
};
/**
* A TableBody is a container for the Row elements of a Table. Rows can be statically defined
* as children, or generated dynamically using a function based on the data passed to the `items` prop.
*/
// We don't want getCollectionNode to show up in the type definition
let TableBody = $ce24f1f5e076734d069a0bfb95a30678$var$TableBody;
exports.TableBody = TableBody;
function $a2ae87b235679ae1eb45693d2634$var$Column(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
$a2ae87b235679ae1eb45693d2634$var$Column.getCollectionNode = function* getCollectionNode(props, context) {
let {
title,
children,
childColumns
} = props;
let rendered = title || children;
let textValue = props.textValue || (typeof rendered === 'string' ? rendered : '') || props['aria-label'];
let fullNodes = yield {
type: 'column',
hasChildNodes: !!childColumns || title && _react.Children.count(children) > 0,
rendered,
textValue,
props,
*childNodes() {
if (childColumns) {
for (let child of childColumns) {
yield {
type: 'column',
value: child
};
}
} else if (title) {
let childColumns = [];
_react.Children.forEach(children, child => {
childColumns.push({
type: 'column',
element: child
});
});
yield* childColumns;
}
},
shouldInvalidate(newContext) {
// This is a bit of a hack, but it works.
// If this method is called, then there's a cached version of this node available.
// But, we need to keep the list of columns in the new context up to date.
updateContext(newContext);
return false;
}
};
let updateContext = context => {
// register leaf columns on the context so that <Row> can access them
for (let node of fullNodes) {
if (!node.hasChildNodes) {
context.columns.push(node);
}
}
};
updateContext(context);
};
/**
* A Column represents a field of each item within a Table. Columns may also contain nested
* Column elements to represent column groups. Nested columns can be statically defined as
* children, or dynamically generated using a function based on the `childColumns` prop.
*/
// We don't want getCollectionNode to show up in the type definition
let Column = $a2ae87b235679ae1eb45693d2634$var$Column;
exports.Column = Column;
function $f63d1c8574eae6d2444fdbb48df70076$var$Row(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
$f63d1c8574eae6d2444fdbb48df70076$var$Row.getCollectionNode = function* getCollectionNode(props, context) {
let {
children,
textValue
} = props;
yield {
type: 'item',
props: props,
textValue,
'aria-label': props['aria-label'],
hasChildNodes: true,
*childNodes() {
// Process cells first
if (context.showSelectionCheckboxes && context.selectionMode !== 'none') {
yield {
type: 'cell',
key: 'header',
// this is combined with the row key by CollectionBuilder
props: {
isSelectionCell: true
}
};
}
if (typeof children === 'function') {
for (let column of context.columns) {
yield {
type: 'cell',
element: children(column.key),
key: column.key // this is combined with the row key by CollectionBuilder
};
}
} else {
let cells = [];
_react.Children.forEach(children, cell => {
cells.push({
type: 'cell',
element: cell
});
});
if (cells.length !== context.columns.length) {
throw new Error("Cell count must match column count. Found " + cells.length + " cells and " + context.columns.length + " columns.");
}
yield* cells;
}
},
shouldInvalidate(newContext) {
// Invalidate all rows if the columns changed.
return newContext.columns.length !== context.columns.length || newContext.columns.some((c, i) => c.key !== context.columns[i].key) || newContext.showSelectionCheckboxes !== context.showSelectionCheckboxes || newContext.selectionMode !== context.selectionMode;
}
};
};
/**
* A Row represents a single item in a Table and contains Cell elements for each column.
* Cells can be statically defined as children, or generated dynamically using a function
* based on the columns defined in the TableHeader.
*/
// We don't want getCollectionNode to show up in the type definition
let Row = $f63d1c8574eae6d2444fdbb48df70076$var$Row;
exports.Row = Row;
$parcel$export(module.exports, "useTableColumnResizeState", () => $7aa22d80cd4ca621$exports.useTableColumnResizeState);
$parcel$export(module.exports, "useTableState", () => $e3f7784147dde23d$exports.useTableState);
$parcel$export(module.exports, "TableHeader", () => $f45775f5d6f744fa$exports.TableHeader);
$parcel$export(module.exports, "TableBody", () => $6ec527db6a3a5692$exports.TableBody);
$parcel$export(module.exports, "Column", () => $714483d9f6ca4c55$exports.Column);
$parcel$export(module.exports, "Row", () => $9ec6912e32cc0d81$exports.Row);
$parcel$export(module.exports, "Cell", () => $ad4ab0a21c733e1f$exports.Cell);
$parcel$export(module.exports, "Section", () => $56JBj$reactstatelycollections.Section);
$parcel$export(module.exports, "TableCollection", () => $7f5a58334d8866a5$exports.TableCollection);
$parcel$export(module.exports, "buildHeaderRows", () => $7f5a58334d8866a5$exports.buildHeaderRows);
$parcel$export(module.exports, "TableColumnLayout", () => $2240a72410c17d51$exports.TableColumnLayout);
$parcel$export(module.exports, "UNSTABLE_useTreeGridState", () => $ed4e0b68b470dcfd$exports.UNSTABLE_useTreeGridState);
/*

@@ -613,30 +40,15 @@ * Copyright 2020 Adobe. All rights reserved.

* governing permissions and limitations under the License.
*/
function $c30fc85b568b7ecc2de180515d25$var$Cell(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
*/
$c30fc85b568b7ecc2de180515d25$var$Cell.getCollectionNode = function* getCollectionNode(props) {
let {
children
} = props;
let textValue = props.textValue || (typeof children === 'string' ? children : '') || props['aria-label'] || '';
yield {
type: 'cell',
props: props,
rendered: children,
textValue,
'aria-label': props['aria-label'],
hasChildNodes: false
};
};
/**
* A Cell represents the value of a single Column within a Table Row.
*/
// We don't want getCollectionNode to show up in the type definition
let Cell = $c30fc85b568b7ecc2de180515d25$var$Cell;
exports.Cell = Cell;
//# sourceMappingURL=main.js.map

620

dist/module.js

@@ -1,576 +0,13 @@

import _react, { useMemo } from "react";
import { useGridState, GridCollection } from "@react-stately/grid";
import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
import { Section, useCollection } from "@react-stately/collections";
export { Section };
let $d7f61bffc1886b961473c48c52f8fd$var$_Symbol$iterator;
const $d7f61bffc1886b961473c48c52f8fd$var$ROW_HEADER_COLUMN_KEY = 'row-header-column-' + Math.random().toString(36).slice(2);
import {useTableColumnResizeState as $292bc4e09cd0eb62$export$cb895dcf85db1319} from "./useTableColumnResizeState.module.js";
import {useTableState as $4a0dd036d492cee4$export$907bcc6c48325fd6} from "./useTableState.module.js";
import {TableHeader as $312ae3b56a94a86e$export$f850895b287ef28e} from "./TableHeader.module.js";
import {TableBody as $4ae5314bf50db1a3$export$76ccd210b9029917} from "./TableBody.module.js";
import {Column as $1cd244557c2f97d5$export$816b5d811295e6bc} from "./Column.module.js";
import {Row as $70d70eb16ea48428$export$b59bdbef9ce70de2} from "./Row.module.js";
import {Cell as $941d1d9a6a28982a$export$f6f0c3fe4ec306ea} from "./Cell.module.js";
import {buildHeaderRows as $788781baa30117fa$export$7c127db850d4e81e, TableCollection as $788781baa30117fa$export$596e1b2e2cf93690} from "./TableCollection.module.js";
import {TableColumnLayout as $a9e7ae544a4e41dd$export$7ff77a162970b30e} from "./TableColumnLayout.module.js";
import {UNSTABLE_useTreeGridState as $ee65a0057fd99531$export$34dfa8a1622185a4} from "./useTreeGridState.module.js";
import {Section as $6555104ff085bef4$re_export$Section} from "@react-stately/collections";
function $d7f61bffc1886b961473c48c52f8fd$var$buildHeaderRows(keyMap, columnNodes) {
let columns = [];
let seen = new Map();
for (let column of columnNodes) {
let parentKey = column.parentKey;
let col = [column];
while (parentKey) {
let parent = keyMap.get(parentKey); // If we've already seen this parent, than it is shared
// with a previous column. If the current column is taller
// than the previous column, than we need to shift the parent
// in the previous column so it's level with the current column.
if (seen.has(parent)) {
parent.colspan++;
let {
column,
index
} = seen.get(parent);
if (index > col.length) {
break;
}
for (let i = index; i < col.length; i++) {
column.splice(i, 0, null);
} // Adjust shifted indices
for (let i = col.length; i < column.length; i++) {
if (column[i] && seen.has(column[i])) {
seen.get(column[i]).index = i;
}
}
} else {
parent.colspan = 1;
col.push(parent);
seen.set(parent, {
column: col,
index: col.length - 1
});
}
parentKey = parent.parentKey;
}
columns.push(col);
column.index = columns.length - 1;
}
let maxLength = Math.max(...columns.map(c => c.length));
let headerRows = Array(maxLength).fill(0).map(() => []); // Convert columns into rows.
let colIndex = 0;
for (let column of columns) {
let i = maxLength - 1;
for (let item of column) {
if (item) {
// Fill the space up until the current column with a placeholder
let row = headerRows[i];
let rowLength = row.reduce((p, c) => p + c.colspan, 0);
if (rowLength < colIndex) {
let placeholder = {
type: 'placeholder',
key: 'placeholder-' + item.key,
colspan: colIndex - rowLength,
index: rowLength,
value: null,
rendered: null,
level: i,
hasChildNodes: false,
childNodes: [],
textValue: null
};
if (row.length > 0) {
row[row.length - 1].nextKey = placeholder.key;
placeholder.prevKey = row[row.length - 1].key;
}
row.push(placeholder);
}
if (row.length > 0) {
row[row.length - 1].nextKey = item.key;
item.prevKey = row[row.length - 1].key;
}
item.level = i;
item.index = colIndex;
row.push(item);
}
i--;
}
colIndex++;
} // Add placeholders at the end of each row that is shorter than the maximum
let i = 0;
for (let row of headerRows) {
let rowLength = row.reduce((p, c) => p + c.colspan, 0);
if (rowLength < columnNodes.length) {
let placeholder = {
type: 'placeholder',
key: 'placeholder-' + row[row.length - 1].key,
colspan: columnNodes.length - rowLength,
index: rowLength,
value: null,
rendered: null,
level: i,
hasChildNodes: false,
childNodes: [],
textValue: null,
prevKey: row[row.length - 1].key
};
row.push(placeholder);
}
i++;
}
return headerRows.map((childNodes, index) => {
let row = {
type: 'headerrow',
key: 'headerrow-' + index,
index,
value: null,
rendered: null,
level: 0,
hasChildNodes: true,
childNodes,
textValue: null
};
return row;
});
}
$d7f61bffc1886b961473c48c52f8fd$var$_Symbol$iterator = Symbol.iterator;
class $d7f61bffc1886b961473c48c52f8fd$export$TableCollection extends GridCollection {
constructor(nodes, prev, opts) {
let rowHeaderColumnKeys = new Set();
let body;
let columns = []; // Add cell for selection checkboxes if needed.
if (opts != null && opts.showSelectionCheckboxes) {
let rowHeaderColumn = {
type: 'column',
key: $d7f61bffc1886b961473c48c52f8fd$var$ROW_HEADER_COLUMN_KEY,
value: null,
textValue: '',
level: 0,
index: 0,
hasChildNodes: false,
rendered: null,
childNodes: [],
props: {
isSelectionCell: true
}
};
columns.unshift(rowHeaderColumn);
}
let rows = [];
let columnKeyMap = new Map();
let visit = node => {
switch (node.type) {
case 'body':
body = node;
break;
case 'column':
columnKeyMap.set(node.key, node);
if (!node.hasChildNodes) {
columns.push(node);
if (node.props.isRowHeader) {
rowHeaderColumnKeys.add(node.key);
}
}
break;
case 'item':
rows.push(node);
return;
// do not go into childNodes
}
for (let child of node.childNodes) {
visit(child);
}
};
for (let node of nodes) {
visit(node);
}
let headerRows = $d7f61bffc1886b961473c48c52f8fd$var$buildHeaderRows(columnKeyMap, columns);
headerRows.forEach((row, i) => rows.splice(i, 0, row));
super({
columnCount: columns.length,
items: rows,
visitNode: node => {
node.column = columns[node.index];
return node;
}
});
this.headerRows = void 0;
this.columns = void 0;
this.rowHeaderColumnKeys = void 0;
this.body = void 0;
this.columns = columns;
this.rowHeaderColumnKeys = rowHeaderColumnKeys;
this.body = body;
this.headerRows = headerRows; // Default row header column to the first one.
if (this.rowHeaderColumnKeys.size === 0) {
this.rowHeaderColumnKeys.add(this.columns[opts != null && opts.showSelectionCheckboxes ? 1 : 0].key);
}
}
*[$d7f61bffc1886b961473c48c52f8fd$var$_Symbol$iterator]() {
yield* this.body.childNodes;
}
get size() {
return [...this.body.childNodes].length;
}
getKeys() {
return this.keyMap.keys();
}
getKeyBefore(key) {
let node = this.keyMap.get(key);
return node ? node.prevKey : null;
}
getKeyAfter(key) {
let node = this.keyMap.get(key);
return node ? node.nextKey : null;
}
getFirstKey() {
var _;
return (_ = [...this.body.childNodes][0]) == null ? void 0 : _.key;
}
getLastKey() {
var _rows;
let rows = [...this.body.childNodes];
return (_rows = rows[rows.length - 1]) == null ? void 0 : _rows.key;
}
getItem(key) {
return this.keyMap.get(key);
}
at(idx) {
const keys = [...this.getKeys()];
return this.getItem(keys[idx]);
}
}
const $ed569ec24a699f43593e019ef637b788$var$OPPOSITE_SORT_DIRECTION = {
ascending: 'descending',
descending: 'ascending'
};
/**
* Provides state management for a table component. Handles building a collection
* of columns and rows from props. In addition, it tracks row selection and manages sort order changes.
*/
export function useTableState(props) {
let {
selectionMode = 'none'
} = props;
let context = useMemo(() => ({
showSelectionCheckboxes: props.showSelectionCheckboxes && selectionMode !== 'none',
selectionMode,
columns: []
}), [props.children, props.showSelectionCheckboxes, selectionMode]);
let collection = useCollection(props, (nodes, prev) => new $d7f61bffc1886b961473c48c52f8fd$export$TableCollection(nodes, prev, context), context);
let {
disabledKeys,
selectionManager
} = useGridState(_babelRuntimeHelpersEsmExtends({}, props, {
collection
}));
return {
collection,
disabledKeys,
selectionManager,
showSelectionCheckboxes: props.showSelectionCheckboxes || false,
sortDescriptor: props.sortDescriptor,
sort(columnKey) {
var _props$sortDescriptor;
props.onSortChange({
column: columnKey,
direction: ((_props$sortDescriptor = props.sortDescriptor) == null ? void 0 : _props$sortDescriptor.column) === columnKey ? $ed569ec24a699f43593e019ef637b788$var$OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction] : 'ascending'
});
}
};
}
function $d2418fd9c90ca8bee81eaa89f5a574$var$TableHeader(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
$d2418fd9c90ca8bee81eaa89f5a574$var$TableHeader.getCollectionNode = function* getCollectionNode(props) {
let {
children,
columns
} = props;
if (typeof children === 'function') {
if (!columns) {
throw new Error('props.children was a function but props.columns is missing');
}
for (let column of columns) {
yield {
type: 'column',
value: column,
renderer: children
};
}
} else {
let columns = [];
_react.Children.forEach(children, column => {
columns.push({
type: 'column',
element: column
});
});
yield* columns;
}
};
/**
* A TableHeader is a container for the Column elements in a Table. Columns can be statically defined
* as children, or generated dynamically using a function based on the data passed to the `columns` prop.
*/
// We don't want getCollectionNode to show up in the type definition
export let TableHeader = $d2418fd9c90ca8bee81eaa89f5a574$var$TableHeader;
function $d42e37bea5d5623bad371e2dcbdc40c5$var$TableBody(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
$d42e37bea5d5623bad371e2dcbdc40c5$var$TableBody.getCollectionNode = function* getCollectionNode(props) {
let {
children,
items
} = props;
yield {
type: 'body',
hasChildNodes: true,
props,
*childNodes() {
if (typeof children === 'function') {
if (!items) {
throw new Error('props.children was a function but props.items is missing');
}
for (let item of items) {
yield {
type: 'item',
value: item,
renderer: children
};
}
} else {
let items = [];
_react.Children.forEach(children, item => {
items.push({
type: 'item',
element: item
});
});
yield* items;
}
}
};
};
/**
* A TableBody is a container for the Row elements of a Table. Rows can be statically defined
* as children, or generated dynamically using a function based on the data passed to the `items` prop.
*/
// We don't want getCollectionNode to show up in the type definition
export let TableBody = $d42e37bea5d5623bad371e2dcbdc40c5$var$TableBody;
function $fe0a8908dd4d1a483485d151a57a1f$var$Column(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
$fe0a8908dd4d1a483485d151a57a1f$var$Column.getCollectionNode = function* getCollectionNode(props, context) {
let {
title,
children,
childColumns
} = props;
let rendered = title || children;
let textValue = props.textValue || (typeof rendered === 'string' ? rendered : '') || props['aria-label'];
let fullNodes = yield {
type: 'column',
hasChildNodes: !!childColumns || title && _react.Children.count(children) > 0,
rendered,
textValue,
props,
*childNodes() {
if (childColumns) {
for (let child of childColumns) {
yield {
type: 'column',
value: child
};
}
} else if (title) {
let childColumns = [];
_react.Children.forEach(children, child => {
childColumns.push({
type: 'column',
element: child
});
});
yield* childColumns;
}
},
shouldInvalidate(newContext) {
// This is a bit of a hack, but it works.
// If this method is called, then there's a cached version of this node available.
// But, we need to keep the list of columns in the new context up to date.
updateContext(newContext);
return false;
}
};
let updateContext = context => {
// register leaf columns on the context so that <Row> can access them
for (let node of fullNodes) {
if (!node.hasChildNodes) {
context.columns.push(node);
}
}
};
updateContext(context);
};
/**
* A Column represents a field of each item within a Table. Columns may also contain nested
* Column elements to represent column groups. Nested columns can be statically defined as
* children, or dynamically generated using a function based on the `childColumns` prop.
*/
// We don't want getCollectionNode to show up in the type definition
export let Column = $fe0a8908dd4d1a483485d151a57a1f$var$Column;
function $a7c409b25db03fac671ec6ef75bead$var$Row(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
$a7c409b25db03fac671ec6ef75bead$var$Row.getCollectionNode = function* getCollectionNode(props, context) {
let {
children,
textValue
} = props;
yield {
type: 'item',
props: props,
textValue,
'aria-label': props['aria-label'],
hasChildNodes: true,
*childNodes() {
// Process cells first
if (context.showSelectionCheckboxes && context.selectionMode !== 'none') {
yield {
type: 'cell',
key: 'header',
// this is combined with the row key by CollectionBuilder
props: {
isSelectionCell: true
}
};
}
if (typeof children === 'function') {
for (let column of context.columns) {
yield {
type: 'cell',
element: children(column.key),
key: column.key // this is combined with the row key by CollectionBuilder
};
}
} else {
let cells = [];
_react.Children.forEach(children, cell => {
cells.push({
type: 'cell',
element: cell
});
});
if (cells.length !== context.columns.length) {
throw new Error("Cell count must match column count. Found " + cells.length + " cells and " + context.columns.length + " columns.");
}
yield* cells;
}
},
shouldInvalidate(newContext) {
// Invalidate all rows if the columns changed.
return newContext.columns.length !== context.columns.length || newContext.columns.some((c, i) => c.key !== context.columns[i].key) || newContext.showSelectionCheckboxes !== context.showSelectionCheckboxes || newContext.selectionMode !== context.selectionMode;
}
};
};
/**
* A Row represents a single item in a Table and contains Cell elements for each column.
* Cells can be statically defined as children, or generated dynamically using a function
* based on the columns defined in the TableHeader.
*/
// We don't want getCollectionNode to show up in the type definition
export let Row = $a7c409b25db03fac671ec6ef75bead$var$Row;
/*

@@ -586,29 +23,16 @@ * Copyright 2020 Adobe. All rights reserved.

* governing permissions and limitations under the License.
*/
function $e2fd505f0e5b23b70534674763d176d$var$Cell(props) {
// eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
*/
$e2fd505f0e5b23b70534674763d176d$var$Cell.getCollectionNode = function* getCollectionNode(props) {
let {
children
} = props;
let textValue = props.textValue || (typeof children === 'string' ? children : '') || props['aria-label'] || '';
yield {
type: 'cell',
props: props,
rendered: children,
textValue,
'aria-label': props['aria-label'],
hasChildNodes: false
};
};
/**
* A Cell represents the value of a single Column within a Table Row.
*/
// We don't want getCollectionNode to show up in the type definition
export let Cell = $e2fd505f0e5b23b70534674763d176d$var$Cell;
export {$292bc4e09cd0eb62$export$cb895dcf85db1319 as useTableColumnResizeState, $4a0dd036d492cee4$export$907bcc6c48325fd6 as useTableState, $312ae3b56a94a86e$export$f850895b287ef28e as TableHeader, $4ae5314bf50db1a3$export$76ccd210b9029917 as TableBody, $1cd244557c2f97d5$export$816b5d811295e6bc as Column, $70d70eb16ea48428$export$b59bdbef9ce70de2 as Row, $941d1d9a6a28982a$export$f6f0c3fe4ec306ea as Cell, $6555104ff085bef4$re_export$Section as Section, $788781baa30117fa$export$596e1b2e2cf93690 as TableCollection, $788781baa30117fa$export$7c127db850d4e81e as buildHeaderRows, $a9e7ae544a4e41dd$export$7ff77a162970b30e as TableColumnLayout, $ee65a0057fd99531$export$34dfa8a1622185a4 as UNSTABLE_useTreeGridState};
//# sourceMappingURL=module.js.map

151

dist/types.d.ts

@@ -1,8 +0,58 @@

import { CollectionBase, MultipleSelection, Node, SelectionMode, Sortable, SortDescriptor } from "@react-types/shared";
import { GridState } from "@react-stately/grid";
import { TableCollection, TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps } from "@react-types/table";
import { Key } from "react";
export interface TableState<T> extends GridState<T, TableCollection<T>> {
import { ColumnSize, TableCollection as _TableCollection1, TableBodyProps, TableHeaderProps, ColumnProps, RowProps, CellProps } from "@react-types/table";
import { GridNode } from "@react-types/grid";
import { Key, Node, SelectionMode, Sortable, SortDescriptor } from "@react-types/shared";
import { GridCollection, GridState } from "@react-stately/grid";
import { MultipleSelectionState, MultipleSelectionStateProps } from "@react-stately/selection";
import { ReactElement, JSX } from "react";
interface TableColumnLayoutOptions<T> {
getDefaultWidth?: (column: GridNode<T>) => ColumnSize | null | undefined;
getDefaultMinWidth?: (column: GridNode<T>) => ColumnSize | null | undefined;
}
export class TableColumnLayout<T> {
getDefaultWidth: (column: GridNode<T>) => ColumnSize | null | undefined;
getDefaultMinWidth: (column: GridNode<T>) => ColumnSize | null | undefined;
columnWidths: Map<Key, number>;
columnMinWidths: Map<Key, number>;
columnMaxWidths: Map<Key, number>;
constructor(options: TableColumnLayoutOptions<T>);
/** Takes an array of columns and splits it into 2 maps of columns with controlled and columns with uncontrolled widths. */
splitColumnsIntoControlledAndUncontrolled(columns: Array<GridNode<T>>): [Map<Key, GridNode<T>>, Map<Key, GridNode<T>>];
/** Takes uncontrolled and controlled widths and joins them into a single Map. */
recombineColumns(columns: Array<GridNode<T>>, uncontrolledWidths: Map<Key, ColumnSize>, uncontrolledColumns: Map<Key, GridNode<T>>, controlledColumns: Map<Key, GridNode<T>>): Map<Key, ColumnSize>;
/** Used to make an initial Map of the uncontrolled widths based on default widths. */
getInitialUncontrolledWidths(uncontrolledColumns: Map<Key, GridNode<T>>): Map<Key, ColumnSize>;
getColumnWidth(key: Key): number;
getColumnMinWidth(key: Key): number;
getColumnMaxWidth(key: Key): number;
resizeColumnWidth(collection: _TableCollection1<T>, uncontrolledWidths: Map<Key, ColumnSize>, col: Key, width: number): Map<Key, ColumnSize>;
buildColumnWidths(tableWidth: number, collection: _TableCollection1<T>, widths: Map<Key, ColumnSize>): Map<Key, number>;
}
interface GridCollectionOptions {
showSelectionCheckboxes?: boolean;
showDragButtons?: boolean;
}
/** @private */
export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode<T>[]): GridNode<T>[];
export class TableCollection<T> extends GridCollection<T> implements _TableCollection1<T> {
headerRows: GridNode<T>[];
columns: GridNode<T>[];
rowHeaderColumnKeys: Set<Key>;
body: GridNode<T>;
_size: number;
constructor(nodes: Iterable<GridNode<T>>, prev?: _TableCollection1<T>, opts?: GridCollectionOptions);
[Symbol.iterator](): Generator<Node<T>, void, undefined>;
get size(): number;
getKeys(): IterableIterator<Key>;
getKeyBefore(key: Key): Key;
getKeyAfter(key: Key): Key;
getFirstKey(): Key;
getLastKey(): Key;
getItem(key: Key): GridNode<T>;
at(idx: number): GridNode<T>;
getChildren(key: Key): Iterable<GridNode<T>>;
getTextValue(key: Key): string;
}
export interface TableState<T> extends GridState<T, _TableCollection1<T>> {
/** A collection of rows and columns in the table. */
collection: TableCollection<T>;
collection: _TableCollection1<T>;
/** Whether the row selection checkboxes should be displayed. */

@@ -13,12 +63,29 @@ showSelectionCheckboxes: boolean;

/** Calls the provided onSortChange handler with the provided column key and sort direction. */
sort(columnKey: Key): void;
sort(columnKey: Key, direction?: 'ascending' | 'descending'): void;
/** Whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
isKeyboardNavigationDisabled: boolean;
/** Set whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
setKeyboardNavigationDisabled: (val: boolean) => void;
}
export interface CollectionBuilderContext<T> {
showSelectionCheckboxes: boolean;
showDragButtons: boolean;
selectionMode: SelectionMode;
columns: Node<T>[];
}
export interface TableStateProps<T> extends CollectionBase<T>, MultipleSelection, Sortable {
export interface TableStateProps<T> extends MultipleSelectionStateProps, Sortable {
/** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
children?: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>];
/** A list of row keys to disable. */
disabledKeys?: Iterable<Key>;
/** A pre-constructed collection to use instead of building one from items and children. */
collection?: _TableCollection1<T>;
/** Whether the row selection checkboxes should be displayed. */
showSelectionCheckboxes?: boolean;
/** Whether the row drag button should be displayed.
* @private
*/
showDragButtons?: boolean;
/** @private - do not use unless you know what you're doing. */
UNSAFE_selectionState?: MultipleSelectionState;
}

@@ -30,3 +97,68 @@ /**

export function useTableState<T extends object>(props: TableStateProps<T>): TableState<T>;
export interface TableColumnResizeStateProps<T> {
/**
* Current width of the table or table viewport that the columns
* should be calculated against.
*/
tableWidth: number;
/** A function that is called to find the default width for a given column. */
getDefaultWidth?: (node: GridNode<T>) => ColumnSize | null | undefined;
/** A function that is called to find the default minWidth for a given column. */
getDefaultMinWidth?: (node: GridNode<T>) => ColumnSize | null | undefined;
}
export interface TableColumnResizeState<T> {
/**
* Called to update the state that a resize event has occurred.
* Returns the new widths for all columns based on the resized column.
*/
updateResizedColumns: (key: Key, width: number) => Map<Key, ColumnSize>;
/** Callback for when onColumnResize has started. */
startResize: (key: Key) => void;
/** Callback for when onColumnResize has ended. */
endResize: () => void;
/** Gets the current width for the specified column. */
getColumnWidth: (key: Key) => number;
/** Gets the current minWidth for the specified column. */
getColumnMinWidth: (key: Key) => number;
/** Gets the current maxWidth for the specified column. */
getColumnMaxWidth: (key: Key) => number;
/** Key of the currently resizing column. */
resizingColumn: Key | null;
/** A reference to the table state. */
tableState: TableState<T>;
/** A map of the current column widths. */
columnWidths: Map<Key, number>;
}
/**
* Provides column width state management for a table component with column resizing support. Handles building
* a map of column widths calculated from the table's width and any provided column width information from the collection.
* In addition, it tracks the currently resizing column and provides callbacks for updating the widths upon resize operations.
* @param props - Props for the table.
* @param state - State for the table, as returned by `useTableState`.
*/
export function useTableColumnResizeState<T>(props: TableColumnResizeStateProps<T>, state: TableState<T>): TableColumnResizeState<T>;
export interface TreeGridState<T> extends TableState<T> {
/** A set of keys for items that are expanded. */
expandedKeys: 'all' | Set<Key>;
/** Toggles the expanded state for a row by its key. */
toggleKey(key: Key): void;
/** The key map containing nodes representing the collection's tree grid structure. */
keyMap: Map<Key, GridNode<T>>;
/** The number of leaf columns provided by the user. */
userColumnCount: number;
}
export interface TreeGridStateProps<T> extends Omit<TableStateProps<T>, 'collection'> {
/** The currently expanded keys in the collection (controlled). */
UNSTABLE_expandedKeys?: 'all' | Iterable<Key>;
/** The initial expanded keys in the collection (uncontrolled). */
UNSTABLE_defaultExpandedKeys?: 'all' | Iterable<Key>;
/** Handler that is called when items are expanded or collapsed. */
UNSTABLE_onExpandedChange?: (keys: Set<Key>) => any;
}
/**
* Provides state management for a tree grid component. Handles building a collection
* of columns and rows from props. In addition, it tracks and manages expanded rows, row selection, and sort order changes.
*/
export function UNSTABLE_useTreeGridState<T extends object>(props: TreeGridStateProps<T>): TreeGridState<T>;
/**
* A TableHeader is a container for the Column elements in a Table. Columns can be statically defined

@@ -52,3 +184,3 @@ * as children, or generated dynamically using a function based on the data passed to the `columns` prop.

*/
export let Row: (props: RowProps) => JSX.Element;
export let Row: <T>(props: RowProps<T>) => JSX.Element;
/**

@@ -58,4 +190,5 @@ * A Cell represents the value of a single Column within a Table Row.

export let Cell: (props: CellProps) => JSX.Element;
export type { TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps } from '@react-types/table';
export { Section } from '@react-stately/collections';
//# sourceMappingURL=types.d.ts.map

28

package.json
{
"name": "@react-stately/table",
"version": "3.0.0-nightly.2904+e14523fed",
"version": "3.0.0-nightly-641446f65-240905",
"description": "Spectrum UI components in React",

@@ -8,2 +8,7 @@ "license": "Apache-2.0",

"module": "dist/module.js",
"exports": {
"types": "./dist/types.d.ts",
"import": "./dist/import.mjs",
"require": "./dist/main.js"
},
"types": "dist/types.d.ts",

@@ -21,11 +26,14 @@ "source": "src/index.ts",

"dependencies": {
"@babel/runtime": "^7.6.2",
"@react-stately/collections": "3.0.0-nightly.1219+e14523fed",
"@react-stately/grid": "3.0.0-nightly.2904+e14523fed",
"@react-types/grid": "3.0.0-nightly.2904+e14523fed",
"@react-types/shared": "3.0.0-nightly.1219+e14523fed",
"@react-types/table": "3.0.0-nightly.2904+e14523fed"
"@react-stately/collections": "^3.0.0-nightly-641446f65-240905",
"@react-stately/flags": "^3.0.0-nightly-641446f65-240905",
"@react-stately/grid": "^3.0.0-nightly-641446f65-240905",
"@react-stately/selection": "^3.0.0-nightly-641446f65-240905",
"@react-stately/utils": "^3.0.0-nightly-641446f65-240905",
"@react-types/grid": "^3.0.0-nightly-641446f65-240905",
"@react-types/shared": "^3.0.0-nightly-641446f65-240905",
"@react-types/table": "^3.0.0-nightly-641446f65-240905",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1"
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
},

@@ -35,3 +43,3 @@ "publishConfig": {

},
"gitHead": "e14523fedd93ac1a4ede355aed70988af572ae74"
}
"stableVersion": "3.12.2"
}

2

src/Cell.ts

@@ -14,4 +14,4 @@ /*

import {CellProps} from '@react-types/table';
import {JSX, ReactElement} from 'react';
import {PartialNode} from '@react-stately/collections';
import {ReactElement} from 'react';

@@ -18,0 +18,0 @@ function Cell(props: CellProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars

2

src/Column.ts

@@ -17,3 +17,3 @@ /*

import {PartialNode} from '@react-stately/collections';
import React, {ReactElement} from 'react';
import React, {JSX, ReactElement} from 'react';

@@ -20,0 +20,0 @@ function Column<T>(props: ColumnProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars

21

src/index.ts

@@ -13,8 +13,17 @@ /*

export * from './useTableState';
export * from './TableHeader';
export * from './TableBody';
export * from './Column';
export * from './Row';
export * from './Cell';
export type {TableColumnResizeState, TableColumnResizeStateProps} from './useTableColumnResizeState';
export type {TableState, CollectionBuilderContext, TableStateProps} from './useTableState';
export type {TableHeaderProps, TableBodyProps, ColumnProps, RowProps, CellProps} from '@react-types/table';
export type {TreeGridState, TreeGridStateProps} from './useTreeGridState';
export {useTableColumnResizeState} from './useTableColumnResizeState';
export {useTableState} from './useTableState';
export {TableHeader} from './TableHeader';
export {TableBody} from './TableBody';
export {Column} from './Column';
export {Row} from './Row';
export {Cell} from './Cell';
export {Section} from '@react-stately/collections';
export {TableCollection, buildHeaderRows} from './TableCollection';
export {TableColumnLayout} from './TableColumnLayout';
export {UNSTABLE_useTreeGridState} from './useTreeGridState';

55

src/Row.ts

@@ -15,11 +15,11 @@ /*

import {PartialNode} from '@react-stately/collections';
import React, {ReactElement} from 'react';
import React, {JSX, ReactElement} from 'react';
import {RowProps} from '@react-types/table';
function Row(props: RowProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
function Row<T>(props: RowProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
return null;
}
Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps, context: CollectionBuilderContext<T>): Generator<PartialNode<T>> {
let {children, textValue} = props;
Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps<T>, context: CollectionBuilderContext<T>): Generator<PartialNode<T>> {
let {children, textValue, UNSTABLE_childItems} = props;

@@ -34,2 +34,12 @@ yield {

// Process cells first
if (context.showDragButtons) {
yield {
type: 'cell',
key: 'header-drag', // this is combined with the row key by CollectionBuilder
props: {
isDragButtonCell: true
}
};
}
if (context.showSelectionCheckboxes && context.selectionMode !== 'none') {

@@ -53,9 +63,32 @@ yield {

}
if (UNSTABLE_childItems) {
for (let child of UNSTABLE_childItems) {
// Note: in order to reuse the render function of TableBody for our child rows, we just need to yield a type and a value here. CollectionBuilder will then look up
// the parent renderer and use that to build the full node of this child row, using the value provided here to generate the cells
yield {
type: 'item',
value: child
};
}
}
} else {
let cells: PartialNode<T>[] = [];
React.Children.forEach(children, cell => {
cells.push({
type: 'cell',
element: cell
});
let childRows: PartialNode<T>[] = [];
React.Children.forEach(children, node => {
if (node.type === Row) {
if (cells.length < context.columns.length) {
throw new Error('All of a Row\'s child Cells must be positioned before any child Rows.');
}
childRows.push({
type: 'item',
element: node
});
} else {
cells.push({
type: 'cell',
element: node
});
}
});

@@ -68,2 +101,3 @@

yield* cells;
yield* childRows;
}

@@ -76,2 +110,3 @@ },

newContext.showSelectionCheckboxes !== context.showSelectionCheckboxes ||
newContext.showDragButtons !== context.showDragButtons ||
newContext.selectionMode !== context.selectionMode;

@@ -88,3 +123,3 @@ }

// We don't want getCollectionNode to show up in the type definition
let _Row = Row as (props: RowProps) => JSX.Element;
let _Row = Row as <T>(props: RowProps<T>) => JSX.Element;
export {_Row as Row};

2

src/TableBody.ts

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

import {PartialNode} from '@react-stately/collections';
import React, {ReactElement} from 'react';
import React, {JSX, ReactElement} from 'react';
import {TableBodyProps} from '@react-types/table';

@@ -17,0 +17,0 @@

109

src/TableCollection.ts

@@ -12,14 +12,27 @@ /*

*/
import {getFirstItem, getLastItem} from '@react-stately/collections';
import {GridCollection} from '@react-stately/grid';
import {GridNode} from '@react-types/grid';
import {Key} from 'react';
import {TableCollection as ITableCollection} from '@react-types/table';
import {Key} from '@react-types/shared';
interface GridCollectionOptions {
showSelectionCheckboxes?: boolean
showSelectionCheckboxes?: boolean,
showDragButtons?: boolean
}
const ROW_HEADER_COLUMN_KEY = 'row-header-column-' + Math.random().toString(36).slice(2);
let ROW_HEADER_COLUMN_KEY_DRAG = 'row-header-column-' + Math.random().toString(36).slice(2);
while (ROW_HEADER_COLUMN_KEY === ROW_HEADER_COLUMN_KEY_DRAG) {
ROW_HEADER_COLUMN_KEY_DRAG = 'row-header-column-' + Math.random().toString(36).slice(2);
}
function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode<T>[]): GridNode<T>[] {
let columns = [];
/** @private */
export function buildHeaderRows<T>(keyMap: Map<Key, GridNode<T>>, columnNodes: GridNode<T>[]): GridNode<T>[] {
if (columnNodes.length === 0) {
return [];
}
let columns: GridNode<T>[][] = [];
let seen = new Map();

@@ -32,2 +45,5 @@ for (let column of columnNodes) {

let parent: GridNode<T> = keyMap.get(parentKey);
if (!parent) {
break;
}

@@ -52,2 +68,3 @@ // If we've already seen this parent, than it is shared

for (let i = col.length; i < column.length; i++) {
// eslint-disable-next-line max-depth
if (column[i] && seen.has(column[i])) {

@@ -96,2 +113,3 @@ seen.get(column[i]).index = i;

// eslint-disable-next-line max-depth
if (row.length > 0) {

@@ -111,3 +129,3 @@ row[row.length - 1].nextKey = placeholder.key;

item.level = i;
item.index = colIndex;
item.colIndex = colIndex;
row.push(item);

@@ -164,3 +182,3 @@ }

export class TableCollection<T> extends GridCollection<T> {
export class TableCollection<T> extends GridCollection<T> implements ITableCollection<T> {
headerRows: GridNode<T>[];

@@ -170,8 +188,8 @@ columns: GridNode<T>[];

body: GridNode<T>;
_size: number = 0;
constructor(nodes: Iterable<GridNode<T>>, prev?: TableCollection<T>, opts?: GridCollectionOptions) {
constructor(nodes: Iterable<GridNode<T>>, prev?: ITableCollection<T>, opts?: GridCollectionOptions) {
let rowHeaderColumnKeys: Set<Key> = new Set();
let body: GridNode<T>;
let columns = [];
let columns: GridNode<T>[] = [];
// Add cell for selection checkboxes if needed.

@@ -185,3 +203,3 @@ if (opts?.showSelectionCheckboxes) {

level: 0,
index: 0,
index: opts?.showDragButtons ? 1 : 0,
hasChildNodes: false,

@@ -198,2 +216,22 @@ rendered: null,

// Add cell for drag buttons if needed.
if (opts?.showDragButtons) {
let rowHeaderColumn: GridNode<T> = {
type: 'column',
key: ROW_HEADER_COLUMN_KEY_DRAG,
value: null,
textValue: '',
level: 0,
index: 0,
hasChildNodes: false,
rendered: null,
childNodes: [],
props: {
isDragButtonCell: true
}
};
columns.unshift(rowHeaderColumn);
}
let rows = [];

@@ -228,2 +266,3 @@ let columnKeyMap = new Map();

}
let headerRows = buildHeaderRows(columnKeyMap, columns) as GridNode<T>[];

@@ -244,6 +283,7 @@ headerRows.forEach((row, i) => rows.splice(i, 0, row));

this.headerRows = headerRows;
this._size = [...body.childNodes].length;
// Default row header column to the first one.
if (this.rowHeaderColumnKeys.size === 0) {
this.rowHeaderColumnKeys.add(this.columns[opts?.showSelectionCheckboxes ? 1 : 0].key);
this.rowHeaderColumnKeys.add(this.columns.find(column => !column.props?.isDragButtonCell && !column.props?.isSelectionCell).key);
}

@@ -257,3 +297,3 @@ }

get size() {
return [...this.body.childNodes].length;
return this._size;
}

@@ -276,8 +316,7 @@

getFirstKey() {
return [...this.body.childNodes][0]?.key;
return getFirstItem(this.body.childNodes)?.key;
}
getLastKey() {
let rows = [...this.body.childNodes];
return rows[rows.length - 1]?.key;
return getLastItem(this.body.childNodes)?.key;
}

@@ -293,2 +332,42 @@

}
getChildren(key: Key): Iterable<GridNode<T>> {
if (key === this.body.key) {
return this.body.childNodes;
}
return super.getChildren(key);
}
getTextValue(key: Key): string {
let row = this.getItem(key);
if (!row) {
return '';
}
// If the row has a textValue, use that.
if (row.textValue) {
return row.textValue;
}
// Otherwise combine the text of each of the row header columns.
let rowHeaderColumnKeys = this.rowHeaderColumnKeys;
if (rowHeaderColumnKeys) {
let text = [];
for (let cell of row.childNodes) {
let column = this.columns[cell.index];
if (rowHeaderColumnKeys.has(column.key) && cell.textValue) {
text.push(cell.textValue);
}
if (text.length === rowHeaderColumnKeys.size) {
break;
}
}
return text.join(' ');
}
return '';
}
}

9

src/TableHeader.ts

@@ -13,4 +13,5 @@ /*

import {CollectionBuilderContext} from './useTableState';
import {PartialNode} from '@react-stately/collections';
import React, {ReactElement} from 'react';
import React, {JSX, ReactElement} from 'react';
import {TableHeaderProps} from '@react-types/table';

@@ -22,4 +23,8 @@

TableHeader.getCollectionNode = function* getCollectionNode<T>(props: TableHeaderProps<T>): Generator<PartialNode<T>, void, any> {
TableHeader.getCollectionNode = function* getCollectionNode<T>(props: TableHeaderProps<T>, context: CollectionBuilderContext<T>): Generator<PartialNode<T>, void, any> {
let {children, columns} = props;
// Clear columns so they aren't double added in strict mode.
context.columns = [];
if (typeof children === 'function') {

@@ -26,0 +31,0 @@ if (!columns) {

59

src/useTableState.ts

@@ -13,6 +13,7 @@ /*

import {CollectionBase, MultipleSelection, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared';
import {GridState, useGridState} from '@react-stately/grid';
import {TableCollection as ITableCollection} from '@react-types/table';
import {Key, useMemo} from 'react';
import {TableCollection as ITableCollection, TableBodyProps, TableHeaderProps} from '@react-types/table';
import {Key, Node, SelectionMode, Sortable, SortDescriptor, SortDirection} from '@react-types/shared';
import {MultipleSelectionState, MultipleSelectionStateProps} from '@react-stately/selection';
import {ReactElement, useCallback, useMemo, useState} from 'react';
import {TableCollection} from './TableCollection';

@@ -29,3 +30,7 @@ import {useCollection} from '@react-stately/collections';

/** Calls the provided onSortChange handler with the provided column key and sort direction. */
sort(columnKey: Key): void
sort(columnKey: Key, direction?: 'ascending' | 'descending'): void,
/** Whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
isKeyboardNavigationDisabled: boolean,
/** Set whether keyboard navigation is disabled, such as when the arrow keys should be handled by a component within a cell. */
setKeyboardNavigationDisabled: (val: boolean) => void
}

@@ -35,2 +40,3 @@

showSelectionCheckboxes: boolean,
showDragButtons: boolean,
selectionMode: SelectionMode,

@@ -40,5 +46,17 @@ columns: Node<T>[]

export interface TableStateProps<T> extends CollectionBase<T>, MultipleSelection, Sortable {
export interface TableStateProps<T> extends MultipleSelectionStateProps, Sortable {
/** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
children?: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>],
/** A list of row keys to disable. */
disabledKeys?: Iterable<Key>,
/** A pre-constructed collection to use instead of building one from items and children. */
collection?: ITableCollection<T>,
/** Whether the row selection checkboxes should be displayed. */
showSelectionCheckboxes?: boolean
showSelectionCheckboxes?: boolean,
/** Whether the row drag button should be displayed.
* @private
*/
showDragButtons?: boolean,
/** @private - do not use unless you know what you're doing. */
UNSAFE_selectionState?: MultipleSelectionState
}

@@ -55,17 +73,24 @@

*/
export function useTableState<T extends object>(props: TableStateProps<T>): TableState<T> {
let {selectionMode = 'none'} = props;
export function useTableState<T extends object>(props: TableStateProps<T>): TableState<T> {
let [isKeyboardNavigationDisabled, setKeyboardNavigationDisabled] = useState(false);
let {selectionMode = 'none', showSelectionCheckboxes, showDragButtons} = props;
let context = useMemo(() => ({
showSelectionCheckboxes: props.showSelectionCheckboxes && selectionMode !== 'none',
showSelectionCheckboxes: showSelectionCheckboxes && selectionMode !== 'none',
showDragButtons: showDragButtons,
selectionMode,
columns: []
}), [props.children, props.showSelectionCheckboxes, selectionMode]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}), [props.children, showSelectionCheckboxes, selectionMode, showDragButtons]);
let collection = useCollection<T, TableCollection<T>>(
let collection = useCollection<T, ITableCollection<T>>(
props,
(nodes, prev) => new TableCollection(nodes, prev, context),
useCallback((nodes) => new TableCollection(nodes, null, context), [context]),
context
);
let {disabledKeys, selectionManager} = useGridState({...props, collection});
let {disabledKeys, selectionManager} = useGridState({
...props,
collection,
disabledBehavior: props.disabledBehavior || 'selection'
});

@@ -78,8 +103,10 @@ return {

sortDescriptor: props.sortDescriptor,
sort(columnKey: Key) {
isKeyboardNavigationDisabled: collection.size === 0 || isKeyboardNavigationDisabled,
setKeyboardNavigationDisabled,
sort(columnKey: Key, direction?: 'ascending' | 'descending') {
props.onSortChange({
column: columnKey,
direction: props.sortDescriptor?.column === columnKey
direction: direction ?? (props.sortDescriptor?.column === columnKey
? OPPOSITE_SORT_DIRECTION[props.sortDescriptor.direction]
: 'ascending'
: 'ascending')
});

@@ -86,0 +113,0 @@ }

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