@ni/nimble-components 18.12.0 → 18.12.2

package/dist/esm/table/components/cell/template.js

@@ -12,6 +12,7 @@ export const template = html `
                 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}>

package/dist/esm/table/components/cell/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;0EACmC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;UACnF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;UACvB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAW;eACrC,aAAa,IAAI,GAAG,CAAC,kBAAkB,CAAC;;8BAEzB,gBAAgB,CAAC,KAAK;iCACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;2BAC/F,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAiD,CAAC;;;mBAG3F,oBAAoB,mBAAmB,oBAAoB;kBAC5D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;gBAExB,aAAa;SACpB,CAAC;;CAET,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AAEpC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;0EACmC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;UACnF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;UACvB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAW;eACrC,aAAa,IAAI,GAAG,CAAC,kBAAkB,CAAC;;8BAEzB,gBAAgB,CAAC,KAAK;iCACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;2BAC/F,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAiD,CAAC;0BACpF,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE;;;mBAG1C,oBAAoB,mBAAmB,oBAAoB;kBAC5D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;gBAExB,aAAa;SACpB,CAAC;;CAET,CAAC"}

package/dist/esm/table/components/group-row/index.d.ts

@@ -1,5 +1,6 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
+import { Checkbox, FoundationElement } from '@microsoft/fast-foundation';
 import type { TableColumn } from '../../../table-column/base';
+import { TableRowSelectionState } from '../../types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-group-row': TableGroupRow;
@@ -15,15 +16,27 @@ export declare class TableGroupRow extends FoundationElement {
     leafItemCount?: number;
     groupColumn?: TableColumn;
     expanded: boolean;
+    selectable: boolean;
+    selectionState: TableRowSelectionState;
     /**
      * @internal
      */
     readonly expandIcon: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly selectionCheckbox?: Checkbox;
     /**
      * @internal
      */
     animationClass: string;
+    private ignoreSelectionChangeEvents;
     onGroupExpandToggle(): void;
+    /** @internal */
+    onSelectionChange(event: CustomEvent): void;
+    private selectionStateChanged;
+    private selectionCheckboxChanged;
+    private setSelectionCheckboxState;
     private readonly removeAnimatingClass;
 }
 export declare const tableGroupRowTag: string;

package/dist/esm/table/components/group-row/index.js

@@ -3,6 +3,7 @@ import { attr, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
+import { TableRowSelectionState } from '../../types';
 /**
  * A styled cell that is used within the nimble-table-row.
  * @internal
@@ -12,10 +13,17 @@ export class TableGroupRow extends FoundationElement {
         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);
@@ -32,6 +40,33 @@ export class TableGroupRow extends FoundationElement {
         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([
     observable
@@ -48,6 +83,15 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean' })
 ], TableGroupRow.prototype, "expanded", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], TableGroupRow.prototype, "selectable", void 0);
+__decorate([
+    attr({ attribute: 'selection-state' })
+], TableGroupRow.prototype, "selectionState", void 0);
+__decorate([
+    observable
+], TableGroupRow.prototype, "selectionCheckbox", void 0);
 __decorate([
     observable
 ], TableGroupRow.prototype, "animationClass", void 0);

package/dist/esm/table/components/group-row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,iBAAiB;IAApD;;QAKW,iBAAY,GAAG,CAAC,CAAC;QASjB,aAAQ,GAAG,KAAK,CAAC;QAOxB;;WAEG;QAEI,mBAAc,GAAG,EAAE,CAAC;QAiBV,yBAAoB,GAAG,GAAS,EAAE;YAC/C,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAC/B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC5B,CAAC;QACN,CAAC,CAAC;IACN,CAAC;IAtBU,mBAAmB;QACtB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAClC,6EAA6E;QAC7E,iFAAiF;QACjF,gFAAgF;QAChF,mFAAmF;QACnF,qFAAqF;QACrF,gDAAgD;QAChD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC5B,eAAe,EACf,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,CAAC;CASJ;AA/CG;IADC,UAAU;oDACoB;AAG/B;IADC,UAAU;mDACa;AAGxB;IADC,UAAU;oDACmB;AAG9B;IADC,UAAU;kDACsB;AAGjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CACF;AAWxB;IADC,UAAU;qDACgB;AA0B/B,MAAM,mBAAmB,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,gBAAgB,GAAG,YAAY,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/table/components/group-row/styles.js

@@ -8,10 +8,6 @@ export const styles = css `
         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) {
@@ -24,6 +20,10 @@ export const styles = css `
     }
 
     .expand-collapse-button {
+        margin-left: calc(
+            ${smallPadding} * 2 + ${standardPadding} * 2 *
+                var(--ni-private-table-group-row-indent-level)
+        );
         width: ${controlSlimHeight};
         height: ${controlSlimHeight};
     }
@@ -60,5 +60,17 @@ export const styles = css `
             transition-duration: 0s;
         }
     }
