@pnp/spfx-controls-react 3.7.0-beta.2005908 → 3.7.0

package/release/webpack-stats/sp-dev-fx-controls-react.stats.json

@@ -2,9 +2,9 @@
   "errors": [],
   "warnings": [],
   "version": "4.44.2",
-  "hash": "3e49bd174746afa0dd3c",
-  "time": 21998,
-  "builtAt": 1647630057165,
+  "hash": "1126f4fb5744606bcce7",
+  "time": 22470,
+  "builtAt": 1647634103577,
   "publicPath": "",
   "outputPath": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/dist",
   "assetsByChunkName": {
@@ -292,7 +292,7 @@
     },
     {
       "name": "controls-test-web-part.js",
-      "size": 17706529,
+      "size": 17706916,
       "chunks": [
         "controls-test-web-part"
       ],
@@ -305,7 +305,7 @@
     },
     {
       "name": "controls-test-web-part.js.map",
-      "size": 15954944,
+      "size": 15955731,
       "chunks": [
         "controls-test-web-part"
       ],
@@ -319,7 +319,7 @@
     },
     {
       "name": "ootb-fields-field-customizer.js",
-      "size": 2389010,
+      "size": 2388997,
       "chunks": [
         "ootb-fields-field-customizer"
       ],
@@ -332,7 +332,7 @@
     },
     {
       "name": "ootb-fields-field-customizer.js.map",
-      "size": 1985391,
+      "size": 1985376,
       "chunks": [
         "ootb-fields-field-customizer"
       ],
@@ -404,7 +404,7 @@
       "rendered": true,
       "initial": true,
       "entry": true,
-      "size": 12784268,
+      "size": 12784655,
       "names": [
         "controls-test-web-part"
       ],
@@ -412,7 +412,7 @@
         "controls-test-web-part.js",
         "controls-test-web-part.js.map"
       ],
-      "hash": "47a4fd6ccdb5ed5b40bd",
+      "hash": "f03729a50f10d76dacb4",
       "siblings": [],
       "parents": [],
       "children": [],
@@ -2663,7 +2663,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "office-ui-fabric-react/lib/Checkbox",
-              "loc": "176:44-52"
+              "loc": "183:44-52"
             },
             {
               "moduleId": "ihU0",
@@ -122057,7 +122057,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "120:52-58"
+              "loc": "127:52-58"
             },
             {
               "moduleId": "hQoI",
@@ -122066,7 +122066,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "129:61-67"
+              "loc": "136:61-67"
             },
             {
               "moduleId": "hQoI",
@@ -122075,7 +122075,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "133:63-69"
+              "loc": "140:63-69"
             },
             {
               "moduleId": "hQoI",
@@ -122084,7 +122084,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "138:60-66"
+              "loc": "145:60-66"
             },
             {
               "moduleId": "hQoI",
@@ -122093,7 +122093,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "156:52-58"
+              "loc": "163:52-58"
             },
             {
               "moduleId": "hQoI",
@@ -122102,7 +122102,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "156:76-82"
+              "loc": "163:76-82"
             },
             {
               "moduleId": "hQoI",
@@ -122111,7 +122111,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "157:61-67"
+              "loc": "164:61-67"
             },
             {
               "moduleId": "hQoI",
@@ -122120,7 +122120,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "162:27-33"
+              "loc": "169:27-33"
             },
             {
               "moduleId": "hQoI",
@@ -122129,7 +122129,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "163:27-33"
+              "loc": "170:27-33"
             },
             {
               "moduleId": "hQoI",
@@ -122138,7 +122138,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "164:27-33"
+              "loc": "171:27-33"
             },
             {
               "moduleId": "hQoI",
@@ -122147,7 +122147,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "165:27-33"
+              "loc": "172:27-33"
             },
             {
               "moduleId": "hQoI",
@@ -122156,7 +122156,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "176:115-121"
+              "loc": "183:115-121"
             },
             {
               "moduleId": "hQoI",
@@ -122165,7 +122165,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeView.module.scss",
-              "loc": "181:64-70"
+              "loc": "188:64-70"
             }
           ],
           "providedExports": [
@@ -124619,9 +124619,9 @@
             "controls-test-web-part",
             "ootb-fields-field-customizer"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-          "issuerId": "uz3O",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+          "issuerId": "OQ9B",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
           "issuerPath": [
             {
               "id": "8shM",
@@ -124659,9 +124659,9 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/index.js"
             },
             {
-              "id": "uz3O",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js"
+              "id": "OQ9B",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js"
             }
           ],
           "failed": false,
@@ -136891,7 +136891,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "office-ui-fabric-react/lib/Button",
-              "loc": "160:40-50"
+              "loc": "167:40-50"
             },
             {
               "moduleId": "huR6",
@@ -185943,7 +185943,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "office-ui-fabric-react/lib/Utilities",
-              "loc": "161:56-59"
+              "loc": "168:56-59"
             },
             {
               "moduleId": "hrfb",
@@ -246225,7 +246225,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "ControlStrings",
-              "loc": "160:152-181"
+              "loc": "167:152-181"
             },
             {
               "moduleId": "hQoI",
@@ -246234,7 +246234,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "ControlStrings",
-              "loc": "160:184-211"
+              "loc": "167:184-211"
             },
             {
               "moduleId": "hQoI",
@@ -246243,7 +246243,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "ControlStrings",
-              "loc": "160:231-260"
+              "loc": "167:231-260"
             },
             {
               "moduleId": "hQoI",
@@ -246252,7 +246252,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "ControlStrings",
-              "loc": "160:263-290"
+              "loc": "167:263-290"
             },
             {
               "moduleId": "k0SN",
@@ -267989,7 +267989,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./ITreeViewProps",
-              "loc": "121:53-74"
+              "loc": "128:53-74"
             },
             {
               "moduleId": "hQoI",
@@ -267998,7 +267998,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./ITreeViewProps",
-              "loc": "167:57-78"
+              "loc": "174:57-78"
             },
             {
               "moduleId": "hQoI",
@@ -268007,7 +268007,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./ITreeViewProps",
-              "loc": "175:71-92"
+              "loc": "182:71-92"
             }
           ],
           "providedExports": [
@@ -355514,7 +355514,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "120:12-31"
+              "loc": "127:12-31"
             },
             {
               "moduleId": "hQoI",
@@ -355523,7 +355523,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "129:20-39"
+              "loc": "136:20-39"
             },
             {
               "moduleId": "hQoI",
@@ -355532,7 +355532,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "132:20-39"
+              "loc": "139:20-39"
             },
             {
               "moduleId": "hQoI",
@@ -355541,7 +355541,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "133:24-43"
+              "loc": "140:24-43"
             },
             {
               "moduleId": "hQoI",
@@ -355550,7 +355550,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "138:20-39"
+              "loc": "145:20-39"
             },
             {
               "moduleId": "hQoI",
@@ -355559,7 +355559,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "155:16-35"
+              "loc": "162:16-35"
             },
             {
               "moduleId": "hQoI",
@@ -355568,7 +355568,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "156:12-31"
+              "loc": "163:12-31"
             },
             {
               "moduleId": "hQoI",
@@ -355577,7 +355577,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "157:16-35"
+              "loc": "164:16-35"
             },
             {
               "moduleId": "hQoI",
@@ -355586,7 +355586,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "160:20-39"
+              "loc": "167:20-39"
             },
             {
               "moduleId": "hQoI",
@@ -355595,7 +355595,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "161:16-35"
+              "loc": "168:16-35"
             },
             {
               "moduleId": "hQoI",
@@ -355604,7 +355604,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "176:24-43"
+              "loc": "183:24-43"
             },
             {
               "moduleId": "hQoI",
@@ -355613,7 +355613,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "181:24-43"
+              "loc": "188:24-43"
             },
             {
               "moduleId": "hQoI",
@@ -355622,7 +355622,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "182:28-47"
+              "loc": "189:28-47"
             },
             {
               "moduleId": "hQoI",
@@ -355631,7 +355631,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "186:12-31"
+              "loc": "193:12-31"
             },
             {
               "moduleId": "hQoI",
@@ -355640,7 +355640,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "193:2-17"
+              "loc": "200:2-17"
             },
             {
               "moduleId": "hgRX",
@@ -371466,7 +371466,7 @@
           "name": "./lib/common/telemetry/version.js",
           "index": 1925,
           "index2": 1920,
-          "size": 43,
+          "size": 30,
           "cacheable": true,
           "built": true,
           "optional": false,
@@ -371534,7 +371534,7 @@
           ],
           "optimizationBailout": [],
           "depth": 4,
-          "source": "export var version = \"3.7.0-beta.2005908\";\n"
+          "source": "export var version = \"3.7.0\";\n"
         },
         {
           "id": "cLrF",
@@ -402076,7 +402076,7 @@
           "name": "./lib/controls/treeView/TreeView.js",
           "index": 2316,
           "index2": 2322,
-          "size": 9477,
+          "size": 9523,
           "cacheable": true,
           "built": true,
           "optional": false,
@@ -402133,7 +402133,7 @@
           ],
           "optimizationBailout": [],
           "depth": 3,
