npm - @pnp/spfx-controls-react - Versions diffs - 3.7.0-beta.2005908 → 3.7.0-beta.2018695 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.JSON +7 -1
package/CHANGELOG.md +4 -0
package/lib/common/telemetry/version.js +1 -1
package/lib/controls/locationPicker/LocationPicker.js +1 -1
package/lib/controls/locationPicker/LocationPicker.js.map +1 -1
package/lib/controls/treeView/ITreeViewProps.d.ts +4 -0
package/lib/controls/treeView/ITreeViewProps.d.ts.map +1 -1
package/lib/controls/treeView/TreeItem.d.ts.map +1 -1
package/lib/controls/treeView/TreeItem.js +9 -2
package/lib/controls/treeView/TreeItem.js.map +1 -1
package/lib/controls/treeView/TreeView.d.ts.map +1 -1
package/lib/controls/treeView/TreeView.js +2 -2
package/lib/controls/treeView/TreeView.js.map +1 -1
package/package.json +1 -1
package/release/webpack-stats/sp-dev-fx-controls-react.stats.json +290 -290

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

@@ -2,9 +2,9 @@
   "errors": [],
   "warnings": [],
   "version": "4.44.2",
-  "hash": "3e49bd174746afa0dd3c",
-  "time": 21998,
-  "builtAt": 1647630057165,
+  "hash": "ee6e2e2e1dc133369de4",
+  "time": 19612,
+  "builtAt": 1647896198528,
   "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": 17706923,
       "chunks": [
         "controls-test-web-part"
       ],
@@ -305,7 +305,7 @@
     },
     {
       "name": "controls-test-web-part.js.map",
-      "size": 15954944,
+      "size": 15955738,
       "chunks": [
         "controls-test-web-part"
       ],
@@ -404,7 +404,7 @@
       "rendered": true,
       "initial": true,
       "entry": true,
-      "size": 12784268,
+      "size": 12784662,
       "names": [
         "controls-test-web-part"
       ],
@@ -412,7 +412,7 @@
         "controls-test-web-part.js",
         "controls-test-web-part.js.map"
       ],
-      "hash": "47a4fd6ccdb5ed5b40bd",
+      "hash": "822d9845849b8fdc5893",
       "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",
@@ -45820,14 +45820,14 @@
               "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
             },
             {
-              "id": "0Yof",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+              "id": "pFc4",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
             },
             {
-              "id": "c/6b",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+              "id": "mvdJ",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
             },
             {
               "id": "4eMn",
@@ -47339,9 +47339,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/Menu/MenuItem.js",
-          "issuerId": "c/6b",
-          "issuerName": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+          "issuerId": "mvdJ",
+          "issuerName": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -47369,14 +47369,14 @@
               "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
             },
             {
-              "id": "0Yof",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+              "id": "pFc4",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
             },
             {
-              "id": "c/6b",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+              "id": "mvdJ",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
             }
           ],
           "failed": false,
@@ -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",
@@ -216034,14 +216034,14 @@
               "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
             },
             {
-              "id": "0Yof",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+              "id": "pFc4",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
             },
             {
-              "id": "c/6b",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+              "id": "mvdJ",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
             },
             {
               "id": "4eMn",
@@ -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": [
@@ -274331,9 +274331,9 @@
           "chunks": [
             "controls-test-web-part"
           ],
-          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/source-map-loader/index.js!/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/lib/controls/accessibleAccordion/components/AccordionItem.js",
-          "issuerId": "ZDhp",
-          "issuerName": "./lib/controls/accessibleAccordion/components/AccordionItem.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/source-map-loader/index.js!/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/lib/controls/accessibleAccordion/components/AccordionItemHeading.js",
+          "issuerId": "PVoh",
+          "issuerName": "./lib/controls/accessibleAccordion/components/AccordionItemHeading.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -274351,9 +274351,9 @@
               "name": "./lib/controls/accessibleAccordion/index.js"
             },
             {
-              "id": "ZDhp",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/source-map-loader/index.js!/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/lib/controls/accessibleAccordion/components/AccordionItem.js",
-              "name": "./lib/controls/accessibleAccordion/components/AccordionItem.js"
+              "id": "PVoh",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/source-map-loader/index.js!/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/lib/controls/accessibleAccordion/components/AccordionItemHeading.js",
+              "name": "./lib/controls/accessibleAccordion/components/AccordionItemHeading.js"
             }
           ],
           "failed": false,
@@ -286451,7 +286451,7 @@
           "name": "./lib/controls/locationPicker/LocationPicker.js",
           "index": 2900,
           "index2": 2902,
-          "size": 15735,
+          "size": 15729,
           "cacheable": true,
           "built": true,
           "optional": false,
@@ -286503,7 +286503,7 @@
           ],
           "optimizationBailout": [],
           "depth": 2,
