@spectrum-web-components/table 0.0.2-table.2609

package/src/Table.js

@@ -0,0 +1,363 @@
+import { __decorate } from "tslib";
+/* TABLE
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { html, render, SpectrumElement, } from '@spectrum-web-components/base';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+import styles from './table.css.js';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
+export class RangeChangedEvent extends Event {
+    constructor(range) {
+        super(RangeChangedEvent.eventName, { bubbles: true });
+        this.first = range.first;
+        this.last = range.last;
+    }
+}
+RangeChangedEvent.eventName = 'rangeChanged';
+/**
+ * @element sp-table
+ */
+export class Table extends SpectrumElement {
+    constructor() {
+        super(...arguments);
+        this._renderItem = () => html ``;
+        this.role = 'grid';
+        this.selected = [];
+        this.selectedSet = new Set();
+        this.items = [];
+        this.itemValue = (_item, index) => {
+            return '' + index;
+        };
+    }
+    static get styles() {
+        return [styles];
+    }
+    get renderItem() {
+        return this._renderItem;
+    }
+    set renderItem(fn) {
+        this._renderItem = (item, index) => {
+            const value = this.itemValue(item, index);
+            const selected = this.selected.includes(value);
+            return html `
+                <sp-table-row
+                    value=${value}
+                    aria-rowindex=${index + 1}
+                    ?selected=${selected}
+                >
+                    ${this.selects
+                ? html `
+                              <sp-table-checkbox-cell
+                                  ?checked=${selected}
+                              ></sp-table-checkbox-cell>
+                          `
+                : html ``}
+                    ${fn(item, index)}
+                </sp-table-row>
+            `;
+        };
+    }
+    get isVirtualized() {
+        return !!this.items.length;
+    }
+    focus() {
+        const sortableHeadCell = this.querySelector('sp-table-head-cell[sortable]');
+        if (sortableHeadCell) {
+            sortableHeadCell.focus();
+        }
+    }
+    selectAllRows() {
+        if (this.isVirtualized) {
+            this.items.forEach((item, index) => {
+                this.selectedSet.add(this.itemValue(item, index));
+            });
+            this.selected = [...this.selectedSet];
+        }
+        else {
+            const tableRows = [
+                ...this.querySelectorAll('sp-table-row'),
+            ];
+            tableRows.forEach((row) => {
+                row.selected = true; // Visually
+                this.selectedSet.add(row.value); // Prepares table state
+            });
+            this.selected = [...this.selectedSet];
+        }
+        if (!this.tableHeadCheckboxCell)
+            return;
+        this.tableHeadCheckboxCell.checked = true;
+        this.tableHeadCheckboxCell.indeterminate = false;
+    }
+    deselectAllRows() {
+        this.selectedSet.clear();
+        this.selected = [];
+        if (!this.isVirtualized) {
+            const selectedRows = [
+                ...this.querySelectorAll('[selected]'),
+            ];
+            selectedRows.forEach((row) => {
+                row.selected = false;
+            });
+        }
+        if (!this.tableHeadCheckboxCell)
+            return;
+        this.tableHeadCheckboxCell.checked = false;
+        this.tableHeadCheckboxCell.indeterminate = false;
+    }
+    manageSelects() {
+        const tableHead = this.querySelector('sp-table-head');
+        const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');
+        if (!!this.selects) {
+            let allSelected = false;
+            if (this.isVirtualized) {
+                allSelected =
+                    this.selected.length > 0 &&
+                        this.selected.length === this.items.length;
+            }
+            else {
+                const tableRows = [
+                    ...this.querySelectorAll('sp-table-row'),
+                ];
+                tableRows.forEach((row) => {
+                    row.selected = this.selectedSet.has(row.value);
+                    if (!checkboxes || checkboxes.length < 1) {
+                        const checkbox = document.createElement('sp-table-checkbox-cell');
+                        row.insertAdjacentElement('afterbegin', checkbox);
+                        checkbox.checked = row.selected;
+                    }
+                });
+                allSelected = this.selected.length === tableRows.length;
+            }
+            if (!this.tableHeadCheckboxCell) {
+                this.tableHeadCheckboxCell = document.createElement('sp-table-checkbox-cell');
+                tableHead.insertAdjacentElement('afterbegin', this.tableHeadCheckboxCell);
+            }
+            this.tableHeadCheckboxCell.selectsSingle =
+                this.selects === 'single';
+            this.tableHeadCheckboxCell.checked = allSelected;
+            this.tableHeadCheckboxCell.indeterminate =
+                this.selected.length > 0 && !allSelected;
+        }
+        else {
+            checkboxes.forEach((box) => {
+                box.remove();
+            });
+            delete this.tableHeadCheckboxCell;
+        }
+    }
+    manageSelected() {
+        this.selectedSet = new Set(this.selected);
+        if (!this.isVirtualized) {
+            const rows = [
+                ...this.querySelectorAll('sp-table-row'),
+            ];
+            rows.forEach((row) => {
+                row.selected = this.selectedSet.has(row.value);
+            });
+            if (this.tableHeadCheckboxCell)
+                this.tableHeadCheckboxCell.checked =
+                    this.selected.length === rows.length;
+        }
+    }
+    manageCheckboxes() {
+        var _a;
+        const tableRows = [
+            ...this.querySelectorAll('sp-table-row'),
+        ];
+        const tableHead = this.querySelector('sp-table-head');
+        if (!!this.selects) {
+            this.tableHeadCheckboxCell = document.createElement('sp-table-checkbox-cell');
+            const allSelected = this.selected.length === tableRows.length;
+            if (this.tableHeadCheckboxCell) {
+                this.tableHeadCheckboxCell.selectsSingle =
+                    this.selects === 'single';
+                this.tableHeadCheckboxCell.checked = allSelected;
+                this.tableHeadCheckboxCell.indeterminate =
+                    this.selected.length > 0 && !allSelected;
+            }
+            tableHead.insertAdjacentElement('afterbegin', this.tableHeadCheckboxCell);
+            tableRows.forEach((row) => {
+                const checkbox = document.createElement('sp-table-checkbox-cell');
+                row.insertAdjacentElement('afterbegin', checkbox);
+                row.selected = this.selectedSet.has(row.value);
+                checkbox.checked = row.selected;
+            });
+        }
+        else {
+            (_a = tableHead.querySelector('sp-table-checkbox-cell')) === null || _a === void 0 ? void 0 : _a.remove();
+            tableRows.forEach((row) => {
+                var _a;
+                (_a = row.checkboxCells[0]) === null || _a === void 0 ? void 0 : _a.remove();
+                if (this.selected.length) {
+                    row.selected = this.selectedSet.has(row.value);
+                }
+            });
+        }
+    }
+    handleChange(event) {
+        // Contain the children's change events and convert it to a change event on the table
+        // if rowItem doesn't have a value, we assume it's in TableHead (naive!!!)
+        const { target } = event;
+        const { parentElement: rowItem } = target;
+        if (!rowItem.value) {
+            const { checkbox } = target;
+            if (checkbox.checked || checkbox.indeterminate) {
+                this.selectAllRows();
+            }
+            else {
+                this.deselectAllRows();
+            }
+        }
+        else {
+            switch (this.selects) {
+                case 'single': {
+                    this.deselectAllRows();
+                    if (rowItem.selected) {
+                        this.selectedSet.add(rowItem.value);
+                        this.selected = [...this.selectedSet];
+                    }
+                    break;
+                    // if you have multiple selected, but selects='single',
+                    // we deselect all cells? hmm...
+                    // EXAMPLE: rows 1, 2, 4 are selected but selects is single.
+                    // we deselect 2 => 1 and 4 are STILL SELECTED. if you want
+                    // to select any item, it's going to deselect all the cells before
+                    // reselecting the cell you just clicked on, as seen above.
+                }
+                case 'multiple': {
+                    if (rowItem.selected) {
+                        this.selectedSet.add(rowItem.value);
+                    }
+                    else {
+                        this.selectedSet.delete(rowItem.value);
+                    }
+                    this.selected = [...this.selectedSet];
+                    const tableRows = [
+                        ...this.querySelectorAll('sp-table-row'),
+                    ];
+                    const allSelected = this.selected.length === tableRows.length;
+                    if (!this.tableHeadCheckboxCell)
+                        return;
+                    this.tableHeadCheckboxCell.checked = allSelected;
+                    this.tableHeadCheckboxCell.indeterminate =
+                        this.selected.length > 0 && !allSelected;
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+        event.stopPropagation();
+        this.dispatchEvent(new Event('change', {
+            cancelable: true,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    scrollToIndex(index) {
+        if (index) {
+            this.renderVirtualizedItems(index);
+        }
+    }
+    render() {
+        return html `
+            <slot @change=${this.handleChange}></slot>
+        `;
+    }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            const rowValues = new Set();
+            if (this.isVirtualized) {
+                this.items.forEach((item, index) => {
+                    const value = this.itemValue(item, index);
+                    rowValues.add(value);
+                });
+            }
+            else {
+                const tableRows = [
+                    ...this.querySelectorAll('sp-table-row'),
+                ];
+                tableRows.forEach((row) => {
+                    rowValues.add(row.value);
+                });
+            }
+            const oldSelectedCount = this.selected.length;
+            this.selected = this.selected.filter((selectedItem) => rowValues.has(selectedItem));
+            if (oldSelectedCount !== this.selected.length) {
+                this.dispatchEvent(new Event('change', {
+                    cancelable: true,
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+            this.selectedSet = new Set(this.selected);
+            this.manageCheckboxes();
+        }
+        if (changed.has('selects')) {
+            this.manageSelects();
+        }
+        if (changed.has('selected') && this.hasUpdated) {
+            this.manageSelected();
+        }
+    }
+    updated() {
+        if (this.items.length) {
+            this.renderVirtualizedItems();
+        }
+    }
+    renderVirtualizedItems(index) {
+        if (!this.tableBody) {
+            this.tableBody = this.querySelector('sp-table-body');
+            if (!this.tableBody) {
+                this.tableBody = document.createElement('sp-table-body');
+                this.append(this.tableBody);
+            }
+            // TODO: query Lit team about the `e.stopPropagation()` that happens here.
+            this.tableBody.addEventListener('rangeChanged', (event) => {
+                // console.log('rangeChanged');
+                this.dispatchEvent(new RangeChangedEvent({
+                    first: event.first,
+                    last: event.last,
+                }));
+            });
+        }
+        const config = {
+            items: this.items,
+            renderItem: this.renderItem,
+            scroller: true,
+        };
+        if (index) {
+            config.scrollToIndex = {
+                index,
+            };
+        }
+        render(html `
+                ${virtualize(config)}
+            `, this.tableBody);
+    }
+}
+__decorate([
+    property({ reflect: true })
+], Table.prototype, "role", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Table.prototype, "selects", void 0);
+__decorate([
+    property({ type: Array })
+], Table.prototype, "selected", void 0);
+__decorate([
+    property({ type: Array })
+], Table.prototype, "items", void 0);
+__decorate([
+    property({ type: Object })
+], Table.prototype, "itemValue", void 0);
+//# sourceMappingURL=Table.js.map

package/src/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["Table.ts"],"names":[],"mappings":"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","sourcesContent":["/* TABLE\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    CSSResultArray,\n    html,\n    PropertyValues,\n    render,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table.css.js';\nimport { TableBody } from './TableBody.js';\nimport { TableCheckboxCell } from './TableCheckboxCell.js';\nimport { TableHead } from './TableHead.js';\nimport type { TableHeadCell } from './TableHeadCell.js';\nimport { TableRow } from './TableRow.js';\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\ninterface Range {\n    first: number;\n    last: number;\n}\n\nexport class RangeChangedEvent extends Event {\n    static eventName = 'rangeChanged';\n\n    first: number;\n    last: number;\n\n    constructor(range: Range) {\n        super(RangeChangedEvent.eventName, { bubbles: true });\n        this.first = range.first;\n        this.last = range.last;\n    }\n}\n\n/**\n * @element sp-table\n */\n\nexport class Table extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    get renderItem(): (\n        item: Record<string, unknown>,\n        index: number\n    ) => TemplateResult {\n        return this._renderItem;\n    }\n\n    set renderItem(\n        fn: (item: Record<string, unknown>, index: number) => TemplateResult\n    ) {\n        this._renderItem = (\n            item: Record<string, unknown>,\n            index: number\n        ): TemplateResult => {\n            const value = this.itemValue(item, index);\n            const selected = this.selected.includes(value);\n\n            return html`\n                <sp-table-row\n                    value=${value}\n                    aria-rowindex=${index + 1}\n                    ?selected=${selected}\n                >\n                    ${this.selects\n                        ? html`\n                              <sp-table-checkbox-cell\n                                  ?checked=${selected}\n                              ></sp-table-checkbox-cell>\n                          `\n                        : html``}\n                    ${fn(item, index)}\n                </sp-table-row>\n            `;\n        };\n    }\n\n    private _renderItem: (\n        item: Record<string, unknown>,\n        index: number\n    ) => TemplateResult = () => html``;\n\n    @property({ reflect: true })\n    public role = 'grid';\n\n    @property({ type: String, reflect: true })\n    public selects: undefined | 'single' | 'multiple';\n\n    @property({ type: Array })\n    public selected: string[] = [];\n\n    private selectedSet = new Set<string>();\n\n    @property({ type: Array })\n    public items: Record<string, unknown>[] = [];\n\n    @property({ type: Object })\n    public itemValue = (_item: unknown, index: number): string => {\n        return '' + index;\n    };\n\n    private tableBody?: TableBody;\n\n    private tableHeadCheckboxCell?: TableCheckboxCell;\n\n    private get isVirtualized(): boolean {\n        return !!this.items.length;\n    }\n\n    public override focus(): void {\n        const sortableHeadCell = this.querySelector(\n            'sp-table-head-cell[sortable]'\n        ) as TableHeadCell;\n        if (sortableHeadCell) {\n            sortableHeadCell.focus();\n        }\n    }\n\n    private selectAllRows(): void {\n        if (this.isVirtualized) {\n            this.items.forEach((item, index: number) => {\n                this.selectedSet.add(this.itemValue(item, index));\n            });\n            this.selected = [...this.selectedSet];\n        } else {\n            const tableRows = [\n                ...this.querySelectorAll('sp-table-row'),\n            ] as TableRow[];\n            tableRows.forEach((row) => {\n                row.selected = true; // Visually\n                this.selectedSet.add(row.value); // Prepares table state\n            });\n            this.selected = [...this.selectedSet];\n        }\n\n        if (!this.tableHeadCheckboxCell) return;\n        this.tableHeadCheckboxCell.checked = true;\n        this.tableHeadCheckboxCell.indeterminate = false;\n    }\n\n    private deselectAllRows(): void {\n        this.selectedSet.clear();\n        this.selected = [];\n\n        if (!this.isVirtualized) {\n            const selectedRows = [\n                ...this.querySelectorAll('[selected]'),\n            ] as TableRow[];\n\n            selectedRows.forEach((row) => {\n                row.selected = false;\n            });\n        }\n\n        if (!this.tableHeadCheckboxCell) return;\n        this.tableHeadCheckboxCell.checked = false;\n        this.tableHeadCheckboxCell.indeterminate = false;\n    }\n\n    protected manageSelects(): void {\n        const tableHead = this.querySelector('sp-table-head') as TableHead;\n        const checkboxes = this.querySelectorAll('sp-table-checkbox-cell');\n\n        if (!!this.selects) {\n            let allSelected = false;\n            if (this.isVirtualized) {\n                allSelected =\n                    this.selected.length > 0 &&\n                    this.selected.length === this.items.length;\n            } else {\n                const tableRows = [\n                    ...this.querySelectorAll('sp-table-row'),\n                ] as TableRow[];\n\n                tableRows.forEach((row) => {\n                    row.selected = this.selectedSet.has(row.value);\n                    if (!checkboxes || checkboxes.length < 1) {\n                        const checkbox = document.createElement(\n                            'sp-table-checkbox-cell'\n                        );\n                        row.insertAdjacentElement('afterbegin', checkbox);\n                        checkbox.checked = row.selected;\n                    }\n                });\n\n                allSelected = this.selected.length === tableRows.length;\n            }\n\n            if (!this.tableHeadCheckboxCell) {\n                this.tableHeadCheckboxCell = document.createElement(\n                    'sp-table-checkbox-cell'\n                ) as TableCheckboxCell;\n                tableHead.insertAdjacentElement(\n                    'afterbegin',\n                    this.tableHeadCheckboxCell\n                );\n            }\n            this.tableHeadCheckboxCell.selectsSingle =\n                this.selects === 'single';\n            this.tableHeadCheckboxCell.checked = allSelected;\n            this.tableHeadCheckboxCell.indeterminate =\n                this.selected.length > 0 && !allSelected;\n        } else {\n            checkboxes.forEach((box) => {\n                box.remove();\n            });\n            delete this.tableHeadCheckboxCell;\n        }\n    }\n\n    protected manageSelected(): void {\n        this.selectedSet = new Set(this.selected);\n\n        if (!this.isVirtualized) {\n            const rows = [\n                ...this.querySelectorAll('sp-table-row'),\n            ] as TableRow[];\n\n            rows.forEach((row) => {\n                row.selected = this.selectedSet.has(row.value);\n            });\n            if (this.tableHeadCheckboxCell)\n                this.tableHeadCheckboxCell.checked =\n                    this.selected.length === rows.length;\n        }\n    }\n\n    protected manageCheckboxes(): void {\n        const tableRows = [\n            ...this.querySelectorAll('sp-table-row'),\n        ] as TableRow[];\n        const tableHead = this.querySelector('sp-table-head') as TableHead;\n\n        if (!!this.selects) {\n            this.tableHeadCheckboxCell = document.createElement(\n                'sp-table-checkbox-cell'\n            );\n            const allSelected = this.selected.length === tableRows.length;\n\n            if (this.tableHeadCheckboxCell) {\n                this.tableHeadCheckboxCell.selectsSingle =\n                    this.selects === 'single';\n                this.tableHeadCheckboxCell.checked = allSelected;\n                this.tableHeadCheckboxCell.indeterminate =\n                    this.selected.length > 0 && !allSelected;\n            }\n\n            tableHead.insertAdjacentElement(\n                'afterbegin',\n                this.tableHeadCheckboxCell\n            );\n\n            tableRows.forEach((row) => {\n                const checkbox = document.createElement(\n                    'sp-table-checkbox-cell'\n                );\n                row.insertAdjacentElement('afterbegin', checkbox);\n                row.selected = this.selectedSet.has(row.value);\n                checkbox.checked = row.selected;\n            });\n        } else {\n            tableHead.querySelector('sp-table-checkbox-cell')?.remove();\n            tableRows.forEach((row) => {\n                row.checkboxCells[0]?.remove();\n                if (this.selected.length) {\n                    row.selected = this.selectedSet.has(row.value);\n                }\n            });\n        }\n    }\n\n    protected handleChange(event: Event): void {\n        // Contain the children's change events and convert it to a change event on the table\n        // if rowItem doesn't have a value, we assume it's in TableHead (naive!!!)\n        const { target } = event;\n        const { parentElement: rowItem } = target as HTMLElement & {\n            parentElement: TableRow;\n        };\n        if (!rowItem.value) {\n            const { checkbox } = target as TableCheckboxCell;\n            if (checkbox.checked || checkbox.indeterminate) {\n                this.selectAllRows();\n            } else {\n                this.deselectAllRows();\n            }\n        } else {\n            switch (this.selects) {\n                case 'single': {\n                    this.deselectAllRows();\n                    if (rowItem.selected) {\n                        this.selectedSet.add(rowItem.value);\n                        this.selected = [...this.selectedSet];\n                    }\n                    break;\n                    // if you have multiple selected, but selects='single',\n                    // we deselect all cells? hmm...\n                    // EXAMPLE: rows 1, 2, 4 are selected but selects is single.\n                    // we deselect 2 => 1 and 4 are STILL SELECTED. if you want\n                    // to select any item, it's going to deselect all the cells before\n                    // reselecting the cell you just clicked on, as seen above.\n                }\n                case 'multiple': {\n                    if (rowItem.selected) {\n                        this.selectedSet.add(rowItem.value);\n                    } else {\n                        this.selectedSet.delete(rowItem.value);\n                    }\n                    this.selected = [...this.selectedSet];\n\n                    const tableRows = [\n                        ...this.querySelectorAll('sp-table-row'),\n                    ] as TableRow[];\n\n                    const allSelected =\n                        this.selected.length === tableRows.length;\n\n                    if (!this.tableHeadCheckboxCell) return;\n                    this.tableHeadCheckboxCell.checked = allSelected;\n                    this.tableHeadCheckboxCell.indeterminate =\n                        this.selected.length > 0 && !allSelected;\n                    break;\n                }\n                default: {\n                    break;\n                }\n            }\n        }\n        event.stopPropagation();\n        this.dispatchEvent(\n            new Event('change', {\n                cancelable: true,\n                bubbles: true,\n                composed: true,\n            })\n        );\n    }\n\n    public scrollToIndex(index?: number): void {\n        if (index) {\n            this.renderVirtualizedItems(index);\n        }\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot @change=${this.handleChange}></slot>\n        `;\n    }\n\n    protected override willUpdate(changed: PropertyValues<this>): void {\n        if (!this.hasUpdated) {\n            const rowValues = new Set<string>();\n\n            if (this.isVirtualized) {\n                this.items.forEach((item, index) => {\n                    const value = this.itemValue(item, index);\n                    rowValues.add(value);\n                });\n            } else {\n                const tableRows = [\n                    ...this.querySelectorAll('sp-table-row'),\n                ] as TableRow[];\n                tableRows.forEach((row) => {\n                    rowValues.add(row.value);\n                });\n            }\n\n            const oldSelectedCount = this.selected.length;\n\n            this.selected = this.selected.filter((selectedItem) =>\n                rowValues.has(selectedItem)\n            );\n            if (oldSelectedCount !== this.selected.length) {\n                this.dispatchEvent(\n                    new Event('change', {\n                        cancelable: true,\n                        bubbles: true,\n                        composed: true,\n                    })\n                );\n            }\n            this.selectedSet = new Set(this.selected);\n\n            this.manageCheckboxes();\n        }\n        if (changed.has('selects')) {\n            this.manageSelects();\n        }\n\n        if (changed.has('selected') && this.hasUpdated) {\n            this.manageSelected();\n        }\n    }\n\n    protected override updated(): void {\n        if (this.items.length) {\n            this.renderVirtualizedItems();\n        }\n    }\n\n    protected renderVirtualizedItems(index?: number): void {\n        if (!this.tableBody) {\n            this.tableBody = this.querySelector('sp-table-body') as TableBody;\n            if (!this.tableBody) {\n                this.tableBody = document.createElement('sp-table-body');\n                this.append(this.tableBody);\n            }\n            // TODO: query Lit team about the `e.stopPropagation()` that happens here.\n            this.tableBody.addEventListener(\n                'rangeChanged',\n                (event: RangeChangedEvent) => {\n                    // console.log('rangeChanged');\n                    this.dispatchEvent(\n                        new RangeChangedEvent({\n                            first: event.first,\n                            last: event.last,\n                        })\n                    );\n                }\n            );\n        }\n        const config: {\n            renderItem?: (\n                item: Record<string, unknown>,\n                index: number\n            ) => TemplateResult;\n            scroller?: boolean;\n            items?: Array<unknown>;\n            scrollToIndex?: {\n                index: number;\n            };\n        } = {\n            items: this.items,\n            renderItem: this.renderItem,\n            scroller: true,\n        };\n        if (index) {\n            config.scrollToIndex = {\n                index,\n            };\n        }\n        render(\n            html`\n                ${virtualize(config)}\n            `,\n            this.tableBody\n        );\n    }\n}\n"]}

package/src/TableBody.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+/**
+ * @element sp-table
+ */
+export declare class TableBody extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    role: string;
+    protected render(): TemplateResult;
+}

package/src/TableBody.js

@@ -0,0 +1,36 @@
+import { __decorate } from "tslib";
+/* TABLE BODY
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { html, SpectrumElement, } from '@spectrum-web-components/base';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+import styles from './table-body.css.js';
+/**
+ * @element sp-table
+ */
+export class TableBody extends SpectrumElement {
+    constructor() {
+        super(...arguments);
+        this.role = 'rowgroup';
+    }
+    static get styles() {
+        return [styles];
+    }
+    render() {
+        return html `
+            <slot></slot>
+        `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], TableBody.prototype, "role", void 0);
+//# sourceMappingURL=TableBody.js.map

package/src/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["TableBody.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAEH,IAAI,EACJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,eAAe;IAA9C;;QAMW,SAAI,GAAG,UAAU,CAAC;IAO7B,CAAC;IAZU,MAAM,KAAc,MAAM;QAC7B,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAKkB,MAAM;QACrB,OAAO,IAAI,CAAA;;SAEV,CAAC;IACN,CAAC;CACJ;AAPG;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACH","sourcesContent":["/* TABLE BODY\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport styles from './table-body.css.js';\n\n/**\n * @element sp-table\n */\nexport class TableBody extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ reflect: true })\n    public role = 'rowgroup';\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n}\n"]}

package/src/TableCell.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+/**
+ * @element sp-table
+ */
+export declare class TableCell extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    role: string;
+    tabIndex: number;
+    protected render(): TemplateResult;
+}

package/src/TableCell.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { html, SpectrumElement, } from '@spectrum-web-components/base';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+import styles from './table-cell.css.js';
+/**
+ * @element sp-table
+ */
+export class TableCell extends SpectrumElement {
+    constructor() {
+        super(...arguments);
+        this.role = 'gridcell';
+        this.tabIndex = -1;
+    }
+    static get styles() {
+        return [styles];
+    }
+    render() {
+        return html `
+            <slot></slot>
+        `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], TableCell.prototype, "role", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TableCell.prototype, "tabIndex", void 0);
+//# sourceMappingURL=TableCell.js.map

package/src/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["TableCell.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAEH,IAAI,EACJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAE3E,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,eAAe;IAA9C;;QAMW,SAAI,GAAG,UAAU,CAAC;QAGT,aAAQ,GAAG,CAAC,CAAC,CAAC;IAOlC,CAAC;IAfU,MAAM,KAAc,MAAM;QAC7B,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAQkB,MAAM;QACrB,OAAO,IAAI,CAAA;;SAEV,CAAC;IACN,CAAC;CACJ;AAVG;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACH;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACZ","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nimport styles from './table-cell.css.js';\n\n/**\n * @element sp-table\n */\nexport class TableCell extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [styles];\n    }\n\n    @property({ reflect: true })\n    public role = 'gridcell';\n\n    @property({ type: Number, reflect: true })\n    public override tabIndex = -1;\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot></slot>\n        `;\n    }\n}\n"]}

package/src/TableCheckboxCell.d.ts

@@ -0,0 +1,17 @@
+import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import '@spectrum-web-components/checkbox/sp-checkbox.js';
+import { Checkbox } from '@spectrum-web-components/checkbox';
+/**
+ * @element sp-table
+ */
+export declare class TableCheckboxCell extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    role: string;
+    tabIndex: number;
+    checkbox: Checkbox;
+    indeterminate: boolean;
+    checked: boolean;
+    disabled: boolean;
+    selectsSingle: boolean;
+    protected render(): TemplateResult;
+}

package/src/TableCheckboxCell.js

@@ -0,0 +1,76 @@
+import { __decorate } from "tslib";
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { html, SpectrumElement, } from '@spectrum-web-components/base';
+import '@spectrum-web-components/checkbox/sp-checkbox.js';
+import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import cellStyles from './table-cell.css.js';
+import headCellStyles from './table-head-cell.css.js';
+import styles from './table-checkbox-cell.css.js';
+/**
+ * @element sp-table
+ */
+export class TableCheckboxCell extends SpectrumElement {
+    constructor() {
+        super(...arguments);
+        this.role = 'gridcell';
+        this.tabIndex = -1;
+        this.indeterminate = false;
+        this.checked = false;
+        this.disabled = false;
+        this.selectsSingle = false;
+    }
+    static get styles() {
+        return [cellStyles, headCellStyles, styles];
+    }
+    render() {
+        return html `
+            <sp-checkbox
+                ?checked=${this.checked}
+                ?indeterminate=${this.indeterminate}
+                ?disabled=${this.disabled}
+                aria-hidden=${ifDefined(this.selectsSingle)}
+                @change=${() => {
+            this.dispatchEvent(new Event('change', {
+                bubbles: true,
+                cancelable: true,
+                composed: true,
+            }));
+        }}
+                class="checkbox"
+            ></sp-checkbox>
+        `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], TableCheckboxCell.prototype, "role", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TableCheckboxCell.prototype, "tabIndex", void 0);
+__decorate([
+    query('.checkbox')
+], TableCheckboxCell.prototype, "checkbox", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableCheckboxCell.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableCheckboxCell.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableCheckboxCell.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'selects-single' })
+], TableCheckboxCell.prototype, "selectsSingle", void 0);
+//# sourceMappingURL=TableCheckboxCell.js.map

package/src/TableCheckboxCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCheckboxCell.js","sourceRoot":"","sources":["TableCheckboxCell.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAEH,IAAI,EACJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,kDAAkD,CAAC;AAC1D,OAAO,EACH,QAAQ,EACR,KAAK,GACR,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAC5E,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAGlD;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,eAAe;IAAtD;;QAMW,SAAI,GAAG,UAAU,CAAC;QAGT,aAAQ,GAAG,CAAC,CAAC,CAAC;QAMvB,kBAAa,GAAG,KAAK,CAAC;QAGtB,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,kBAAa,GAAG,KAAK,CAAC;IAsBjC,CAAC;IA7CU,MAAM,KAAc,MAAM;QAC7B,OAAO,CAAC,UAAU,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;IAChD,CAAC;IAuBkB,MAAM;QACrB,OAAO,IAAI,CAAA;;2BAEQ,IAAI,CAAC,OAAO;iCACN,IAAI,CAAC,aAAa;4BACvB,IAAI,CAAC,QAAQ;8BACX,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;0BACjC,GAAG,EAAE;YACX,IAAI,CAAC,aAAa,CACd,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAChB,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE,IAAI;aACjB,CAAC,CACL,CAAC;QACN,CAAC;;;SAGR,CAAC;IACN,CAAC;CACJ;AAxCG;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACH;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACZ;AAG9B;IADC,KAAK,CAAC,WAAW,CAAC;mDACQ;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACC;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACL;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACJ;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;wDAC3C","sourcesContent":["/* \nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport {\n    CSSResultArray,\n    html,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport '@spectrum-web-components/checkbox/sp-checkbox.js';\nimport {\n    property,\n    query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport cellStyles from './table-cell.css.js';\nimport headCellStyles from './table-head-cell.css.js';\nimport styles from './table-checkbox-cell.css.js';\nimport { Checkbox } from '@spectrum-web-components/checkbox';\n\n/**\n * @element sp-table\n */\nexport class TableCheckboxCell extends SpectrumElement {\n    public static override get styles(): CSSResultArray {\n        return [cellStyles, headCellStyles, styles];\n    }\n\n    @property({ reflect: true })\n    public role = 'gridcell';\n\n    @property({ type: Number, reflect: true })\n    public override tabIndex = -1;\n\n    @query('.checkbox')\n    public checkbox!: Checkbox;\n\n    @property({ type: Boolean })\n    public indeterminate = false;\n\n    @property({ type: Boolean })\n    public checked = false;\n\n    @property({ type: Boolean })\n    public disabled = false;\n\n    @property({ type: Boolean, reflect: true, attribute: 'selects-single' })\n    public selectsSingle = false;\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-checkbox\n                ?checked=${this.checked}\n                ?indeterminate=${this.indeterminate}\n                ?disabled=${this.disabled}\n                aria-hidden=${ifDefined(this.selectsSingle)}\n                @change=${() => {\n                    this.dispatchEvent(\n                        new Event('change', {\n                            bubbles: true,\n                            cancelable: true,\n                            composed: true,\n                        })\n                    );\n                }}\n                class=\"checkbox\"\n            ></sp-checkbox>\n        `;\n    }\n}\n"]}

package/src/TableHead.d.ts

@@ -0,0 +1,15 @@
+import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+import { TableCheckboxCell } from './TableCheckboxCell.js';
+/**
+ * @element sp-table
+ */
+export declare class TableHead extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    role: string;
+    selected?: boolean;
+    private handleSorted;
+    protected handleChange({ target: checkboxCell, }: Event & {
+        target: TableCheckboxCell;
+    }): void;
+    protected render(): TemplateResult;
+}