-          "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport styles from './TreeView.module.scss';\nimport uniqBy from 'lodash/uniqBy';\nimport { SelectChildrenMode, TreeViewSelectionMode } from './ITreeViewProps';\nimport TreeItem from './TreeItem';\nimport * as telemetry from '../../common/telemetry';\n/**\n * Renders the controls for TreeItem component\n */\nvar TreeView = /** @class */ (function (_super) {\n    __extends(TreeView, _super);\n    /**\n     * Constructor method\n     * @param props properties interface\n     */\n    function TreeView(props) {\n        var _this = _super.call(this, props) || this;\n        _this.nodesToExpand = [];\n        _this.pathTo = function (array, target) {\n            var result;\n            if (array) {\n                array.some(function (_a) {\n                    var key = _a.key, _b = _a.children, children = _b === void 0 ? [] : _b;\n                    if (key === target) {\n                        _this.nodesToExpand.push(key);\n                        result = key;\n                        return true;\n                    }\n                    var temp = _this.pathTo(children, target);\n                    if (temp) {\n                        _this.nodesToExpand.push(key);\n                        result = key + '.' + temp;\n                        return true;\n                    }\n                });\n            }\n            return result;\n        };\n        telemetry.track('TreeView');\n        _this.state = {\n            loaded: true,\n            defaultExpanded: props.defaultExpanded,\n            activeItems: []\n        };\n        // Bind control events\n        _this.handleTreeExpandCollapse = _this.handleTreeExpandCollapse.bind(_this);\n        _this.handleOnSelect = _this.handleOnSelect.bind(_this);\n        if (props.expandToSelected && props.defaultSelectedKeys) {\n            props.defaultSelectedKeys.forEach(function (element) {\n                _this.pathTo(props.items, element);\n            });\n        }\n        return _this;\n    }\n    TreeView.prototype.getSelectedItems = function (treeItems, selectedKeys, selectedChildren) {\n        var _this = this;\n        var selectedItems = [];\n        treeItems.forEach(function (item) {\n            if (selectedKeys.indexOf(item.key) !== -1 && item.selectable !== false && !item.disabled) {\n                selectedItems.push(item);\n                if (selectedChildren) {\n                    _this.selectAllChildren(item, selectedItems);\n                }\n                else {\n                    if (item.children) {\n                        selectedItems.push.apply(selectedItems, _this.getSelectedItems(item.children, selectedKeys, selectedChildren));\n                    }\n                }\n            }\n            else {\n                if (item.children) {\n                    selectedItems.push.apply(selectedItems, _this.getSelectedItems(item.children, selectedKeys, selectedChildren));\n                }\n            }\n        });\n        return selectedItems;\n    };\n    /**\n     * Fires When expand / collapse item in TreeView\n     * @argument item The expanded / collapsed item\n     * @argument isExpanded The status of item  (expanded / collapsed)\n     */\n    TreeView.prototype.handleTreeExpandCollapse = function (item, isExpanded) {\n        if (typeof this.props.onExpandCollapse === \"function\") {\n            this.props.onExpandCollapse(item, isExpanded);\n        }\n    };\n    /**\n     * Selects all child nodes when parent node is selected.\n     * @param item current tree item\n     */\n    TreeView.prototype.selectAllChildren = function (item, selectedItems) {\n        var _this = this;\n        if (item.children) {\n            item.children.forEach(function (element) {\n                if (!element.disabled && element.selectable !== false) {\n                    selectedItems.push(element);\n                }\n                if (element.children) {\n                    _this.selectAllChildren(element, selectedItems);\n                }\n            });\n        }\n    };\n    /**\n     * Unselects all child nodes of selected parent.\n     */\n    TreeView.prototype.unSelectChildren = function (item, unselectArray) {\n        var _this = this;\n        var tempItem = item;\n        if (tempItem.children) {\n            tempItem.children.forEach(function (element) {\n                unselectArray.push(element.key);\n                if (element.children) {\n                    _this.unSelectChildren(element, unselectArray);\n                }\n            });\n        }\n    };\n    /**\n     * Fires When Tree Item is selected in TreeView\n     * @argument item The selected item\n     * @argument isSelected The status of item selection\n     */\n    TreeView.prototype.handleOnSelect = function (item, isSelected) {\n        var selectedItems = this.state.activeItems;\n        if (isSelected) {\n            if (this.props.selectionMode == TreeViewSelectionMode.Multiple) {\n                // Add the checked term\n                selectedItems.push(item);\n                if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Select)) {\n                    this.selectAllChildren(item, selectedItems);\n                }\n                selectedItems = uniqBy(selectedItems, 'key');\n                // Filter out the duplicate terms\n                this.setState({\n                    activeItems: selectedItems\n                });\n            }\n            else {\n                // Only store the current selected item\n                this.setState({\n                    activeItems: [item]\n                });\n                selectedItems = [item];\n            }\n        }\n        else {\n            // Remove the item from the list of active nodes\n            var unselectArray = [];\n            unselectArray.push(item.key);\n            if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Unselect)) {\n                this.unSelectChildren(item, unselectArray);\n            }\n            unselectArray.forEach(function (element) {\n                selectedItems = selectedItems.filter(function (i) { return i.key != element; });\n            });\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n        if (typeof this.props.onSelect === \"function\") {\n            this.props.onSelect(selectedItems);\n        }\n    };\n    TreeView.prototype.checkIfChildrenShouldBeSelected = function (testMode) {\n        var selectChildrenMode = SelectChildrenMode.None;\n        if (this.props.selectChildrenMode) {\n            selectChildrenMode = this.props.selectChildrenMode;\n        }\n        else {\n            if (this.props.selectChildrenIfParentSelected) {\n                selectChildrenMode = SelectChildrenMode.All;\n            }\n        }\n        if ((selectChildrenMode & testMode) === testMode) {\n            return true;\n        }\n        return false;\n    };\n    TreeView.prototype.componentDidMount = function () {\n        var _a = this.props, items = _a.items, defaultSelectedKeys = _a.defaultSelectedKeys;\n        if (defaultSelectedKeys) {\n            var selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Mount));\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n    };\n    TreeView.prototype.componentWillReceiveProps = function (nextProps) {\n        var items = nextProps.items, defaultSelectedKeys = nextProps.defaultSelectedKeys;\n        if (defaultSelectedKeys) {\n            var selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Update));\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n    };\n    /**\n     * Default React render method\n     */\n    TreeView.prototype.render = function () {\n        var _this = this;\n        var _a = this.props, items = _a.items, selectionMode = _a.selectionMode, onRenderItem = _a.onRenderItem, showCheckboxes = _a.showCheckboxes, treeItemActionsDisplayMode = _a.treeItemActionsDisplayMode, defaultExpanded = _a.defaultExpanded, defaultExpandedChildren = _a.defaultExpandedChildren;\n        return (React.createElement(\"div\", { className: styles.treeView }, items.map(function (treeNodeItem, index) { return (React.createElement(TreeItem, { treeItem: treeNodeItem, leftOffset: 20, isFirstRender: true, defaultExpanded: defaultExpanded, defaultExpandedChildren: defaultExpandedChildren !== undefined ? defaultExpandedChildren : true, selectionMode: selectionMode, activeItems: _this.state.activeItems, parentCallbackExpandCollapse: _this.handleTreeExpandCollapse, parentCallbackOnSelect: _this.handleOnSelect, onRenderItem: onRenderItem, showCheckboxes: showCheckboxes, treeItemActionsDisplayMode: treeItemActionsDisplayMode, nodesToExpand: _this.nodesToExpand })); })));\n    };\n    return TreeView;\n}(React.Component));\nexport { TreeView };\n"
+          "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport styles from './TreeView.module.scss';\nimport uniqBy from 'lodash/uniqBy';\nimport { SelectChildrenMode, TreeViewSelectionMode } from './ITreeViewProps';\nimport TreeItem from './TreeItem';\nimport * as telemetry from '../../common/telemetry';\n/**\n * Renders the controls for TreeItem component\n */\nvar TreeView = /** @class */ (function (_super) {\n    __extends(TreeView, _super);\n    /**\n     * Constructor method\n     * @param props properties interface\n     */\n    function TreeView(props) {\n        var _this = _super.call(this, props) || this;\n        _this.nodesToExpand = [];\n        _this.pathTo = function (array, target) {\n            var result;\n            if (array) {\n                array.some(function (_a) {\n                    var key = _a.key, _b = _a.children, children = _b === void 0 ? [] : _b;\n                    if (key === target) {\n                        _this.nodesToExpand.push(key);\n                        result = key;\n                        return true;\n                    }\n                    var temp = _this.pathTo(children, target);\n                    if (temp) {\n                        _this.nodesToExpand.push(key);\n                        result = key + '.' + temp;\n                        return true;\n                    }\n                });\n            }\n            return result;\n        };\n        telemetry.track('TreeView');\n        _this.state = {\n            loaded: true,\n            defaultExpanded: props.defaultExpanded,\n            activeItems: []\n        };\n        // Bind control events\n        _this.handleTreeExpandCollapse = _this.handleTreeExpandCollapse.bind(_this);\n        _this.handleOnSelect = _this.handleOnSelect.bind(_this);\n        if (props.expandToSelected && props.defaultSelectedKeys) {\n            props.defaultSelectedKeys.forEach(function (element) {\n                _this.pathTo(props.items, element);\n            });\n        }\n        return _this;\n    }\n    TreeView.prototype.getSelectedItems = function (treeItems, selectedKeys, selectedChildren) {\n        var _this = this;\n        var selectedItems = [];\n        treeItems.forEach(function (item) {\n            if (selectedKeys.indexOf(item.key) !== -1 && item.selectable !== false && !item.disabled) {\n                selectedItems.push(item);\n                if (selectedChildren) {\n                    _this.selectAllChildren(item, selectedItems);\n                }\n                else {\n                    if (item.children) {\n                        selectedItems.push.apply(selectedItems, _this.getSelectedItems(item.children, selectedKeys, selectedChildren));\n                    }\n                }\n            }\n            else {\n                if (item.children) {\n                    selectedItems.push.apply(selectedItems, _this.getSelectedItems(item.children, selectedKeys, selectedChildren));\n                }\n            }\n        });\n        return selectedItems;\n    };\n    /**\n     * Fires When expand / collapse item in TreeView\n     * @argument item The expanded / collapsed item\n     * @argument isExpanded The status of item  (expanded / collapsed)\n     */\n    TreeView.prototype.handleTreeExpandCollapse = function (item, isExpanded) {\n        if (typeof this.props.onExpandCollapse === \"function\") {\n            this.props.onExpandCollapse(item, isExpanded);\n        }\n    };\n    /**\n     * Selects all child nodes when parent node is selected.\n     * @param item current tree item\n     */\n    TreeView.prototype.selectAllChildren = function (item, selectedItems) {\n        var _this = this;\n        if (item.children) {\n            item.children.forEach(function (element) {\n                if (!element.disabled && element.selectable !== false) {\n                    selectedItems.push(element);\n                }\n                if (element.children) {\n                    _this.selectAllChildren(element, selectedItems);\n                }\n            });\n        }\n    };\n    /**\n     * Unselects all child nodes of selected parent.\n     */\n    TreeView.prototype.unSelectChildren = function (item, unselectArray) {\n        var _this = this;\n        var tempItem = item;\n        if (tempItem.children) {\n            tempItem.children.forEach(function (element) {\n                unselectArray.push(element.key);\n                if (element.children) {\n                    _this.unSelectChildren(element, unselectArray);\n                }\n            });\n        }\n    };\n    /**\n     * Fires When Tree Item is selected in TreeView\n     * @argument item The selected item\n     * @argument isSelected The status of item selection\n     */\n    TreeView.prototype.handleOnSelect = function (item, isSelected) {\n        var selectedItems = this.state.activeItems;\n        if (isSelected) {\n            if (this.props.selectionMode == TreeViewSelectionMode.Multiple) {\n                // Add the checked term\n                selectedItems.push(item);\n                if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Select)) {\n                    this.selectAllChildren(item, selectedItems);\n                }\n                selectedItems = uniqBy(selectedItems, 'key');\n                // Filter out the duplicate terms\n                this.setState({\n                    activeItems: selectedItems\n                });\n            }\n            else {\n                // Only store the current selected item\n                this.setState({\n                    activeItems: [item]\n                });\n                selectedItems = [item];\n            }\n        }\n        else {\n            // Remove the item from the list of active nodes\n            var unselectArray = [];\n            unselectArray.push(item.key);\n            if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Unselect)) {\n                this.unSelectChildren(item, unselectArray);\n            }\n            unselectArray.forEach(function (element) {\n                selectedItems = selectedItems.filter(function (i) { return i.key != element; });\n            });\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n        if (typeof this.props.onSelect === \"function\") {\n            this.props.onSelect(selectedItems);\n        }\n    };\n    TreeView.prototype.checkIfChildrenShouldBeSelected = function (testMode) {\n        var selectChildrenMode = SelectChildrenMode.None;\n        if (this.props.selectChildrenMode) {\n            selectChildrenMode = this.props.selectChildrenMode;\n        }\n        else {\n            if (this.props.selectChildrenIfParentSelected) {\n                selectChildrenMode = SelectChildrenMode.All;\n            }\n        }\n        if ((selectChildrenMode & testMode) === testMode) {\n            return true;\n        }\n        return false;\n    };\n    TreeView.prototype.componentDidMount = function () {\n        var _a = this.props, items = _a.items, defaultSelectedKeys = _a.defaultSelectedKeys;\n        if (defaultSelectedKeys) {\n            var selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Mount));\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n    };\n    TreeView.prototype.componentWillReceiveProps = function (nextProps) {\n        var items = nextProps.items, defaultSelectedKeys = nextProps.defaultSelectedKeys;\n        if (defaultSelectedKeys) {\n            var selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Update));\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n    };\n    /**\n     * Default React render method\n     */\n    TreeView.prototype.render = function () {\n        var _this = this;\n        var _a = this.props, items = _a.items, selectionMode = _a.selectionMode, onRenderItem = _a.onRenderItem, showCheckboxes = _a.showCheckboxes, treeItemActionsDisplayMode = _a.treeItemActionsDisplayMode, defaultExpanded = _a.defaultExpanded, defaultExpandedChildren = _a.defaultExpandedChildren, defaultExpandedKeys = _a.defaultExpandedKeys;\n        return (React.createElement(\"div\", { className: styles.treeView }, items.map(function (treeNodeItem, index) { return (React.createElement(TreeItem, { treeItem: treeNodeItem, leftOffset: 20, isFirstRender: true, defaultExpanded: defaultExpanded, defaultExpandedChildren: defaultExpandedChildren !== undefined ? defaultExpandedChildren : true, selectionMode: selectionMode, activeItems: _this.state.activeItems, parentCallbackExpandCollapse: _this.handleTreeExpandCollapse, parentCallbackOnSelect: _this.handleOnSelect, onRenderItem: onRenderItem, showCheckboxes: showCheckboxes, treeItemActionsDisplayMode: treeItemActionsDisplayMode, nodesToExpand: defaultExpandedKeys })); })));\n    };\n    return TreeView;\n}(React.Component));\nexport { TreeView };\n"
         },
         {
           "id": "fYfa",
@@ -414001,7 +414001,7 @@
           "name": "./lib/controls/treeView/TreeItem.js",
           "index": 2321,
           "index2": 2321,
-          "size": 10044,
+          "size": 10398,
           "cacheable": true,
           "built": true,
           "optional": false,
@@ -414063,7 +414063,7 @@
           ],
           "optimizationBailout": [],
           "depth": 4,