-          "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})();\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n    function verb(n) { return function (v) { return step([n, v]); }; }\n    function step(op) {\n        if (f) throw new TypeError(\"Generator is already executing.\");\n        while (_) try {\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n            if (y = 0, t) op = [op[0] & 2, t.value];\n            switch (op[0]) {\n                case 0: case 1: t = op; break;\n                case 4: _.label++; return { value: op[1], done: false };\n                case 5: _.label++; y = op[1]; op = [0]; continue;\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                default:\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n                    if (t[2]) _.ops.pop();\n                    _.trys.pop(); continue;\n            }\n            op = body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n    }\n};\nimport * as React from 'react';\nimport { Mode } from './ILocationPicker';\nimport styles from './LocationPicker.module.scss';\nimport { SPHttpClient, HttpClient } from '@microsoft/sp-http';\nimport { Text } from 'office-ui-fabric-react/lib/Text';\nimport { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';\nimport { ComboBox } from 'office-ui-fabric-react/lib/ComboBox';\nimport { FontIcon } from 'office-ui-fabric-react/lib/Icon';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport * as strings from 'ControlStrings';\nimport { isEqual } from '@microsoft/sp-lodash-subset';\nvar LocationPicker = /** @class */ (function (_super) {\n    __extends(LocationPicker, _super);\n    /**\n    * Constructor method\n    */\n    function LocationPicker(props) {\n        var _this = _super.call(this, props) || this;\n        _this._token = null;\n        _this.focusRef = null;\n        _this.onRenderOption = function (item) {\n            var text = item.text, locationItem = item.locationItem;\n            if (locationItem.EntityType === \"Custom\") {\n                return React.createElement(Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: locationItem.DisplayName, size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials });\n            }\n            else\n                return React.createElement(Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: _this.getLocationText(locationItem, \"full\"), size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials });\n        };\n        _this.getMainContent = function () {\n            var _a = _this.state, options = _a.options, selectedItem = _a.selectedItem, currentMode = _a.currentMode;\n            var _b = _this.props, className = _b.className, disabled = _b.disabled, placeholder = _b.placeholder, errorMessage = _b.errorMessage;\n            switch (currentMode) {\n                case Mode.empty:\n                    return React.createElement(ComboBox, { className: className, disabled: disabled, placeholder: placeholder, allowFreeform: true, autoComplete: \"on\", options: options, onRenderOption: _this.onRenderOption, calloutProps: { className: styles.callout }, buttonIconProps: { iconName: \"MapPin\" }, useComboBoxAsMenuWidth: true, openOnKeyboardFocus: true, scrollSelectedToTop: true, isButtonAriaHidden: true, onInput: function (e) { return _this.getLocatios(e.target[\"value\"]); }, onChange: _this.onChange, errorMessage: errorMessage });\n                case Mode.editView:\n                    if (selectedItem.EntityType === \"Custom\") {\n                        return React.createElement(\"div\", { ref: _this.focusRef, \"data-selection-index\": 0, \"data-is-focusable\": true, role: \"listitem\", className: styles.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },\n                            React.createElement(Persona, { \"data-is-focusable\": \"false\", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: \"Location\", className: styles.persona, size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),\n                            React.createElement(IconButton, { \"data-is-focusable\": \"false\", tabIndex: 0, iconProps: { iconName: \"Cancel\" }, title: \"Clear\", ariaLabel: \"Clear\", disabled: disabled, className: styles.closeButton, onClick: _this.onIconButtonClick }));\n                    }\n                    return React.createElement(\"div\", { ref: _this.focusRef, \"data-selection-index\": 0, \"data-is-focusable\": true, role: \"listitem\", className: styles.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },\n                        React.createElement(Persona, { \"data-is-focusable\": \"false\", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: \"Location\", className: styles.persona, secondaryText: _this.getLocationText(selectedItem, \"full\"), size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),\n                        !disabled ?\n                            React.createElement(IconButton, { \"data-is-focusable\": \"false\", tabIndex: 0, iconProps: { iconName: \"Cancel\" }, title: \"Clear\", ariaLabel: \"Clear\", disabled: disabled, className: styles.closeButton, onClick: _this.onIconButtonClick }) : null);\n                case Mode.view:\n                    if (selectedItem.EntityType === 'Custom') {\n                        return React.createElement(\"div\", { className: styles.locationAddressContainer, onClick: _this.onClick },\n                            React.createElement(\"div\", { className: styles.locationContainer, tabIndex: 0 },\n                                React.createElement(\"div\", { className: styles.locationDisplayName }, selectedItem.DisplayName)));\n                    }\n                    return React.createElement(\"div\", { className: styles.locationAddressContainer, onClick: _this.onClick },\n                        React.createElement(\"div\", { className: styles.locationContainer, tabIndex: 0 },\n                            React.createElement(\"div\", { className: styles.locationDisplayName }, selectedItem.DisplayName),\n                            React.createElement(\"div\", { className: styles.locationContent },\n                                React.createElement(\"div\", { className: styles.locationAddress }, _this.getLocationText(selectedItem, \"street\")),\n                                React.createElement(\"div\", { className: styles.locationAddress }, _this.getLocationText(selectedItem, \"noStreet\")))));\n            }\n            return null;\n        };\n        _this.getLocationText = function (item, mode) {\n            if (!item.Address) {\n                return '';\n            }\n            var address = item.Address;\n            switch (mode) {\n                case \"street\":\n                    return address.Street || \"\";\n                case \"noStreet\":\n                    return \"\" + (address.City ? address.City + \", \" : '') + (address.State ? address.State + \", \" : \"\") + (address.CountryOrRegion || \"\");\n            }\n            return \"\" + (address.Street ? address.Street + \", \" : '') + (address.City ? address.City + \", \" : \"\") + (address.State ? address.State + \", \" : '') + (address.CountryOrRegion || \"\");\n        };\n        _this.onIconButtonClick = function () {\n            _this.setState({ currentMode: Mode.empty, selectedItem: null });\n        };\n        _this.onClick = function () {\n            _this.setState({ currentMode: Mode.editView }, function () {\n                if (_this.focusRef.current != null)\n                    _this.focusRef.current.focus();\n            });\n        };\n        _this.onBlur = function (ev) {\n            try {\n                if (ev !== null && ev.relatedTarget[\"title\"] !== \"Location\" && ev.relatedTarget[\"title\"] !== \"Clear\") {\n                    _this.setState({ currentMode: Mode.view });\n                }\n            }\n            catch (_a) { }\n        };\n        _this.onChange = function (ev, option) {\n            _this.setState({ selectedItem: option.locationItem, currentMode: Mode.editView }, function () {\n                if (_this.focusRef.current != null)\n                    _this.focusRef.current.focus();\n            });\n            if (_this.props.onChange) {\n                _this.props.onChange(option.locationItem);\n            }\n        };\n        _this.getToken();\n        _this.focusRef = React.createRef();\n        if (props.defaultValue) {\n            _this.state = {\n                options: [],\n                currentMode: Mode.view,\n                searchText: null,\n                isCalloutVisible: true,\n                selectedItem: props.defaultValue,\n            };\n        }\n        else {\n            _this.state = {\n                options: [],\n                currentMode: Mode.empty,\n                searchText: null,\n                isCalloutVisible: true,\n                selectedItem: props.defaultValue,\n            };\n        }\n        return _this;\n    }\n    LocationPicker.prototype.componentWillReceiveProps = function (nextProps) {\n        if (!isEqual(nextProps.defaultValue, this.props.defaultValue)) {\n            if (nextProps.defaultValue) {\n                this.setState({ selectedItem: nextProps.defaultValue, currentMode: Mode.view });\n            }\n        }\n    };\n    /**\n    * Renders the LocationPicker controls with Office UI Fabric\n    */\n    LocationPicker.prototype.render = function () {\n        var label = this.props.label;\n        return (React.createElement(\"div\", null,\n            label ? React.createElement(Text, null, label) : null,\n            this.getMainContent()));\n    };\n    LocationPicker.prototype.customRenderInitials = function (props) {\n        if (props.imageAlt === \"Custom\")\n            return React.createElement(FontIcon, { \"aria-label\": \"Poi\", iconName: \"Poi\", style: { fontSize: \"14pt\" } });\n        else\n            return React.createElement(FontIcon, { \"aria-label\": \"EMI\", iconName: \"EMI\", style: { fontSize: \"14pt\" } });\n    };\n    LocationPicker.prototype.getToken = function () {\n        return __awaiter(this, void 0, void 0, function () {\n            var requestHeaders, spOpts, response, PrimaryQueryResult;\n            return __generator(this, function (_a) {\n                switch (_a.label) {\n                    case 0:\n                        requestHeaders = new Headers();\n                        requestHeaders.append(\"Content-type\", \"application/json\");\n                        requestHeaders.append(\"Cache-Control\", \"no-cache\");\n                        spOpts = {\n                            body: \"{\\\"resource\\\":\\\"https://outlook.office365.com\\\"}\",\n                            headers: requestHeaders\n                        };\n                        return [4 /*yield*/, this.props.context.spHttpClient.post(this.props.context.pageContext.web.serverRelativeUrl + \"/_api/SP.OAuth.Token/Acquire\", SPHttpClient.configurations.v1, spOpts)];\n                    case 1:\n                        response = _a.sent();\n                        return [4 /*yield*/, response.json()];\n                    case 2:\n                        PrimaryQueryResult = _a.sent();\n                        this._token = PrimaryQueryResult.access_token;\n                        return [2 /*return*/];\n                }\n            });\n        });\n    };\n    LocationPicker.prototype.getLocatios = function (searchText) {\n        return __awaiter(this, void 0, void 0, function () {\n            var optionsForCustomRender_1, requestHeaders, spOpts, response1, json, error_1;\n            return __generator(this, function (_a) {\n                switch (_a.label) {\n                    case 0:\n                        _a.trys.push([0, 3, , 4]);\n                        optionsForCustomRender_1 = [];\n                        requestHeaders = new Headers();\n                        requestHeaders.append(\"Content-type\", \"application/json\");\n                        requestHeaders.append(\"Cache-Control\", \"no-cache\");\n                        requestHeaders.append(\"Authorization\", \"Bearer \" + this._token);\n                        spOpts = {\n                            body: \"{\\\"QueryConstraint\\\":{\\\"Query\\\":\\\"\" + searchText + \"\\\"},\\\"LocationProvider\\\":32,\\\"BingMarket\\\":\\\"en-IN\\\"}\",\n                            headers: requestHeaders\n                        };\n                        return [4 /*yield*/, this.props.context.httpClient.post(\"https://outlook.office365.com/SchedulingB2/api/v1.0/me/findmeetinglocations\", HttpClient.configurations.v1, spOpts)];\n                    case 1:\n                        response1 = _a.sent();\n                        return [4 /*yield*/, response1.json()];\n                    case 2:\n                        json = _a.sent();\n                        json.MeetingLocations.forEach(function (v, i) {\n                            var loc = v[\"MeetingLocation\"];\n                            optionsForCustomRender_1.push({ text: v.MeetingLocation[\"DisplayName\"], key: i, locationItem: loc });\n                        });\n                        optionsForCustomRender_1.push({ text: strings.customDisplayName, key: 7, locationItem: { DisplayName: searchText, EntityType: \"Custom\" } });\n                        this.setState({ options: optionsForCustomRender_1 });\n                        return [3 /*break*/, 4];\n                    case 3:\n                        error_1 = _a.sent();\n                        console.log(\"Error get Items\", error_1);\n                        return [3 /*break*/, 4];\n                    case 4: return [2 /*return*/];\n                }\n            });\n        });\n    };\n    return LocationPicker;\n}(React.Component));\nexport { LocationPicker };\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})();\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n    function verb(n) { return function (v) { return step([n, v]); }; }\n    function step(op) {\n        if (f) throw new TypeError(\"Generator is already executing.\");\n        while (_) try {\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n            if (y = 0, t) op = [op[0] & 2, t.value];\n            switch (op[0]) {\n                case 0: case 1: t = op; break;\n                case 4: _.label++; return { value: op[1], done: false };\n                case 5: _.label++; y = op[1]; op = [0]; continue;\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                default:\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n                    if (t[2]) _.ops.pop();\n                    _.trys.pop(); continue;\n            }\n            op = body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n    }\n};\nimport * as React from 'react';\nimport { Mode } from './ILocationPicker';\nimport styles from './LocationPicker.module.scss';\nimport { SPHttpClient, HttpClient } from '@microsoft/sp-http';\nimport { Text } from 'office-ui-fabric-react/lib/Text';\nimport { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';\nimport { ComboBox } from 'office-ui-fabric-react/lib/ComboBox';\nimport { FontIcon } from 'office-ui-fabric-react/lib/Icon';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport * as strings from 'ControlStrings';\nimport { isEqual } from '@microsoft/sp-lodash-subset';\nvar LocationPicker = /** @class */ (function (_super) {\n    __extends(LocationPicker, _super);\n    /**\n    * Constructor method\n    */\n    function LocationPicker(props) {\n        var _this = _super.call(this, props) || this;\n        _this._token = null;\n        _this.focusRef = null;\n        _this.onRenderOption = function (item) {\n            var text = item.text, locationItem = item.locationItem;\n            if (locationItem.EntityType === \"Custom\") {\n                return React.createElement(Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: locationItem.DisplayName, size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials });\n            }\n            else\n                return React.createElement(Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: _this.getLocationText(locationItem, \"full\"), size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials });\n        };\n        _this.getMainContent = function () {\n            var _a = _this.state, options = _a.options, selectedItem = _a.selectedItem, currentMode = _a.currentMode;\n            var _b = _this.props, className = _b.className, disabled = _b.disabled, placeholder = _b.placeholder, errorMessage = _b.errorMessage;\n            switch (currentMode) {\n                case Mode.empty:\n                    return React.createElement(ComboBox, { className: className, disabled: disabled, placeholder: placeholder, allowFreeform: true, autoComplete: \"on\", options: options, onRenderOption: _this.onRenderOption, calloutProps: { className: styles.callout }, buttonIconProps: { iconName: \"MapPin\" }, useComboBoxAsMenuWidth: true, openOnKeyboardFocus: true, scrollSelectedToTop: true, isButtonAriaHidden: true, onInput: function (e) { return _this.getLocatios(e.target[\"value\"]); }, onChange: _this.onChange, errorMessage: errorMessage });\n                case Mode.editView:\n                    if (selectedItem.EntityType === \"Custom\") {\n                        return React.createElement(\"div\", { ref: _this.focusRef, \"data-selection-index\": 0, \"data-is-focusable\": true, role: \"listitem\", className: styles.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },\n                            React.createElement(Persona, { \"data-is-focusable\": \"false\", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: \"Location\", className: styles.persona, size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),\n                            React.createElement(IconButton, { \"data-is-focusable\": \"false\", tabIndex: 0, iconProps: { iconName: \"Cancel\" }, title: \"Clear\", ariaLabel: \"Clear\", disabled: disabled, className: styles.closeButton, onClick: _this.onIconButtonClick }));\n                    }\n                    return React.createElement(\"div\", { ref: _this.focusRef, \"data-selection-index\": 0, \"data-is-focusable\": true, role: \"listitem\", className: styles.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },\n                        React.createElement(Persona, { \"data-is-focusable\": \"false\", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: \"Location\", className: styles.persona, secondaryText: _this.getLocationText(selectedItem, \"full\"), size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),\n                        !disabled ?\n                            React.createElement(IconButton, { \"data-is-focusable\": \"false\", tabIndex: 0, iconProps: { iconName: \"Cancel\" }, title: \"Clear\", ariaLabel: \"Clear\", disabled: disabled, className: styles.closeButton, onClick: _this.onIconButtonClick }) : null);\n                case Mode.view:\n                    if (selectedItem.EntityType === 'Custom') {\n                        return React.createElement(\"div\", { className: styles.locationAddressContainer, onClick: _this.onClick },\n                            React.createElement(\"div\", { className: styles.locationContainer, tabIndex: 0 },\n                                React.createElement(\"div\", { className: styles.locationDisplayName }, selectedItem.DisplayName)));\n                    }\n                    return React.createElement(\"div\", { className: styles.locationAddressContainer, onClick: _this.onClick },\n                        React.createElement(\"div\", { className: styles.locationContainer, tabIndex: 0 },\n                            React.createElement(\"div\", { className: styles.locationDisplayName }, selectedItem.DisplayName),\n                            React.createElement(\"div\", { className: styles.locationContent },\n                                React.createElement(\"div\", { className: styles.locationAddress }, _this.getLocationText(selectedItem, \"street\")),\n                                React.createElement(\"div\", { className: styles.locationAddress }, _this.getLocationText(selectedItem, \"noStreet\")))));\n            }\n            return null;\n        };\n        _this.getLocationText = function (item, mode) {\n            if (!item.Address) {\n                return '';\n            }\n            var address = item.Address;\n            switch (mode) {\n                case \"street\":\n                    return address.Street || \"\";\n                case \"noStreet\":\n                    return \"\" + (address.City ? address.City + \", \" : '') + (address.State ? address.State + \", \" : \"\") + (address.CountryOrRegion || \"\");\n            }\n            return \"\" + (address.Street ? address.Street + \", \" : '') + (address.City ? address.City + \", \" : \"\") + (address.State ? address.State + \", \" : '') + (address.CountryOrRegion || \"\");\n        };\n        _this.onIconButtonClick = function () {\n            _this.setState({ currentMode: Mode.empty, selectedItem: null });\n        };\n        _this.onClick = function () {\n            _this.setState({ currentMode: Mode.editView }, function () {\n                if (_this.focusRef.current != null)\n                    _this.focusRef.current.focus();\n            });\n        };\n        _this.onBlur = function (ev) {\n            try {\n                if (ev !== null && ev.relatedTarget[\"title\"] !== \"Location\" && ev.relatedTarget[\"title\"] !== \"Clear\") {\n                    _this.setState({ currentMode: Mode.view });\n                }\n            }\n            catch (_a) { }\n        };\n        _this.onChange = function (ev, option) {\n            _this.setState({ selectedItem: option.locationItem, currentMode: Mode.editView }, function () {\n                if (_this.focusRef.current != null)\n                    _this.focusRef.current.focus();\n            });\n            if (_this.props.onChange) {\n                _this.props.onChange(option.locationItem);\n            }\n        };\n        _this.getToken();\n        _this.focusRef = React.createRef();\n        if (props.defaultValue) {\n            _this.state = {\n                options: [],\n                currentMode: Mode.view,\n                searchText: null,\n                isCalloutVisible: true,\n                selectedItem: props.defaultValue,\n            };\n        }\n        else {\n            _this.state = {\n                options: [],\n                currentMode: Mode.empty,\n                searchText: null,\n                isCalloutVisible: true,\n                selectedItem: props.defaultValue,\n            };\n        }\n        return _this;\n    }\n    LocationPicker.prototype.componentWillReceiveProps = function (nextProps) {\n        if (!isEqual(nextProps.defaultValue, this.props.defaultValue)) {\n            if (nextProps.defaultValue) {\n                this.setState({ selectedItem: nextProps.defaultValue, currentMode: Mode.view });\n            }\n        }\n    };\n    /**\n    * Renders the LocationPicker controls with Office UI Fabric\n    */\n    LocationPicker.prototype.render = function () {\n        var label = this.props.label;\n        return (React.createElement(\"div\", null,\n            label ? React.createElement(Text, null, label) : null,\n            this.getMainContent()));\n    };\n    LocationPicker.prototype.customRenderInitials = function (props) {\n        if (props.imageAlt === \"Custom\")\n            return React.createElement(FontIcon, { \"aria-label\": \"Poi\", iconName: \"Poi\", style: { fontSize: \"14pt\" } });\n        else\n            return React.createElement(FontIcon, { \"aria-label\": \"EMI\", iconName: \"EMI\", style: { fontSize: \"14pt\" } });\n    };\n    LocationPicker.prototype.getToken = function () {\n        return __awaiter(this, void 0, void 0, function () {\n            var requestHeaders, spOpts, response, PrimaryQueryResult;\n            return __generator(this, function (_a) {\n                switch (_a.label) {\n                    case 0:\n                        requestHeaders = new Headers();\n                        requestHeaders.append(\"Content-type\", \"application/json\");\n                        requestHeaders.append(\"Cache-Control\", \"no-cache\");\n                        spOpts = {\n                            body: \"{\\\"resource\\\":\\\"https://outlook.office365.com\\\"}\",\n                            headers: requestHeaders\n                        };\n                        return [4 /*yield*/, this.props.context.spHttpClient.post(this.props.context.pageContext.web.absoluteUrl + \"/_api/SP.OAuth.Token/Acquire\", SPHttpClient.configurations.v1, spOpts)];\n                    case 1:\n                        response = _a.sent();\n                        return [4 /*yield*/, response.json()];\n                    case 2:\n                        PrimaryQueryResult = _a.sent();\n                        this._token = PrimaryQueryResult.access_token;\n                        return [2 /*return*/];\n                }\n            });\n        });\n    };\n    LocationPicker.prototype.getLocatios = function (searchText) {\n        return __awaiter(this, void 0, void 0, function () {\n            var optionsForCustomRender_1, requestHeaders, spOpts, response1, json, error_1;\n            return __generator(this, function (_a) {\n                switch (_a.label) {\n                    case 0:\n                        _a.trys.push([0, 3, , 4]);\n                        optionsForCustomRender_1 = [];\n                        requestHeaders = new Headers();\n                        requestHeaders.append(\"Content-type\", \"application/json\");\n                        requestHeaders.append(\"Cache-Control\", \"no-cache\");\n                        requestHeaders.append(\"Authorization\", \"Bearer \" + this._token);\n                        spOpts = {\n                            body: \"{\\\"QueryConstraint\\\":{\\\"Query\\\":\\\"\" + searchText + \"\\\"},\\\"LocationProvider\\\":32,\\\"BingMarket\\\":\\\"en-IN\\\"}\",\n                            headers: requestHeaders\n                        };\n                        return [4 /*yield*/, this.props.context.httpClient.post(\"https://outlook.office365.com/SchedulingB2/api/v1.0/me/findmeetinglocations\", HttpClient.configurations.v1, spOpts)];\n                    case 1:\n                        response1 = _a.sent();\n                        return [4 /*yield*/, response1.json()];\n                    case 2:\n                        json = _a.sent();\n                        json.MeetingLocations.forEach(function (v, i) {\n                            var loc = v[\"MeetingLocation\"];\n                            optionsForCustomRender_1.push({ text: v.MeetingLocation[\"DisplayName\"], key: i, locationItem: loc });\n                        });\n                        optionsForCustomRender_1.push({ text: strings.customDisplayName, key: 7, locationItem: { DisplayName: searchText, EntityType: \"Custom\" } });\n                        this.setState({ options: optionsForCustomRender_1 });\n                        return [3 /*break*/, 4];\n                    case 3:\n                        error_1 = _a.sent();\n                        console.log(\"Error get Items\", error_1);\n                        return [3 /*break*/, 4];\n                    case 4: return [2 /*return*/];\n                }\n            });\n        });\n    };\n    return LocationPicker;\n}(React.Component));\nexport { LocationPicker };\n"
         },
         {
           "id": "YFYv",
@@ -298439,9 +298439,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/Button/CompoundButton/CompoundButton.styles.js",
-          "issuerId": "16Wd",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
+          "issuerId": "k/69",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -298459,14 +298459,14 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/Button/index.js"
             },
             {
-              "id": "Cv5W",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.js"
+              "id": "sByA",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.js"
             },
             {
-              "id": "16Wd",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js"
+              "id": "k/69",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js"
             }
           ],
           "failed": false,