+
+    .checkbox-container {
+        display: flex;
+    }
+
+    .selection-checkbox {
+        margin-left: ${standardPadding};
+    }
+
+    .selection-checkbox::part(label) {
+        padding-left: 0px;
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/table/components/group-row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;cAE1D,YAAY,UAAU,eAAe;;;;;;sBAM7B,cAAc;;;;;sBAKd,WAAW;;;;iBAIhB,iBAAiB;kBAChB,iBAAiB;;;;;;;;;;;;;;;;;6BAiBN,eAAe;;;;;;;;;;;;;;;;;;CAkB3C,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;;;sBAIlD,cAAc;;;;;sBAKd,WAAW;;;;;cAKnB,YAAY,UAAU,eAAe;;;iBAGlC,iBAAiB;kBAChB,iBAAiB;;;;;;;;;;;;;;;;;6BAiBN,eAAe;;;;;;;;;;;;;;;;;;;;;;;;uBAwBrB,eAAe;;;;;;CAMrC,CAAC"}

package/dist/esm/table/components/group-row/template.js

@@ -1,19 +1,39 @@
 /* eslint-disable @typescript-eslint/indent */
-import { html, ref } from '@microsoft/fast-element';
+import { html, ref, when } from '@microsoft/fast-element';
 import { buttonTag } from '../../../button';
 import { ButtonAppearance } from '../../../button/types';
 import { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';
+import { checkboxTag } from '../../../checkbox';
 // prettier-ignore
 export const template = 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>

package/dist/esm/table/components/group-row/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/template.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAEhF,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;uBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,sDAAsD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;WACjH,SAAS;0BACM,gBAAgB,CAAC,KAAK;;;;;eAKjC,yBAAyB,IAAI,GAAG,CAAC,YAAY,CAAC,sCAAsC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,OAAO,yBAAyB;YAC5I,SAAS;;cAEP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,eAAe,CAAC,uBAAuB;kDACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;;;CAGrE,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/template.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,qCAAqC,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;;iBAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;4DACe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;;UAErE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAe;;mBAElC,WAAW;sBACR,GAAG,CAAC,mBAAmB,CAAC;;+BAEf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAoB,CAAC;8BACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE;;oBAE7C,WAAW;;SAEtB,CAAC;;;eAGK,SAAS;8BACM,gBAAgB,CAAC,KAAK;;;;;mBAKjC,yBAAyB,IAAI,GAAG,CAAC,YAAY,CAAC,sCAAsC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,OAAO,yBAAyB;gBAC5I,SAAS;;;;cAIX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,eAAe,CAAC,uBAAuB;kDACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;;;CAGrE,CAAC"}

package/dist/esm/table/components/row/index.d.ts

@@ -1,4 +1,4 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
+import { Checkbox, FoundationElement } from '@microsoft/fast-foundation';
 import type { TableCellState } from '../../../table-column/base/types';
 import type { TableRecord } from '../../types';
 import type { TableColumn } from '../../../table-column/base';
@@ -24,17 +24,27 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
     recordId?: string;
     selectable: boolean;
     selected: boolean;
+    hideSelection: boolean;
     dataRecord?: TDataRecord;
     columns: TableColumn[];
     currentActionMenuColumn?: TableColumn;
     nestingLevel: number;
     menuOpen: boolean;
+    /** @internal */
+    readonly selectionCheckbox?: Checkbox;
+    /** @internal */
+    readonly cellContainer: HTMLSpanElement;
+    private ignoreSelectionChangeEvents;
     get columnStates(): ColumnState[];
     get ariaSelected(): 'true' | 'false' | null;
+    onSelectionChange(event: CustomEvent): void;
     onCellActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
     onCellActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
     closeOpenActionMenus(): void;
-    private emitToggleEvent;
+    private emitActionMenuToggleEvent;
     private hasValidFieldNames;
+    private selectedChanged;
+    private selectionCheckboxChanged;
+    private setSelectionCheckboxState;
 }
 export declare const tableRowTag: string;

package/dist/esm/table/components/row/index.js

@@ -13,9 +13,15 @@ export class TableRow extends FoundationElement {
         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) => {
@@ -49,23 +55,34 @@ export class TableRow extends FoundationElement {
         }
         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,
@@ -77,6 +94,19 @@ export class TableRow extends FoundationElement {
     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([
     attr({ attribute: 'record-id' })
@@ -87,6 +117,9 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean' })
 ], TableRow.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: 'hide-selection', mode: 'boolean' })
+], TableRow.prototype, "hideSelection", void 0);
 __decorate([
     observable
 ], TableRow.prototype, "dataRecord", void 0);