-          "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport styles from './TreeView.module.scss';\nimport { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';\nimport { Icon } from 'office-ui-fabric-react/lib/Icon';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport * as strings from 'ControlStrings';\nimport { TreeViewSelectionMode } from './ITreeViewProps';\nimport TreeItemActionsControl from './TreeItemActionsControl';\nimport { css } from 'office-ui-fabric-react/lib/Utilities';\n/**\n * CSS styles for checkbox\n */\nvar checkBoxStyle = {\n    display: \"inline-flex\"\n};\n/**\n * Renders the controls for TreeItem component\n */\nvar TreeItem = /** @class */ (function (_super) {\n    __extends(TreeItem, _super);\n    /**\n     * Constructor method\n     * @param props properties interface\n     */\n    function TreeItem(props, state) {\n        var _this = _super.call(this, props) || this;\n        /**\n         * Process the child nodes\n         */\n        _this.createChildNodes = function (list, paddingLeft) {\n            if (list.length) {\n                var _a = _this.props, treeItem = _a.treeItem, selectionMode_1 = _a.selectionMode, activeItems_1 = _a.activeItems, parentCallbackExpandCollapse_1 = _a.parentCallbackExpandCollapse, parentCallbackOnSelect_1 = _a.parentCallbackOnSelect, onRenderItem_1 = _a.onRenderItem, showCheckboxes_1 = _a.showCheckboxes, treeItemActionsDisplayMode_1 = _a.treeItemActionsDisplayMode, defaultExpandedChildren_1 = _a.defaultExpandedChildren;\n                var expanded_1 = _this.state.expanded;\n                var childrenWithHandlers = list.map(function (item, index) {\n                    return (React.createElement(TreeItem, { treeItem: item, defaultExpanded: defaultExpandedChildren_1 ? expanded_1 : expanded_1 && !item.hasOwnProperty('children'), defaultExpandedChildren: defaultExpandedChildren_1, leftOffset: paddingLeft, selectionMode: selectionMode_1, activeItems: activeItems_1, isFirstRender: !paddingLeft ? true : false, parentCallbackExpandCollapse: parentCallbackExpandCollapse_1, parentCallbackOnSelect: parentCallbackOnSelect_1, onRenderItem: onRenderItem_1, showCheckboxes: showCheckboxes_1, treeItemActionsDisplayMode: treeItemActionsDisplayMode_1, nodesToExpand: _this.props.nodesToExpand }));\n                });\n                return childrenWithHandlers;\n            }\n        };\n        /**\n         * Default action callback\n         */\n        _this.treeItemActionCallback = function () {\n        };\n        // Check if current item is selected\n        var active = props.activeItems.filter(function (item) { return item.key === props.treeItem.key; });\n        var expanded = props.defaultExpanded;\n        if (props.nodesToExpand.indexOf(props.treeItem.key) != -1) {\n            expanded = true;\n        }\n        _this.state = {\n            selected: active.length > 0,\n            // expanded: this.props.defaultExpanded\n            expanded: expanded\n        };\n        // Bind control events\n        _this._itemSelected = _this._itemSelected.bind(_this);\n        _this._handleExpandCollapse = _this._handleExpandCollapse.bind(_this);\n        return _this;\n    }\n    /**\n     * Handle the checkbox change trigger\n     */\n    TreeItem.prototype._itemSelected = function (ev, isChecked) {\n        this.setState({\n            selected: !this.state.selected\n        });\n        this.props.parentCallbackOnSelect(this.props.treeItem, isChecked);\n    };\n    /**\n     * Handle the click event: collapse or expand\n     */\n    TreeItem.prototype._handleExpandCollapse = function () {\n        this.setState({\n            expanded: !this.state.expanded\n        });\n        this.props.parentCallbackExpandCollapse(this.props.treeItem, !this.state.expanded);\n    };\n    /**\n     * Lifecycle event hook when component retrieves new properties\n     * @param nextProps\n     * @param nextContext\n     */\n    TreeItem.prototype.componentWillReceiveProps = function (nextProps) {\n        var _this = this;\n        // If selection is turned on, set the item as selected\n        if (this.props.selectionMode != TreeViewSelectionMode.None) {\n            var active = nextProps.activeItems.filter(function (item) { return item.key === _this.props.treeItem.key; });\n            this.setState({\n                selected: active.length > 0,\n                expanded: this.state.expanded\n            });\n        }\n    };\n    /**\n     * Default or custom rendering of tree item\n     */\n    TreeItem.prototype.renderItem = function (item) {\n        var _this = this;\n        if (typeof this.props.onRenderItem === \"function\") {\n            // Custom rendering of tree item\n            return this.props.onRenderItem(item);\n        }\n        else {\n            return (\n            // Default rendering of tree item\n            React.createElement(\"div\", { className: styles.labels, onClick: function (e) {\n                    if (_this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {\n                        e.stopPropagation();\n                        if (!item.disabled) {\n                            _this._itemSelected(e, !_this.state.selected);\n                        }\n                    }\n                } },\n                this.props.showCheckboxes && item.selectable == false && !item.children &&\n                    React.createElement(\"span\", { className: styles.blankspace }, \"\\u00A0\"),\n                // Rendering when item has iconProps\n                item.iconProps &&\n                    React.createElement(\"span\", null,\n                        React.createElement(Icon, { className: styles.icon, iconName: item.iconProps.iconName, style: item.iconProps.style }),\n                        \"\\u00A0\"),\n                item.label,\n                // Render sublabel\n                item.subLabel &&\n                    React.createElement(\"div\", { className: styles.itemSubLabel }, item.subLabel)));\n        }\n    };\n    /**\n     * Default React render method\n     */\n    TreeItem.prototype.render = function () {\n        var _a;\n        var _this = this;\n        var _b = this.props, treeItem = _b.treeItem, leftOffset = _b.leftOffset, showCheckboxes = _b.showCheckboxes, selectionMode = _b.selectionMode, treeItemActionsDisplayMode = _b.treeItemActionsDisplayMode;\n        var _c = this.state, expanded = _c.expanded, selected = _c.selected;\n        var styleProps = {\n            marginLeft: leftOffset + \"px\"\n        };\n        var contentStyles = {\n            marginLeft: treeItem.children ? '0' : leftOffset + \"px\"\n        };\n        return (React.createElement(\"div\", null,\n            React.createElement(\"div\", { className: styles.listItem + \" \" + styles.tree },\n                React.createElement(\"div\", { className: \"\" + styles.treeSelector }, \n                // Render expand / collapse icons for items which has children.\n                treeItem.children &&\n                    React.createElement(IconButton, { iconProps: expanded ? { iconName: 'ChevronDown' } : { iconName: 'ChevronRight' }, alt: expanded ? strings.TreeViewCollapseTitle : strings.TreeViewExpandTitle, title: expanded ? strings.TreeViewCollapseTitle : strings.TreeViewExpandTitle, onClick: function () { return _this._handleExpandCollapse(); } })),\n                React.createElement(\"div\", { className: css((_a = {},\n                        _a[styles.itemContent] = true,\n                        _a[styles.noCheckBox] = !showCheckboxes,\n                        _a[styles.checked] = selected,\n                        _a[styles.disabled] = !!treeItem.disabled,\n                        _a)), style: contentStyles, onClick: function (e) {\n                        if (_this.props.selectionMode != TreeViewSelectionMode.None && treeItem.selectable != false) {\n                            e.stopPropagation();\n                            if (!treeItem.disabled && e.currentTarget === e.target) {\n                                _this._itemSelected(e, !_this.state.selected);\n                            }\n                        }\n                    } },\n                    // Render checkbox (if item is selectable, Selection mode is not None, and showCheckboxes property is set to true)\n                    (treeItem.selectable != false) && selectionMode != TreeViewSelectionMode.None && showCheckboxes &&\n                        React.createElement(Checkbox, { checked: selected, disabled: treeItem.disabled, className: styles.checkbox, onChange: this._itemSelected }),\n                    // Call default render item function\n                    this.renderItem(treeItem),\n                    // Render actions for tree item\n                    treeItem.actions &&\n                        React.createElement(\"div\", { className: styles.itemMenu },\n                            React.createElement(TreeItemActionsControl, { treeItem: treeItem, treeItemActions: {\n                                    actions: treeItem.actions,\n                                    treeItemActionsDisplayMode: treeItemActionsDisplayMode\n                                }, treeItemActionCallback: this.treeItemActionCallback })))),\n            React.createElement(\"div\", { style: styleProps || {} }, \n            // Render child nodes\n            expanded && treeItem.children\n                ? this.createChildNodes(treeItem.children, leftOffset) // we double left padding on every recursion/depth\n                : null)));\n    };\n    return TreeItem;\n}(React.Component));\nexport default TreeItem;\n"
+          "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport styles from './TreeView.module.scss';\nimport { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';\nimport { Icon } from 'office-ui-fabric-react/lib/Icon';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport * as strings from 'ControlStrings';\nimport { TreeViewSelectionMode } from './ITreeViewProps';\nimport TreeItemActionsControl from './TreeItemActionsControl';\nimport { css } from 'office-ui-fabric-react/lib/Utilities';\n/**\n * CSS styles for checkbox\n */\nvar checkBoxStyle = {\n    display: \"inline-flex\"\n};\n/**\n * Renders the controls for TreeItem component\n */\nvar TreeItem = /** @class */ (function (_super) {\n    __extends(TreeItem, _super);\n    /**\n     * Constructor method\n     * @param props properties interface\n     */\n    function TreeItem(props, state) {\n        var _this = _super.call(this, props) || this;\n        /**\n         * Process the child nodes\n         */\n        _this.createChildNodes = function (list, paddingLeft) {\n            if (list.length) {\n                var _a = _this.props, treeItem = _a.treeItem, selectionMode_1 = _a.selectionMode, activeItems_1 = _a.activeItems, parentCallbackExpandCollapse_1 = _a.parentCallbackExpandCollapse, parentCallbackOnSelect_1 = _a.parentCallbackOnSelect, onRenderItem_1 = _a.onRenderItem, showCheckboxes_1 = _a.showCheckboxes, treeItemActionsDisplayMode_1 = _a.treeItemActionsDisplayMode, defaultExpandedChildren_1 = _a.defaultExpandedChildren;\n                var expanded_1 = _this.state.expanded;\n                var childrenWithHandlers = list.map(function (item, index) {\n                    return (React.createElement(TreeItem, { treeItem: item, defaultExpanded: defaultExpandedChildren_1 ? expanded_1 : expanded_1 && !item.hasOwnProperty('children'), defaultExpandedChildren: defaultExpandedChildren_1, leftOffset: paddingLeft, selectionMode: selectionMode_1, activeItems: activeItems_1, isFirstRender: !paddingLeft ? true : false, parentCallbackExpandCollapse: parentCallbackExpandCollapse_1, parentCallbackOnSelect: parentCallbackOnSelect_1, onRenderItem: onRenderItem_1, showCheckboxes: showCheckboxes_1, treeItemActionsDisplayMode: treeItemActionsDisplayMode_1, nodesToExpand: _this.props.nodesToExpand }));\n                });\n                return childrenWithHandlers;\n            }\n        };\n        /**\n         * Default action callback\n         */\n        _this.treeItemActionCallback = function () {\n        };\n        // Check if current item is selected\n        var active = props.activeItems.filter(function (item) { return item.key === props.treeItem.key; });\n        var expanded = props.defaultExpanded;\n        if (!expanded && props.nodesToExpand.indexOf(props.treeItem.key) != -1) {\n            expanded = true;\n        }\n        _this.state = {\n            selected: active.length > 0,\n            // expanded: this.props.defaultExpanded\n            expanded: expanded\n        };\n        // Bind control events\n        _this._itemSelected = _this._itemSelected.bind(_this);\n        _this._handleExpandCollapse = _this._handleExpandCollapse.bind(_this);\n        return _this;\n    }\n    /**\n     * Handle the checkbox change trigger\n     */\n    TreeItem.prototype._itemSelected = function (ev, isChecked) {\n        this.setState({\n            selected: !this.state.selected\n        });\n        this.props.parentCallbackOnSelect(this.props.treeItem, isChecked);\n    };\n    /**\n     * Handle the click event: collapse or expand\n     */\n    TreeItem.prototype._handleExpandCollapse = function () {\n        this.setState({\n            expanded: !this.state.expanded\n        });\n        this.props.parentCallbackExpandCollapse(this.props.treeItem, !this.state.expanded);\n    };\n    /**\n     * Lifecycle event hook when component retrieves new properties\n     * @param nextProps\n     * @param nextContext\n     */\n    TreeItem.prototype.componentWillReceiveProps = function (nextProps) {\n        var _this = this;\n        // If selection is turned on, set the item as selected\n        if (this.props.selectionMode != TreeViewSelectionMode.None) {\n            var active = nextProps.activeItems.filter(function (item) { return item.key === _this.props.treeItem.key; });\n            var _isExpanded = this.state.expanded;\n            if (!_isExpanded && this.props.nodesToExpand.indexOf(this.props.treeItem.key) != -1) {\n                _isExpanded = true;\n            }\n            if (_isExpanded && this.props.nodesToExpand.indexOf(this.props.treeItem.key) == -1) {\n                _isExpanded = false;\n            }\n            this.setState({\n                selected: active.length > 0,\n                expanded: _isExpanded\n            });\n        }\n    };\n    /**\n     * Default or custom rendering of tree item\n     */\n    TreeItem.prototype.renderItem = function (item) {\n        var _this = this;\n        if (typeof this.props.onRenderItem === \"function\") {\n            // Custom rendering of tree item\n            return this.props.onRenderItem(item);\n        }\n        else {\n            return (\n            // Default rendering of tree item\n            React.createElement(\"div\", { className: styles.labels, onClick: function (e) {\n                    if (_this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {\n                        e.stopPropagation();\n                        if (!item.disabled) {\n                            _this._itemSelected(e, !_this.state.selected);\n                        }\n                    }\n                } },\n                this.props.showCheckboxes && item.selectable == false && !item.children &&\n                    React.createElement(\"span\", { className: styles.blankspace }, \"\\u00A0\"),\n                // Rendering when item has iconProps\n                item.iconProps &&\n                    React.createElement(\"span\", null,\n                        React.createElement(Icon, { className: styles.icon, iconName: item.iconProps.iconName, style: item.iconProps.style }),\n                        \"\\u00A0\"),\n                item.label,\n                // Render sublabel\n                item.subLabel &&\n                    React.createElement(\"div\", { className: styles.itemSubLabel }, item.subLabel)));\n        }\n    };\n    /**\n     * Default React render method\n     */\n    TreeItem.prototype.render = function () {\n        var _a;\n        var _this = this;\n        var _b = this.props, treeItem = _b.treeItem, leftOffset = _b.leftOffset, showCheckboxes = _b.showCheckboxes, selectionMode = _b.selectionMode, treeItemActionsDisplayMode = _b.treeItemActionsDisplayMode;\n        var _c = this.state, expanded = _c.expanded, selected = _c.selected;\n        var styleProps = {\n            marginLeft: leftOffset + \"px\"\n        };\n        var contentStyles = {\n            marginLeft: treeItem.children ? '0' : leftOffset + \"px\"\n        };\n        return (React.createElement(\"div\", null,\n            React.createElement(\"div\", { className: styles.listItem + \" \" + styles.tree },\n                React.createElement(\"div\", { className: \"\" + styles.treeSelector }, \n                // Render expand / collapse icons for items which has children.\n                treeItem.children &&\n                    React.createElement(IconButton, { iconProps: expanded ? { iconName: 'ChevronDown' } : { iconName: 'ChevronRight' }, alt: expanded ? strings.TreeViewCollapseTitle : strings.TreeViewExpandTitle, title: expanded ? strings.TreeViewCollapseTitle : strings.TreeViewExpandTitle, onClick: function () { return _this._handleExpandCollapse(); } })),\n                React.createElement(\"div\", { className: css((_a = {},\n                        _a[styles.itemContent] = true,\n                        _a[styles.noCheckBox] = !showCheckboxes,\n                        _a[styles.checked] = selected,\n                        _a[styles.disabled] = !!treeItem.disabled,\n                        _a)), style: contentStyles, onClick: function (e) {\n                        if (_this.props.selectionMode != TreeViewSelectionMode.None && treeItem.selectable != false) {\n                            e.stopPropagation();\n                            if (!treeItem.disabled && e.currentTarget === e.target) {\n                                _this._itemSelected(e, !_this.state.selected);\n                            }\n                        }\n                    } },\n                    // Render checkbox (if item is selectable, Selection mode is not None, and showCheckboxes property is set to true)\n                    (treeItem.selectable != false) && selectionMode != TreeViewSelectionMode.None && showCheckboxes &&\n                        React.createElement(Checkbox, { checked: selected, disabled: treeItem.disabled, className: styles.checkbox, onChange: this._itemSelected }),\n                    // Call default render item function\n                    this.renderItem(treeItem),\n                    // Render actions for tree item\n                    treeItem.actions &&\n                        React.createElement(\"div\", { className: styles.itemMenu },\n                            React.createElement(TreeItemActionsControl, { treeItem: treeItem, treeItemActions: {\n                                    actions: treeItem.actions,\n                                    treeItemActionsDisplayMode: treeItemActionsDisplayMode\n                                }, treeItemActionCallback: this.treeItemActionCallback })))),\n            React.createElement(\"div\", { style: styleProps || {} }, \n            // Render child nodes\n            expanded && treeItem.children\n                ? this.createChildNodes(treeItem.children, leftOffset) // we double left padding on every recursion/depth\n                : null)));\n    };\n    return TreeItem;\n}(React.Component));\nexport default TreeItem;\n"
         },
         {
           "id": "hR4L",
@@ -442197,7 +442197,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "./TreeItemActionsControl",
-              "loc": "182:48-70"
+              "loc": "189:48-70"
             }
           ],
           "providedExports": [
@@ -464861,9 +464861,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Form/FormButton.js",
-          "issuerId": "DQiM",
-          "issuerName": "./node_modules/@fluentui/react-northstar/dist/es/components/Form/FormButton.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Form/FormInput.js",
+          "issuerId": "Z9Yp",
+          "issuerName": "./node_modules/@fluentui/react-northstar/dist/es/components/Form/FormInput.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -464881,9 +464881,9 @@
               "name": "./node_modules/@fluentui/react-northstar/dist/es/index.js"
             },
             {
-              "id": "DQiM",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Form/FormButton.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Form/FormButton.js"
+              "id": "Z9Yp",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Form/FormInput.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Form/FormInput.js"
             }
           ],
           "failed": false,
