@ni/nimble-components 18.12.0 → 18.12.1

package/dist/all-components-bundle.js

@@ -20098,7 +20098,7 @@
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
-    DesignSystem.tagFor(Checkbox);
+    const checkboxTag = DesignSystem.tagFor(Checkbox);
 
     const styles$x = css `
     ${styles$M}
@@ -27824,7 +27824,8 @@
      */
     const TableRowSelectionMode = {
         none: undefined,
-        single: 'single'
+        single: 'single',
+        multiple: 'multiple'
     };
     /**
      * @internal
@@ -27833,7 +27834,8 @@
      */
     const TableRowSelectionState = {
         notSelected: 'notSelected',
-        selected: 'selected'
+        selected: 'selected',
+        partiallySelected: 'partiallySelected'
     };
 
     /**
@@ -28203,15 +28205,20 @@
     }
 
     .header-row {
-        display: grid;
+        display: flex;
         background: ${applicationBackgroundColor};
         position: relative;
         width: fit-content;
         min-width: 100%;
-        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
         left: var(--ni-private-table-scroll-x);
     }
 
+    .column-header-container {
+        display: grid;
+        width: 100%;
+        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
+    }
+
     .header-scrollbar-spacer {
         width: var(--ni-private-table-header-scrollbar-spacer-width);
     }
@@ -28220,6 +28227,18 @@
         flex: 1;
     }
 
+    .checkbox-container {
+        display: flex;
+    }
+
+    .selection-checkbox {
+        margin-left: ${standardPadding};
+    }
+
+    .selection-checkbox::part(label) {
+        padding-left: 0px;
+    }
+
     .row {
         background: ${applicationBackgroundColor};
         position: relative;
@@ -28234,15 +28253,18 @@
         pointer-events: none;
     }
 
-    :host([selection-mode='single']) .row:hover::before {
+    :host([selection-mode='single']) .row:hover::before,
+    :host([selection-mode='multiple']) .row:hover::before {
         background: ${fillHoverColor};
     }
 
-    :host([selection-mode='single']) .row[selected]::before {
+    :host([selection-mode='single']) .row[selected]::before,
+    :host([selection-mode='multiple']) .row[selected]::before {
         background: ${fillSelectedColor};
     }
 
-    :host([selection-mode='single']) .row[selected]:hover::before {
+    :host([selection-mode='single']) .row[selected]:hover::before,
+    :host([selection-mode='multiple']) .row[selected]:hover::before {
         background: ${fillHoverSelectedColor};
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
@@ -28259,15 +28281,18 @@
                 background: ${fillHoverColor};
             }
 
-            :host([selection-mode='single']) .row:hover::before {
+            :host([selection-mode='single']) .row:hover::before,
+            :host([selection-mode='multiple']) .row:hover::before {
                 background: ${hexToRgbaCssColor(White, 0.15)};
             }
 
-            :host([selection-mode='single']) .row[selected]::before {
+            :host([selection-mode='single']) .row[selected]::before,
+            :host([selection-mode='multiple']) .row[selected]::before {
                 background: ${hexToRgbaCssColor(White, 0.25)};
             }
 
-            :host([selection-mode='single']) .row[selected]:hover::before {
+            :host([selection-mode='single']) .row[selected]:hover::before,
+            :host([selection-mode='multiple']) .row[selected]:hover::before {
                 background: ${hexToRgbaCssColor(White, 0.2)};
             }
         `));
@@ -28348,16 +28373,33 @@
     const tableHeaderTag = DesignSystem.tagFor(TableHeader);
 
     const styles$e = css `
-    ${display('grid')}
+    ${display('flex')}
 
     :host {
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
+        width: fit-content;
+        min-width: 100%;
+    }
+
+    .checkbox-container {
+        display: flex;
+    }
+
+    .selection-checkbox {
+        margin-left: ${standardPadding};
+    }
+
+    .selection-checkbox::part(label) {
+        padding-left: 0px;
+    }
+
+    .cell-container {
+        display: grid;
+        width: 100%;
         grid-auto-flow: column;
         grid-auto-columns: 1fr;
         grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
-        width: fit-content;
-        min-width: 100%;
     }
 
     nimble-table-cell {
@@ -28418,6 +28460,7 @@
                 appearance="${ButtonAppearance.ghost}"
                 @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
+                @click="${(_, c) => c.event.stopPropagation()}"
                 class="action-menu"
             >
                 <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
@@ -28476,28 +28519,43 @@
     // prettier-ignore
     const template$9 = html `
     <template role="row" aria-selected=${x => x.ariaSelected}>