@@ -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",
@@ -371534,7 +371534,7 @@
           ],
           "optimizationBailout": [],
           "depth": 4,
-          "source": "export var version = \"3.7.0-beta.2005908\";\n"
+          "source": "export var version = \"3.7.0-beta.2018695\";\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",
@@ -427503,9 +427503,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/Button/ActionButton/ActionButton.styles.js",
-          "issuerId": "xgv8",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
+          "issuerId": "pd4o",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -427523,14 +427523,14 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/Button/index.js"
             },
             {
-              "id": "gk8b",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.js"
+              "id": "2ihB",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.js"
             },
             {
-              "id": "xgv8",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js"
+              "id": "pd4o",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js"
             }
           ],
           "failed": false,
@@ -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": [
@@ -446867,14 +446867,14 @@
               "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
             },
             {
-              "id": "0Yof",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+              "id": "pFc4",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
             },
             {
-              "id": "c/6b",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+              "id": "mvdJ",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
             },
             {
               "id": "4eMn",
@@ -465339,14 +465339,14 @@
               "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
             },
             {
-              "id": "0Yof",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+              "id": "pFc4",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
             },
             {
-              "id": "c/6b",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+              "id": "mvdJ",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
             },
             {
               "id": "4eMn",
@@ -505587,14 +505587,14 @@
               "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
             },
             {
-              "id": "0Yof",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+              "id": "pFc4",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
             },
             {
-              "id": "c/6b",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+              "id": "mvdJ",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+              "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
             },
             {
               "id": "4eMn",
@@ -506422,7 +506422,7 @@
               "moduleName": "./lib/controls/locationPicker/LocationPicker.js",
               "type": "harmony import specifier",
               "userRequest": "@microsoft/sp-http",
-              "loc": "205:169-181"
+              "loc": "205:163-175"
             },
             {
               "moduleId": "YEex",
@@ -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",
@@ -542875,7 +542875,7 @@
         "ootb-fields-field-customizer.js",
         "ootb-fields-field-customizer.js.map"
       ],
