@ni/nimble-components 18.13.4 → 18.13.6

package/dist/all-components-bundle.js

@@ -16366,7 +16366,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Mon, 08 May 2023 13:48:08 GMT
+     * Generated on Thu, 11 May 2023 18:29:12 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -28279,7 +28279,8 @@
     }
 
     .table-row-container {
-        width: 100%;
+        width: fit-content;
+        min-width: 100%;
         position: relative;
         top: var(--ni-private-table-row-container-top);
         background-color: ${tableRowBorderColor};
@@ -28639,7 +28640,6 @@
             <span role="gridcell" class="checkbox-container">
                 <${checkboxTag}
                     ${ref('selectionCheckbox')}
-                    role="cell"
                     class="selection-checkbox"
                     @change="${(x, c) => x.onSelectionChange(c.event)}"
                     @click="${(_, c) => c.event.stopPropagation()}"
@@ -28735,9 +28735,11 @@
                 return;
             }
             const checkbox = event.target;
+            const checked = checkbox.checked;
+            this.selected = checked;
             const detail = {
-                oldState: !checkbox.checked,
-                newState: checkbox.checked
+                oldState: !checked,
+                newState: checked
             };
             this.$emit('row-selection-toggle', detail);
         }
@@ -28828,13 +28830,29 @@
     const tableRowTag = DesignSystem.tagFor(TableRow);
 
     const styles$d = css `
-    ${display('flex')}
+    ${display('grid')}
 
     :host {
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
         box-sizing: border-box;
+        grid-template-columns:
+            calc(
+                ${controlHeight} *
+                    (var(--ni-private-table-group-row-indent-level) + 1)
+            )
+            1fr;
+    }
+
+    :host([selectable]) {
+        grid-template-columns:
+            ${controlHeight}
+            calc(
+                ${controlHeight} *
+                    (var(--ni-private-table-group-row-indent-level) + 1)
+            )
+            1fr;
     }
 
     :host([expanded]) .animating,
@@ -28885,6 +28903,7 @@
 
     .group-row-child-count {
         padding-left: 2px;
+        padding-right: calc(${standardPadding} / 2);
         pointer-events: none;
         ${userSelectNone}
     }
@@ -28997,9 +29016,13 @@
                 return;
             }
             const checkbox = event.target;
+            const checked = checkbox.checked;
+            this.selectionState = checked
+                ? TableRowSelectionState.selected
+                : TableRowSelectionState.notSelected;
             const detail = {
-                oldState: !checkbox.checked,
-                newState: checkbox.checked
+                oldState: !checked,
+                newState: checked
             };
             this.$emit('group-selection-toggle', detail);
         }
@@ -29140,7 +29163,7 @@
                                     :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                     :columns="${(_, c) => c.parent.columns}"
                                     :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
-                                    @click="${(x, c) => c.parent.onRowClick(x.index)}"
+                                    @click="${(x, c) => c.parent.onRowClick(x.index, c.event)}"
                                     @row-selection-toggle="${(x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                     @row-action-menu-beforetoggle="${(x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
                                     @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
@@ -30091,6 +30114,265 @@
         }
     }
 
+    /**
+     * Abstract base class for handling behavior associated with interactive row selection of the table.
+     */
+    class SelectionManagerBase {
+        constructor(tanStackTable) {
+            this.tanStackTable = tanStackTable;
+        }
+        reset() { }
+        toggleIsRowSelected(rowState, isSelecting) {
+            if (rowState.isGrouped
+                && rowState.selectionState === TableRowSelectionState.selected) {
+                // Work around for https://github.com/TanStack/table/issues/4759
+                // Manually deselect all leaf rows when a fully selected group is being deselected.
+                this.deselectAllLeafRows(rowState.id);
+            }
+            else {
+                this.tanStackTable.getRow(rowState.id).toggleSelected(isSelecting);
+            }
+        }
+        selectSingleRow(rowState) {
+            if (rowState.isGrouped) {
+                throw new Error('function not intended to select grouped rows');
+            }
+            const currentSelection = this.tanStackTable.getState().rowSelection;
+            const selectedRecordIds = [];
+            Object.entries(currentSelection).forEach(([recordId, isSelected]) => {
+                if (isSelected) {
+                    selectedRecordIds.push(recordId);
+                }
+            });
+            if (selectedRecordIds.length === 1
+                && selectedRecordIds[0] === rowState.id) {
+                // The clicked row is already the only selected row. Do nothing.
+                return false;
+            }
+            const newSelectionState = {};
+            newSelectionState[rowState.id] = true;
+            this.tanStackTable.setRowSelection(newSelectionState);
+            return true;
+        }
+        deselectAllLeafRows(rowId) {
+            const groupRow = this.tanStackTable.getRow(rowId);
+            const leafRowIds = this.getAllLeafRowIds(groupRow.id);
+            const selectionState = this.tanStackTable.getState().rowSelection;
+            for (const id of leafRowIds) {
+                delete selectionState[id];
+            }
+            this.tanStackTable.setRowSelection(selectionState);
+        }
+        getAllLeafRowIds(id) {
+            const row = this.tanStackTable
+                .getRowModel()
+                .flatRows.find(x => x.id === id);
+            if (!row?.getIsGrouped()) {
+                return [];
+            }
+            return row
+                .getLeafRows()
+                .filter(leafRow => leafRow.getLeafRows().length === 0)
+                .map(leafRow => leafRow.id);
+        }
+        getAllOrderedRows() {
+            const topLevelRows = this.tanStackTable.getPreExpandedRowModel().rows;
+            return this.getOrderedRows(topLevelRows);
+        }
+        getOrderedRows(topLevelRows) {
+            const allRows = [];
+            for (const row of topLevelRows) {
+                allRows.push(row);
+                if (row.subRows?.length) {
+                    allRows.push(...this.getOrderedRows(row.subRows));
+                }
+            }
+            return allRows;
+        }
+    }
+
+    /**
+     * Selection manager for interactive selection when the selection mode of the table is
+     * `TableRowSelectionMode.none`.
+     */
+    class DisabledSelectionManager extends SelectionManagerBase {
+        handleRowSelectionToggle(_rowState, _isSelecting, _shiftKey) {
+            return false;
+        }
+        handleRowClick(_rowState, _shiftKey, _ctrlKey) {
+            return false;
+        }
+        handleActionMenuOpening(_rowState) {
+            return false;
+        }
+    }
+
+    /**
+     * Selection manager for interactive selection when the selection mode of the table is
+     * `TableRowSelectionMode.multiple`.
+     */
+    class MultiSelectionManager extends SelectionManagerBase {
+        handleRowSelectionToggle(rowState, isSelecting, shiftKey) {
+            if (shiftKey) {
+                if (this.tryUpdateRangeSelection(rowState.id)) {
+                    // Made a range selection
+                    return true;
+                }
+            }
+            this.shiftSelectStartRowId = rowState.id;
+            this.previousShiftSelectRowEndId = undefined;
+            this.toggleIsRowSelected(rowState, isSelecting);
+            return true;
+        }
+        handleRowClick(rowState, shiftKey, ctrlKey) {
+            if (ctrlKey) {
+                this.shiftSelectStartRowId = rowState.id;
+                this.previousShiftSelectRowEndId = undefined;
+                this.toggleIsRowSelected(rowState);
+                return true;
+            }
+            if (shiftKey) {
+                if (this.tryUpdateRangeSelection(rowState.id)) {
+                    // Made a range selection
+                    return true;
+                }
+            }
+            this.shiftSelectStartRowId = rowState.id;
+            this.previousShiftSelectRowEndId = undefined;
+            return this.selectSingleRow(rowState);
+        }
+        handleActionMenuOpening(rowState) {
+            if (rowState.selectionState === TableRowSelectionState.selected) {
+                return false;
+            }
+            return this.selectSingleRow(rowState);
+        }
+        reset() {
+            this.shiftSelectStartRowId = undefined;
+            this.previousShiftSelectRowEndId = undefined;
+        }
+        tryUpdateRangeSelection(rowId) {
+            if (this.shiftSelectStartRowId === undefined) {
+                return false;
+            }
+            const allRows = this.getAllOrderedRows();
+            const selectionStartIndex = this.getRowIndexForId(this.shiftSelectStartRowId, allRows);
+            if (selectionStartIndex === -1) {
+                return false;
+            }
+            const selectionState = this.tanStackTable.getState().rowSelection;
+            this.removePreviousRangeSelection(selectionState, selectionStartIndex, allRows);
+            this.addNewRangeSelection(selectionState, rowId, selectionStartIndex, allRows);
+            this.previousShiftSelectRowEndId = rowId;
+            this.tanStackTable.setRowSelection(selectionState);
+            return true;
+        }
+        removePreviousRangeSelection(selection, shiftSelectStartRowIndex, allRows) {
+            const previousRangeEndIndex = this.getRowIndexForId(this.previousShiftSelectRowEndId, allRows);
+            this.updateSelectionStateForRange(selection, shiftSelectStartRowIndex, previousRangeEndIndex, allRows, false);
+        }
+        addNewRangeSelection(selection, endRangeRowId, shiftSelectStartRowIndex, allRows) {
+            const newRangeEndIndex = this.getRowIndexForId(endRangeRowId, allRows);
+            this.updateSelectionStateForRange(selection, shiftSelectStartRowIndex, newRangeEndIndex, allRows, true);
+        }
+        updateSelectionStateForRange(selection, rangeStartIndex, rangeEndIndex, allRows, isSelecting) {
+            if (rangeStartIndex === -1 || rangeEndIndex === -1) {
+                return;
+            }
+            const firstRowIndex = Math.min(rangeStartIndex, rangeEndIndex);
+            const lastRowIndex = Math.max(rangeStartIndex, rangeEndIndex);
+            for (let i = firstRowIndex; i <= lastRowIndex; i++) {
+                const row = allRows[i];
+                if (row.getIsGrouped()) {
+                    continue;
+                }
+                this.updateSelectionStateForRow(selection, row.id, isSelecting);
+            }
+            const endRangeRow = allRows[rangeEndIndex];
+            if (endRangeRow.getIsGrouped()) {
+                this.getAllLeafRowIds(endRangeRow.id).forEach(id => this.updateSelectionStateForRow(selection, id, isSelecting));
+            }
+        }
+        updateSelectionStateForRow(selection, rowId, isSelecting) {
+            if (isSelecting) {
+                selection[rowId] = true;
+            }
+            else {
+                delete selection[rowId];
+            }
+        }
+        getRowIndexForId(id, rows) {
+            if (!id) {
+                return -1;
+            }
+            return rows.findIndex(x => x.id === id);
+        }
+    }
+
+    /**
+     * Selection manager for interactive selection when the selection mode of the table is
+     * `TableRowSelectionMode.single`.
+     */
+    class SingleSelectionManager extends SelectionManagerBase {
+        handleRowSelectionToggle(rowState, isSelecting, _shiftKey) {
+            this.toggleIsRowSelected(rowState, isSelecting);
+            return true;
+        }
+        handleRowClick(rowState, _shiftKey, _ctrlKey) {
+            return this.selectSingleRow(rowState);
+        }
+        handleActionMenuOpening(rowState) {
+            return this.handleRowClick(rowState, false, false);
+        }
+    }
+
+    /**
+     * Manages the behavior associated with interactive row selection for the table, including
+     * handling when the selection mode of the table is changed.
+     */
+    class InteractiveSelectionManager {
+        constructor(tanStackTable, selectionMode) {
+            this.tanStackTable = tanStackTable;
+            this.selectionManager = this.createSelectionManager(selectionMode);
+        }
+        handleRowSelectionToggle(rowState, isSelecting, shiftKey) {
+            if (!rowState) {
+                return false;
+            }
+            return this.selectionManager.handleRowSelectionToggle(rowState, isSelecting, shiftKey);
+        }
+        handleRowClick(rowState, shiftKey, ctrlKey) {
+            if (!rowState) {
+                return false;
+            }
+            return this.selectionManager.handleRowClick(rowState, shiftKey, ctrlKey);
+        }
+        handleActionMenuOpening(rowState) {
+            if (!rowState) {
+                return false;
+            }
+            return this.selectionManager.handleActionMenuOpening(rowState);
+        }
+        handleSelectionModeChanged(selectionMode) {
+            this.selectionManager = this.createSelectionManager(selectionMode);
+        }
+        handleSelectionReset() {
+            this.selectionManager.reset();
+        }
+        createSelectionManager(selectionMode) {
+            switch (selectionMode) {
+                case TableRowSelectionMode.multiple:
+                    return new MultiSelectionManager(this.tanStackTable);
+                case TableRowSelectionMode.single:
+                    return new SingleSelectionManager(this.tanStackTable);
+                case TableRowSelectionMode.none:
+                    return new DisabledSelectionManager(this.tanStackTable);
+                default:
+                    throw new Error('unknown selection mode found');
+            }
+        }
+    }
+
     /**
      * A nimble-styled table.
      */
@@ -30220,6 +30502,7 @@
             };
             this.table = createTable(this.options);
             this.virtualizer = new Virtualizer(this, this.table);
+            this.selectionManager = new InteractiveSelectionManager(this.table, this.selectionMode);
         }
         get validity() {
             return this.tableValidator.getValidity();
@@ -30305,26 +30588,17 @@
         /** @internal */
         onRowSelectionToggle(rowIndex, event) {
             event.stopImmediatePropagation();
-            if (this.selectionMode === TableRowSelectionMode.none) {
-                return;
+            const selectionChanged = this.selectionManager.handleRowSelectionToggle(this.tableData[rowIndex], event.detail.newState, this.documentShiftKeyDown);
+            if (selectionChanged) {
+                void this.emitSelectionChangeEvent();
             }
-            const rowState = this.tableData[rowIndex];
-            if (rowState?.isGrouped
-                && rowState?.selectionState === TableRowSelectionState.selected) {
-                // Work around for https://github.com/TanStack/table/issues/4759
-                // Manually deselect all leaf rows when a fully selected group is being deselected.
-                this.deselectAllLeafRows(rowIndex);
-            }
-            else {
-                this.table
-                    .getRowModel()
-                    .rows[rowIndex]?.toggleSelected(event.detail.newState);
-            }
-            void this.emitSelectionChangeEvent();
         }
         /** @internal */
-        onRowClick(rowIndex) {
-            void this.selectSingleRow(rowIndex);
+        onRowClick(rowIndex, event) {
+            const selectionChanged = this.selectionManager.handleRowClick(this.tableData[rowIndex], event.shiftKey, event.ctrlKey || event.metaKey);
+            if (selectionChanged) {
+                void this.emitSelectionChangeEvent();
+            }
             return true;
         }
         /** @internal */
@@ -30449,36 +30723,30 @@
             this.updateTracker.trackColumnInstancesChanged();
         }
         async handleActionMenuBeforeToggleEvent(rowIndex, event) {
-            let recordIds = event.detail.recordIds;
-            if (this.selectionMode !== TableRowSelectionMode.none) {
-                const row = this.table.getRowModel().rows[rowIndex];
-                if (row && !row.getIsSelected()) {
-                    await this.selectSingleRow(rowIndex);
-                }
-                else {
-                    recordIds = await this.getSelectedRecordIds();
-                }
+            const selectionChanged = this.selectionManager.handleActionMenuOpening(this.tableData[rowIndex]);
+            if (selectionChanged) {
+                await this.emitSelectionChangeEvent();
             }
             this.openActionMenuRecordId = event.detail.recordIds[0];
-            const detail = {
-                ...event.detail,
-                recordIds
-            };
+            const detail = await this.getActionMenuToggleEventDetail(event);
             this.$emit('action-menu-beforetoggle', detail);
         }
         async handleRowActionMenuToggleEvent(event) {
-            const recordIds = this.selectionMode === TableRowSelectionMode.multiple
-                ? await this.getSelectedRecordIds()
-                : event.detail.recordIds;
-            const detail = {
-                ...event.detail,
-                recordIds
-            };
+            const detail = await this.getActionMenuToggleEventDetail(event);
             this.$emit('action-menu-toggle', detail);
             if (!event.detail.newState) {
                 this.openActionMenuRecordId = undefined;
             }
         }
+        async getActionMenuToggleEventDetail(originalEvent) {
+            const recordIds = this.selectionMode === TableRowSelectionMode.multiple
+                ? await this.getSelectedRecordIds()
+                : [this.openActionMenuRecordId];
+            return {
+                ...originalEvent.detail,
+                recordIds
+            };
+        }
         removeColumnObservers() {
             this.columnNotifiers.forEach(notifier => {
                 notifier.unsubscribe(this);
@@ -30546,11 +30814,13 @@
             if (this.updateTracker.updateRowIds) {
                 updatedOptions.getRowId = this.calculateTanStackRowIdFunction();
                 updatedOptions.state.rowSelection = {};
+                this.selectionManager.handleSelectionReset();
             }
             if (this.updateTracker.updateSelectionMode) {
                 updatedOptions.enableMultiRowSelection = this.selectionMode === TableRowSelectionMode.multiple;
                 updatedOptions.enableSubRowSelection = this.selectionMode === TableRowSelectionMode.multiple;
                 updatedOptions.state.rowSelection = {};
+                this.selectionManager.handleSelectionModeChanged(this.selectionMode);
             }
             if (this.updateTracker.requiresTanStackDataReset) {
                 // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
@@ -30696,39 +30966,6 @@
             this.table.setOptions(this.options);
             this.refreshRows();
         }
-        async selectSingleRow(rowIndex) {
-            if (this.selectionMode === TableRowSelectionMode.none) {
-                return;
-            }
-            const row = this.table.getRowModel().rows[rowIndex];
-            if (!row) {
-                return;
-            }
-            const currentSelection = await this.getSelectedRecordIds();
-            if (currentSelection.length === 1 && currentSelection[0] === row.id) {
-                // The clicked row is already the only selected row. Do nothing.
-                return;
-            }
-            this.table.toggleAllRowsSelected(false);
-            row.toggleSelected(true);
-            await this.emitSelectionChangeEvent();
-        }
-        deselectAllLeafRows(rowIndex) {
-            const groupRow = this.table.getRowModel().rows[rowIndex];
-            const leafRowIds = groupRow
-                .getLeafRows()
-                .filter(leafRow => leafRow.getLeafRows().length === 0)
-                .map(leafRow => leafRow.id);
-            const selectionState = this.table.getState().rowSelection;
-            for (const id of leafRowIds) {
-                delete selectionState[id];
-            }
-            this.updateTableOptions({
-                state: {
-                    rowSelection: selectionState
-                }
-            });
-        }
         toggleGroupExpanded(rowIndex) {
             const row = this.table.getRowModel().rows[rowIndex];
             const wasExpanded = row.getIsExpanded();