@@ -465167,9 +465167,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-fallback-value/es/index.js",
-          "issuerId": "xUb/",
-          "issuerName": "./node_modules/fela-plugin-fallback-value/es/index.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-embedded/es/index.js",
+          "issuerId": "SI3Q",
+          "issuerName": "./node_modules/fela-plugin-embedded/es/index.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -465207,9 +465207,9 @@
               "name": "./node_modules/@fluentui/react-northstar-fela-renderer/dist/es/createFelaRenderer.js"
             },
             {
-              "id": "xUb/",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-fallback-value/es/index.js",
-              "name": "./node_modules/fela-plugin-fallback-value/es/index.js"
+              "id": "SI3Q",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-embedded/es/index.js",
+              "name": "./node_modules/fela-plugin-embedded/es/index.js"
             }
           ],
           "failed": false,
@@ -541875,7 +541875,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "office-ui-fabric-react/lib/Icon",
-              "loc": "133:44-48"
+              "loc": "140:44-48"
             },
             {
               "moduleId": "kJOq",
@@ -542867,7 +542867,7 @@
       "rendered": true,
       "initial": true,
       "entry": true,
-      "size": 1531762,
+      "size": 1531749,
       "names": [
         "ootb-fields-field-customizer"
       ],
@@ -542875,7 +542875,7 @@
         "ootb-fields-field-customizer.js",
         "ootb-fields-field-customizer.js.map"
       ],
-      "hash": "572f7716866e8bbccf7a",
+      "hash": "47249459e5309bb5e974",
       "siblings": [],
       "parents": [],
       "children": [],
@@ -573103,9 +573103,9 @@
             "controls-test-web-part",
             "ootb-fields-field-customizer"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-          "issuerId": "uz3O",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+          "issuerId": "OQ9B",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
           "issuerPath": [
             {
               "id": "8shM",
@@ -573143,9 +573143,9 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/index.js"
             },
             {
-              "id": "uz3O",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js"
+              "id": "OQ9B",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js"
             }
           ],
           "failed": false,