-      "hash": "572f7716866e8bbccf7a",
+      "hash": "83b92659dd66028fdbcd",
       "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",
@@ -634378,9 +634378,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/Button/CompoundButton/CompoundButton.styles.js",
-          "issuerId": "16Wd",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
+          "issuerId": "k/69",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -634398,14 +634398,14 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/Button/index.js"
             },
             {
-              "id": "Cv5W",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.js"
+              "id": "sByA",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.js"
             },
             {
-              "id": "16Wd",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js"
+              "id": "k/69",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js"
             }
           ],
           "failed": false,
@@ -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",
@@ -694278,7 +694278,7 @@
           ],
           "optimizationBailout": [],
           "depth": 4,
-          "source": "export var version = \"3.7.0-beta.2005908\";\n"
+          "source": "export var version = \"3.7.0-beta.2018695\";\n"
         },
         {
           "id": "cPD0",
@@ -705639,9 +705639,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/Button/ActionButton/ActionButton.styles.js",
-          "issuerId": "xgv8",
-          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js",
+          "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
+          "issuerId": "pd4o",
+          "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
           "issuerPath": [
             {
               "id": "G6oG",
@@ -705659,14 +705659,14 @@
               "name": "./node_modules/office-ui-fabric-react/lib/components/Button/index.js"
             },
             {
-              "id": "gk8b",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.js"
+              "id": "2ihB",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.js"
             },
             {
-              "id": "xgv8",
-              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js",
-              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js"
+              "id": "pd4o",
+              "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
+              "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js"
             }
           ],
           "failed": false,
@@ -720863,7 +720863,7 @@
               "moduleName": "./lib/controls/locationPicker/LocationPicker.js",
               "type": "harmony import specifier",
               "userRequest": "@microsoft/sp-http",
-              "loc": "205:169-181"
+              "loc": "205:163-175"
             },
             {
               "moduleId": "YEex",
@@ -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",
@@ -778330,14 +778330,14 @@
           "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
         },
         {
-          "id": "0Yof",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+          "id": "pFc4",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
         },
         {
-          "id": "c/6b",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+          "id": "mvdJ",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
         },
         {
           "id": "4eMn",
@@ -779849,9 +779849,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/Menu/MenuItem.js",
-      "issuerId": "c/6b",
-      "issuerName": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+      "issuerId": "mvdJ",
+      "issuerName": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -779879,14 +779879,14 @@
           "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
         },
         {
-          "id": "0Yof",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+          "id": "pFc4",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
         },
         {
-          "id": "c/6b",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+          "id": "mvdJ",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
         }
       ],
       "failed": false,