-        ${repeat(x => x.columnStates, html `
-            ${when(x => !x.column.columnHidden, html `
-                <${tableCellTag}
-                    class="cell"
-                    :cellState="${x => x.cellState}"
-                    :cellViewTemplate="${x => x.column.columnInternals.cellViewTemplate}"
-                    ?has-action-menu="${x => !!x.column.actionMenuSlot}"
-                    action-menu-label="${x => x.column.actionMenuLabel}"
-                    @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
-                    @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
-                    :nestingLevel="${x => x.cellIndentLevel};"
+        ${when(x => x.selectable && !x.hideSelection, html `
+            <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()}"
                 >
+                </${checkboxTag}>
+            </span>
+        `)}
 
-                    ${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
-                        <slot
-                            name="${x => `row-action-menu-${x.column.actionMenuSlot}`}"
-                            slot="cellActionMenu"
-                        ></slot>
-                    `)}
-                </${tableCellTag}>
+        <span ${ref('cellContainer')} class="cell-container">
+            ${repeat(x => x.columnStates, html `
+                ${when(x => !x.column.columnHidden, html `
+                    <${tableCellTag}
+                        class="cell"
+                        :cellState="${x => x.cellState}"
+                        :cellViewTemplate="${x => x.column.columnInternals.cellViewTemplate}"
+                        ?has-action-menu="${x => !!x.column.actionMenuSlot}"
+                        action-menu-label="${x => x.column.actionMenuLabel}"
+                        @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
+                        @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
+                        :nestingLevel="${x => x.cellIndentLevel};"
+                    >
+
+                        ${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
+                            <slot
+                                name="${x => `row-action-menu-${x.column.actionMenuSlot}`}"
+                                slot="cellActionMenu"
+                            ></slot>
+                        `)}
+                    </${tableCellTag}>
+                `)}
             `)}
-        `)}
+        </span>
     </template>
 `;
 
@@ -28510,9 +28568,15 @@
             super(...arguments);
             this.selectable = false;
             this.selected = false;
+            this.hideSelection = false;
             this.columns = [];
             this.nestingLevel = 0;
             this.menuOpen = false;
+            // Programmatically updating the selection state of a checkbox fires the 'change' event.
+            // Therefore, selection change events that occur due to programmatically updating
+            // the selection checkbox 'checked' value should be ingored.
+            // https://github.com/microsoft/fast/issues/5750
+            this.ignoreSelectionChangeEvents = false;
         }
         get columnStates() {
             return this.columns.map((column, i) => {
@@ -28546,23 +28610,34 @@
             }
             return null;
         }
+        onSelectionChange(event) {
+            if (this.ignoreSelectionChangeEvents) {
+                return;
+            }
+            const checkbox = event.target;
+            const detail = {
+                oldState: !checkbox.checked,
+                newState: checkbox.checked
+            };
+            this.$emit('row-selection-toggle', detail);
+        }
         onCellActionMenuBeforeToggle(event, column) {
             this.currentActionMenuColumn = column;
-            this.emitToggleEvent('row-action-menu-beforetoggle', event.detail, column);
+            this.emitActionMenuToggleEvent('row-action-menu-beforetoggle', event.detail, column);
         }
         onCellActionMenuToggle(event, column) {
             this.menuOpen = event.detail.newState;
-            this.emitToggleEvent('row-action-menu-toggle', event.detail, column);
+            this.emitActionMenuToggleEvent('row-action-menu-toggle', event.detail, column);
         }
         closeOpenActionMenus() {
             if (this.menuOpen) {
-                const cellWithMenuOpen = Array.from(this.shadowRoot.children).find(c => c instanceof TableCell && c.menuOpen);
+                const cellWithMenuOpen = Array.from(this.cellContainer.children).find(c => c instanceof TableCell && c.menuOpen);
                 if (cellWithMenuOpen?.actionMenuButton?.open) {
                     cellWithMenuOpen.actionMenuButton.toggleButton.control.click();
                 }
             }
         }
-        emitToggleEvent(eventType, menuButtonEventDetail, column) {
+        emitActionMenuToggleEvent(eventType, menuButtonEventDetail, column) {
             const detail = {
                 newState: menuButtonEventDetail.newState,
                 oldState: menuButtonEventDetail.oldState,
@@ -28574,6 +28649,19 @@
         hasValidFieldNames(keys) {
             return keys.every(key => key !== undefined);
         }
+        selectedChanged() {
+            this.setSelectionCheckboxState();
+        }
+        selectionCheckboxChanged() {
+            this.setSelectionCheckboxState();
+        }
+        setSelectionCheckboxState() {
+            if (this.selectionCheckbox) {
+                this.ignoreSelectionChangeEvents = true;
+                this.selectionCheckbox.checked = this.selected;
+                this.ignoreSelectionChangeEvents = false;
+            }
+        }
     }
     __decorate$1([
         attr({ attribute: 'record-id' })
@@ -28584,6 +28672,9 @@
     __decorate$1([
         attr({ mode: 'boolean' })
     ], TableRow.prototype, "selected", void 0);
+    __decorate$1([
+        attr({ attribute: 'hide-selection', mode: 'boolean' })
+    ], TableRow.prototype, "hideSelection", void 0);
     __decorate$1([
         observable
     ], TableRow.prototype, "dataRecord", void 0);
@@ -28599,6 +28690,9 @@
     __decorate$1([
         attr({ attribute: 'menu-open', mode: 'boolean' })
     ], TableRow.prototype, "menuOpen", void 0);
+    __decorate$1([
+        observable
+    ], TableRow.prototype, "selectionCheckbox", void 0);
     __decorate$1([
         volatile
     ], TableRow.prototype, "columnStates", null);
@@ -28620,10 +28714,6 @@
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-        padding-left: calc(
-            ${smallPadding} * 2 + ${standardPadding} * 2 *
-                var(--ni-private-table-group-row-indent-level)
-        );
     }
 
     :host(:hover) {
@@ -28636,6 +28726,10 @@
     }
 
     .expand-collapse-button {
+        margin-left: calc(
+            ${smallPadding} * 2 + ${standardPadding} * 2 *
+                var(--ni-private-table-group-row-indent-level)
+        );
         width: ${controlSlimHeight};
         height: ${controlSlimHeight};
     }
@@ -28672,20 +28766,51 @@
             transition-duration: 0s;
         }
     }
+
+    .checkbox-container {
+        display: flex;
+    }
+
+    .selection-checkbox {
+        margin-left: ${standardPadding};
+    }
+
+    .selection-checkbox::part(label) {
+        padding-left: 0px;
+    }
 `;
 
     /* eslint-disable @typescript-eslint/indent */
     // prettier-ignore
     const template$8 = html `
-    <template @click=${x => x.onGroupExpandToggle()} style="--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};">
-        <${buttonTag}
-            appearance="${ButtonAppearance.ghost}"
-            content-hidden
-            class="expand-collapse-button"
-            tabindex="-1"
-        >
-            <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
-        </${buttonTag}>
+    <template
+        role="row"
+        @click=${x => x.onGroupExpandToggle()}
+        style="--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};"
+    >
+        ${when(x => x.selectable, html `
+            <span role="gridcell" class="checkbox-container">
+                <${checkboxTag}
+                    ${ref('selectionCheckbox')}
+                    class="selection-checkbox"
+                    @change="${(x, c) => x.onSelectionChange(c.event)}"
+                    @click="${(_, c) => c.event.stopPropagation()}"
+                >
+                </${checkboxTag}>
+            </span>
+        `)}
+
+        <span role="gridcell">
+            <${buttonTag}
+                appearance="${ButtonAppearance.ghost}"
+                content-hidden
+                class="expand-collapse-button"
+                tabindex="-1"
+            >
+                <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
+            </${buttonTag}>
+        </span>
+
         <div class="group-row-header-content">
             ${x => x.groupColumn?.columnInternals.groupHeaderViewTemplate}
             <div class="group-row-child-count">(${x => x.leafItemCount})</span>
@@ -28702,10 +28827,17 @@
             super(...arguments);
             this.nestingLevel = 0;
             this.expanded = false;
+            this.selectable = false;
+            this.selectionState = TableRowSelectionState.notSelected;
             /**
              * @internal
              */
             this.animationClass = '';
+            // Programmatically updating the selection state of a checkbox fires the 'change' event.
+            // Therefore, selection change events that occur due to programmatically updating
+            // the selection checkbox 'checked' value should be ingored.
+            // https://github.com/microsoft/fast/issues/5750
+            this.ignoreSelectionChangeEvents = false;
             this.removeAnimatingClass = () => {
                 this.animationClass = '';
                 this.expandIcon.removeEventListener('transitionend', this.removeAnimatingClass);
@@ -28722,6 +28854,33 @@
             this.animationClass = 'animating';
             this.expandIcon.addEventListener('transitionend', this.removeAnimatingClass);
         }
+        /** @internal */
+        onSelectionChange(event) {
+            if (this.ignoreSelectionChangeEvents) {
+                return;
+            }
+            const checkbox = event.target;
+            const detail = {
+                oldState: !checkbox.checked,
+                newState: checkbox.checked
+            };
+            this.$emit('group-selection-toggle', detail);
+        }
+        selectionStateChanged() {
+            this.setSelectionCheckboxState();
+        }
+        selectionCheckboxChanged() {
+            this.setSelectionCheckboxState();
+        }
+        setSelectionCheckboxState() {
+            if (this.selectionCheckbox) {
+                this.ignoreSelectionChangeEvents = true;
+                this.selectionCheckbox.checked = this.selectionState === TableRowSelectionState.selected;
+                this.selectionCheckbox.indeterminate = this.selectionState
+                    === TableRowSelectionState.partiallySelected;
+                this.ignoreSelectionChangeEvents = false;
+            }
+        }
     }
     __decorate$1([
         observable
@@ -28738,6 +28897,15 @@
     __decorate$1([
         attr({ mode: 'boolean' })
     ], TableGroupRow.prototype, "expanded", void 0);
+    __decorate$1([
+        attr({ mode: 'boolean' })
+    ], TableGroupRow.prototype, "selectable", void 0);
+    __decorate$1([
+        attr({ attribute: 'selection-state' })
+    ], TableGroupRow.prototype, "selectionState", void 0);
+    __decorate$1([
+        observable
+    ], TableGroupRow.prototype, "selectionCheckbox", void 0);
     __decorate$1([
         observable
     ], TableGroupRow.prototype, "animationClass", void 0);
@@ -28751,7 +28919,11 @@
 
     // prettier-ignore
     const template$7 = html `
-    <template role="grid" ${children$1({ property: 'childItems', filter: elements() })}>
+    <template
+        role="grid"
+        aria-multiselectable="${x => x.ariaMultiSelectable}"
+        ${children$1({ property: 'childItems', filter: elements() })}
+    >
         <div class="table-container" style="
             --ni-private-table-scroll-x: -${x => x.scrollX}px;
             --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
@@ -28761,18 +28933,31 @@
             ">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
-                    ${repeat(x => x.columns, html `
-                        ${when(x => !x.columnHidden, html `
-                            <${tableHeaderTag}
-                                class="header"
-                                sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
-                                ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                    ${when(x => x.selectionMode === TableRowSelectionMode.multiple, html `
+                        <span role="columnheader" class="checkbox-container">
+                            <${checkboxTag}
+                                ${ref('selectionCheckbox')}
+                                class="${x => `selection-checkbox ${x.selectionMode ?? ''}`}"
+                                @change="${async (x, c) => x.onAllRowsSelectionChange(c.event)}"
                             >
-                                <slot name="${x => x.slot}"></slot>
-                            </${tableHeaderTag}>
-                        `)}
+                            </${checkboxTag}>
+                        </span>
                     `)}
-                    <div class="header-scrollbar-spacer"></div>
+
+                    <span class="column-header-container">
+                        ${repeat(x => x.columns, html `
+                            ${when(x => !x.columnHidden, html `
+                                <${tableHeaderTag}
+                                    class="header"
+                                    sort-direction="${x => (typeof x.sortIndex === 'number' ? x.sortDirection : TableColumnSortDirection.none)}"
+                                    ?first-sorted-column="${(x, c) => x === c.parent.firstSortedColumn}"
+                                >
+                                    <slot name="${x => x.slot}"></slot>
+                                </${tableHeaderTag}>
+                            `)}
+                        `)}
+                        <div class="header-scrollbar-spacer"></div>
+                    </span>
                 </div>
             </div>
             <div class="table-viewport" ${ref('viewport')}>
@@ -28789,8 +28974,11 @@
                                     :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
                                     :leafItemCount="${(x, c) => c.parent.tableData[x.index]?.leafItemCount}"
                                     :groupColumn="${(x, c) => c.parent.tableData[x.index]?.groupColumn}"
+                                    ?selectable="${(_, c) => c.parent.selectionMode === TableRowSelectionMode.multiple}"
+                                    selection-state="${(x, c) => c.parent.tableData[x.index]?.selectionState}"
+                                    @group-selection-toggle="${async (x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
                                     @group-expand-toggle="${(x, c) => c.parent.handleGroupRowExpanded(x.index, c.event)}"
-                                    >
+                                >
                                 </${tableGroupRowTag}>
                             `)}
                             ${when((x, c) => !c.parent.tableData[x.index]?.isGrouped, html `
@@ -28799,12 +28987,14 @@
                                     record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
                                     ?selectable="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.none}"
                                     ?selected="${(x, c) => c.parent.tableData[x.index]?.selectionState === TableRowSelectionState.selected}"
+                                    ?hide-selection="${(_, c) => c.parent.selectionMode !== TableRowSelectionMode.multiple}"
                                     :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                     :columns="${(_, c) => c.parent.columns}"
                                     :nestingLevel="${(x, c) => c.parent.tableData[x.index]?.nestingLevel}"
                                     @click="${async (x, c) => c.parent.onRowClick(x.index)}"
-                                    @row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
-                                    @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
+                                    @row-selection-toggle="${async (x, c) => c.parent.onRowSelectionToggle(x.index, c.event)}"
+                                    @row-action-menu-beforetoggle="${async (x, c) => c.parent.onRowActionMenuBeforeToggle(x.index, c.event)}"
+                                    @row-action-menu-toggle="${async (_, c) => c.parent.onRowActionMenuToggle(c.event)}"
                                 >
                                 ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
                                     ${repeat((_, c) => c.parent.actionMenuSlots, html `
@@ -29786,11 +29976,20 @@
              * @internal
              */
             this.scrollX = 0;
+            /**
+             * @internal
+             */
+            this.selectionState = TableRowSelectionState.notSelected;
             this.tableValidator = new TableValidator();
             this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
             this.isInitialized = false;
             this.collapsedRows = new Set();
+            // Programmatically updating the selection state of a checkbox fires the 'change' event.
+            // Therefore, selection change events that occur due to programmatically updating
+            // the selection checkbox 'checked' value should be ingored.
+            // https://github.com/microsoft/fast/issues/5750
+            this.ignoreSelectionChangeEvents = false;
             this.onViewPortScroll = (event) => {
                 this.scrollX = event.target.scrollLeft;
             };
@@ -29843,7 +30042,9 @@
                     grouping: [],
                     expanded: true // Workaround until we can apply a fix to TanStack regarding leveraging our getIsRowExpanded implementation
                 },
-                enableRowSelection: false,
+                enableRowSelection: row => !row.getIsGrouped(),
+                enableMultiRowSelection: false,
+                enableSubRowSelection: false,
                 enableSorting: true,
                 enableGrouping: true,
                 renderFallbackValue: null,
@@ -29930,37 +30131,74 @@
             }
         }
         /** @internal */
-        async onRowClick(rowIndex) {
+        async onRowSelectionToggle(rowIndex, event) {
+            event.stopImmediatePropagation();
             if (this.selectionMode === TableRowSelectionMode.none) {
                 return;
             }
-            const row = this.table.getRowModel().rows[rowIndex];
-            if (!row) {
-                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 currentSelection = await this.getSelectedRecordIds();
-            if (currentSelection.length === 1 && currentSelection[0] === row.id) {
-                // The clicked row is already the only selected row. Do nothing.
+            else {
+                this.table
+                    .getRowModel()
+                    .rows[rowIndex]?.toggleSelected(event.detail.newState);
+            }
+            await this.emitSelectionChangeEvent();
+        }
+        /** @internal */
+        async onRowClick(rowIndex) {
+            return this.selectSingleRow(rowIndex);
+        }
+        /** @internal */
+        async onAllRowsSelectionChange(event) {
+            event.stopPropagation();
+            if (this.ignoreSelectionChangeEvents) {
                 return;
             }
-            this.table.toggleAllRowsSelected(false);
-            row.toggleSelected(true);
+            this.table.toggleAllRowsSelected(this.selectionCheckbox.checked);
             await this.emitSelectionChangeEvent();
         }
         /** @internal */
-        onRowActionMenuBeforeToggle(event) {
+        async onRowActionMenuBeforeToggle(rowIndex, event) {
             event.stopImmediatePropagation();
+            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();
+                }
+            }
             this.openActionMenuRecordId = event.detail.recordIds[0];
-            this.$emit('action-menu-beforetoggle', event.detail);
+            const detail = {
+                ...event.detail,
+                recordIds
+            };
+            this.$emit('action-menu-beforetoggle', detail);
         }
         /** @internal */
-        onRowActionMenuToggle(event) {
+        async onRowActionMenuToggle(event) {
             event.stopImmediatePropagation();
-            this.$emit('action-menu-toggle', event.detail);
+            const recordIds = this.selectionMode === TableRowSelectionMode.multiple
+                ? await this.getSelectedRecordIds()
+                : event.detail.recordIds;
+            const detail = {
+                ...event.detail,
+                recordIds
+            };
+            this.$emit('action-menu-toggle', detail);
             if (!event.detail.newState) {
                 this.openActionMenuRecordId = undefined;
             }
         }
+        /** @internal */
         handleGroupRowExpanded(rowIndex, event) {
             this.toggleGroupExpanded(rowIndex);
             event.stopPropagation();
@@ -29980,6 +30218,16 @@
                 this.updateRowGridColumns();
             }
         }
+        get ariaMultiSelectable() {
+            switch (this.selectionMode) {
+                case TableRowSelectionMode.multiple:
+                    return 'true';
+                case TableRowSelectionMode.single:
+                    return 'false';
+                default:
+                    return null;
+            }
+        }
         selectionModeChanged(_prev, _next) {
             if (!this.$fastController.isConnected) {
                 return;
@@ -30066,7 +30314,8 @@
                 updatedOptions.state.rowSelection = {};
             }
             if (this.updateTracker.updateSelectionMode) {
-                updatedOptions.enableRowSelection = this.selectionMode !== TableRowSelectionMode.none;
+                updatedOptions.enableMultiRowSelection = this.selectionMode === TableRowSelectionMode.multiple;
+                updatedOptions.enableSubRowSelection = this.selectionMode === TableRowSelectionMode.multiple;
                 updatedOptions.state.rowSelection = {};
             }
             if (this.updateTracker.requiresTanStackDataReset) {
@@ -30109,15 +30358,29 @@
             };
             this.$emit('selection-change', detail);
         }
+        selectionStateChanged() {
+            this.setSelectionCheckboxState();
+        }
+        selectionCheckboxChanged() {
+            this.setSelectionCheckboxState();
+        }
+        setSelectionCheckboxState() {
+            if (this.selectionCheckbox) {
+                this.ignoreSelectionChangeEvents = true;
+                this.selectionCheckbox.checked = this.selectionState === TableRowSelectionState.selected;
+                this.selectionCheckbox.indeterminate = this.selectionState
+                    === TableRowSelectionState.partiallySelected;
+                this.ignoreSelectionChangeEvents = false;
+            }
+        }
         refreshRows() {
+            this.selectionState = this.getTableSelectionState();
             const rows = this.table.getRowModel().rows;
             this.tableData = rows.map(row => {
                 const rowState = {
                     record: row.original,
                     id: row.id,
-                    selectionState: row.getIsSelected()
-                        ? TableRowSelectionState.selected
-                        : TableRowSelectionState.notSelected,
+                    selectionState: this.getRowSelectionState(row),
                     isGrouped: row.getIsGrouped(),
                     isExpanded: row.getIsExpanded(),
                     groupRowValue: row.getIsGrouped()
@@ -30134,6 +30397,55 @@
             });
             this.virtualizer.dataChanged();
         }
+        getTableSelectionState() {
+            if (this.table.getIsAllRowsSelected()) {
+                return TableRowSelectionState.selected;
+            }
+            if (this.table.getIsSomeRowsSelected()) {
+                return TableRowSelectionState.partiallySelected;
+            }
+            return TableRowSelectionState.notSelected;
+        }
+        getRowSelectionState(row) {
+            if (row.getIsGrouped()) {
+                return this.getGroupedRowSelectionState(row);
+            }
+            return row.getIsSelected()
+                ? TableRowSelectionState.selected
+                : TableRowSelectionState.notSelected;
+        }
+        getGroupedRowSelectionState(groupedRow) {
+            const subRows = groupedRow.subRows ?? [];
+            let foundSelectedRow = false;
+            let foundNotSelectedRow = false;
+            for (const row of subRows) {
+                if (row.getIsGrouped()) {
+                    const subGroupRowSelectionState = this.getGroupedRowSelectionState(row);
+                    switch (subGroupRowSelectionState) {
+                        case TableRowSelectionState.notSelected:
+                            foundNotSelectedRow = true;
+                            break;
+                        case TableRowSelectionState.selected:
+                            foundSelectedRow = true;
+                            break;
+                        default:
+                            return TableRowSelectionState.partiallySelected;
+                    }
+                }
+                else if (row.getIsSelected()) {
+                    foundSelectedRow = true;
+                }
+                else {
+                    foundNotSelectedRow = true;
+                }
+                if (foundSelectedRow && foundNotSelectedRow) {
+                    return TableRowSelectionState.partiallySelected;
+                }
+            }
+            return foundSelectedRow
+                ? TableRowSelectionState.selected
+                : TableRowSelectionState.notSelected;
+        }
         getGroupRowColumn(row) {
             const groupedId = row.groupingColumnId;
             if (groupedId !== undefined) {
@@ -30150,6 +30462,39 @@
             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();
@@ -30204,10 +30549,12 @@
             }
             const tanstackSelectionState = {};
             const selectableRecordIds = this.tableValidator.getPresentRecordIds(recordIdsToSelect);
-            if (selectableRecordIds.length) {
-                // In single selection mode, only select the first record ID that is requested
-                const firstSelectableRecordId = selectableRecordIds[0];
-                tanstackSelectionState[firstSelectableRecordId] = true;
+            for (const recordId of selectableRecordIds) {
+                tanstackSelectionState[recordId] = true;
+                if (this.selectionMode === TableRowSelectionMode.single) {
+                    // In single selection mode, only select the first record ID that is requested
+                    break;
+                }
             }
             return tanstackSelectionState;
         }
@@ -30245,6 +30592,12 @@
     __decorate$1([
         observable
     ], Table.prototype, "rowGridColumns", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "selectionState", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "selectionCheckbox", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "firstSortedColumn", void 0);