@ni/nimble-components 29.6.0 → 29.7.0

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

@@ -4,6 +4,7 @@ import type { MenuButton } from '../../../menu-button';
 import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
 import type { TableColumn } from '../../../table-column/base';
 import type { TableCellRecord, TableCellState } from '../../../table-column/base/types';
+import type { TableCellView } from '../../../table-column/base/cell-view';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-cell': TableCell;
@@ -22,9 +23,17 @@ export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRe
     menuOpen: boolean;
     actionMenuLabel?: string;
     cellViewTemplate?: ViewTemplate<TableCell>;
+    /** @internal */
+    cellViewContainer: HTMLElement;
     nestingLevel: number;
     readonly actionMenuButton?: MenuButton;
+    /** @internal */
+    get cellView(): TableCellView<TCellRecord>;
     onActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
     onActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
+    onActionMenuBlur(): void;
+    onCellViewFocusIn(): void;
+    onCellFocusIn(): void;
+    onCellBlur(): void;
 }
 export declare const tableCellTag = "nimble-table-cell";

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

@@ -14,6 +14,11 @@ export class TableCell extends FoundationElement {
         this.menuOpen = false;
         this.nestingLevel = 0;
     }
+    /** @internal */
+    get cellView() {
+        return this.cellViewContainer
+            .firstElementChild;
+    }
     onActionMenuBeforeToggle(event) {
         this.$emit('cell-action-menu-beforetoggle', event.detail);
     }
@@ -21,6 +26,18 @@ export class TableCell extends FoundationElement {
         this.menuOpen = event.detail.newState;
         this.$emit('cell-action-menu-toggle', event.detail);
     }