@@ -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",
@@ -948659,14 +948659,14 @@
           "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
         },
         {
-          "id": "0Yof",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+          "id": "pFc4",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
         },
         {
-          "id": "c/6b",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+          "id": "mvdJ",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
         },
         {
           "id": "4eMn",
@@ -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": [
@@ -1007010,9 +1007010,9 @@
       "chunks": [
         "controls-test-web-part"
       ],
-      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/source-map-loader/index.js!/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/lib/controls/accessibleAccordion/components/AccordionItem.js",
-      "issuerId": "ZDhp",
-      "issuerName": "./lib/controls/accessibleAccordion/components/AccordionItem.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/source-map-loader/index.js!/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/lib/controls/accessibleAccordion/components/AccordionItemHeading.js",
+      "issuerId": "PVoh",
+      "issuerName": "./lib/controls/accessibleAccordion/components/AccordionItemHeading.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1007030,9 +1007030,9 @@
           "name": "./lib/controls/accessibleAccordion/index.js"
         },
         {
-          "id": "ZDhp",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/source-map-loader/index.js!/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/lib/controls/accessibleAccordion/components/AccordionItem.js",
-          "name": "./lib/controls/accessibleAccordion/components/AccordionItem.js"
+          "id": "PVoh",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/source-map-loader/index.js!/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/lib/controls/accessibleAccordion/components/AccordionItemHeading.js",
+          "name": "./lib/controls/accessibleAccordion/components/AccordionItemHeading.js"
         }
       ],
       "failed": false,
@@ -1019130,7 +1019130,7 @@
       "name": "./lib/controls/locationPicker/LocationPicker.js",
       "index": 2900,
       "index2": 2902,
-      "size": 15735,
+      "size": 15729,
       "cacheable": true,
       "built": true,
       "optional": false,
@@ -1019182,7 +1019182,7 @@
       ],
       "optimizationBailout": [],
       "depth": 2,
