@ni/nimble-components 18.13.3 → 18.13.5

package/dist/all-components-bundle.js

@@ -16366,7 +16366,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Fri, 05 May 2023 21:29:53 GMT
+     * Generated on Mon, 08 May 2023 16:01:14 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -28376,7 +28376,11 @@
 
     // prettier-ignore
     const template$d = html `
-    <template role="columnheader" aria-sort="${x => x.ariaSort}">
+    <template role="columnheader"
+        aria-sort="${x => x.ariaSort}"
+        ${'' /* Prevent header double clicks from selecting text */}
+        @mousedown="${(_x, c) => !(c.event.detail > 1)}"
+    >
         <slot></slot>
 
         ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html `
@@ -28635,7 +28639,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()}"
@@ -28731,9 +28734,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);
         }
@@ -28993,9 +28998,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);
         }
@@ -29136,7 +29145,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)}"
@@ -30087,6 +30096,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.
      */
@@ -30216,6 +30484,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();
@@ -30301,26 +30570,17 @@
         /** @internal */
         onRowSelectionToggle(rowIndex, event) {
             event.stopImmediatePropagation();
-            if (this.selectionMode === TableRowSelectionMode.none) {
-                return;
-            }
-            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);
+            const selectionChanged = this.selectionManager.handleRowSelectionToggle(this.tableData[rowIndex], event.detail.newState, this.documentShiftKeyDown);
+            if (selectionChanged) {
+                void this.emitSelectionChangeEvent();
             }
-            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 */
@@ -30445,36 +30705,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);
@@ -30542,11 +30796,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.
@@ -30692,39 +30948,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();