@@ -577279,7 +577279,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "office-ui-fabric-react/lib/Button",
-              "loc": "160:40-50"
+              "loc": "167:40-50"
             },
             {
               "moduleId": "huR6",
@@ -599090,7 +599090,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "office-ui-fabric-react/lib/Utilities",
-              "loc": "161:56-59"
+              "loc": "168:56-59"
             },
             {
               "moduleId": "hrfb",
@@ -624276,7 +624276,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "ControlStrings",
-              "loc": "160:152-181"
+              "loc": "167:152-181"
             },
             {
               "moduleId": "hQoI",
@@ -624285,7 +624285,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "ControlStrings",
-              "loc": "160:184-211"
+              "loc": "167:184-211"
             },
             {
               "moduleId": "hQoI",
@@ -624294,7 +624294,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "ControlStrings",
-              "loc": "160:231-260"
+              "loc": "167:231-260"
             },
             {
               "moduleId": "hQoI",
@@ -624303,7 +624303,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "ControlStrings",
-              "loc": "160:263-290"
+              "loc": "167:263-290"
             },
             {
               "moduleId": "k0SN",
@@ -678411,7 +678411,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "120:12-31"
+              "loc": "127:12-31"
             },
             {
               "moduleId": "hQoI",
@@ -678420,7 +678420,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "129:20-39"
+              "loc": "136:20-39"
             },
             {
               "moduleId": "hQoI",
@@ -678429,7 +678429,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "132:20-39"
+              "loc": "139:20-39"
             },
             {
               "moduleId": "hQoI",
@@ -678438,7 +678438,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "133:24-43"
+              "loc": "140:24-43"
             },
             {
               "moduleId": "hQoI",
@@ -678447,7 +678447,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "138:20-39"
+              "loc": "145:20-39"
             },
             {
               "moduleId": "hQoI",
@@ -678456,7 +678456,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "155:16-35"
+              "loc": "162:16-35"
             },
             {
               "moduleId": "hQoI",
@@ -678465,7 +678465,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "156:12-31"
+              "loc": "163:12-31"
             },
             {
               "moduleId": "hQoI",
@@ -678474,7 +678474,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "157:16-35"
+              "loc": "164:16-35"
             },
             {
               "moduleId": "hQoI",
@@ -678483,7 +678483,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "160:20-39"
+              "loc": "167:20-39"
             },
             {
               "moduleId": "hQoI",
@@ -678492,7 +678492,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "161:16-35"
+              "loc": "168:16-35"
             },
             {
               "moduleId": "hQoI",
@@ -678501,7 +678501,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "176:24-43"
+              "loc": "183:24-43"
             },
             {
               "moduleId": "hQoI",
@@ -678510,7 +678510,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "181:24-43"
+              "loc": "188:24-43"
             },
             {
               "moduleId": "hQoI",
@@ -678519,7 +678519,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "182:28-47"
+              "loc": "189:28-47"
             },
             {
               "moduleId": "hQoI",
@@ -678528,7 +678528,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "186:12-31"
+              "loc": "193:12-31"
             },
             {
               "moduleId": "hQoI",
@@ -678537,7 +678537,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "react",
-              "loc": "193:2-17"
+              "loc": "200:2-17"
             },
             {
               "moduleId": "hgRX",
@@ -694210,7 +694210,7 @@
           "name": "./lib/common/telemetry/version.js",
           "index": 1925,
           "index2": 1920,
-          "size": 43,
+          "size": 30,
           "cacheable": true,
           "built": true,
           "optional": false,
@@ -694278,7 +694278,7 @@
           ],
           "optimizationBailout": [],
           "depth": 4,
-          "source": "export var version = \"3.7.0-beta.2005908\";\n"
+          "source": "export var version = \"3.7.0\";\n"
         },
         {
           "id": "cPD0",
@@ -732187,7 +732187,7 @@
               "moduleName": "./lib/controls/treeView/TreeItem.js",
               "type": "harmony import specifier",
               "userRequest": "office-ui-fabric-react/lib/Icon",
-              "loc": "133:44-48"
+              "loc": "140:44-48"
             },
             {
               "moduleId": "kJOq",
@@ -735173,7 +735173,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "office-ui-fabric-react/lib/Checkbox",
-          "loc": "176:44-52"
+          "loc": "183:44-52"
         },
         {
           "moduleId": "ihU0",
@@ -854658,7 +854658,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "120:52-58"
+          "loc": "127:52-58"
         },
         {
           "moduleId": "hQoI",
@@ -854667,7 +854667,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "129:61-67"
+          "loc": "136:61-67"
         },
         {
           "moduleId": "hQoI",
@@ -854676,7 +854676,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "133:63-69"
+          "loc": "140:63-69"
         },
         {
           "moduleId": "hQoI",
@@ -854685,7 +854685,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "138:60-66"
+          "loc": "145:60-66"
         },
         {
           "moduleId": "hQoI",
@@ -854694,7 +854694,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "156:52-58"
+          "loc": "163:52-58"
         },
         {
           "moduleId": "hQoI",
@@ -854703,7 +854703,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "156:76-82"
+          "loc": "163:76-82"
         },
         {
           "moduleId": "hQoI",
@@ -854712,7 +854712,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "157:61-67"
+          "loc": "164:61-67"
         },
         {
           "moduleId": "hQoI",
@@ -854721,7 +854721,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "162:27-33"
+          "loc": "169:27-33"
         },
         {
           "moduleId": "hQoI",
@@ -854730,7 +854730,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "163:27-33"
+          "loc": "170:27-33"
         },
         {
           "moduleId": "hQoI",
@@ -854739,7 +854739,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "164:27-33"
+          "loc": "171:27-33"
         },
         {
           "moduleId": "hQoI",
@@ -854748,7 +854748,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "165:27-33"
+          "loc": "172:27-33"
         },
         {
           "moduleId": "hQoI",
@@ -854757,7 +854757,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "176:115-121"
+          "loc": "183:115-121"
         },
         {
           "moduleId": "hQoI",
@@ -854766,7 +854766,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeView.module.scss",
-          "loc": "181:64-70"
+          "loc": "188:64-70"
         }
       ],
       "providedExports": [
@@ -857220,9 +857220,9 @@
         "controls-test-web-part",
         "ootb-fields-field-customizer"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-      "issuerId": "uz3O",
-      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+      "issuerId": "OQ9B",
+      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
       "issuerPath": [
         {
           "id": "8shM",
@@ -857260,9 +857260,9 @@
           "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/index.js"
         },
         {
-          "id": "uz3O",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/PlainCard/PlainCard.base.js"
+          "id": "OQ9B",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js",
+          "name": "./node_modules/office-ui-fabric-react/lib/components/HoverCard/ExpandingCard.base.js"
         }
       ],
       "failed": false,
@@ -869492,7 +869492,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "office-ui-fabric-react/lib/Button",
-          "loc": "160:40-50"
+          "loc": "167:40-50"
         },
         {
           "moduleId": "huR6",
@@ -918568,7 +918568,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "office-ui-fabric-react/lib/Utilities",
-          "loc": "161:56-59"
+          "loc": "168:56-59"
         },
         {
           "moduleId": "hrfb",
@@ -978904,7 +978904,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "ControlStrings",
-          "loc": "160:152-181"
+          "loc": "167:152-181"
         },
         {
           "moduleId": "hQoI",
@@ -978913,7 +978913,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "ControlStrings",
-          "loc": "160:184-211"
+          "loc": "167:184-211"
         },
         {
           "moduleId": "hQoI",
@@ -978922,7 +978922,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "ControlStrings",
-          "loc": "160:231-260"
+          "loc": "167:231-260"
         },
         {
           "moduleId": "hQoI",
@@ -978931,7 +978931,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "ControlStrings",
-          "loc": "160:263-290"
+          "loc": "167:263-290"
         },
         {
           "moduleId": "k0SN",
@@ -1000668,7 +1000668,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./ITreeViewProps",
-          "loc": "121:53-74"
+          "loc": "128:53-74"
         },
         {
           "moduleId": "hQoI",
@@ -1000677,7 +1000677,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./ITreeViewProps",
-          "loc": "167:57-78"
+          "loc": "174:57-78"
         },
         {
           "moduleId": "hQoI",
@@ -1000686,7 +1000686,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./ITreeViewProps",
-          "loc": "175:71-92"
+          "loc": "182:71-92"
         }
       ],
       "providedExports": [
@@ -1088193,7 +1088193,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "120:12-31"
+          "loc": "127:12-31"
         },
         {
           "moduleId": "hQoI",
@@ -1088202,7 +1088202,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "129:20-39"
+          "loc": "136:20-39"
         },
         {
           "moduleId": "hQoI",
@@ -1088211,7 +1088211,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "132:20-39"
+          "loc": "139:20-39"
         },
         {
           "moduleId": "hQoI",
@@ -1088220,7 +1088220,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "133:24-43"
+          "loc": "140:24-43"
         },
         {
           "moduleId": "hQoI",
@@ -1088229,7 +1088229,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "138:20-39"
+          "loc": "145:20-39"
         },
         {
           "moduleId": "hQoI",
@@ -1088238,7 +1088238,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "155:16-35"
+          "loc": "162:16-35"
         },
         {
           "moduleId": "hQoI",
@@ -1088247,7 +1088247,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "156:12-31"
+          "loc": "163:12-31"
         },
         {
           "moduleId": "hQoI",
@@ -1088256,7 +1088256,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "157:16-35"
+          "loc": "164:16-35"
         },
         {
           "moduleId": "hQoI",
@@ -1088265,7 +1088265,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "160:20-39"
+          "loc": "167:20-39"
         },
         {
           "moduleId": "hQoI",
@@ -1088274,7 +1088274,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "161:16-35"
+          "loc": "168:16-35"
         },
         {
           "moduleId": "hQoI",
@@ -1088283,7 +1088283,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "176:24-43"
+          "loc": "183:24-43"
         },
         {
           "moduleId": "hQoI",
@@ -1088292,7 +1088292,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "181:24-43"
+          "loc": "188:24-43"
         },
         {
           "moduleId": "hQoI",
@@ -1088301,7 +1088301,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "182:28-47"
+          "loc": "189:28-47"
         },
         {
           "moduleId": "hQoI",
@@ -1088310,7 +1088310,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "186:12-31"
+          "loc": "193:12-31"
         },
         {
           "moduleId": "hQoI",
@@ -1088319,7 +1088319,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "react",
-          "loc": "193:2-17"
+          "loc": "200:2-17"
         },
         {
           "moduleId": "hgRX",
@@ -1104145,7 +1104145,7 @@
       "name": "./lib/common/telemetry/version.js",
       "index": 1925,
       "index2": 1920,
-      "size": 43,
+      "size": 30,
       "cacheable": true,
       "built": true,
       "optional": false,
@@ -1104213,7 +1104213,7 @@
       ],
       "optimizationBailout": [],
       "depth": 4,
-      "source": "export var version = \"3.7.0-beta.2005908\";\n"
+      "source": "export var version = \"3.7.0\";\n"
     },
     {
       "id": "cLrF",
@@ -1134755,7 +1134755,7 @@
       "name": "./lib/controls/treeView/TreeView.js",
       "index": 2316,
       "index2": 2322,
-      "size": 9477,
+      "size": 9523,
       "cacheable": true,
       "built": true,
       "optional": false,
@@ -1134812,7 +1134812,7 @@
       ],
       "optimizationBailout": [],
       "depth": 3,