-      "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})();\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n    function verb(n) { return function (v) { return step([n, v]); }; }\n    function step(op) {\n        if (f) throw new TypeError(\"Generator is already executing.\");\n        while (_) try {\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n            if (y = 0, t) op = [op[0] & 2, t.value];\n            switch (op[0]) {\n                case 0: case 1: t = op; break;\n                case 4: _.label++; return { value: op[1], done: false };\n                case 5: _.label++; y = op[1]; op = [0]; continue;\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                default:\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n                    if (t[2]) _.ops.pop();\n                    _.trys.pop(); continue;\n            }\n            op = body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n    }\n};\nimport * as React from 'react';\nimport { Mode } from './ILocationPicker';\nimport styles from './LocationPicker.module.scss';\nimport { SPHttpClient, HttpClient } from '@microsoft/sp-http';\nimport { Text } from 'office-ui-fabric-react/lib/Text';\nimport { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';\nimport { ComboBox } from 'office-ui-fabric-react/lib/ComboBox';\nimport { FontIcon } from 'office-ui-fabric-react/lib/Icon';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport * as strings from 'ControlStrings';\nimport { isEqual } from '@microsoft/sp-lodash-subset';\nvar LocationPicker = /** @class */ (function (_super) {\n    __extends(LocationPicker, _super);\n    /**\n    * Constructor method\n    */\n    function LocationPicker(props) {\n        var _this = _super.call(this, props) || this;\n        _this._token = null;\n        _this.focusRef = null;\n        _this.onRenderOption = function (item) {\n            var text = item.text, locationItem = item.locationItem;\n            if (locationItem.EntityType === \"Custom\") {\n                return React.createElement(Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: locationItem.DisplayName, size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials });\n            }\n            else\n                return React.createElement(Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: _this.getLocationText(locationItem, \"full\"), size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials });\n        };\n        _this.getMainContent = function () {\n            var _a = _this.state, options = _a.options, selectedItem = _a.selectedItem, currentMode = _a.currentMode;\n            var _b = _this.props, className = _b.className, disabled = _b.disabled, placeholder = _b.placeholder, errorMessage = _b.errorMessage;\n            switch (currentMode) {\n                case Mode.empty:\n                    return React.createElement(ComboBox, { className: className, disabled: disabled, placeholder: placeholder, allowFreeform: true, autoComplete: \"on\", options: options, onRenderOption: _this.onRenderOption, calloutProps: { className: styles.callout }, buttonIconProps: { iconName: \"MapPin\" }, useComboBoxAsMenuWidth: true, openOnKeyboardFocus: true, scrollSelectedToTop: true, isButtonAriaHidden: true, onInput: function (e) { return _this.getLocatios(e.target[\"value\"]); }, onChange: _this.onChange, errorMessage: errorMessage });\n                case Mode.editView:\n                    if (selectedItem.EntityType === \"Custom\") {\n                        return React.createElement(\"div\", { ref: _this.focusRef, \"data-selection-index\": 0, \"data-is-focusable\": true, role: \"listitem\", className: styles.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },\n                            React.createElement(Persona, { \"data-is-focusable\": \"false\", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: \"Location\", className: styles.persona, size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),\n                            React.createElement(IconButton, { \"data-is-focusable\": \"false\", tabIndex: 0, iconProps: { iconName: \"Cancel\" }, title: \"Clear\", ariaLabel: \"Clear\", disabled: disabled, className: styles.closeButton, onClick: _this.onIconButtonClick }));\n                    }\n                    return React.createElement(\"div\", { ref: _this.focusRef, \"data-selection-index\": 0, \"data-is-focusable\": true, role: \"listitem\", className: styles.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },\n                        React.createElement(Persona, { \"data-is-focusable\": \"false\", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: \"Location\", className: styles.persona, secondaryText: _this.getLocationText(selectedItem, \"full\"), size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),\n                        !disabled ?\n                            React.createElement(IconButton, { \"data-is-focusable\": \"false\", tabIndex: 0, iconProps: { iconName: \"Cancel\" }, title: \"Clear\", ariaLabel: \"Clear\", disabled: disabled, className: styles.closeButton, onClick: _this.onIconButtonClick }) : null);\n                case Mode.view:\n                    if (selectedItem.EntityType === 'Custom') {\n                        return React.createElement(\"div\", { className: styles.locationAddressContainer, onClick: _this.onClick },\n                            React.createElement(\"div\", { className: styles.locationContainer, tabIndex: 0 },\n                                React.createElement(\"div\", { className: styles.locationDisplayName }, selectedItem.DisplayName)));\n                    }\n                    return React.createElement(\"div\", { className: styles.locationAddressContainer, onClick: _this.onClick },\n                        React.createElement(\"div\", { className: styles.locationContainer, tabIndex: 0 },\n                            React.createElement(\"div\", { className: styles.locationDisplayName }, selectedItem.DisplayName),\n                            React.createElement(\"div\", { className: styles.locationContent },\n                                React.createElement(\"div\", { className: styles.locationAddress }, _this.getLocationText(selectedItem, \"street\")),\n                                React.createElement(\"div\", { className: styles.locationAddress }, _this.getLocationText(selectedItem, \"noStreet\")))));\n            }\n            return null;\n        };\n        _this.getLocationText = function (item, mode) {\n            if (!item.Address) {\n                return '';\n            }\n            var address = item.Address;\n            switch (mode) {\n                case \"street\":\n                    return address.Street || \"\";\n                case \"noStreet\":\n                    return \"\" + (address.City ? address.City + \", \" : '') + (address.State ? address.State + \", \" : \"\") + (address.CountryOrRegion || \"\");\n            }\n            return \"\" + (address.Street ? address.Street + \", \" : '') + (address.City ? address.City + \", \" : \"\") + (address.State ? address.State + \", \" : '') + (address.CountryOrRegion || \"\");\n        };\n        _this.onIconButtonClick = function () {\n            _this.setState({ currentMode: Mode.empty, selectedItem: null });\n        };\n        _this.onClick = function () {\n            _this.setState({ currentMode: Mode.editView }, function () {\n                if (_this.focusRef.current != null)\n                    _this.focusRef.current.focus();\n            });\n        };\n        _this.onBlur = function (ev) {\n            try {\n                if (ev !== null && ev.relatedTarget[\"title\"] !== \"Location\" && ev.relatedTarget[\"title\"] !== \"Clear\") {\n                    _this.setState({ currentMode: Mode.view });\n                }\n            }\n            catch (_a) { }\n        };\n        _this.onChange = function (ev, option) {\n            _this.setState({ selectedItem: option.locationItem, currentMode: Mode.editView }, function () {\n                if (_this.focusRef.current != null)\n                    _this.focusRef.current.focus();\n            });\n            if (_this.props.onChange) {\n                _this.props.onChange(option.locationItem);\n            }\n        };\n        _this.getToken();\n        _this.focusRef = React.createRef();\n        if (props.defaultValue) {\n            _this.state = {\n                options: [],\n                currentMode: Mode.view,\n                searchText: null,\n                isCalloutVisible: true,\n                selectedItem: props.defaultValue,\n            };\n        }\n        else {\n            _this.state = {\n                options: [],\n                currentMode: Mode.empty,\n                searchText: null,\n                isCalloutVisible: true,\n                selectedItem: props.defaultValue,\n            };\n        }\n        return _this;\n    }\n    LocationPicker.prototype.componentWillReceiveProps = function (nextProps) {\n        if (!isEqual(nextProps.defaultValue, this.props.defaultValue)) {\n            if (nextProps.defaultValue) {\n                this.setState({ selectedItem: nextProps.defaultValue, currentMode: Mode.view });\n            }\n        }\n    };\n    /**\n    * Renders the LocationPicker controls with Office UI Fabric\n    */\n    LocationPicker.prototype.render = function () {\n        var label = this.props.label;\n        return (React.createElement(\"div\", null,\n            label ? React.createElement(Text, null, label) : null,\n            this.getMainContent()));\n    };\n    LocationPicker.prototype.customRenderInitials = function (props) {\n        if (props.imageAlt === \"Custom\")\n            return React.createElement(FontIcon, { \"aria-label\": \"Poi\", iconName: \"Poi\", style: { fontSize: \"14pt\" } });\n        else\n            return React.createElement(FontIcon, { \"aria-label\": \"EMI\", iconName: \"EMI\", style: { fontSize: \"14pt\" } });\n    };\n    LocationPicker.prototype.getToken = function () {\n        return __awaiter(this, void 0, void 0, function () {\n            var requestHeaders, spOpts, response, PrimaryQueryResult;\n            return __generator(this, function (_a) {\n                switch (_a.label) {\n                    case 0:\n                        requestHeaders = new Headers();\n                        requestHeaders.append(\"Content-type\", \"application/json\");\n                        requestHeaders.append(\"Cache-Control\", \"no-cache\");\n                        spOpts = {\n                            body: \"{\\\"resource\\\":\\\"https://outlook.office365.com\\\"}\",\n                            headers: requestHeaders\n                        };\n                        return [4 /*yield*/, this.props.context.spHttpClient.post(this.props.context.pageContext.web.serverRelativeUrl + \"/_api/SP.OAuth.Token/Acquire\", SPHttpClient.configurations.v1, spOpts)];\n                    case 1:\n                        response = _a.sent();\n                        return [4 /*yield*/, response.json()];\n                    case 2:\n                        PrimaryQueryResult = _a.sent();\n                        this._token = PrimaryQueryResult.access_token;\n                        return [2 /*return*/];\n                }\n            });\n        });\n    };\n    LocationPicker.prototype.getLocatios = function (searchText) {\n        return __awaiter(this, void 0, void 0, function () {\n            var optionsForCustomRender_1, requestHeaders, spOpts, response1, json, error_1;\n            return __generator(this, function (_a) {\n                switch (_a.label) {\n                    case 0:\n                        _a.trys.push([0, 3, , 4]);\n                        optionsForCustomRender_1 = [];\n                        requestHeaders = new Headers();\n                        requestHeaders.append(\"Content-type\", \"application/json\");\n                        requestHeaders.append(\"Cache-Control\", \"no-cache\");\n                        requestHeaders.append(\"Authorization\", \"Bearer \" + this._token);\n                        spOpts = {\n                            body: \"{\\\"QueryConstraint\\\":{\\\"Query\\\":\\\"\" + searchText + \"\\\"},\\\"LocationProvider\\\":32,\\\"BingMarket\\\":\\\"en-IN\\\"}\",\n                            headers: requestHeaders\n                        };\n                        return [4 /*yield*/, this.props.context.httpClient.post(\"https://outlook.office365.com/SchedulingB2/api/v1.0/me/findmeetinglocations\", HttpClient.configurations.v1, spOpts)];\n                    case 1:\n                        response1 = _a.sent();\n                        return [4 /*yield*/, response1.json()];\n                    case 2:\n                        json = _a.sent();\n                        json.MeetingLocations.forEach(function (v, i) {\n                            var loc = v[\"MeetingLocation\"];\n                            optionsForCustomRender_1.push({ text: v.MeetingLocation[\"DisplayName\"], key: i, locationItem: loc });\n                        });\n                        optionsForCustomRender_1.push({ text: strings.customDisplayName, key: 7, locationItem: { DisplayName: searchText, EntityType: \"Custom\" } });\n                        this.setState({ options: optionsForCustomRender_1 });\n                        return [3 /*break*/, 4];\n                    case 3:\n                        error_1 = _a.sent();\n                        console.log(\"Error get Items\", error_1);\n                        return [3 /*break*/, 4];\n                    case 4: return [2 /*return*/];\n                }\n            });\n        });\n    };\n    return LocationPicker;\n}(React.Component));\nexport { LocationPicker };\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})();\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n    function verb(n) { return function (v) { return step([n, v]); }; }\n    function step(op) {\n        if (f) throw new TypeError(\"Generator is already executing.\");\n        while (_) try {\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n            if (y = 0, t) op = [op[0] & 2, t.value];\n            switch (op[0]) {\n                case 0: case 1: t = op; break;\n                case 4: _.label++; return { value: op[1], done: false };\n                case 5: _.label++; y = op[1]; op = [0]; continue;\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                default:\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n                    if (t[2]) _.ops.pop();\n                    _.trys.pop(); continue;\n            }\n            op = body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n    }\n};\nimport * as React from 'react';\nimport { Mode } from './ILocationPicker';\nimport styles from './LocationPicker.module.scss';\nimport { SPHttpClient, HttpClient } from '@microsoft/sp-http';\nimport { Text } from 'office-ui-fabric-react/lib/Text';\nimport { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';\nimport { ComboBox } from 'office-ui-fabric-react/lib/ComboBox';\nimport { FontIcon } from 'office-ui-fabric-react/lib/Icon';\nimport { IconButton } from 'office-ui-fabric-react/lib/Button';\nimport * as strings from 'ControlStrings';\nimport { isEqual } from '@microsoft/sp-lodash-subset';\nvar LocationPicker = /** @class */ (function (_super) {\n    __extends(LocationPicker, _super);\n    /**\n    * Constructor method\n    */\n    function LocationPicker(props) {\n        var _this = _super.call(this, props) || this;\n        _this._token = null;\n        _this.focusRef = null;\n        _this.onRenderOption = function (item) {\n            var text = item.text, locationItem = item.locationItem;\n            if (locationItem.EntityType === \"Custom\") {\n                return React.createElement(Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: locationItem.DisplayName, size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials });\n            }\n            else\n                return React.createElement(Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: _this.getLocationText(locationItem, \"full\"), size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials });\n        };\n        _this.getMainContent = function () {\n            var _a = _this.state, options = _a.options, selectedItem = _a.selectedItem, currentMode = _a.currentMode;\n            var _b = _this.props, className = _b.className, disabled = _b.disabled, placeholder = _b.placeholder, errorMessage = _b.errorMessage;\n            switch (currentMode) {\n                case Mode.empty:\n                    return React.createElement(ComboBox, { className: className, disabled: disabled, placeholder: placeholder, allowFreeform: true, autoComplete: \"on\", options: options, onRenderOption: _this.onRenderOption, calloutProps: { className: styles.callout }, buttonIconProps: { iconName: \"MapPin\" }, useComboBoxAsMenuWidth: true, openOnKeyboardFocus: true, scrollSelectedToTop: true, isButtonAriaHidden: true, onInput: function (e) { return _this.getLocatios(e.target[\"value\"]); }, onChange: _this.onChange, errorMessage: errorMessage });\n                case Mode.editView:\n                    if (selectedItem.EntityType === \"Custom\") {\n                        return React.createElement(\"div\", { ref: _this.focusRef, \"data-selection-index\": 0, \"data-is-focusable\": true, role: \"listitem\", className: styles.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },\n                            React.createElement(Persona, { \"data-is-focusable\": \"false\", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: \"Location\", className: styles.persona, size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),\n                            React.createElement(IconButton, { \"data-is-focusable\": \"false\", tabIndex: 0, iconProps: { iconName: \"Cancel\" }, title: \"Clear\", ariaLabel: \"Clear\", disabled: disabled, className: styles.closeButton, onClick: _this.onIconButtonClick }));\n                    }\n                    return React.createElement(\"div\", { ref: _this.focusRef, \"data-selection-index\": 0, \"data-is-focusable\": true, role: \"listitem\", className: styles.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },\n                        React.createElement(Persona, { \"data-is-focusable\": \"false\", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: \"Location\", className: styles.persona, secondaryText: _this.getLocationText(selectedItem, \"full\"), size: PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),\n                        !disabled ?\n                            React.createElement(IconButton, { \"data-is-focusable\": \"false\", tabIndex: 0, iconProps: { iconName: \"Cancel\" }, title: \"Clear\", ariaLabel: \"Clear\", disabled: disabled, className: styles.closeButton, onClick: _this.onIconButtonClick }) : null);\n                case Mode.view:\n                    if (selectedItem.EntityType === 'Custom') {\n                        return React.createElement(\"div\", { className: styles.locationAddressContainer, onClick: _this.onClick },\n                            React.createElement(\"div\", { className: styles.locationContainer, tabIndex: 0 },\n                                React.createElement(\"div\", { className: styles.locationDisplayName }, selectedItem.DisplayName)));\n                    }\n                    return React.createElement(\"div\", { className: styles.locationAddressContainer, onClick: _this.onClick },\n                        React.createElement(\"div\", { className: styles.locationContainer, tabIndex: 0 },\n                            React.createElement(\"div\", { className: styles.locationDisplayName }, selectedItem.DisplayName),\n                            React.createElement(\"div\", { className: styles.locationContent },\n                                React.createElement(\"div\", { className: styles.locationAddress }, _this.getLocationText(selectedItem, \"street\")),\n                                React.createElement(\"div\", { className: styles.locationAddress }, _this.getLocationText(selectedItem, \"noStreet\")))));\n            }\n            return null;\n        };\n        _this.getLocationText = function (item, mode) {\n            if (!item.Address) {\n                return '';\n            }\n            var address = item.Address;\n            switch (mode) {\n                case \"street\":\n                    return address.Street || \"\";\n                case \"noStreet\":\n                    return \"\" + (address.City ? address.City + \", \" : '') + (address.State ? address.State + \", \" : \"\") + (address.CountryOrRegion || \"\");\n            }\n            return \"\" + (address.Street ? address.Street + \", \" : '') + (address.City ? address.City + \", \" : \"\") + (address.State ? address.State + \", \" : '') + (address.CountryOrRegion || \"\");\n        };\n        _this.onIconButtonClick = function () {\n            _this.setState({ currentMode: Mode.empty, selectedItem: null });\n        };\n        _this.onClick = function () {\n            _this.setState({ currentMode: Mode.editView }, function () {\n                if (_this.focusRef.current != null)\n                    _this.focusRef.current.focus();\n            });\n        };\n        _this.onBlur = function (ev) {\n            try {\n                if (ev !== null && ev.relatedTarget[\"title\"] !== \"Location\" && ev.relatedTarget[\"title\"] !== \"Clear\") {\n                    _this.setState({ currentMode: Mode.view });\n                }\n            }\n            catch (_a) { }\n        };\n        _this.onChange = function (ev, option) {\n            _this.setState({ selectedItem: option.locationItem, currentMode: Mode.editView }, function () {\n                if (_this.focusRef.current != null)\n                    _this.focusRef.current.focus();\n            });\n            if (_this.props.onChange) {\n                _this.props.onChange(option.locationItem);\n            }\n        };\n        _this.getToken();\n        _this.focusRef = React.createRef();\n        if (props.defaultValue) {\n            _this.state = {\n                options: [],\n                currentMode: Mode.view,\n                searchText: null,\n                isCalloutVisible: true,\n                selectedItem: props.defaultValue,\n            };\n        }\n        else {\n            _this.state = {\n                options: [],\n                currentMode: Mode.empty,\n                searchText: null,\n                isCalloutVisible: true,\n                selectedItem: props.defaultValue,\n            };\n        }\n        return _this;\n    }\n    LocationPicker.prototype.componentWillReceiveProps = function (nextProps) {\n        if (!isEqual(nextProps.defaultValue, this.props.defaultValue)) {\n            if (nextProps.defaultValue) {\n                this.setState({ selectedItem: nextProps.defaultValue, currentMode: Mode.view });\n            }\n        }\n    };\n    /**\n    * Renders the LocationPicker controls with Office UI Fabric\n    */\n    LocationPicker.prototype.render = function () {\n        var label = this.props.label;\n        return (React.createElement(\"div\", null,\n            label ? React.createElement(Text, null, label) : null,\n            this.getMainContent()));\n    };\n    LocationPicker.prototype.customRenderInitials = function (props) {\n        if (props.imageAlt === \"Custom\")\n            return React.createElement(FontIcon, { \"aria-label\": \"Poi\", iconName: \"Poi\", style: { fontSize: \"14pt\" } });\n        else\n            return React.createElement(FontIcon, { \"aria-label\": \"EMI\", iconName: \"EMI\", style: { fontSize: \"14pt\" } });\n    };\n    LocationPicker.prototype.getToken = function () {\n        return __awaiter(this, void 0, void 0, function () {\n            var requestHeaders, spOpts, response, PrimaryQueryResult;\n            return __generator(this, function (_a) {\n                switch (_a.label) {\n                    case 0:\n                        requestHeaders = new Headers();\n                        requestHeaders.append(\"Content-type\", \"application/json\");\n                        requestHeaders.append(\"Cache-Control\", \"no-cache\");\n                        spOpts = {\n                            body: \"{\\\"resource\\\":\\\"https://outlook.office365.com\\\"}\",\n                            headers: requestHeaders\n                        };\n                        return [4 /*yield*/, this.props.context.spHttpClient.post(this.props.context.pageContext.web.absoluteUrl + \"/_api/SP.OAuth.Token/Acquire\", SPHttpClient.configurations.v1, spOpts)];\n                    case 1:\n                        response = _a.sent();\n                        return [4 /*yield*/, response.json()];\n                    case 2:\n                        PrimaryQueryResult = _a.sent();\n                        this._token = PrimaryQueryResult.access_token;\n                        return [2 /*return*/];\n                }\n            });\n        });\n    };\n    LocationPicker.prototype.getLocatios = function (searchText) {\n        return __awaiter(this, void 0, void 0, function () {\n            var optionsForCustomRender_1, requestHeaders, spOpts, response1, json, error_1;\n            return __generator(this, function (_a) {\n                switch (_a.label) {\n                    case 0:\n                        _a.trys.push([0, 3, , 4]);\n                        optionsForCustomRender_1 = [];\n                        requestHeaders = new Headers();\n                        requestHeaders.append(\"Content-type\", \"application/json\");\n                        requestHeaders.append(\"Cache-Control\", \"no-cache\");\n                        requestHeaders.append(\"Authorization\", \"Bearer \" + this._token);\n                        spOpts = {\n                            body: \"{\\\"QueryConstraint\\\":{\\\"Query\\\":\\\"\" + searchText + \"\\\"},\\\"LocationProvider\\\":32,\\\"BingMarket\\\":\\\"en-IN\\\"}\",\n                            headers: requestHeaders\n                        };\n                        return [4 /*yield*/, this.props.context.httpClient.post(\"https://outlook.office365.com/SchedulingB2/api/v1.0/me/findmeetinglocations\", HttpClient.configurations.v1, spOpts)];\n                    case 1:\n                        response1 = _a.sent();\n                        return [4 /*yield*/, response1.json()];\n                    case 2:\n                        json = _a.sent();\n                        json.MeetingLocations.forEach(function (v, i) {\n                            var loc = v[\"MeetingLocation\"];\n                            optionsForCustomRender_1.push({ text: v.MeetingLocation[\"DisplayName\"], key: i, locationItem: loc });\n                        });\n                        optionsForCustomRender_1.push({ text: strings.customDisplayName, key: 7, locationItem: { DisplayName: searchText, EntityType: \"Custom\" } });\n                        this.setState({ options: optionsForCustomRender_1 });\n                        return [3 /*break*/, 4];\n                    case 3:\n                        error_1 = _a.sent();\n                        console.log(\"Error get Items\", error_1);\n                        return [3 /*break*/, 4];\n                    case 4: return [2 /*return*/];\n                }\n            });\n        });\n    };\n    return LocationPicker;\n}(React.Component));\nexport { LocationPicker };\n"
     },
     {
       "id": "YFYv",
@@ -1031118,9 +1031118,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/Button/CompoundButton/CompoundButton.styles.js",
-      "issuerId": "16Wd",
-      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
+      "issuerId": "k/69",
+      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1031138,14 +1031138,14 @@
           "name": "./node_modules/office-ui-fabric-react/lib/components/Button/index.js"
         },
         {
-          "id": "Cv5W",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.js"
+          "id": "sByA",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.js",
+          "name": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.js"
         },
         {
-          "id": "16Wd",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CompoundButton/CompoundButton.styles.js"
+          "id": "k/69",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js",
+          "name": "./node_modules/office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton.styles.js"
         }
       ],
       "failed": false,