+    onActionMenuBlur() {
+        this.$emit('cell-action-menu-blur', this);
+    }
+    onCellViewFocusIn() {
+        this.$emit('cell-view-focus-in', this);
+    }
+    onCellFocusIn() {
+        this.$emit('cell-focus-in', this);
+    }
+    onCellBlur() {
+        this.$emit('cell-blur', this);
+    }
 }
 __decorate([
     observable
@@ -46,6 +63,9 @@ __decorate([
 __decorate([
     observable
 ], TableCell.prototype, "cellViewTemplate", void 0);
+__decorate([
+    observable
+], TableCell.prototype, "cellViewContainer", void 0);
 __decorate([
     observable
 ], TableCell.prototype, "nestingLevel", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAQ7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAgBW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QASjB,iBAAY,GAAG,CAAC,CAAC;IAgB5B,CAAC;IAZU,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;CACJ;AAxCU;IADN,UAAU;4CACoC;AAGxC;IADN,UAAU;yCACiB;AAGrB;IADN,UAAU;2CACc;AAGlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CACR;AAGlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAGtB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAGzB;IADN,UAAU;mDACuC;AAG3C;IADN,UAAU;+CACa;AAkB5B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,mBAAmB,CAAC","sourcesContent":["import { attr, observable, ViewTemplate } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport type { MenuButton } from '../../../menu-button';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport type { TableColumn } from '../../../table-column/base';\nimport type {\n    TableCellRecord,\n    TableCellState\n} from '../../../table-column/base/types';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-cell': TableCell;\n    }\n}\n\n/**\n * A styled cell that is used within the nimble-table-row.\n * @internal\n */\nexport class TableCell<\n    TCellRecord extends TableCellRecord = TableCellRecord\n> extends FoundationElement {\n    @observable\n    public cellState?: TableCellState<TCellRecord>;\n\n    @observable\n    public column?: TableColumn;\n\n    @observable\n    public recordId?: string;\n\n    @attr({ attribute: 'column-id' })\n    public columnId?: string;\n\n    @attr({ attribute: 'has-action-menu', mode: 'boolean' })\n    public hasActionMenu = false;\n\n    @attr({ attribute: 'menu-open', mode: 'boolean' })\n    public menuOpen = false;\n\n    @attr({ attribute: 'action-menu-label' })\n    public actionMenuLabel?: string;\n\n    @observable\n    public cellViewTemplate?: ViewTemplate<TableCell>;\n\n    @observable\n    public nestingLevel = 0;\n\n    public readonly actionMenuButton?: MenuButton;\n\n    public onActionMenuBeforeToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>\n    ): void {\n        this.$emit('cell-action-menu-beforetoggle', event.detail);\n    }\n\n    public onActionMenuToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>\n    ): void {\n        this.menuOpen = event.detail.newState;\n        this.$emit('cell-action-menu-toggle', event.detail);\n    }\n}\n\nconst nimbleTableCell = TableCell.compose({\n    baseName: 'table-cell',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());\nexport const tableCellTag = 'nimble-table-cell';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAQ7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAgBW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QAajB,iBAAY,GAAG,CAAC,CAAC;IAsC5B,CAAC;IAlCG,gBAAgB;IAChB,IAAW,QAAQ;QACf,OAAO,IAAI,CAAC,iBAAiB;aACxB,iBAA+C,CAAC;IACzD,CAAC;IAEM,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;IAEM,gBAAgB;QACnB,IAAI,CAAC,KAAK,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAEM,iBAAiB;QACpB,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;IAEM,aAAa;QAChB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;IACtC,CAAC;IAEM,UAAU;QACb,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;CACJ;AAlEU;IADN,UAAU;4CACoC;AAGxC;IADN,UAAU;yCACiB;AAGrB;IADN,UAAU;2CACc;AAGlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CACR;AAGlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAGtB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAGzB;IADN,UAAU;mDACuC;AAI3C;IADN,UAAU;oDAC4B;AAGhC;IADN,UAAU;+CACa;AAwC5B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,mBAAmB,CAAC","sourcesContent":["import { attr, observable, ViewTemplate } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport type { MenuButton } from '../../../menu-button';\nimport type { MenuButtonToggleEventDetail } from '../../../menu-button/types';\nimport type { TableColumn } from '../../../table-column/base';\nimport type {\n    TableCellRecord,\n    TableCellState\n} from '../../../table-column/base/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { TableCellView } from '../../../table-column/base/cell-view';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-cell': TableCell;\n    }\n}\n\n/**\n * A styled cell that is used within the nimble-table-row.\n * @internal\n */\nexport class TableCell<\n    TCellRecord extends TableCellRecord = TableCellRecord\n> extends FoundationElement {\n    @observable\n    public cellState?: TableCellState<TCellRecord>;\n\n    @observable\n    public column?: TableColumn;\n\n    @observable\n    public recordId?: string;\n\n    @attr({ attribute: 'column-id' })\n    public columnId?: string;\n\n    @attr({ attribute: 'has-action-menu', mode: 'boolean' })\n    public hasActionMenu = false;\n\n    @attr({ attribute: 'menu-open', mode: 'boolean' })\n    public menuOpen = false;\n\n    @attr({ attribute: 'action-menu-label' })\n    public actionMenuLabel?: string;\n\n    @observable\n    public cellViewTemplate?: ViewTemplate<TableCell>;\n\n    /** @internal */\n    @observable\n    public cellViewContainer!: HTMLElement;\n\n    @observable\n    public nestingLevel = 0;\n\n    public readonly actionMenuButton?: MenuButton;\n\n    /** @internal */\n    public get cellView(): TableCellView<TCellRecord> {\n        return this.cellViewContainer\n            .firstElementChild as TableCellView<TCellRecord>;\n    }\n\n    public onActionMenuBeforeToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>\n    ): void {\n        this.$emit('cell-action-menu-beforetoggle', event.detail);\n    }\n\n    public onActionMenuToggle(\n        event: CustomEvent<MenuButtonToggleEventDetail>\n    ): void {\n        this.menuOpen = event.detail.newState;\n        this.$emit('cell-action-menu-toggle', event.detail);\n    }\n\n    public onActionMenuBlur(): void {\n        this.$emit('cell-action-menu-blur', this);\n    }\n\n    public onCellViewFocusIn(): void {\n        this.$emit('cell-view-focus-in', this);\n    }\n\n    public onCellFocusIn(): void {\n        this.$emit('cell-focus-in', this);\n    }\n\n    public onCellBlur(): void {\n        this.$emit('cell-blur', this);\n    }\n}\n\nconst nimbleTableCell = TableCell.compose({\n    baseName: 'table-cell',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());\nexport const tableCellTag = 'nimble-table-cell';\n"]}

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

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../../../utilities/style/display';
-import { controlHeight, controlSlimHeight, mediumPadding } from '../../../theme-provider/design-tokens';
+import { borderHoverColor, borderWidth, controlHeight, controlSlimHeight, mediumPadding } from '../../../theme-provider/design-tokens';
+import { focusVisible } from '../../../utilities/style/focus';
 export const styles = css `
     ${display('flex')}
 
@@ -17,6 +18,15 @@ export const styles = css `
         --ni-private-table-cell-action-menu-display: block;
     }
 
+    :host(${focusVisible}) {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    .cell-view-container {
+        display: contents;
+    }
+
     .cell-view {
         overflow: hidden;
     }
@@ -29,5 +39,11 @@ export const styles = css `
         height: ${controlSlimHeight};
         align-self: center;
     }
+
+    ${
+/* This CSS class is applied dynamically by KeyboardNavigationManager */ ''}
+    .action-menu.cell-action-menu-focused {
+        display: block;
+    }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,aAAa,EAChB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa;;cAEtB,aAAa,MAAM,aAAa;;;;;;;;;;;;;;;;;;kBAkB5B,iBAAiB;;;CAGlC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    controlHeight,\n    controlSlimHeight,\n    mediumPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        --ni-private-table-cell-nesting-level: 0;\n        padding: 0px ${mediumPadding};\n        padding-left: calc(\n            ${mediumPadding} + ${controlHeight} *\n                var(--ni-private-table-cell-nesting-level)\n        );\n        align-self: center;\n        height: 100%;\n        /* A default value that will be overridden by the row */\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    .cell-view {\n        overflow: hidden;\n    }\n\n    .action-menu {\n        display: var(--ni-private-table-cell-action-menu-display);\n        margin-left: auto;\n        flex-shrink: 0;\n        flex-grow: 0;\n        height: ${controlSlimHeight};\n        align-self: center;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,aAAa,EAChB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa;;cAEtB,aAAa,MAAM,aAAa;;;;;;;;;YASlC,YAAY;4BACI,WAAW,WAAW,gBAAgB;;;;;;;;;;;;;;;;;kBAiBhD,iBAAiB;;;;MAI7B;AACE,wEAAwE,CAAC,EAC7E;;;;CAIH,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    mediumPadding\n} from '../../../theme-provider/design-tokens';\nimport { focusVisible } from '../../../utilities/style/focus';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        --ni-private-table-cell-nesting-level: 0;\n        padding: 0px ${mediumPadding};\n        padding-left: calc(\n            ${mediumPadding} + ${controlHeight} *\n                var(--ni-private-table-cell-nesting-level)\n        );\n        align-self: center;\n        height: 100%;\n        /* A default value that will be overridden by the row */\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host(${focusVisible}) {\n        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};\n        outline-offset: -2px;\n    }\n\n    .cell-view-container {\n        display: contents;\n    }\n\n    .cell-view {\n        overflow: hidden;\n    }\n\n    .action-menu {\n        display: var(--ni-private-table-cell-action-menu-display);\n        margin-left: auto;\n        flex-shrink: 0;\n        flex-grow: 0;\n        height: ${controlSlimHeight};\n        align-self: center;\n    }\n\n    ${\n        /* This CSS class is applied dynamically by KeyboardNavigationManager */ ''\n    }\n    .action-menu.cell-action-menu-focused {\n        display: block;\n    }\n`;\n"]}

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

@@ -5,15 +5,23 @@ import { ButtonAppearance } from '../../../menu-button/types';
 import { tableCellActionMenuLabel } from '../../../label-provider/table/label-tokens';
 // prettier-ignore
 export const template = html `
-    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}">
-        ${x => x.cellViewTemplate}
+    <template role="cell" style="--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}"
+        @focusin="${x => x.onCellFocusIn()}"
+        @blur="${x => x.onCellBlur()}"
+    >
+        <div ${ref('cellViewContainer')} class="cell-view-container" @focusin="${x => x.onCellViewFocusIn()}">
+            ${x => x.cellViewTemplate}
+        </div>
         ${when(x => x.hasActionMenu, html `
             <${menuButtonTag} ${ref('actionMenuButton')}
                 content-hidden
                 appearance="${ButtonAppearance.ghost}"
+                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}
+                tabindex="-1"
                 @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
                 @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
                 @click="${(_, c) => c.event.stopPropagation()}"
+                @blur="${x => x.onActionMenuBlur()}"
                 class="action-menu"
                 title="${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}"
             >

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;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEtF,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;;yBAEpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;mBAE5F,oBAAoB,mBAAmB,oBAAoB;kBAC5D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;gBAExF,aAAa;SACpB,CAAC;;CAET,CAAC","sourcesContent":["import { html, ref, when } from '@microsoft/fast-element';\nimport type { TableCell } from '.';\nimport { iconThreeDotsLineTag } from '../../../icons/three-dots-line';\nimport { menuButtonTag } from '../../../menu-button';\nimport {\n    ButtonAppearance,\n    MenuButtonToggleEventDetail\n} from '../../../menu-button/types';\nimport { tableCellActionMenuLabel } from '../../../label-provider/table/label-tokens';\n\n// prettier-ignore\nexport const template = html<TableCell>`\n    <template role=\"cell\" style=\"--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}\">\n        ${x => x.cellViewTemplate}\n        ${when(x => x.hasActionMenu, html<TableCell>`\n            <${menuButtonTag} ${ref('actionMenuButton')}\n                content-hidden\n                appearance=\"${ButtonAppearance.ghost}\"\n                @beforetoggle=\"${(x, c) => x.onActionMenuBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}\"\n                @toggle=\"${(x, c) => x.onActionMenuToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}\"\n                @click=\"${(_, c) => c.event.stopPropagation()}\"\n                class=\"action-menu\"\n                title=\"${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}\"\n            >\n                <${iconThreeDotsLineTag} slot=\"start\"></${iconThreeDotsLineTag}>\n                ${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}\n                <slot name=\"cellActionMenu\" slot=\"menu\"></slot>\n            </${menuButtonTag}>\n        `)}\n    </template>\n`;\n"]}
+{"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;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AAEtF,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAW;0EACmC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;oBACzE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE;iBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE;;eAErB,GAAG,CAAC,mBAAmB,CAAC,0CAA0C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;cAC7F,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;;UAE3B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,IAAI,CAAW;eACrC,aAAa,IAAI,GAAG,CAAC,kBAAkB,CAAC;;8BAEzB,gBAAgB,CAAC,KAAK;kBAClC,EAAE,CAAC,+DAA+D;;iCAEnD,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;yBACpC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;;yBAEzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;mBAE5F,oBAAoB,mBAAmB,oBAAoB;kBAC5D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;gBAExF,aAAa;SACpB,CAAC;;CAET,CAAC","sourcesContent":["import { html, ref, when } from '@microsoft/fast-element';\nimport type { TableCell } from '.';\nimport { iconThreeDotsLineTag } from '../../../icons/three-dots-line';\nimport { menuButtonTag } from '../../../menu-button';\nimport {\n    ButtonAppearance,\n    MenuButtonToggleEventDetail\n} from '../../../menu-button/types';\nimport { tableCellActionMenuLabel } from '../../../label-provider/table/label-tokens';\n\n// prettier-ignore\nexport const template = html<TableCell>`\n    <template role=\"cell\" style=\"--ni-private-table-cell-nesting-level: ${x => x.nestingLevel}\"\n        @focusin=\"${x => x.onCellFocusIn()}\"\n        @blur=\"${x => x.onCellBlur()}\"\n    >\n        <div ${ref('cellViewContainer')} class=\"cell-view-container\" @focusin=\"${x => x.onCellViewFocusIn()}\">\n            ${x => x.cellViewTemplate}\n        </div>\n        ${when(x => x.hasActionMenu, html<TableCell>`\n            <${menuButtonTag} ${ref('actionMenuButton')}\n                content-hidden\n                appearance=\"${ButtonAppearance.ghost}\"\n                ${'' /* tabindex managed dynamically by KeyboardNavigationManager */}\n                tabindex=\"-1\"\n                @beforetoggle=\"${(x, c) => x.onActionMenuBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}\"\n                @toggle=\"${(x, c) => x.onActionMenuToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}\"\n                @click=\"${(_, c) => c.event.stopPropagation()}\"\n                @blur=\"${x => x.onActionMenuBlur()}\"\n                class=\"action-menu\"\n                title=\"${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}\"\n            >\n                <${iconThreeDotsLineTag} slot=\"start\"></${iconThreeDotsLineTag}>\n                ${x => (x.actionMenuLabel ? x.actionMenuLabel : tableCellActionMenuLabel.getValueFor(x))}\n                <slot name=\"cellActionMenu\" slot=\"menu\"></slot>\n            </${menuButtonTag}>\n        `)}\n    </template>\n`;\n"]}

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

@@ -1,6 +1,7 @@
-import { Checkbox, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import type { TableColumn } from '../../../table-column/base';
-import { TableRowSelectionState } from '../../types';
+import { TableRowFocusableElements, TableRowSelectionState } from '../../types';
+import type { Checkbox } from '../../../checkbox';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-group-row': TableGroupRow;
@@ -13,6 +14,11 @@ declare global {
 export declare class TableGroupRow extends FoundationElement {
     groupRowValue?: unknown;
     nestingLevel: number;
+    /**
+     * Row index in the flattened set of all regular and group header rows.
+     * Represents the index in table.tableData (TableRowState[]).
+     */
+    resolvedRowIndex?: number;
     immediateChildCount?: number;
     groupColumn?: TableColumn;
     expanded: boolean;
@@ -33,7 +39,9 @@ export declare class TableGroupRow extends FoundationElement {
     private ignoreSelectionChangeEvents;
     onGroupExpandToggle(): void;
     /** @internal */
-    onSelectionChange(event: CustomEvent): void;
+    onSelectionCheckboxChange(event: CustomEvent): void;
+    /** @internal */
+    getFocusableElements(): TableRowFocusableElements;
     private selectionStateChanged;
     private selectionCheckboxChanged;
     private setSelectionCheckboxState;

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

@@ -41,7 +41,7 @@ export class TableGroupRow extends FoundationElement {
         this.expandIcon.addEventListener('transitionend', this.removeAnimatingClass);
     }
     /** @internal */
-    onSelectionChange(event) {
+    onSelectionCheckboxChange(event) {
         if (this.ignoreSelectionChangeEvents) {
             return;
         }
@@ -56,6 +56,15 @@ export class TableGroupRow extends FoundationElement {
         };
         this.$emit('group-selection-toggle', detail);
     }
+    /** @internal */
+    getFocusableElements() {
+        return {
+            selectionCheckbox: this.selectable
+                ? this.selectionCheckbox
+                : undefined,
+            cells: []
+        };
+    }
     selectionStateChanged() {
         this.setSelectionCheckboxState();
     }
@@ -78,6 +87,9 @@ __decorate([
 __decorate([
     observable
 ], TableGroupRow.prototype, "nestingLevel", void 0);
+__decorate([
+    observable
+], TableGroupRow.prototype, "resolvedRowIndex", void 0);
 __decorate([
     observable
 ], TableGroupRow.prototype, "immediateChildCount", 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":"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","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport {\n    Checkbox,\n    DesignSystem,\n    FoundationElement\n} from '@microsoft/fast-foundation';\nimport type { TableColumn } from '../../../table-column/base';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    TableRowSelectionState,\n    TableRowSelectionToggleEventDetail\n} from '../../types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-group-row': TableGroupRow;\n    }\n}\n\n/**\n * A styled cell that is used within the nimble-table-row.\n * @internal\n */\nexport class TableGroupRow extends FoundationElement {\n    @observable\n    public groupRowValue?: unknown;\n\n    @observable\n    public nestingLevel = 0;\n\n    @observable\n    public immediateChildCount?: number;\n\n    @observable\n    public groupColumn?: TableColumn;\n\n    @attr({ mode: 'boolean' })\n    public expanded = false;\n\n    @attr({ mode: 'boolean' })\n    public selectable = false;\n\n    @attr({ attribute: 'selection-state' })\n    public selectionState: TableRowSelectionState = TableRowSelectionState.notSelected;\n\n    /**\n     * @internal\n     */\n    public readonly expandIcon!: HTMLElement;\n\n    /**\n     * @internal\n     */\n    @observable\n    public readonly selectionCheckbox?: Checkbox;\n\n    /**\n     * @internal\n     */\n    @observable\n    public animationClass = '';\n\n    // Programmatically updating the selection state of a checkbox fires the 'change' event.\n    // Therefore, selection change events that occur due to programmatically updating\n    // the selection checkbox 'checked' value should be ingored.\n    // https://github.com/microsoft/fast/issues/5750\n    private ignoreSelectionChangeEvents = false;\n\n    public onGroupExpandToggle(): void {\n        this.$emit('group-expand-toggle');\n        // To avoid a visual glitch with improper expand/collapse icons performing an\n        // animation, we apply a class to the appropriate group row such that we can have\n        // a more targeted CSS animation. We use the 'transitionend' event to remove the\n        // temporary class and register a function reference as the handler to avoid issues\n        // that may result from the 'transitionend' event not firing, as it will never result\n        // in multiple event listeners being registered.\n        this.animationClass = 'animating';\n        this.expandIcon.addEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    }\n\n    /** @internal */\n    public onSelectionChange(event: CustomEvent): void {\n        if (this.ignoreSelectionChangeEvents) {\n            return;\n        }\n\n        const checkbox = event.target as Checkbox;\n        const checked = checkbox.checked;\n        this.selectionState = checked\n            ? TableRowSelectionState.selected\n            : TableRowSelectionState.notSelected;\n        const detail: TableRowSelectionToggleEventDetail = {\n            oldState: !checked,\n            newState: checked\n        };\n        this.$emit('group-selection-toggle', detail);\n    }\n\n    private selectionStateChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private selectionCheckboxChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private setSelectionCheckboxState(): void {\n        if (this.selectionCheckbox) {\n            this.ignoreSelectionChangeEvents = true;\n            this.selectionCheckbox.checked = this.selectionState === TableRowSelectionState.selected;\n            this.selectionCheckbox.indeterminate = this.selectionState\n                === TableRowSelectionState.partiallySelected;\n            this.ignoreSelectionChangeEvents = false;\n        }\n    }\n\n    private readonly removeAnimatingClass = (): void => {\n        this.animationClass = '';\n        this.expandIcon.removeEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    };\n}\n\nconst nimbleTableGroupRow = TableGroupRow.compose({\n    baseName: 'table-group-row',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());\nexport const tableGroupRowTag = 'nimble-table-group-row';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@microsoft/fast-element';\nimport { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';\nimport type { TableColumn } from '../../../table-column/base';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n    TableRowFocusableElements,\n    TableRowSelectionState,\n    TableRowSelectionToggleEventDetail\n} from '../../types';\nimport type { Checkbox } from '../../../checkbox';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-table-group-row': TableGroupRow;\n    }\n}\n\n/**\n * A styled cell that is used within the nimble-table-row.\n * @internal\n */\nexport class TableGroupRow extends FoundationElement {\n    @observable\n    public groupRowValue?: unknown;\n\n    @observable\n    public nestingLevel = 0;\n\n    /**\n     * Row index in the flattened set of all regular and group header rows.\n     * Represents the index in table.tableData (TableRowState[]).\n     */\n    @observable\n    public resolvedRowIndex?: number;\n\n    @observable\n    public immediateChildCount?: number;\n\n    @observable\n    public groupColumn?: TableColumn;\n\n    @attr({ mode: 'boolean' })\n    public expanded = false;\n\n    @attr({ mode: 'boolean' })\n    public selectable = false;\n\n    @attr({ attribute: 'selection-state' })\n    public selectionState: TableRowSelectionState = TableRowSelectionState.notSelected;\n\n    /**\n     * @internal\n     */\n    public readonly expandIcon!: HTMLElement;\n\n    /**\n     * @internal\n     */\n    @observable\n    public readonly selectionCheckbox?: Checkbox;\n\n    /**\n     * @internal\n     */\n    @observable\n    public animationClass = '';\n\n    // Programmatically updating the selection state of a checkbox fires the 'change' event.\n    // Therefore, selection change events that occur due to programmatically updating\n    // the selection checkbox 'checked' value should be ingored.\n    // https://github.com/microsoft/fast/issues/5750\n    private ignoreSelectionChangeEvents = false;\n\n    public onGroupExpandToggle(): void {\n        this.$emit('group-expand-toggle');\n        // To avoid a visual glitch with improper expand/collapse icons performing an\n        // animation, we apply a class to the appropriate group row such that we can have\n        // a more targeted CSS animation. We use the 'transitionend' event to remove the\n        // temporary class and register a function reference as the handler to avoid issues\n        // that may result from the 'transitionend' event not firing, as it will never result\n        // in multiple event listeners being registered.\n        this.animationClass = 'animating';\n        this.expandIcon.addEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    }\n\n    /** @internal */\n    public onSelectionCheckboxChange(event: CustomEvent): void {\n        if (this.ignoreSelectionChangeEvents) {\n            return;\n        }\n\n        const checkbox = event.target as Checkbox;\n        const checked = checkbox.checked;\n        this.selectionState = checked\n            ? TableRowSelectionState.selected\n            : TableRowSelectionState.notSelected;\n        const detail: TableRowSelectionToggleEventDetail = {\n            oldState: !checked,\n            newState: checked\n        };\n        this.$emit('group-selection-toggle', detail);\n    }\n\n    /** @internal */\n    public getFocusableElements(): TableRowFocusableElements {\n        return {\n            selectionCheckbox: this.selectable\n                ? this.selectionCheckbox\n                : undefined,\n            cells: []\n        };\n    }\n\n    private selectionStateChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private selectionCheckboxChanged(): void {\n        this.setSelectionCheckboxState();\n    }\n\n    private setSelectionCheckboxState(): void {\n        if (this.selectionCheckbox) {\n            this.ignoreSelectionChangeEvents = true;\n            this.selectionCheckbox.checked = this.selectionState === TableRowSelectionState.selected;\n            this.selectionCheckbox.indeterminate = this.selectionState\n                === TableRowSelectionState.partiallySelected;\n            this.ignoreSelectionChangeEvents = false;\n        }\n    }\n\n    private readonly removeAnimatingClass = (): void => {\n        this.animationClass = '';\n        this.expandIcon.removeEventListener(\n            'transitionend',\n            this.removeAnimatingClass\n        );\n    };\n}\n\nconst nimbleTableGroupRow = TableGroupRow.compose({\n    baseName: 'table-group-row',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableGroupRow());\nexport const tableGroupRowTag = 'nimble-table-group-row';\n"]}

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

@@ -1,12 +1,13 @@
 import { css } from '@microsoft/fast-element';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../../../utilities/style/display';
-import { applicationBackgroundColor, borderWidth, controlHeight, fillHoverColor, mediumPadding, standardPadding } from '../../../theme-provider/design-tokens';
+import { applicationBackgroundColor, borderHoverColor, borderWidth, controlHeight, fillHoverColor, mediumPadding, standardPadding } from '../../../theme-provider/design-tokens';
 import { Theme } from '../../../theme-provider/types';
 import { hexToRgbaCssColor } from '../../../utilities/style/colors';
 import { themeBehavior } from '../../../utilities/style/theme';
 import { userSelectNone } from '../../../utilities/style/user-select';
 import { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';
+import { focusVisible } from '../../../utilities/style/focus';
 export const styles = css `
     ${display('grid')}
     ${expandCollapseStyles}
@@ -46,6 +47,11 @@ export const styles = css `
         background-color: ${fillHoverColor};
     }
 
+    :host(${focusVisible}) {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: calc(-2 * ${borderWidth});
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${mediumPadding} + ${standardPadding} * 2 *

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,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;uBAIH,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;kBAG7D,aAAa;;;;;;;;cAQjB,aAAa;;kBAET,aAAa;;;;;;;;;kBASb,aAAa;;;;;;;4BAOH,cAAc;;;;;cAK5B,aAAa,MAAM,eAAe;;;;;;;;;;;wBAWxB,aAAa;UAC3B,cAAc;;;;;;yBAMC,aAAa;;UAE5B,cAAc;;;;;;;;uBAQD,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEzD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { userSelectNone } from '../../../utilities/style/user-select';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${display('grid')}\n    ${expandCollapseStyles}\n\n    :host {\n        align-items: center;\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};\n        grid-template-columns:\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host([selectable]) {\n        grid-template-columns:\n            ${controlHeight}\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host(:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    .expand-collapse-button {\n        margin-left: calc(\n            ${mediumPadding} + ${standardPadding} * 2 *\n                var(--ni-private-table-group-row-indent-level)\n        );\n    }\n\n    .group-row-header-content {\n        display: flex;\n        overflow: hidden;\n    }\n\n    .group-header-view {\n        padding-left: ${mediumPadding};\n        ${userSelectNone}\n        overflow: hidden;\n    }\n\n    .group-row-child-count {\n        padding-left: 2px;\n        padding-right: ${mediumPadding};\n        pointer-events: none;\n        ${userSelectNone}\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n            }\n        `\n    )\n);\n"]}
+{"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,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,0BAA0B,EAC1B,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;uBAIH,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;kBAG7D,aAAa;;;;;;;;cAQjB,aAAa;;kBAET,aAAa;;;;;;;;;kBASb,aAAa;;;;;;;4BAOH,cAAc;;;YAG9B,YAAY;4BACI,WAAW,WAAW,gBAAgB;oCAC9B,WAAW;;;;;cAKjC,aAAa,MAAM,eAAe;;;;;;;;;;;wBAWxB,aAAa;UAC3B,cAAc;;;;;;yBAMC,aAAa;;UAE5B,cAAc;;;;;;;;uBAQD,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEzD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { userSelectNone } from '../../../utilities/style/user-select';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\nimport { focusVisible } from '../../../utilities/style/focus';\n\nexport const styles = css`\n    ${display('grid')}\n    ${expandCollapseStyles}\n\n    :host {\n        align-items: center;\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};\n        grid-template-columns:\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host([selectable]) {\n        grid-template-columns:\n            ${controlHeight}\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host(:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};\n        outline-offset: calc(-2 * ${borderWidth});\n    }\n\n    .expand-collapse-button {\n        margin-left: calc(\n            ${mediumPadding} + ${standardPadding} * 2 *\n                var(--ni-private-table-group-row-indent-level)\n        );\n    }\n\n    .group-row-header-content {\n        display: flex;\n        overflow: hidden;\n    }\n\n    .group-header-view {\n        padding-left: ${mediumPadding};\n        ${userSelectNone}\n        overflow: hidden;\n    }\n\n    .group-row-child-count {\n        padding-left: 2px;\n        padding-right: ${mediumPadding};\n        pointer-events: none;\n        ${userSelectNone}\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n            }\n        `\n    )\n);\n"]}

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

@@ -18,7 +18,7 @@ export const template = html `
                 <${checkboxTag}
                     ${ref('selectionCheckbox')}
                     class="selection-checkbox"
-                    @change="${(x, c) => x.onSelectionChange(c.event)}"
+                    @change="${(x, c) => x.onSelectionCheckboxChange(c.event)}"
                     @click="${(_, c) => c.event.stopPropagation()}"
                     title="${x => tableGroupSelectAllLabel.getValueFor(x)}"
                     aria-label="${x => tableGroupSelectAllLabel.getValueFor(x)}"

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,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;AAChD,OAAO,EACH,uBAAuB,EACvB,qBAAqB,EACrB,wBAAwB,EAC3B,MAAM,4CAA4C,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;;iBAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;wBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;4DACqB,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;6BACpC,CAAC,CAAC,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;kCACvC,CAAC,CAAC,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;;oBAE1D,WAAW;;SAEtB,CAAC;;;eAGK,SAAS;8BACM,gBAAgB,CAAC,KAAK;;;;yBAI3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;;mBAGvG,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;mDACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;;CAG5E,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/indent */\nimport { html, ref, when } from '@microsoft/fast-element';\nimport type { TableGroupRow } from '.';\nimport { buttonTag } from '../../../button';\nimport { ButtonAppearance } from '../../../button/types';\nimport { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';\nimport { checkboxTag } from '../../../checkbox';\nimport {\n    tableGroupCollapseLabel,\n    tableGroupExpandLabel,\n    tableGroupSelectAllLabel\n} from '../../../label-provider/table/label-tokens';\n\n// prettier-ignore\nexport const template = html<TableGroupRow>`\n    <template\n        role=\"row\"\n        @click=${x => x.onGroupExpandToggle()}\n        aria-expanded=${x => x.expanded}\n        style=\"--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};\"\n    >\n        ${when(x => x.selectable, html<TableGroupRow>`\n            <span role=\"gridcell\" class=\"checkbox-container\">\n                <${checkboxTag}\n                    ${ref('selectionCheckbox')}\n                    class=\"selection-checkbox\"\n                    @change=\"${(x, c) => x.onSelectionChange(c.event as CustomEvent)}\"\n                    @click=\"${(_, c) => c.event.stopPropagation()}\"\n                    title=\"${x => tableGroupSelectAllLabel.getValueFor(x)}\"\n                    aria-label=\"${x => tableGroupSelectAllLabel.getValueFor(x)}\"\n                >\n                </${checkboxTag}>\n            </span>\n        `)}\n\n        <span role=\"gridcell\">\n            <${buttonTag}\n                appearance=\"${ButtonAppearance.ghost}\"\n                content-hidden\n                class=\"expand-collapse-button\"\n                tabindex=\"-1\"\n                title=\"${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}\"\n                aria-hidden=\"true\"\n            >\n                <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot=\"start\" class=\"expander-icon ${x => x.animationClass}\"></${iconArrowExpanderRightTag}>\n            </${buttonTag}>\n        </span>\n\n        <div class=\"group-row-header-content\">\n            ${x => x.groupColumn?.columnInternals.groupHeaderViewTemplate}\n            <span class=\"group-row-child-count\">(${x => x.immediateChildCount})</span>\n        </div>\n    </template>\n`;\n"]}
+{"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;AAChD,OAAO,EACH,uBAAuB,EACvB,qBAAqB,EACrB,wBAAwB,EAC3B,MAAM,4CAA4C,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAe;;;iBAG1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;wBACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;4DACqB,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,yBAAyB,CAAC,CAAC,CAAC,KAAoB,CAAC;8BAC9D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,EAAE;6BACpC,CAAC,CAAC,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;kCACvC,CAAC,CAAC,EAAE,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;;oBAE1D,WAAW;;SAEtB,CAAC;;;eAGK,SAAS;8BACM,gBAAgB,CAAC,KAAK;;;;yBAI3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;;;mBAGvG,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;mDACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;;;CAG5E,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/indent */\nimport { html, ref, when } from '@microsoft/fast-element';\nimport type { TableGroupRow } from '.';\nimport { buttonTag } from '../../../button';\nimport { ButtonAppearance } from '../../../button/types';\nimport { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';\nimport { checkboxTag } from '../../../checkbox';\nimport {\n    tableGroupCollapseLabel,\n    tableGroupExpandLabel,\n    tableGroupSelectAllLabel\n} from '../../../label-provider/table/label-tokens';\n\n// prettier-ignore\nexport const template = html<TableGroupRow>`\n    <template\n        role=\"row\"\n        @click=${x => x.onGroupExpandToggle()}\n        aria-expanded=${x => x.expanded}\n        style=\"--ni-private-table-group-row-indent-level: ${x => x.nestingLevel};\"\n    >\n        ${when(x => x.selectable, html<TableGroupRow>`\n            <span role=\"gridcell\" class=\"checkbox-container\">\n                <${checkboxTag}\n                    ${ref('selectionCheckbox')}\n                    class=\"selection-checkbox\"\n                    @change=\"${(x, c) => x.onSelectionCheckboxChange(c.event as CustomEvent)}\"\n                    @click=\"${(_, c) => c.event.stopPropagation()}\"\n                    title=\"${x => tableGroupSelectAllLabel.getValueFor(x)}\"\n                    aria-label=\"${x => tableGroupSelectAllLabel.getValueFor(x)}\"\n                >\n                </${checkboxTag}>\n            </span>\n        `)}\n\n        <span role=\"gridcell\">\n            <${buttonTag}\n                appearance=\"${ButtonAppearance.ghost}\"\n                content-hidden\n                class=\"expand-collapse-button\"\n                tabindex=\"-1\"\n                title=\"${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}\"\n                aria-hidden=\"true\"\n            >\n                <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot=\"start\" class=\"expander-icon ${x => x.animationClass}\"></${iconArrowExpanderRightTag}>\n            </${buttonTag}>\n        </span>\n\n        <div class=\"group-row-header-content\">\n            ${x => x.groupColumn?.columnInternals.groupHeaderViewTemplate}\n            <span class=\"group-row-child-count\">(${x => x.immediateChildCount})</span>\n        </div>\n    </template>\n`;\n"]}

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

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '../../../utilities/style/display';
-import { controlHeight, iconColor, mediumPadding, tableHeaderFont, tableHeaderFontColor } from '../../../theme-provider/design-tokens';
+import { borderHoverColor, borderWidth, controlHeight, iconColor, mediumPadding, tableHeaderFont, tableHeaderFontColor } from '../../../theme-provider/design-tokens';
+import { focusVisible } from '../../../utilities/style/focus';
 export const styles = css `
     ${display('flex')}
 
@@ -16,6 +17,11 @@ export const styles = css `
         cursor: default;
     }
 
+    :host(${focusVisible}) {
+        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};
+        outline-offset: calc(-2 * ${borderWidth});
+    }
+
     .sort-indicator,
     .grouped-indicator {
         flex: 0 0 auto;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,aAAa,EACb,SAAS,EACT,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;;uBAER,aAAa;gBACpB,eAAe;iBACd,oBAAoB;UAC3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;eAE/C,aAAa;;;;;;;;CAQ3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    controlHeight,\n    iconColor,\n    mediumPadding,\n    tableHeaderFont,\n    tableHeaderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: ${controlHeight};\n        align-items: center;\n        padding: 0px ${mediumPadding};\n        font: ${tableHeaderFont};\n        color: ${tableHeaderFontColor};\n        ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};\n        text-transform: uppercase;\n        gap: ${mediumPadding};\n        cursor: default;\n    }\n\n    .sort-indicator,\n    .grouped-indicator {\n        flex: 0 0 auto;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,SAAS,EACT,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;;uBAER,aAAa;gBACpB,eAAe;iBACd,oBAAoB;UAC3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;eAE/C,aAAa;;;;YAIhB,YAAY;4BACI,WAAW,WAAW,gBAAgB;oCAC9B,WAAW;;;;;;;CAO9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconColor,\n    mediumPadding,\n    tableHeaderFont,\n    tableHeaderFontColor\n} from '../../../theme-provider/design-tokens';\nimport { focusVisible } from '../../../utilities/style/focus';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: ${controlHeight};\n        align-items: center;\n        padding: 0px ${mediumPadding};\n        font: ${tableHeaderFont};\n        color: ${tableHeaderFontColor};\n        ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};\n        text-transform: uppercase;\n        gap: ${mediumPadding};\n        cursor: default;\n    }\n\n    :host(${focusVisible}) {\n        outline: calc(2 * ${borderWidth}) solid ${borderHoverColor};\n        outline-offset: calc(-2 * ${borderWidth});\n    }\n\n    .sort-indicator,\n    .grouped-indicator {\n        flex: 0 0 auto;\n    }\n`;\n"]}

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

@@ -1,9 +1,10 @@
 import { Notifier } from '@microsoft/fast-element';
-import { Checkbox, FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import type { TableCellState } from '../../../table-column/base/types';
-import type { TableRecord } from '../../types';
+import type { TableRecord, TableRowFocusableElements } from '../../types';
 import type { TableColumn } from '../../../table-column/base';
 import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
+import type { Checkbox } from '../../../checkbox';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-table-row': TableRow;
@@ -30,6 +31,11 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
     columns: TableColumn[];
     currentActionMenuColumn?: TableColumn;
     nestingLevel: number;
+    /**
+     * Row index in the flattened set of all regular and group header rows.
+     * Represents the index in table.tableData (TableRowState[]).
+     */
+    resolvedRowIndex?: number;
     isParentRow: boolean;
     menuOpen: boolean;
     rowOperationGridCellHidden: boolean;
@@ -60,10 +66,14 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
     animationClass: string;
     get isTopLevelParentRow(): boolean;
     get isNestedParent(): boolean;
+    /** @internal */
+    get showSelectionCheckbox(): boolean;
     private ignoreSelectionChangeEvents;
     get ariaSelected(): 'true' | 'false' | null;
     /** @internal */
-    onSelectionChange(event: CustomEvent): void;
+    onSelectionCheckboxChange(event: CustomEvent): void;
+    /** @internal */
+    onSelectionChange(oldState: boolean, newState: boolean): void;
     /** @internal */
     onCellActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>, column: TableColumn): void;
     /** @internal */
@@ -71,7 +81,9 @@ export declare class TableRow<TDataRecord extends TableDataRecord = TableDataRec
     closeOpenActionMenus(): void;
     /** @internal */
     handleChange(source: unknown, args: unknown): void;
-    onRowExpandToggle(event: Event): void;
+    /** @internal */
+    getFocusableElements(): TableRowFocusableElements;
+    onRowExpandToggle(event?: Event): void;
     private readonly removeAnimatingClass;
     private emitActionMenuToggleEvent;
     private columnsChanged;

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

@@ -3,7 +3,7 @@ import { Observable, attr, observable, volatile } from '@microsoft/fast-element'
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
-import { TableCell } from '../cell';
+import { TableCell, tableCellTag } from '../cell';
 import { ColumnInternals, isColumnInternalsProperty } from '../../../table-column/base/models/column-internals';
 /**
  * A styled row that is used within the nimble-table.
@@ -58,6 +58,10 @@ export class TableRow extends FoundationElement {
     get isNestedParent() {
         return this.isParentRow && this.nestingLevel > 0;
     }
+    /** @internal */
+    get showSelectionCheckbox() {
+        return this.selectable && !this.hideSelection;
+    }
     get ariaSelected() {
         if (this.selectable) {
             return this.selected ? 'true' : 'false';
@@ -65,16 +69,20 @@ export class TableRow extends FoundationElement {
         return null;
     }
     /** @internal */
-    onSelectionChange(event) {
+    onSelectionCheckboxChange(event) {
         if (this.ignoreSelectionChangeEvents) {
             return;
         }
         const checkbox = event.target;
         const checked = checkbox.checked;
-        this.selected = checked;
+        this.onSelectionChange(!checked, checked);
+    }
+    /** @internal */
+    onSelectionChange(oldState, newState) {
+        this.selected = newState;
         const detail = {
-            oldState: !checked,
-            newState: checked
+            oldState,
+            newState
         };
         this.$emit('row-selection-toggle', detail);
     }
@@ -105,6 +113,20 @@ export class TableRow extends FoundationElement {
             this.updateCellStates();
         }
     }
+    /** @internal */
+    getFocusableElements() {
+        return {
+            selectionCheckbox: this.showSelectionCheckbox
+                ? this.selectionCheckbox
+                : undefined,
+            cells: Array.from(this.cellContainer.querySelectorAll(tableCellTag)).map(cell => ({
+                cell,
+                actionMenuButton: cell.hasActionMenu
+                    ? cell.actionMenuButton
+                    : undefined
+            }))
+        };
+    }
     onRowExpandToggle(event) {
         const expandEventDetail = {
             oldState: this.expanded,
@@ -112,7 +134,7 @@ export class TableRow extends FoundationElement {
             recordId: this.recordId
         };
         this.$emit('row-expand-toggle', expandEventDetail);
-        event.stopImmediatePropagation();
+        event?.stopImmediatePropagation();
         // To avoid a visual glitch with improper expand/collapse icons performing an
         // animation (due to visual re-use apparently), we apply a class to the
         // contained expand-collapse button temporarily. We use the 'transitionend' event
@@ -224,6 +246,9 @@ __decorate([
 __decorate([
     observable
 ], TableRow.prototype, "nestingLevel", void 0);
+__decorate([
+    observable
+], TableRow.prototype, "resolvedRowIndex", void 0);
 __decorate([
     attr({ attribute: 'is-parent-row', mode: 'boolean' })
 ], TableRow.prototype, "isParentRow", void 0);
@@ -254,6 +279,9 @@ __decorate([
 __decorate([
     volatile
 ], TableRow.prototype, "isNestedParent", null);
+__decorate([
+    volatile
+], TableRow.prototype, "showSelectionCheckbox", null);
 __decorate([
     volatile
 ], TableRow.prototype, "ariaSelected", null);