@ni/nimble-components 18.12.2 → 18.12.4

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

@@ -1,17 +1,18 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderWidth, controlHeight, controlSlimHeight, fillHoverColor, mediumDelay, smallPadding, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
+import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { applicationBackgroundColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, mediumDelay, smallPadding, standardPadding } from '../../../theme-provider/design-tokens';
+import { Theme } from '../../../theme-provider/types';
+import { hexToRgbaCssColor } from '../../../utilities/style/colors';
+import { themeBehavior } from '../../../utilities/style/theme';
 export const styles = css `
     ${display('flex')}
 
     :host {
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-    }
-
-    :host(:hover) {
-        background: ${fillHoverColor};
+        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
+        box-sizing: border-box;
     }
 
     :host([expanded]) .animating,
@@ -19,6 +20,19 @@ export const styles = css `
         transition: ${mediumDelay} ease-in-out;
     }
 
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host(:hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
     .expand-collapse-button {
         margin-left: calc(
             ${smallPadding} * 2 + ${standardPadding} * 2 *
@@ -72,5 +86,13 @@ export const styles = css `
     .selection-checkbox::part(label) {
         padding-left: 0px;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host(:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
+            }
+        `));
 //# 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;;;;sBAIlD,cAAc;;;;;sBAKd,WAAW;;;;;cAKnB,YAAY,UAAU,eAAe;;;iBAGlC,iBAAiB;kBAChB,iBAAiB;;;;;;;;;;;;;;;;;6BAiBN,eAAe;;;;;;;;;;;;;;;;;;;;;;;;uBAwBrB,eAAe;;;;;;CAMrC,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,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,YAAY,EACZ,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;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;;;;sBAMzD,WAAW;;;;;;kBAMf,aAAa;;;;;;;4BAOH,cAAc;;;;;cAK5B,YAAY,UAAU,eAAe;;;iBAGlC,iBAAiB;kBAChB,iBAAiB;;;;;;;;;;;;;;;;;6BAiBN,eAAe;;;;;;;;;;;;;;;;;;;;;;;;uBAwBrB,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"}

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

@@ -1,14 +1,43 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderWidth, controlHeight, standardPadding, tableRowBorderColor } from '../../../theme-provider/design-tokens';
+import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { applicationBackgroundColor, borderWidth, controlHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, standardPadding } from '../../../theme-provider/design-tokens';
+import { Theme } from '../../../theme-provider/types';
+import { hexToRgbaCssColor } from '../../../utilities/style/colors';
+import { themeBehavior } from '../../../utilities/style/theme';
 export const styles = css `
     ${display('flex')}
 
     :host {
-        height: calc(${controlHeight} + 2 * ${borderWidth});
-        border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
         width: fit-content;
         min-width: 100%;
+        background-color: ${applicationBackgroundColor};
+        height: calc(${controlHeight} + 2 * ${borderWidth});
+        border-top: calc(2 * ${borderWidth}) solid transparent;
+        box-sizing: border-box;
+        background-clip: padding-box;
+    }
+
+    :host::before {
+        content: '';
+        width: 100%;
+        height: ${controlHeight};
+        pointer-events: none;
+        box-sizing: border-box;
+        bottom: 0px;
+        position: absolute;
+    }
+
+    :host([selectable]:not([selected]):hover)::before {
+        background-color: ${fillHoverColor};
+    }
+
+    :host([selected])::before {
+        background-color: ${fillSelectedColor};
+    }
+
+    :host([selected]:hover)::before {
+        background-color: ${fillHoverSelectedColor};
     }
 
     .checkbox-container {
@@ -46,5 +75,17 @@ export const styles = css `
     :host([selected]) nimble-table-cell {
         --ni-private-table-cell-action-menu-display: block;
     }
-`;
+`.withBehaviors(themeBehavior(Theme.color, css `
+            :host([selectable]:not([selected]):hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.05)};
+            }
+
+            :host([selected])::before {
+                background-color: ${hexToRgbaCssColor(White, 0.25)};
+            }
+
+            :host([selected]:hover)::before {
+                background-color: ${hexToRgbaCssColor(White, 0.2)};
+            }
+        `));
 //# sourceMappingURL=styles.js.map

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,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"}
+{"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,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,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;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;4BAKO,0BAA0B;uBAC/B,aAAa,UAAU,WAAW;+BAC1B,WAAW;;;;;;;;kBAQxB,aAAa;;;;;;;;4BAQH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;;;;;uBAQ3B,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC"}