@@ -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",
@@ -1104213,7 +1104213,7 @@
       ],
       "optimizationBailout": [],
       "depth": 4,
-      "source": "export var version = \"3.7.0-beta.2005908\";\n"
+      "source": "export var version = \"3.7.0-beta.2018695\";\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",
@@ -1160182,9 +1160182,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/Button/ActionButton/ActionButton.styles.js",
-      "issuerId": "xgv8",
-      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js",
+      "issuer": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
+      "issuerId": "pd4o",
+      "issuerName": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
       "issuerPath": [
         {
           "id": "G6oG",
@@ -1160202,14 +1160202,14 @@
           "name": "./node_modules/office-ui-fabric-react/lib/components/Button/index.js"
         },
         {
-          "id": "gk8b",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.js"
+          "id": "2ihB",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.js",
+          "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.js"
         },
         {
-          "id": "xgv8",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js",
-          "name": "./node_modules/office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton.styles.js"
+          "id": "pd4o",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js",
+          "name": "./node_modules/office-ui-fabric-react/lib/components/Button/CommandBarButton/CommandBarButton.styles.js"
         }
       ],
       "failed": false,
@@ -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": [
@@ -1179546,14 +1179546,14 @@
           "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
         },
         {
-          "id": "0Yof",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+          "id": "pFc4",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
         },
         {
-          "id": "c/6b",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+          "id": "mvdJ",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
         },
         {
           "id": "4eMn",
@@ -1198078,14 +1198078,14 @@
           "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
         },
         {
-          "id": "0Yof",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+          "id": "pFc4",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
         },
         {
-          "id": "c/6b",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+          "id": "mvdJ",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
         },
         {
           "id": "4eMn",
@@ -1238326,14 +1238326,14 @@
           "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/componentStyles.js"
         },
         {
-          "id": "0Yof",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js"
+          "id": "pFc4",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/themes/teams/components/List/listItemStyles.js"
         },
         {
-          "id": "c/6b",
-          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js",
-          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/Menu/MenuItem.js"
+          "id": "mvdJ",
+          "identifier": "/home/runner/work/sp-dev-fx-controls-react/sp-dev-fx-controls-react/node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js",
+          "name": "./node_modules/@fluentui/react-northstar/dist/es/components/List/ListItem.js"
         },
         {
           "id": "4eMn",
@@ -1239161,7 +1239161,7 @@
           "moduleName": "./lib/controls/locationPicker/LocationPicker.js",
           "type": "harmony import specifier",
           "userRequest": "@microsoft/sp-http",
-          "loc": "205:169-181"
+          "loc": "205:163-175"
         },
         {
           "moduleId": "YEex",
@@ -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",