-      "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport styles from './TreeView.module.scss';\nimport uniqBy from 'lodash/uniqBy';\nimport { SelectChildrenMode, TreeViewSelectionMode } from './ITreeViewProps';\nimport TreeItem from './TreeItem';\nimport * as telemetry from '../../common/telemetry';\n/**\n * Renders the controls for TreeItem component\n */\nvar TreeView = /** @class */ (function (_super) {\n    __extends(TreeView, _super);\n    /**\n     * Constructor method\n     * @param props properties interface\n     */\n    function TreeView(props) {\n        var _this = _super.call(this, props) || this;\n        _this.nodesToExpand = [];\n        _this.pathTo = function (array, target) {\n            var result;\n            if (array) {\n                array.some(function (_a) {\n                    var key = _a.key, _b = _a.children, children = _b === void 0 ? [] : _b;\n                    if (key === target) {\n                        _this.nodesToExpand.push(key);\n                        result = key;\n                        return true;\n                    }\n                    var temp = _this.pathTo(children, target);\n                    if (temp) {\n                        _this.nodesToExpand.push(key);\n                        result = key + '.' + temp;\n                        return true;\n                    }\n                });\n            }\n            return result;\n        };\n        telemetry.track('TreeView');\n        _this.state = {\n            loaded: true,\n            defaultExpanded: props.defaultExpanded,\n            activeItems: []\n        };\n        // Bind control events\n        _this.handleTreeExpandCollapse = _this.handleTreeExpandCollapse.bind(_this);\n        _this.handleOnSelect = _this.handleOnSelect.bind(_this);\n        if (props.expandToSelected && props.defaultSelectedKeys) {\n            props.defaultSelectedKeys.forEach(function (element) {\n                _this.pathTo(props.items, element);\n            });\n        }\n        return _this;\n    }\n    TreeView.prototype.getSelectedItems = function (treeItems, selectedKeys, selectedChildren) {\n        var _this = this;\n        var selectedItems = [];\n        treeItems.forEach(function (item) {\n            if (selectedKeys.indexOf(item.key) !== -1 && item.selectable !== false && !item.disabled) {\n                selectedItems.push(item);\n                if (selectedChildren) {\n                    _this.selectAllChildren(item, selectedItems);\n                }\n                else {\n                    if (item.children) {\n                        selectedItems.push.apply(selectedItems, _this.getSelectedItems(item.children, selectedKeys, selectedChildren));\n                    }\n                }\n            }\n            else {\n                if (item.children) {\n                    selectedItems.push.apply(selectedItems, _this.getSelectedItems(item.children, selectedKeys, selectedChildren));\n                }\n            }\n        });\n        return selectedItems;\n    };\n    /**\n     * Fires When expand / collapse item in TreeView\n     * @argument item The expanded / collapsed item\n     * @argument isExpanded The status of item  (expanded / collapsed)\n     */\n    TreeView.prototype.handleTreeExpandCollapse = function (item, isExpanded) {\n        if (typeof this.props.onExpandCollapse === \"function\") {\n            this.props.onExpandCollapse(item, isExpanded);\n        }\n    };\n    /**\n     * Selects all child nodes when parent node is selected.\n     * @param item current tree item\n     */\n    TreeView.prototype.selectAllChildren = function (item, selectedItems) {\n        var _this = this;\n        if (item.children) {\n            item.children.forEach(function (element) {\n                if (!element.disabled && element.selectable !== false) {\n                    selectedItems.push(element);\n                }\n                if (element.children) {\n                    _this.selectAllChildren(element, selectedItems);\n                }\n            });\n        }\n    };\n    /**\n     * Unselects all child nodes of selected parent.\n     */\n    TreeView.prototype.unSelectChildren = function (item, unselectArray) {\n        var _this = this;\n        var tempItem = item;\n        if (tempItem.children) {\n            tempItem.children.forEach(function (element) {\n                unselectArray.push(element.key);\n                if (element.children) {\n                    _this.unSelectChildren(element, unselectArray);\n                }\n            });\n        }\n    };\n    /**\n     * Fires When Tree Item is selected in TreeView\n     * @argument item The selected item\n     * @argument isSelected The status of item selection\n     */\n    TreeView.prototype.handleOnSelect = function (item, isSelected) {\n        var selectedItems = this.state.activeItems;\n        if (isSelected) {\n            if (this.props.selectionMode == TreeViewSelectionMode.Multiple) {\n                // Add the checked term\n                selectedItems.push(item);\n                if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Select)) {\n                    this.selectAllChildren(item, selectedItems);\n                }\n                selectedItems = uniqBy(selectedItems, 'key');\n                // Filter out the duplicate terms\n                this.setState({\n                    activeItems: selectedItems\n                });\n            }\n            else {\n                // Only store the current selected item\n                this.setState({\n                    activeItems: [item]\n                });\n                selectedItems = [item];\n            }\n        }\n        else {\n            // Remove the item from the list of active nodes\n            var unselectArray = [];\n            unselectArray.push(item.key);\n            if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Unselect)) {\n                this.unSelectChildren(item, unselectArray);\n            }\n            unselectArray.forEach(function (element) {\n                selectedItems = selectedItems.filter(function (i) { return i.key != element; });\n            });\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n        if (typeof this.props.onSelect === \"function\") {\n            this.props.onSelect(selectedItems);\n        }\n    };\n    TreeView.prototype.checkIfChildrenShouldBeSelected = function (testMode) {\n        var selectChildrenMode = SelectChildrenMode.None;\n        if (this.props.selectChildrenMode) {\n            selectChildrenMode = this.props.selectChildrenMode;\n        }\n        else {\n            if (this.props.selectChildrenIfParentSelected) {\n                selectChildrenMode = SelectChildrenMode.All;\n            }\n        }\n        if ((selectChildrenMode & testMode) === testMode) {\n            return true;\n        }\n        return false;\n    };\n    TreeView.prototype.componentDidMount = function () {\n        var _a = this.props, items = _a.items, defaultSelectedKeys = _a.defaultSelectedKeys;\n        if (defaultSelectedKeys) {\n            var selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Mount));\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n    };\n    TreeView.prototype.componentWillReceiveProps = function (nextProps) {\n        var items = nextProps.items, defaultSelectedKeys = nextProps.defaultSelectedKeys;\n        if (defaultSelectedKeys) {\n            var selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Update));\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n    };\n    /**\n     * Default React render method\n     */\n    TreeView.prototype.render = function () {\n        var _this = this;\n        var _a = this.props, items = _a.items, selectionMode = _a.selectionMode, onRenderItem = _a.onRenderItem, showCheckboxes = _a.showCheckboxes, treeItemActionsDisplayMode = _a.treeItemActionsDisplayMode, defaultExpanded = _a.defaultExpanded, defaultExpandedChildren = _a.defaultExpandedChildren;\n        return (React.createElement(\"div\", { className: styles.treeView }, items.map(function (treeNodeItem, index) { return (React.createElement(TreeItem, { treeItem: treeNodeItem, leftOffset: 20, isFirstRender: true, defaultExpanded: defaultExpanded, defaultExpandedChildren: defaultExpandedChildren !== undefined ? defaultExpandedChildren : true, selectionMode: selectionMode, activeItems: _this.state.activeItems, parentCallbackExpandCollapse: _this.handleTreeExpandCollapse, parentCallbackOnSelect: _this.handleOnSelect, onRenderItem: onRenderItem, showCheckboxes: showCheckboxes, treeItemActionsDisplayMode: treeItemActionsDisplayMode, nodesToExpand: _this.nodesToExpand })); })));\n    };\n    return TreeView;\n}(React.Component));\nexport { TreeView };\n"
+      "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport styles from './TreeView.module.scss';\nimport uniqBy from 'lodash/uniqBy';\nimport { SelectChildrenMode, TreeViewSelectionMode } from './ITreeViewProps';\nimport TreeItem from './TreeItem';\nimport * as telemetry from '../../common/telemetry';\n/**\n * Renders the controls for TreeItem component\n */\nvar TreeView = /** @class */ (function (_super) {\n    __extends(TreeView, _super);\n    /**\n     * Constructor method\n     * @param props properties interface\n     */\n    function TreeView(props) {\n        var _this = _super.call(this, props) || this;\n        _this.nodesToExpand = [];\n        _this.pathTo = function (array, target) {\n            var result;\n            if (array) {\n                array.some(function (_a) {\n                    var key = _a.key, _b = _a.children, children = _b === void 0 ? [] : _b;\n                    if (key === target) {\n                        _this.nodesToExpand.push(key);\n                        result = key;\n                        return true;\n                    }\n                    var temp = _this.pathTo(children, target);\n                    if (temp) {\n                        _this.nodesToExpand.push(key);\n                        result = key + '.' + temp;\n                        return true;\n                    }\n                });\n            }\n            return result;\n        };\n        telemetry.track('TreeView');\n        _this.state = {\n            loaded: true,\n            defaultExpanded: props.defaultExpanded,\n            activeItems: []\n        };\n        // Bind control events\n        _this.handleTreeExpandCollapse = _this.handleTreeExpandCollapse.bind(_this);\n        _this.handleOnSelect = _this.handleOnSelect.bind(_this);\n        if (props.expandToSelected && props.defaultSelectedKeys) {\n            props.defaultSelectedKeys.forEach(function (element) {\n                _this.pathTo(props.items, element);\n            });\n        }\n        return _this;\n    }\n    TreeView.prototype.getSelectedItems = function (treeItems, selectedKeys, selectedChildren) {\n        var _this = this;\n        var selectedItems = [];\n        treeItems.forEach(function (item) {\n            if (selectedKeys.indexOf(item.key) !== -1 && item.selectable !== false && !item.disabled) {\n                selectedItems.push(item);\n                if (selectedChildren) {\n                    _this.selectAllChildren(item, selectedItems);\n                }\n                else {\n                    if (item.children) {\n                        selectedItems.push.apply(selectedItems, _this.getSelectedItems(item.children, selectedKeys, selectedChildren));\n                    }\n                }\n            }\n            else {\n                if (item.children) {\n                    selectedItems.push.apply(selectedItems, _this.getSelectedItems(item.children, selectedKeys, selectedChildren));\n                }\n            }\n        });\n        return selectedItems;\n    };\n    /**\n     * Fires When expand / collapse item in TreeView\n     * @argument item The expanded / collapsed item\n     * @argument isExpanded The status of item  (expanded / collapsed)\n     */\n    TreeView.prototype.handleTreeExpandCollapse = function (item, isExpanded) {\n        if (typeof this.props.onExpandCollapse === \"function\") {\n            this.props.onExpandCollapse(item, isExpanded);\n        }\n    };\n    /**\n     * Selects all child nodes when parent node is selected.\n     * @param item current tree item\n     */\n    TreeView.prototype.selectAllChildren = function (item, selectedItems) {\n        var _this = this;\n        if (item.children) {\n            item.children.forEach(function (element) {\n                if (!element.disabled && element.selectable !== false) {\n                    selectedItems.push(element);\n                }\n                if (element.children) {\n                    _this.selectAllChildren(element, selectedItems);\n                }\n            });\n        }\n    };\n    /**\n     * Unselects all child nodes of selected parent.\n     */\n    TreeView.prototype.unSelectChildren = function (item, unselectArray) {\n        var _this = this;\n        var tempItem = item;\n        if (tempItem.children) {\n            tempItem.children.forEach(function (element) {\n                unselectArray.push(element.key);\n                if (element.children) {\n                    _this.unSelectChildren(element, unselectArray);\n                }\n            });\n        }\n    };\n    /**\n     * Fires When Tree Item is selected in TreeView\n     * @argument item The selected item\n     * @argument isSelected The status of item selection\n     */\n    TreeView.prototype.handleOnSelect = function (item, isSelected) {\n        var selectedItems = this.state.activeItems;\n        if (isSelected) {\n            if (this.props.selectionMode == TreeViewSelectionMode.Multiple) {\n                // Add the checked term\n                selectedItems.push(item);\n                if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Select)) {\n                    this.selectAllChildren(item, selectedItems);\n                }\n                selectedItems = uniqBy(selectedItems, 'key');\n                // Filter out the duplicate terms\n                this.setState({\n                    activeItems: selectedItems\n                });\n            }\n            else {\n                // Only store the current selected item\n                this.setState({\n                    activeItems: [item]\n                });\n                selectedItems = [item];\n            }\n        }\n        else {\n            // Remove the item from the list of active nodes\n            var unselectArray = [];\n            unselectArray.push(item.key);\n            if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Unselect)) {\n                this.unSelectChildren(item, unselectArray);\n            }\n            unselectArray.forEach(function (element) {\n                selectedItems = selectedItems.filter(function (i) { return i.key != element; });\n            });\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n        if (typeof this.props.onSelect === \"function\") {\n            this.props.onSelect(selectedItems);\n        }\n    };\n    TreeView.prototype.checkIfChildrenShouldBeSelected = function (testMode) {\n        var selectChildrenMode = SelectChildrenMode.None;\n        if (this.props.selectChildrenMode) {\n            selectChildrenMode = this.props.selectChildrenMode;\n        }\n        else {\n            if (this.props.selectChildrenIfParentSelected) {\n                selectChildrenMode = SelectChildrenMode.All;\n            }\n        }\n        if ((selectChildrenMode & testMode) === testMode) {\n            return true;\n        }\n        return false;\n    };\n    TreeView.prototype.componentDidMount = function () {\n        var _a = this.props, items = _a.items, defaultSelectedKeys = _a.defaultSelectedKeys;\n        if (defaultSelectedKeys) {\n            var selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Mount));\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n    };\n    TreeView.prototype.componentWillReceiveProps = function (nextProps) {\n        var items = nextProps.items, defaultSelectedKeys = nextProps.defaultSelectedKeys;\n        if (defaultSelectedKeys) {\n            var selectedItems = this.getSelectedItems(items, defaultSelectedKeys, this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Update));\n            this.setState({\n                activeItems: selectedItems\n            });\n        }\n    };\n    /**\n     * Default React render method\n     */\n    TreeView.prototype.render = function () {\n        var _this = this;\n        var _a = this.props, items = _a.items, selectionMode = _a.selectionMode, onRenderItem = _a.onRenderItem, showCheckboxes = _a.showCheckboxes, treeItemActionsDisplayMode = _a.treeItemActionsDisplayMode, defaultExpanded = _a.defaultExpanded, defaultExpandedChildren = _a.defaultExpandedChildren, defaultExpandedKeys = _a.defaultExpandedKeys;\n        return (React.createElement(\"div\", { className: styles.treeView }, items.map(function (treeNodeItem, index) { return (React.createElement(TreeItem, { treeItem: treeNodeItem, leftOffset: 20, isFirstRender: true, defaultExpanded: defaultExpanded, defaultExpandedChildren: defaultExpandedChildren !== undefined ? defaultExpandedChildren : true, selectionMode: selectionMode, activeItems: _this.state.activeItems, parentCallbackExpandCollapse: _this.handleTreeExpandCollapse, parentCallbackOnSelect: _this.handleOnSelect, onRenderItem: onRenderItem, showCheckboxes: showCheckboxes, treeItemActionsDisplayMode: treeItemActionsDisplayMode, nodesToExpand: defaultExpandedKeys })); })));\n    };\n    return TreeView;\n}(React.Component));\nexport { TreeView };\n"
     },
     {
       "id": "fYfa",
@@ -1146680,7 +1146680,7 @@
       "name": "./lib/controls/treeView/TreeItem.js",
       "index": 2321,
       "index2": 2321,
-      "size": 10044,
+      "size": 10398,
       "cacheable": true,
       "built": true,
       "optional": false,
@@ -1146742,7 +1146742,7 @@
       ],
       "optimizationBailout": [],
       "depth": 4,