package/dist/esm/table/styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
-import { applicationBackgroundColor, bodyFont, bodyFontColor, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, standardPadding } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, bodyFont, bodyFontColor, standardPadding, tableRowBorderColor } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
 import { themeBehavior } from '../utilities/style/theme';
@@ -40,6 +40,7 @@ export const styles = css `
         width: 100%;
         position: relative;
         top: var(--ni-private-table-row-container-top);
+        background-color: ${tableRowBorderColor};
     }
 
     .header-container {
@@ -82,61 +83,20 @@ export const styles = css `
         padding-left: 0px;
     }
 
-    .row {
-        background: ${applicationBackgroundColor};
+    .group-row {
         position: relative;
-        box-sizing: border-box;
-    }
-
-    .row::before {
-        content: '';
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        pointer-events: none;
-    }
-
-    :host([selection-mode='single']) .row:hover::before,
-    :host([selection-mode='multiple']) .row:hover::before {
-        background: ${fillHoverColor};
-    }
-
-    :host([selection-mode='single']) .row[selected]::before,
-    :host([selection-mode='multiple']) .row[selected]::before {
-        background: ${fillSelectedColor};
     }
 
-    :host([selection-mode='single']) .row[selected]:hover::before,
-    :host([selection-mode='multiple']) .row[selected]:hover::before {
-        background: ${fillHoverSelectedColor};
+    .row {
+        position: relative;
     }
 `.withBehaviors(themeBehavior(Theme.color, css `
-            .header-row::before {
+            .table-row-container::before {
                 content: '';
                 width: 100%;
                 height: 100%;
+                background-color: ${hexToRgbaCssColor(White, 0.1)};
                 position: absolute;
-                background: ${fillHoverColor};
-                pointer-events: none;
-            }
-
-            .row::before {
-                background: ${fillHoverColor};
-            }
-
-            :host([selection-mode='single']) .row:hover::before,
-            :host([selection-mode='multiple']) .row:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.15)};
-            }
-
-            :host([selection-mode='single']) .row[selected]::before,
-            :host([selection-mode='multiple']) .row[selected]::before {
-                background: ${hexToRgbaCssColor(White, 0.25)};
-            }
-
-            :host([selection-mode='single']) .row[selected]:hover::before,
-            :host([selection-mode='multiple']) .row[selected]:hover::before {
-                background: ${hexToRgbaCssColor(White, 0.2)};
             }
         `));
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;gBAWL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA+BR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0BzB,eAAe;;;;;;;;sBAQhB,0BAA0B;;;;;;;;;;;;;;;sBAe1B,cAAc;;;;;sBAKd,iBAAiB;;;;;sBAKjB,sBAAsB;;CAE3C,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;;8BAMmB,cAAc;;;;;8BAKd,cAAc;;;;;8BAKd,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;;8BAK9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;;8BAK9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAElD,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,eAAe,EACf,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;gBAWL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;4BAsBF,mBAAmB;;;;;;;;;;sBAUzB,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0BzB,eAAe;;;;;;;;;;;;;;CAcrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC"}

package/dist/esm/theme-provider/design-tokens.js

@@ -48,7 +48,7 @@ export const iconColor = DesignToken.create(styleNameFromTokenName(tokenNames.ic
 export const modalBackdropColor = DesignToken.create(styleNameFromTokenName(tokenNames.modalBackdropColor)).withDefault((element) => getModalBackdropForTheme(element));
 export const popupBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.popupBorderColor)).withDefault((element) => hexToRgbaCssColor(getColorForTheme(element, Black91, Black15, White), 0.3));
 export const tooltipBackgroundColor = DesignToken.create(styleNameFromTokenName(tokenNames.tooltipBackgroundColor)).withDefault((element) => getColorForTheme(element, Black15, Black85, ForestGreen));
-export const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black88, ForestGreen));
+export const tableRowBorderColor = DesignToken.create(styleNameFromTokenName(tokenNames.tableRowBorderColor)).withDefault((element) => getColorForTheme(element, Black15, Black80, ForestGreen));
 // Component Sizing Tokens
 export const controlHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlHeight)).withDefault('32px');
 export const controlSlimHeight = DesignToken.create(styleNameFromTokenName(tokenNames.controlSlimHeight)).withDefault('24px');

package/dist/esm/tree-item/index.d.ts

@@ -15,16 +15,9 @@ declare global {
  *
  */
 export declare class TreeItem extends FoundationTreeItem {
-    private treeView;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private readonly handleSelectedChange;
-    private clearTreeGroupSelection;
-    private setGroupSelectionOnRootParentTreeItem;
     /**
-     * This was copied directly from the FAST TreeItem implementation
-     * @returns the root tree view
+     * @internal
      */
-    private getParentTreeView;
+    groupSelected: boolean;
 }
 export declare const treeItemTag: string;

package/dist/esm/tree-item/index.js

@@ -1,6 +1,7 @@
-import { treeItemTemplate as template, TreeItem as FoundationTreeItem, DesignSystem } from '@microsoft/fast-foundation';
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { TreeItem as FoundationTreeItem, DesignSystem, treeItemTemplate as template } from '@microsoft/fast-foundation';
 import { arrowExpanderUp16X16 } from '@ni/nimble-tokens/dist/icons/js';
-import { groupSelectedAttribute } from '../tree-view/types';
 import { styles } from './styles';
 /**
  * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
@@ -15,52 +16,15 @@ import { styles } from './styles';
 export class TreeItem extends FoundationTreeItem {
     constructor() {
         super(...arguments);
-        this.treeView = null;
-        // This prevents the toggling of selected state when a TreeItem is clicked multiple times,
-        // which is what the FAST TreeItem allows
-        this.handleSelectedChange = (event) => {
-            // only process selection
-            if (event.target === this && this.selected) {
-                this.setGroupSelectionOnRootParentTreeItem(this);
-            }
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('selected-change', this.handleSelectedChange);
-        this.treeView = this.getParentTreeView();
-        if (this.treeView && this.selected) {
-            this.setGroupSelectionOnRootParentTreeItem(this);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('selected-change', this.handleSelectedChange);
-        this.treeView = null;
-    }
-    clearTreeGroupSelection() {
-        const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
-        currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
-    }
-    setGroupSelectionOnRootParentTreeItem(treeItem) {
-        this.clearTreeGroupSelection();
-        let currentItem = treeItem;
-        while (currentItem?.parentElement !== this.treeView) {
-            currentItem = currentItem?.parentElement;
-        }
-        if (currentItem) {
-            currentItem.setAttribute(groupSelectedAttribute, 'true');
-        }
-    }
-    /**
-     * This was copied directly from the FAST TreeItem implementation
-     * @returns the root tree view
-     */
-    getParentTreeView() {
-        const parentNode = this.parentElement.closest("[role='tree']");
-        return parentNode;
+        /**
+         * @internal
+         */
+        this.groupSelected = false;
     }
 }
+__decorate([
+    attr({ attribute: 'group-selected', mode: 'boolean' })
+], TreeItem.prototype, "groupSelected", void 0);
 const nimbleTreeItem = TreeItem.compose({
     baseName: 'tree-item',
     baseClass: FoundationTreeItem,

package/dist/esm/tree-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAE9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAEvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QACY,aAAQ,GAAoB,IAAI,CAAC;QAiBzC,0FAA0F;QAC1F,yCAAyC;QACxB,yBAAoB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC3D,yBAAyB;YACzB,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACxC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC;aACpD;QACL,CAAC,CAAC;IA8BN,CAAC;IApDmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACpE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAChC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC;SACpD;IACL,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACvE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACzB,CAAC;IAWO,uBAAuB;QAC3B,MAAM,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CACzD,IAAI,sBAAsB,GAAG,CAChC,CAAC;QACF,qBAAqB,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC,CAAC;IACjG,CAAC;IAEO,qCAAqC,CAAC,QAAqB;QAC/D,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,IAAI,WAAW,GAAmC,QAAQ,CAAC;QAC3D,OAAO,WAAW,EAAE,aAAa,KAAK,IAAI,CAAC,QAAQ,EAAE;YACjD,WAAW,GAAG,WAAW,EAAE,aAAa,CAAC;SAC5C;QAED,IAAI,WAAW,EAAE;YACb,WAAW,CAAC,YAAY,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;SAC5D;IACL,CAAC;IAED;;;OAGG;IACK,iBAAiB;QACrB,MAAM,UAAU,GAAmB,IAAI,CAAC,aAAc,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAChF,OAAO,UAAsB,CAAC;IAClC,CAAC;CACJ;AAED,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,mBAAmB,EAAE,oBAAoB,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,QAAQ,IAAI,kBAAkB,EAE9B,YAAY,EACZ,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QACI;;WAEG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAGjC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,mBAAmB,EAAE,oBAAoB,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/tree-view/index.d.ts

@@ -17,8 +17,13 @@ declare global {
  */
 export declare class TreeView extends FoundationTreeView {
     selectionMode: TreeViewSelectionMode;
+    /**
+     * @internal
+     */
+    selectedItems: Element[];
     handleClick(e: Event): boolean;
     private canSelect;
     private itemHasChildren;
+    private selectedItemsChanged;
 }
 export declare const treeViewTag: string;

package/dist/esm/tree-view/index.js

@@ -1,7 +1,9 @@
 import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { treeViewTemplate as template, TreeView as FoundationTreeView, DesignSystem, isTreeItemElement } from '@microsoft/fast-foundation';
+import { attr, observable } from '@microsoft/fast-element';
+import { TreeView as FoundationTreeView, DesignSystem, isTreeItemElement } from '@microsoft/fast-foundation';
+import { TreeItem } from '../tree-item';
 import { styles } from './styles';
+import { template } from './template';
 import { TreeViewSelectionMode } from './types';
 /**
  * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
@@ -17,6 +19,10 @@ export class TreeView extends FoundationTreeView {
     constructor() {
         super(...arguments);
         this.selectionMode = TreeViewSelectionMode.all;
+        /**
+         * @internal
+         */
+        this.selectedItems = [];
     }
     handleClick(e) {
         if (e.defaultPrevented) {
@@ -55,10 +61,28 @@ export class TreeView extends FoundationTreeView {
         const treeItemChild = item.querySelector('[role="treeitem"]');
         return treeItemChild !== null;
     }
+    selectedItemsChanged() {
+        for (const item of Array.from(this.children)) {
+            if (item instanceof TreeItem) {
+                item.groupSelected = false;
+            }
+        }
+        for (let item of this.selectedItems) {
+            while (item.parentElement !== null && item.parentElement !== this) {
+                item = item.parentElement;
+            }
+            if (item instanceof TreeItem) {
+                item.groupSelected = true;
+            }
+        }
+    }
 }
 __decorate([
     attr({ attribute: 'selection-mode' })
 ], TreeView.prototype, "selectionMode", void 0);
+__decorate([
+    observable
+], TreeView.prototype, "selectedItems", void 0);
 const nimbleTreeView = TreeView.compose({
     baseName: 'tree-view',
     baseClass: FoundationTreeView,

package/dist/esm/tree-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAC9B,YAAY,EACZ,iBAAiB,EAEpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAQhD;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QAEW,kBAAa,GAA0B,qBAAqB,CAAC,GAAG,CAAC;IA2C5E,CAAC;IAzCmB,WAAW,CAAC,CAAQ;QAChC,IAAI,CAAC,CAAC,gBAAgB,EAAE;YACpB,sBAAsB;YACtB,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;YAChE,0BAA0B;YAC1B,OAAO,IAAI,CAAC;SACf;QAED,MAAM,IAAI,GAAa,CAAC,CAAC,MAAkB,CAAC;QAC5C,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACxB;aAAM,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE;YACnC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAClC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAEO,SAAS,CAAC,IAAc;QAC5B,QAAQ,IAAI,CAAC,aAAa,EAAE;YACxB,KAAK,qBAAqB,CAAC,GAAG;gBAC1B,OAAO,IAAI,CAAC;YAChB,KAAK,qBAAqB,CAAC,IAAI;gBAC3B,OAAO,KAAK,CAAC;YACjB,KAAK,qBAAqB,CAAC,UAAU;gBACjC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACvC;gBACI,OAAO,IAAI,CAAC;SACnB;IACL,CAAC;IAEO,eAAe,CAAC,IAAc;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAC9D,OAAO,aAAa,KAAK,IAAI,CAAC;IAClC,CAAC;CACJ;AA3CG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACkC;AA6C5E,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/tree-view/template.d.ts

@@ -0,0 +1,2 @@
+import type { TreeView } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<TreeView, any>;

package/dist/esm/tree-view/template.js

@@ -0,0 +1,17 @@
+import { children, html, ref, slotted } from '@microsoft/fast-element';
+// prettier-ignore
+export const template = html `
+    <template
+        role="tree"
+        ${ref('treeView')}
+        ${children({ property: 'selectedItems', subtree: true, selector: '[role="treeitem"][selected]', attributeFilter: ['role', 'selected'] })}
+        @keydown="${(x, c) => x.handleKeyDown(c.event)}"
+        @focusin="${(x, c) => x.handleFocus(c.event)}"
+        @focusout="${(x, c) => x.handleBlur(c.event)}"
+        @click="${(x, c) => x.handleClick(c.event)}"
+        @selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
+    >
+        <slot ${slotted('slottedTreeItems')}></slot>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/tree-view/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/tree-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvE,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;;UAG5B,GAAG,CAAC,UAAU,CAAC;UACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,6BAA6B,EAAE,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;oBAC5H,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;oBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;qBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;4BACpC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;;gBAErD,OAAO,CAAC,kBAAkB,CAAC;;CAE1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "18.12.2",
+  "version": "18.12.4",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",