@@ -102,6 +135,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'menu-open', mode: 'boolean' })
 ], TableRow.prototype, "menuOpen", void 0);
+__decorate([
+    observable
+], TableRow.prototype, "selectionCheckbox", void 0);
 __decorate([
     volatile
 ], TableRow.prototype, "columnStates", null);

package/dist/esm/table/components/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/row/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/table/components/row/styles.js

@@ -1,17 +1,34 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderWidth, controlHeight, tableRowBorderColor } from '../../../theme-provider/design-tokens';
+import { borderWidth, controlHeight, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
 export const styles = 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 {

package/dist/esm/table/components/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;uBAGE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;CAuBvE,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,eAAe,EACf,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;uBAGE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;;;;;;;;;uBAUjD,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrC,CAAC"}

package/dist/esm/table/components/row/template.js

@@ -1,30 +1,46 @@
-import { html, repeat, when } from '@microsoft/fast-element';
+import { html, ref, repeat, when } from '@microsoft/fast-element';
 import { tableCellTag } from '../cell';
+import { checkboxTag } from '../../../checkbox';
 // prettier-ignore
 export const template = 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>
+        `)}
+
+        <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}>
+                        ${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>
 `;
 //# sourceMappingURL=template.js.map

package/dist/esm/table/components/row/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;yCACG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;UAClD,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,CAAuB;cACnD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAuB;mBACxD,YAAY;;kCAEG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;yCACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,gBAAgB;wCAC/C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc;yCAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe;sDAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;gDACpH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;qCACnH,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;sBAGrC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAE,CAAC,CAAC,MAAmB,CAAC,uBAAuB,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,IAAI,CAAuB;;oCAEtH,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,cAAe,EAAE;;;qBAGjE,CAAC;oBACF,YAAY;aACnB,CAAC;SACL,CAAC;;CAET,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/table/components/row/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGlE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;yCACG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;UAClD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAU;;mBAEjD,WAAW;sBACR,GAAG,CAAC,mBAAmB,CAAC;;;+BAGf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAoB,CAAC;8BACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE;;oBAE7C,WAAW;;SAEtB,CAAC;;gBAEM,GAAG,CAAC,eAAe,CAAC;cACtB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,IAAI,CAAuB;kBACnD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAuB;uBACxD,YAAY;;sCAEG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;6CACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,gBAAgB;4CAC/C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc;6CAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe;0DAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;oDACpH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAiD,EAAE,CAAC,CAAC,MAAM,CAAC;yCACnH,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;;;0BAGrC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAE,CAAC,CAAC,MAAmB,CAAC,uBAAuB,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,IAAI,CAAuB;;wCAEtH,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,cAAe,EAAE;;;yBAGjE,CAAC;wBACF,YAAY;iBACnB,CAAC;aACL,CAAC;;;CAGb,CAAC"}

package/dist/esm/table/index.d.ts

@@ -1,6 +1,6 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
+import { Checkbox, FoundationElement } from '@microsoft/fast-foundation';
 import { TableColumn } from '../table-column/base';
-import { TableActionMenuToggleEventDetail, TableRecord, TableRowSelectionMode, TableRowSelectionState, TableValidity } from './types';
+import { TableActionMenuToggleEventDetail, TableRecord, TableRowSelectionMode, TableRowSelectionState, TableRowSelectionToggleEventDetail, TableValidity } from './types';
 import { Virtualizer } from './models/virtualizer';
 import type { TableRow } from './components/row';
 declare global {
@@ -61,11 +61,19 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
      * @internal
      */
     rowGridColumns?: string;
+    /**
+     * @internal
+     */
+    selectionState: TableRowSelectionState;
     get validity(): TableValidity;
     /**
      * @internal
      */
     readonly viewport: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly selectionCheckbox?: Checkbox;
     /**
      * @internal
      */
@@ -85,6 +93,7 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
     private columnNotifiers;
     private isInitialized;
     private readonly collapsedRows;
+    private ignoreSelectionChangeEvents;
     constructor();
     setData(newData: readonly TData[]): Promise<void>;
     getSelectedRecordIds(): Promise<string[]>;
@@ -101,16 +110,22 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
      */
     handleChange(source: unknown, args: unknown): void;
     /** @internal */
+    onRowSelectionToggle(rowIndex: number, event: CustomEvent<TableRowSelectionToggleEventDetail>): Promise<void>;
+    /** @internal */
     onRowClick(rowIndex: number): Promise<void>;
     /** @internal */
-    onRowActionMenuBeforeToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
+    onAllRowsSelectionChange(event: CustomEvent): Promise<void>;
+    /** @internal */
+    onRowActionMenuBeforeToggle(rowIndex: number, event: CustomEvent<TableActionMenuToggleEventDetail>): Promise<void>;
+    /** @internal */
+    onRowActionMenuToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): Promise<void>;
     /** @internal */
-    onRowActionMenuToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
     handleGroupRowExpanded(rowIndex: number, event: Event): void;
     /**
      * @internal
      */
     update(): void;
+    get ariaMultiSelectable(): 'true' | 'false' | null;
     protected selectionModeChanged(_prev: string | undefined, _next: string | undefined): void;
     protected idFieldNameChanged(_prev: string | undefined, _next: string | undefined): void;
     protected columnsChanged(_prev: TableColumn[] | undefined, _next: TableColumn[]): void;
@@ -129,9 +144,17 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
     private validate;
     private validateWithData;
     private emitSelectionChangeEvent;
+    private selectionStateChanged;
+    private selectionCheckboxChanged;
+    private setSelectionCheckboxState;
     private refreshRows;
+    private getTableSelectionState;
+    private getRowSelectionState;
+    private getGroupedRowSelectionState;
     private getGroupRowColumn;
     private updateTableOptions;
+    private selectSingleRow;
+    private deselectAllLeafRows;
     private readonly getIsRowExpanded;
     private readonly handleRowSelectionChange;
     private readonly handleExpandedChange;