-      "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport styles from './TreeView.module.scss';\nimport { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';\nimport { Icon } from 'office-ui-fabric-react/lib/Icon';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport * as strings from 'ControlStrings';\nimport { TreeViewSelectionMode } from './ITreeViewProps';\nimport TreeItemActionsControl from './TreeItemActionsControl';\nimport { css } from 'office-ui-fabric-react/lib/Utilities';\n/**\n * CSS styles for checkbox\n */\nvar checkBoxStyle = {\n    display: \"inline-flex\"\n};\n/**\n * Renders the controls for TreeItem component\n */\nvar TreeItem = /** @class */ (function (_super) {\n    __extends(TreeItem, _super);\n    /**\n     * Constructor method\n     * @param props properties interface\n     */\n    function TreeItem(props, state) {\n        var _this = _super.call(this, props) || this;\n        /**\n         * Process the child nodes\n         */\n        _this.createChildNodes = function (list, paddingLeft) {\n            if (list.length) {\n                var _a = _this.props, treeItem = _a.treeItem, selectionMode_1 = _a.selectionMode, activeItems_1 = _a.activeItems, parentCallbackExpandCollapse_1 = _a.parentCallbackExpandCollapse, parentCallbackOnSelect_1 = _a.parentCallbackOnSelect, onRenderItem_1 = _a.onRenderItem, showCheckboxes_1 = _a.showCheckboxes, treeItemActionsDisplayMode_1 = _a.treeItemActionsDisplayMode, defaultExpandedChildren_1 = _a.defaultExpandedChildren;\n                var expanded_1 = _this.state.expanded;\n                var childrenWithHandlers = list.map(function (item, index) {\n                    return (React.createElement(TreeItem, { treeItem: item, defaultExpanded: defaultExpandedChildren_1 ? expanded_1 : expanded_1 && !item.hasOwnProperty('children'), defaultExpandedChildren: defaultExpandedChildren_1, leftOffset: paddingLeft, selectionMode: selectionMode_1, activeItems: activeItems_1, isFirstRender: !paddingLeft ? true : false, parentCallbackExpandCollapse: parentCallbackExpandCollapse_1, parentCallbackOnSelect: parentCallbackOnSelect_1, onRenderItem: onRenderItem_1, showCheckboxes: showCheckboxes_1, treeItemActionsDisplayMode: treeItemActionsDisplayMode_1, nodesToExpand: _this.props.nodesToExpand }));\n                });\n                return childrenWithHandlers;\n            }\n        };\n        /**\n         * Default action callback\n         */\n        _this.treeItemActionCallback = function () {\n        };\n        // Check if current item is selected\n        var active = props.activeItems.filter(function (item) { return item.key === props.treeItem.key; });\n        var expanded = props.defaultExpanded;\n        if (props.nodesToExpand.indexOf(props.treeItem.key) != -1) {\n            expanded = true;\n        }\n        _this.state = {\n            selected: active.length > 0,\n            // expanded: this.props.defaultExpanded\n            expanded: expanded\n        };\n        // Bind control events\n        _this._itemSelected = _this._itemSelected.bind(_this);\n        _this._handleExpandCollapse = _this._handleExpandCollapse.bind(_this);\n        return _this;\n    }\n    /**\n     * Handle the checkbox change trigger\n     */\n    TreeItem.prototype._itemSelected = function (ev, isChecked) {\n        this.setState({\n            selected: !this.state.selected\n        });\n        this.props.parentCallbackOnSelect(this.props.treeItem, isChecked);\n    };\n    /**\n     * Handle the click event: collapse or expand\n     */\n    TreeItem.prototype._handleExpandCollapse = function () {\n        this.setState({\n            expanded: !this.state.expanded\n        });\n        this.props.parentCallbackExpandCollapse(this.props.treeItem, !this.state.expanded);\n    };\n    /**\n     * Lifecycle event hook when component retrieves new properties\n     * @param nextProps\n     * @param nextContext\n     */\n    TreeItem.prototype.componentWillReceiveProps = function (nextProps) {\n        var _this = this;\n        // If selection is turned on, set the item as selected\n        if (this.props.selectionMode != TreeViewSelectionMode.None) {\n            var active = nextProps.activeItems.filter(function (item) { return item.key === _this.props.treeItem.key; });\n            this.setState({\n                selected: active.length > 0,\n                expanded: this.state.expanded\n            });\n        }\n    };\n    /**\n     * Default or custom rendering of tree item\n     */\n    TreeItem.prototype.renderItem = function (item) {\n        var _this = this;\n        if (typeof this.props.onRenderItem === \"function\") {\n            // Custom rendering of tree item\n            return this.props.onRenderItem(item);\n        }\n        else {\n            return (\n            // Default rendering of tree item\n            React.createElement(\"div\", { className: styles.labels, onClick: function (e) {\n                    if (_this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {\n                        e.stopPropagation();\n                        if (!item.disabled) {\n                            _this._itemSelected(e, !_this.state.selected);\n                        }\n                    }\n                } },\n                this.props.showCheckboxes && item.selectable == false && !item.children &&\n                    React.createElement(\"span\", { className: styles.blankspace }, \"\\u00A0\"),\n                // Rendering when item has iconProps\n                item.iconProps &&\n                    React.createElement(\"span\", null,\n                        React.createElement(Icon, { className: styles.icon, iconName: item.iconProps.iconName, style: item.iconProps.style }),\n                        \"\\u00A0\"),\n                item.label,\n                // Render sublabel\n                item.subLabel &&\n                    React.createElement(\"div\", { className: styles.itemSubLabel }, item.subLabel)));\n        }\n    };\n    /**\n     * Default React render method\n     */\n    TreeItem.prototype.render = function () {\n        var _a;\n        var _this = this;\n        var _b = this.props, treeItem = _b.treeItem, leftOffset = _b.leftOffset, showCheckboxes = _b.showCheckboxes, selectionMode = _b.selectionMode, treeItemActionsDisplayMode = _b.treeItemActionsDisplayMode;\n        var _c = this.state, expanded = _c.expanded, selected = _c.selected;\n        var styleProps = {\n            marginLeft: leftOffset + \"px\"\n        };\n        var contentStyles = {\n            marginLeft: treeItem.children ? '0' : leftOffset + \"px\"\n        };\n        return (React.createElement(\"div\", null,\n            React.createElement(\"div\", { className: styles.listItem + \" \" + styles.tree },\n                React.createElement(\"div\", { className: \"\" + styles.treeSelector }, \n                // Render expand / collapse icons for items which has children.\n                treeItem.children &&\n                    React.createElement(IconButton, { iconProps: expanded ? { iconName: 'ChevronDown' } : { iconName: 'ChevronRight' }, alt: expanded ? strings.TreeViewCollapseTitle : strings.TreeViewExpandTitle, title: expanded ? strings.TreeViewCollapseTitle : strings.TreeViewExpandTitle, onClick: function () { return _this._handleExpandCollapse(); } })),\n                React.createElement(\"div\", { className: css((_a = {},\n                        _a[styles.itemContent] = true,\n                        _a[styles.noCheckBox] = !showCheckboxes,\n                        _a[styles.checked] = selected,\n                        _a[styles.disabled] = !!treeItem.disabled,\n                        _a)), style: contentStyles, onClick: function (e) {\n                        if (_this.props.selectionMode != TreeViewSelectionMode.None && treeItem.selectable != false) {\n                            e.stopPropagation();\n                            if (!treeItem.disabled && e.currentTarget === e.target) {\n                                _this._itemSelected(e, !_this.state.selected);\n                            }\n                        }\n                    } },\n                    // Render checkbox (if item is selectable, Selection mode is not None, and showCheckboxes property is set to true)\n                    (treeItem.selectable != false) && selectionMode != TreeViewSelectionMode.None && showCheckboxes &&\n                        React.createElement(Checkbox, { checked: selected, disabled: treeItem.disabled, className: styles.checkbox, onChange: this._itemSelected }),\n                    // Call default render item function\n                    this.renderItem(treeItem),\n                    // Render actions for tree item\n                    treeItem.actions &&\n                        React.createElement(\"div\", { className: styles.itemMenu },\n                            React.createElement(TreeItemActionsControl, { treeItem: treeItem, treeItemActions: {\n                                    actions: treeItem.actions,\n                                    treeItemActionsDisplayMode: treeItemActionsDisplayMode\n                                }, treeItemActionCallback: this.treeItemActionCallback })))),\n            React.createElement(\"div\", { style: styleProps || {} }, \n            // Render child nodes\n            expanded && treeItem.children\n                ? this.createChildNodes(treeItem.children, leftOffset) // we double left padding on every recursion/depth\n                : null)));\n    };\n    return TreeItem;\n}(React.Component));\nexport default TreeItem;\n"
+      "source": "var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport styles from './TreeView.module.scss';\nimport { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';\nimport { Icon } from 'office-ui-fabric-react/lib/Icon';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport * as strings from 'ControlStrings';\nimport { TreeViewSelectionMode } from './ITreeViewProps';\nimport TreeItemActionsControl from './TreeItemActionsControl';\nimport { css } from 'office-ui-fabric-react/lib/Utilities';\n/**\n * CSS styles for checkbox\n */\nvar checkBoxStyle = {\n    display: \"inline-flex\"\n};\n/**\n * Renders the controls for TreeItem component\n */\nvar TreeItem = /** @class */ (function (_super) {\n    __extends(TreeItem, _super);\n    /**\n     * Constructor method\n     * @param props properties interface\n     */\n    function TreeItem(props, state) {\n        var _this = _super.call(this, props) || this;\n        /**\n         * Process the child nodes\n         */\n        _this.createChildNodes = function (list, paddingLeft) {\n            if (list.length) {\n                var _a = _this.props, treeItem = _a.treeItem, selectionMode_1 = _a.selectionMode, activeItems_1 = _a.activeItems, parentCallbackExpandCollapse_1 = _a.parentCallbackExpandCollapse, parentCallbackOnSelect_1 = _a.parentCallbackOnSelect, onRenderItem_1 = _a.onRenderItem, showCheckboxes_1 = _a.showCheckboxes, treeItemActionsDisplayMode_1 = _a.treeItemActionsDisplayMode, defaultExpandedChildren_1 = _a.defaultExpandedChildren;\n                var expanded_1 = _this.state.expanded;\n                var childrenWithHandlers = list.map(function (item, index) {\n                    return (React.createElement(TreeItem, { treeItem: item, defaultExpanded: defaultExpandedChildren_1 ? expanded_1 : expanded_1 && !item.hasOwnProperty('children'), defaultExpandedChildren: defaultExpandedChildren_1, leftOffset: paddingLeft, selectionMode: selectionMode_1, activeItems: activeItems_1, isFirstRender: !paddingLeft ? true : false, parentCallbackExpandCollapse: parentCallbackExpandCollapse_1, parentCallbackOnSelect: parentCallbackOnSelect_1, onRenderItem: onRenderItem_1, showCheckboxes: showCheckboxes_1, treeItemActionsDisplayMode: treeItemActionsDisplayMode_1, nodesToExpand: _this.props.nodesToExpand }));\n                });\n                return childrenWithHandlers;\n            }\n        };\n        /**\n         * Default action callback\n         */\n        _this.treeItemActionCallback = function () {\n        };\n        // Check if current item is selected\n        var active = props.activeItems.filter(function (item) { return item.key === props.treeItem.key; });\n        var expanded = props.defaultExpanded;\n        if (!expanded && props.nodesToExpand.indexOf(props.treeItem.key) != -1) {\n            expanded = true;\n        }\n        _this.state = {\n            selected: active.length > 0,\n            // expanded: this.props.defaultExpanded\n            expanded: expanded\n        };\n        // Bind control events\n        _this._itemSelected = _this._itemSelected.bind(_this);\n        _this._handleExpandCollapse = _this._handleExpandCollapse.bind(_this);\n        return _this;\n    }\n    /**\n     * Handle the checkbox change trigger\n     */\n    TreeItem.prototype._itemSelected = function (ev, isChecked) {\n        this.setState({\n            selected: !this.state.selected\n        });\n        this.props.parentCallbackOnSelect(this.props.treeItem, isChecked);\n    };\n    /**\n     * Handle the click event: collapse or expand\n     */\n    TreeItem.prototype._handleExpandCollapse = function () {\n        this.setState({\n            expanded: !this.state.expanded\n        });\n        this.props.parentCallbackExpandCollapse(this.props.treeItem, !this.state.expanded);\n    };\n    /**\n     * Lifecycle event hook when component retrieves new properties\n     * @param nextProps\n     * @param nextContext\n     */\n    TreeItem.prototype.componentWillReceiveProps = function (nextProps) {\n        var _this = this;\n        // If selection is turned on, set the item as selected\n        if (this.props.selectionMode != TreeViewSelectionMode.None) {\n            var active = nextProps.activeItems.filter(function (item) { return item.key === _this.props.treeItem.key; });\n            var _isExpanded = this.state.expanded;\n            if (!_isExpanded && this.props.nodesToExpand.indexOf(this.props.treeItem.key) != -1) {\n                _isExpanded = true;\n            }\n            if (_isExpanded && this.props.nodesToExpand.indexOf(this.props.treeItem.key) == -1) {\n                _isExpanded = false;\n            }\n            this.setState({\n                selected: active.length > 0,\n                expanded: _isExpanded\n            });\n        }\n    };\n    /**\n     * Default or custom rendering of tree item\n     */\n    TreeItem.prototype.renderItem = function (item) {\n        var _this = this;\n        if (typeof this.props.onRenderItem === \"function\") {\n            // Custom rendering of tree item\n            return this.props.onRenderItem(item);\n        }\n        else {\n            return (\n            // Default rendering of tree item\n            React.createElement(\"div\", { className: styles.labels, onClick: function (e) {\n                    if (_this.props.selectionMode != TreeViewSelectionMode.None && item.selectable != false) {\n                        e.stopPropagation();\n                        if (!item.disabled) {\n                            _this._itemSelected(e, !_this.state.selected);\n                        }\n                    }\n                } },\n                this.props.showCheckboxes && item.selectable == false && !item.children &&\n                    React.createElement(\"span\", { className: styles.blankspace }, \"\\u00A0\"),\n                // Rendering when item has iconProps\n                item.iconProps &&\n                    React.createElement(\"span\", null,\n                        React.createElement(Icon, { className: styles.icon, iconName: item.iconProps.iconName, style: item.iconProps.style }),\n                        \"\\u00A0\"),\n                item.label,\n                // Render sublabel\n                item.subLabel &&\n                    React.createElement(\"div\", { className: styles.itemSubLabel }, item.subLabel)));\n        }\n    };\n    /**\n     * Default React render method\n     */\n    TreeItem.prototype.render = function () {\n        var _a;\n        var _this = this;\n        var _b = this.props, treeItem = _b.treeItem, leftOffset = _b.leftOffset, showCheckboxes = _b.showCheckboxes, selectionMode = _b.selectionMode, treeItemActionsDisplayMode = _b.treeItemActionsDisplayMode;\n        var _c = this.state, expanded = _c.expanded, selected = _c.selected;\n        var styleProps = {\n            marginLeft: leftOffset + \"px\"\n        };\n        var contentStyles = {\n            marginLeft: treeItem.children ? '0' : leftOffset + \"px\"\n        };\n        return (React.createElement(\"div\", null,\n            React.createElement(\"div\", { className: styles.listItem + \" \" + styles.tree },\n                React.createElement(\"div\", { className: \"\" + styles.treeSelector }, \n                // Render expand / collapse icons for items which has children.\n                treeItem.children &&\n                    React.createElement(IconButton, { iconProps: expanded ? { iconName: 'ChevronDown' } : { iconName: 'ChevronRight' }, alt: expanded ? strings.TreeViewCollapseTitle : strings.TreeViewExpandTitle, title: expanded ? strings.TreeViewCollapseTitle : strings.TreeViewExpandTitle, onClick: function () { return _this._handleExpandCollapse(); } })),\n                React.createElement(\"div\", { className: css((_a = {},\n                        _a[styles.itemContent] = true,\n                        _a[styles.noCheckBox] = !showCheckboxes,\n                        _a[styles.checked] = selected,\n                        _a[styles.disabled] = !!treeItem.disabled,\n                        _a)), style: contentStyles, onClick: function (e) {\n                        if (_this.props.selectionMode != TreeViewSelectionMode.None && treeItem.selectable != false) {\n                            e.stopPropagation();\n                            if (!treeItem.disabled && e.currentTarget === e.target) {\n                                _this._itemSelected(e, !_this.state.selected);\n                            }\n                        }\n                    } },\n                    // Render checkbox (if item is selectable, Selection mode is not None, and showCheckboxes property is set to true)\n                    (treeItem.selectable != false) && selectionMode != TreeViewSelectionMode.None && showCheckboxes &&\n                        React.createElement(Checkbox, { checked: selected, disabled: treeItem.disabled, className: styles.checkbox, onChange: this._itemSelected }),\n                    // Call default render item function\n                    this.renderItem(treeItem),\n                    // Render actions for tree item\n                    treeItem.actions &&\n                        React.createElement(\"div\", { className: styles.itemMenu },\n                            React.createElement(TreeItemActionsControl, { treeItem: treeItem, treeItemActions: {\n                                    actions: treeItem.actions,\n                                    treeItemActionsDisplayMode: treeItemActionsDisplayMode\n                                }, treeItemActionCallback: this.treeItemActionCallback })))),\n            React.createElement(\"div\", { style: styleProps || {} }, \n            // Render child nodes\n            expanded && treeItem.children\n                ? this.createChildNodes(treeItem.children, leftOffset) // we double left padding on every recursion/depth\n                : null)));\n    };\n    return TreeItem;\n}(React.Component));\nexport default TreeItem;\n"
     },
     {
       "id": "hR4L",
@@ -1174876,7 +1174876,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "./TreeItemActionsControl",
-          "loc": "182:48-70"
+          "loc": "189:48-70"
         }
       ],
       "providedExports": [
@@ -1197600,9 +1197600,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Form/FormButton.js",
-      "issuerId": "DQiM",
-      "issuerName": "./node_modules/@fluentui/react-northstar/dist/es/components/Form/FormButton.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Form/FormInput.js",
+      "issuerId": "Z9Yp",
+      "issuerName": "./node_modules/@fluentui/react-northstar/dist/es/components/Form/FormInput.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1197620,9 +1197620,9 @@
           "name": "./node_modules/@fluentui/react-northstar/dist/es/index.js"
         },
         {
-          "id": "DQiM",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Form/FormButton.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Form/FormButton.js"
+          "id": "Z9Yp",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Form/FormInput.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Form/FormInput.js"
         }
       ],
       "failed": false,
@@ -1197906,9 +1197906,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-fallback-value/es/index.js",
-      "issuerId": "xUb/",
-      "issuerName": "./node_modules/fela-plugin-fallback-value/es/index.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-embedded/es/index.js",
+      "issuerId": "SI3Q",
+      "issuerName": "./node_modules/fela-plugin-embedded/es/index.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1197946,9 +1197946,9 @@
           "name": "./node_modules/@fluentui/react-northstar-fela-renderer/dist/es/createFelaRenderer.js"
         },
         {
-          "id": "xUb/",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-fallback-value/es/index.js",
-          "name": "./node_modules/fela-plugin-fallback-value/es/index.js"
+          "id": "SI3Q",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/fela-plugin-embedded/es/index.js",
+          "name": "./node_modules/fela-plugin-embedded/es/index.js"
         }
       ],
       "failed": false,
@@ -1274728,7 +1274728,7 @@
           "moduleName": "./lib/controls/treeView/TreeItem.js",
           "type": "harmony import specifier",
           "userRequest": "office-ui-fabric-react/lib/Icon",
-          "loc": "133:44-48"
+          "loc": "140:44-48"
         },
         {
           "moduleId": "kJOq",