@pnp/spfx-controls-react 3.26.0-beta.3446856 → 3.26.0-beta.3450715

package/release/analysis-logs/lint.sarif

@@ -3816,6 +3816,41 @@
             "uri": "src/TermSetNavigation.ts"
           }
         },
+        {
+          "location": {
+            "uri": "src/controls/toast/IToast.ts"
+          }
+        },
+        {
+          "location": {
+            "uri": "src/controls/toast/toastTimeout.ts"
+          }
+        },
+        {
+          "location": {
+            "uri": "src/controls/toast/ToastProvider.tsx"
+          }
+        },
+        {
+          "location": {
+            "uri": "src/controls/toast/Toast.tsx"
+          }
+        },
+        {
+          "location": {
+            "uri": "src/controls/toast/useToast.ts"
+          }
+        },
+        {
+          "location": {
+            "uri": "src/controls/toast/index.ts"
+          }
+        },
+        {
+          "location": {
+            "uri": "src/Toast.ts"
+          }
+        },
         {
           "location": {
             "uri": "src/Toolbar.ts"
@@ -17771,7 +17806,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/treeView/ITreeItem.ts",
-                  "index": 723
+                  "index": 730
                 },
                 "region": {
                   "startLine": 35,
@@ -17801,7 +17836,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/treeView/TreeItem.tsx",
-                  "index": 729
+                  "index": 736
                 },
                 "region": {
                   "startLine": 64,
@@ -17831,7 +17866,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/treeView/TreeView.tsx",
-                  "index": 730
+                  "index": 737
                 },
                 "region": {
                   "startLine": 135,
@@ -17861,7 +17896,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/treeView/TreeView.tsx",
-                  "index": 730
+                  "index": 737
                 },
                 "region": {
                   "startLine": 138,
@@ -17891,7 +17926,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/uploadFiles/hooks/useUtils.ts",
-                  "index": 736
+                  "index": 743
                 },
                 "region": {
                   "startLine": 9,
@@ -17921,7 +17956,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/uploadFiles/components/File/useFileStyles.ts",
-                  "index": 737
+                  "index": 744
                 },
                 "region": {
                   "startLine": 24,
@@ -17951,7 +17986,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/uploadFiles/components/FileCommandBar/useFileCommandBarStyles.ts",
-                  "index": 741
+                  "index": 748
                 },
                 "region": {
                   "startLine": 21,
@@ -17981,7 +18016,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/uploadFiles/components/NoDocuments/useNoDocumentsStyles.ts",
-                  "index": 743
+                  "index": 750
                 },
                 "region": {
                   "startLine": 14,
@@ -18011,7 +18046,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/uploadFiles/components/DocumentList/useDocumentListStyles.ts",
-                  "index": 747
+                  "index": 754
                 },
                 "region": {
                   "startLine": 18,
@@ -18044,7 +18079,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/uploadFiles/components/UploadFiles/useUploadFilesStyles.ts",
-                  "index": 757
+                  "index": 764
                 },
                 "region": {
                   "startLine": 11,
@@ -18074,7 +18109,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/uploadFiles/components/UploadFiles/UploadFiles.tsx",
-                  "index": 758
+                  "index": 765
                 },
                 "region": {
                   "startLine": 25,
@@ -18104,7 +18139,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/models/IGraphBatchRequest.ts",
-                  "index": 773
+                  "index": 780
                 },
                 "region": {
                   "startLine": 6,
@@ -18134,7 +18169,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useLocalStorage.ts",
-                  "index": 774
+                  "index": 781
                 },
                 "region": {
                   "startLine": 14,
@@ -18164,7 +18199,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useLocalStorage.ts",
-                  "index": 774
+                  "index": 781
                 },
                 "region": {
                   "startLine": 15,
@@ -18194,7 +18229,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useLocalStorage.ts",
-                  "index": 774
+                  "index": 781
                 },
                 "region": {
                   "startLine": 23,
@@ -18224,7 +18259,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useLocalStorage.ts",
-                  "index": 774
+                  "index": 781
                 },
                 "region": {
                   "startLine": 33,
@@ -18254,7 +18289,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 32,
@@ -18284,7 +18319,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 247,
@@ -18314,7 +18349,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 261,
@@ -18344,7 +18379,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 261,
@@ -18374,7 +18409,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 265,
@@ -18404,7 +18439,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 265,
@@ -18434,7 +18469,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 267,
@@ -18464,7 +18499,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 267,
@@ -18494,7 +18529,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 271,
@@ -18524,7 +18559,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 314,
@@ -18554,7 +18589,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 315,
@@ -18584,7 +18619,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 316,
@@ -18614,7 +18649,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 323,
@@ -18644,7 +18679,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 359,
@@ -18674,7 +18709,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 359,
@@ -18704,7 +18739,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useUtils.ts",
-                  "index": 775
+                  "index": 782
                 },
                 "region": {
                   "startLine": 369,
@@ -18734,7 +18769,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useGraphUserAPI.ts",
-                  "index": 776
+                  "index": 783
                 },
                 "region": {
                   "startLine": 36,
@@ -18767,7 +18802,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useGraphUserAPI.ts",
-                  "index": 776
+                  "index": 783
                 },
                 "region": {
                   "startLine": 90,
@@ -18800,7 +18835,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useGraphUserAPI.ts",
-                  "index": 776
+                  "index": 783
                 },
                 "region": {
                   "startLine": 96,
@@ -18833,7 +18868,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useGraphUserAPI.ts",
-                  "index": 776
+                  "index": 783
                 },
                 "region": {
                   "startLine": 106,
@@ -18866,7 +18901,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useGraphUserAPI.ts",
-                  "index": 776
+                  "index": 783
                 },
                 "region": {
                   "startLine": 114,
@@ -18899,7 +18934,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useGraphUserAPI.ts",
-                  "index": 776
+                  "index": 783
                 },
                 "region": {
                   "startLine": 132,
@@ -18932,7 +18967,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useOnClickOutside.ts",
-                  "index": 777
+                  "index": 784
                 },
                 "region": {
                   "startLine": 8,
@@ -18962,7 +18997,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useOnClickOutside.ts",
-                  "index": 777
+                  "index": 784
                 },
                 "region": {
                   "startLine": 8,
@@ -18992,7 +19027,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useOnClickOutside.ts",
-                  "index": 777
+                  "index": 784
                 },
                 "region": {
                   "startLine": 8,
@@ -19022,7 +19057,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/hooks/useOnClickOutside.ts",
-                  "index": 777
+                  "index": 784
                 },
                 "region": {
                   "startLine": 10,
@@ -19052,7 +19087,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/showMessage/useShowMessageStyles.ts",
-                  "index": 779
+                  "index": 786
                 },
                 "region": {
                   "startLine": 16,
@@ -19082,7 +19117,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/showMessage/useShowMessageStyles.ts",
-                  "index": 779
+                  "index": 786
                 },
                 "region": {
                   "startLine": 20,
@@ -19112,7 +19147,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/showMessage/useShowMessageStyles.ts",
-                  "index": 779
+                  "index": 786
                 },
                 "region": {
                   "startLine": 29,
@@ -19142,7 +19177,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/showMessage/useShowMessageStyles.ts",
-                  "index": 779
+                  "index": 786
                 },
                 "region": {
                   "startLine": 33,
@@ -19172,7 +19207,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/userCard/UserCard.tsx",
-                  "index": 783
+                  "index": 790
                 },
                 "region": {
                   "startLine": 87,
@@ -19205,7 +19240,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/userCard/UserCard.tsx",
-                  "index": 783
+                  "index": 790
                 },
                 "region": {
                   "startLine": 102,
@@ -19238,7 +19273,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/userCard/UserCard.tsx",
-                  "index": 783
+                  "index": 790
                 },
                 "region": {
                   "startLine": 139,
@@ -19271,7 +19306,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/UserPickerControl.tsx",
-                  "index": 788
+                  "index": 795
                 },
                 "region": {
                   "startLine": 161,
@@ -19304,7 +19339,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/UserPicker.tsx",
-                  "index": 789
+                  "index": 796
                 },
                 "region": {
                   "startLine": 26,
@@ -19334,7 +19369,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/userPicker/UserPicker.tsx",
-                  "index": 789
+                  "index": 796
                 },
                 "region": {
                   "startLine": 33,
@@ -19364,7 +19399,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/variantThemeProvider/VariantThemeProviderHelpers.ts",
-                  "index": 793
+                  "index": 800
                 },
                 "region": {
                   "startLine": 49,
@@ -19394,7 +19429,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/variantThemeProvider/VariantThemeProviderHelpers.ts",
-                  "index": 793
+                  "index": 800
                 },
                 "region": {
                   "startLine": 49,
@@ -19424,7 +19459,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/worldMap/useCleanMapStyle.tsx",
-                  "index": 811
+                  "index": 818
                 },
                 "region": {
                   "startLine": 13,
@@ -19454,7 +19489,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/worldMap/WorldMapControl.tsx",
-                  "index": 812
+                  "index": 819
                 },
                 "region": {
                   "startLine": 33,
@@ -19487,7 +19522,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/ListToolbar/ListToolbar.tsx",
-                  "index": 828
+                  "index": 835
                 },
                 "region": {
                   "startLine": 34,
@@ -19520,7 +19555,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/extensions/ootbFields/components/Customizer/OotbFields.tsx",
-                  "index": 858
+                  "index": 865
                 },
                 "region": {
                   "startLine": 12,
@@ -19547,7 +19582,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/extensions/ootbFields/components/Customizer/OotbFields.tsx",
-                  "index": 858
+                  "index": 865
                 },
                 "region": {
                   "startLine": 33,
@@ -19574,7 +19609,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/extensions/ootbFields/OotbFieldsFieldCustomizer.ts",
-                  "index": 859
+                  "index": 866
                 },
                 "region": {
                   "startLine": 10,
@@ -19601,7 +19636,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/extensions/ootbFields/OotbFieldsFieldCustomizer.ts",
-                  "index": 859
+                  "index": 866
                 },
                 "region": {
                   "startLine": 11,
@@ -19628,7 +19663,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/extensions/testForm/components/TestForm.tsx",
-                  "index": 862
+                  "index": 869
                 },
                 "region": {
                   "startLine": 44,
@@ -19658,7 +19693,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/bg-bg.ts",
-                  "index": 864
+                  "index": 871
                 },
                 "region": {
                   "startLine": 2,
@@ -19686,7 +19721,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/bg-bg.ts",
-                  "index": 864
+                  "index": 871
                 },
                 "region": {
                   "startLine": 2,
@@ -19719,7 +19754,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/ca-es.ts",
-                  "index": 865
+                  "index": 872
                 },
                 "region": {
                   "startLine": 2,
@@ -19747,7 +19782,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/ca-es.ts",
-                  "index": 865
+                  "index": 872
                 },
                 "region": {
                   "startLine": 2,
@@ -19780,7 +19815,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/cs-cz.ts",
-                  "index": 866
+                  "index": 873
                 },
                 "region": {
                   "startLine": 2,
@@ -19808,7 +19843,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/cs-cz.ts",
-                  "index": 866
+                  "index": 873
                 },
                 "region": {
                   "startLine": 2,
@@ -19841,7 +19876,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/da-dk.ts",
-                  "index": 867
+                  "index": 874
                 },
                 "region": {
                   "startLine": 2,
@@ -19869,7 +19904,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/da-dk.ts",
-                  "index": 867
+                  "index": 874
                 },
                 "region": {
                   "startLine": 2,
@@ -19902,7 +19937,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/de-de.ts",
-                  "index": 868
+                  "index": 875
                 },
                 "region": {
                   "startLine": 2,
@@ -19930,7 +19965,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/de-de.ts",
-                  "index": 868
+                  "index": 875
                 },
                 "region": {
                   "startLine": 2,
@@ -19963,7 +19998,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/el-gr.ts",
-                  "index": 869
+                  "index": 876
                 },
                 "region": {
                   "startLine": 2,
@@ -19991,7 +20026,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/el-gr.ts",
-                  "index": 869
+                  "index": 876
                 },
                 "region": {
                   "startLine": 2,
@@ -20024,7 +20059,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/en-us.ts",
-                  "index": 870
+                  "index": 877
                 },
                 "region": {
                   "startLine": 4,
@@ -20052,7 +20087,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/en-us.ts",
-                  "index": 870
+                  "index": 877
                 },
                 "region": {
                   "startLine": 4,
@@ -20085,7 +20120,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/es-es.ts",
-                  "index": 871
+                  "index": 878
                 },
                 "region": {
                   "startLine": 2,
@@ -20113,7 +20148,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/es-es.ts",
-                  "index": 871
+                  "index": 878
                 },
                 "region": {
                   "startLine": 2,
@@ -20146,7 +20181,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/et-ee.ts",
-                  "index": 872
+                  "index": 879
                 },
                 "region": {
                   "startLine": 2,
@@ -20174,7 +20209,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/et-ee.ts",
-                  "index": 872
+                  "index": 879
                 },
                 "region": {
                   "startLine": 2,
@@ -20207,7 +20242,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/eu-es.ts",
-                  "index": 873
+                  "index": 880
                 },
                 "region": {
                   "startLine": 2,
@@ -20235,7 +20270,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/eu-es.ts",
-                  "index": 873
+                  "index": 880
                 },
                 "region": {
                   "startLine": 2,
@@ -20268,7 +20303,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/fi-fi.ts",
-                  "index": 874
+                  "index": 881
                 },
                 "region": {
                   "startLine": 2,
@@ -20296,7 +20331,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/fi-fi.ts",
-                  "index": 874
+                  "index": 881
                 },
                 "region": {
                   "startLine": 2,
@@ -20329,7 +20364,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/fr-ca.ts",
-                  "index": 875
+                  "index": 882
                 },
                 "region": {
                   "startLine": 2,
@@ -20357,7 +20392,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/fr-ca.ts",
-                  "index": 875
+                  "index": 882
                 },
                 "region": {
                   "startLine": 2,
@@ -20390,7 +20425,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/fr-fr.ts",
-                  "index": 876
+                  "index": 883
                 },
                 "region": {
                   "startLine": 2,
@@ -20418,7 +20453,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/fr-fr.ts",
-                  "index": 876
+                  "index": 883
                 },
                 "region": {
                   "startLine": 2,
@@ -20451,7 +20486,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/it-it.ts",
-                  "index": 877
+                  "index": 884
                 },
                 "region": {
                   "startLine": 2,
@@ -20479,7 +20514,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/it-it.ts",
-                  "index": 877
+                  "index": 884
                 },
                 "region": {
                   "startLine": 2,
@@ -20512,7 +20547,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/ja-jp.ts",
-                  "index": 878
+                  "index": 885
                 },
                 "region": {
                   "startLine": 2,
@@ -20540,7 +20575,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/ja-jp.ts",
-                  "index": 878
+                  "index": 885
                 },
                 "region": {
                   "startLine": 2,
@@ -20573,7 +20608,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/lt-lt.ts",
-                  "index": 879
+                  "index": 886
                 },
                 "region": {
                   "startLine": 2,
@@ -20601,7 +20636,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/lt-lt.ts",
-                  "index": 879
+                  "index": 886
                 },
                 "region": {
                   "startLine": 2,
@@ -20634,7 +20669,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/lv-lv.ts",
-                  "index": 880
+                  "index": 887
                 },
                 "region": {
                   "startLine": 2,
@@ -20662,7 +20697,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/lv-lv.ts",
-                  "index": 880
+                  "index": 887
                 },
                 "region": {
                   "startLine": 2,
@@ -20695,7 +20730,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/nb-no.ts",
-                  "index": 881
+                  "index": 888
                 },
                 "region": {
                   "startLine": 2,
@@ -20723,7 +20758,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/nb-no.ts",
-                  "index": 881
+                  "index": 888
                 },
                 "region": {
                   "startLine": 2,
@@ -20756,7 +20791,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/nl-nl.ts",
-                  "index": 882
+                  "index": 889
                 },
                 "region": {
                   "startLine": 2,
@@ -20784,7 +20819,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/nl-nl.ts",
-                  "index": 882
+                  "index": 889
                 },
                 "region": {
                   "startLine": 2,
@@ -20817,7 +20852,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/pl-pl.ts",
-                  "index": 883
+                  "index": 890
                 },
                 "region": {
                   "startLine": 2,
@@ -20845,7 +20880,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/pl-pl.ts",
-                  "index": 883
+                  "index": 890
                 },
                 "region": {
                   "startLine": 2,
@@ -20878,7 +20913,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/pt-br.ts",
-                  "index": 884
+                  "index": 891
                 },
                 "region": {
                   "startLine": 2,
@@ -20906,7 +20941,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/pt-br.ts",
-                  "index": 884
+                  "index": 891
                 },
                 "region": {
                   "startLine": 2,
@@ -20939,7 +20974,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/pt-pt.ts",
-                  "index": 885
+                  "index": 892
                 },
                 "region": {
                   "startLine": 2,
@@ -20967,7 +21002,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/pt-pt.ts",
-                  "index": 885
+                  "index": 892
                 },
                 "region": {
                   "startLine": 2,
@@ -21000,7 +21035,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/ro-ro.ts",
-                  "index": 886
+                  "index": 893
                 },
                 "region": {
                   "startLine": 2,
@@ -21028,7 +21063,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/ro-ro.ts",
-                  "index": 886
+                  "index": 893
                 },
                 "region": {
                   "startLine": 2,
@@ -21061,7 +21096,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/ru-ru.ts",
-                  "index": 887
+                  "index": 894
                 },
                 "region": {
                   "startLine": 2,
@@ -21089,7 +21124,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/ru-ru.ts",
-                  "index": 887
+                  "index": 894
                 },
                 "region": {
                   "startLine": 2,
@@ -21122,7 +21157,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/sk-sk.ts",
-                  "index": 888
+                  "index": 895
                 },
                 "region": {
                   "startLine": 2,
@@ -21150,7 +21185,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/sk-sk.ts",
-                  "index": 888
+                  "index": 895
                 },
                 "region": {
                   "startLine": 2,
@@ -21183,7 +21218,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/sr-latn-rs.ts",
-                  "index": 889
+                  "index": 896
                 },
                 "region": {
                   "startLine": 2,
@@ -21211,7 +21246,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/sr-latn-rs.ts",
-                  "index": 889
+                  "index": 896
                 },
                 "region": {
                   "startLine": 2,
@@ -21244,7 +21279,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/sv-se.ts",
-                  "index": 890
+                  "index": 897
                 },
                 "region": {
                   "startLine": 2,
@@ -21272,7 +21307,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/sv-se.ts",
-                  "index": 890
+                  "index": 897
                 },
                 "region": {
                   "startLine": 2,
@@ -21305,7 +21340,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/tr-tr.ts",
-                  "index": 891
+                  "index": 898
                 },
                 "region": {
                   "startLine": 2,
@@ -21333,7 +21368,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/tr-tr.ts",
-                  "index": 891
+                  "index": 898
                 },
                 "region": {
                   "startLine": 2,
@@ -21366,7 +21401,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/vi-vn.ts",
-                  "index": 892
+                  "index": 899
                 },
                 "region": {
                   "startLine": 2,
@@ -21394,7 +21429,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/vi-vn.ts",
-                  "index": 892
+                  "index": 899
                 },
                 "region": {
                   "startLine": 2,
@@ -21427,7 +21462,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/zh-cn.ts",
-                  "index": 893
+                  "index": 900
                 },
                 "region": {
                   "startLine": 2,
@@ -21455,7 +21490,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/zh-cn.ts",
-                  "index": 893
+                  "index": 900
                 },
                 "region": {
                   "startLine": 2,
@@ -21488,7 +21523,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/zh-tw.ts",
-                  "index": 894
+                  "index": 901
                 },
                 "region": {
                   "startLine": 2,
@@ -21516,7 +21551,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/loc/zh-tw.ts",
-                  "index": 894
+                  "index": 901
                 },
                 "region": {
                   "startLine": 2,
@@ -21549,7 +21584,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/services/PeoplePickerMockClient.ts",
-                  "index": 895
+                  "index": 902
                 },
                 "region": {
                   "startLine": 47,
@@ -21579,7 +21614,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/services/PeoplePickerMockClient.ts",
-                  "index": 895
+                  "index": 902
                 },
                 "region": {
                   "startLine": 47,
@@ -21609,7 +21644,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/services/PeoplePickerMockClient.ts",
-                  "index": 895
+                  "index": 902
                 },
                 "region": {
                   "startLine": 47,
@@ -21639,7 +21674,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/services/PeoplePickerMockClient.ts",
-                  "index": 895
+                  "index": 902
                 },
                 "region": {
                   "startLine": 47,
@@ -21669,7 +21704,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/services/SPServiceMock.ts",
-                  "index": 896
+                  "index": 903
                 },
                 "region": {
                   "startLine": 28,
@@ -21699,7 +21734,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/services/SPServiceMock.ts",
-                  "index": 896
+                  "index": 903
                 },
                 "region": {
                   "startLine": 50,
@@ -21729,7 +21764,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/services/SPTermStorePickerMockService.ts",
-                  "index": 897
+                  "index": 904
                 },
                 "region": {
                   "startLine": 194,
@@ -21759,7 +21794,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTestEnhancedThemeProvider.tsx",
-                  "index": 899
+                  "index": 906
                 },
                 "region": {
                   "startLine": 22,
@@ -21786,7 +21821,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTestEnhancedThemeProvider.tsx",
-                  "index": 899
+                  "index": 906
                 },
                 "region": {
                   "startLine": 91,
@@ -21813,7 +21848,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/IControlsTestState.ts",
-                  "index": 901
+                  "index": 908
                 },
                 "region": {
                   "startLine": 11,
@@ -21843,7 +21878,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/IControlsTestState.ts",
-                  "index": 901
+                  "index": 908
                 },
                 "region": {
                   "startLine": 13,
@@ -21873,7 +21908,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/IControlsTestState.ts",
-                  "index": 901
+                  "index": 908
                 },
                 "region": {
                   "startLine": 29,
@@ -21903,7 +21938,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestControl.tsx",
-                  "index": 906
+                  "index": 913
                 },
                 "region": {
                   "startLine": 8,
@@ -21930,7 +21965,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestControl.tsx",
-                  "index": 906
+                  "index": 913
                 },
                 "region": {
                   "startLine": 48,
@@ -21957,7 +21992,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestControl.tsx",
-                  "index": 906
+                  "index": 913
                 },
                 "region": {
                   "startLine": 54,
@@ -21984,7 +22019,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestControl.tsx",
-                  "index": 906
+                  "index": 913
                 },
                 "region": {
                   "startLine": 62,
@@ -22011,7 +22046,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestControl.tsx",
-                  "index": 906
+                  "index": 913
                 },
                 "region": {
                   "startLine": 62,
@@ -22038,7 +22073,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 166,
@@ -22066,7 +22101,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 180,
@@ -22094,7 +22129,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 181,
@@ -22122,7 +22157,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 183,
@@ -22150,7 +22185,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 185,
@@ -22178,7 +22213,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 187,
@@ -22206,7 +22241,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 189,
@@ -22234,7 +22269,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 191,
@@ -22262,7 +22297,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 193,
@@ -22290,7 +22325,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 195,
@@ -22318,7 +22353,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 196,
@@ -22346,7 +22381,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 198,
@@ -22374,7 +22409,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 200,
@@ -22402,7 +22437,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 202,
@@ -22430,7 +22465,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 204,
@@ -22458,7 +22493,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 205,
@@ -22486,7 +22521,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 206,
@@ -22514,7 +22549,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 207,
@@ -22542,7 +22577,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 209,
@@ -22570,7 +22605,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 211,
@@ -22598,7 +22633,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 213,
@@ -22626,7 +22661,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 214,
@@ -22654,7 +22689,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 215,
@@ -22682,7 +22717,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 216,
@@ -22710,7 +22745,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 217,
@@ -22738,7 +22773,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 218,
@@ -22766,7 +22801,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 220,
@@ -22794,7 +22829,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 222,
@@ -22822,7 +22857,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 224,
@@ -22850,7 +22885,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 226,
@@ -22878,7 +22913,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 228,
@@ -22906,7 +22941,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 230,
@@ -22934,7 +22969,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 232,
@@ -22962,7 +22997,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 234,
@@ -22990,7 +23025,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 236,
@@ -23018,7 +23053,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 237,
@@ -23046,7 +23081,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 238,
@@ -23074,7 +23109,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 239,
@@ -23102,7 +23137,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 241,
@@ -23130,7 +23165,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 243,
@@ -23158,7 +23193,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 244,
@@ -23186,7 +23221,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 245,
@@ -23214,7 +23249,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 246,
@@ -23242,7 +23277,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 247,
@@ -23270,7 +23305,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 248,
@@ -23298,7 +23333,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 250,
@@ -23326,7 +23361,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 252,
@@ -23354,7 +23389,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 292,
@@ -23382,7 +23417,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 294,
@@ -23410,7 +23445,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 296,
@@ -23438,7 +23473,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 298,
@@ -23466,7 +23501,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 300,
@@ -23494,12 +23529,40 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
+                },
+                "region": {
+                  "startLine": 301,
+                  "startColumn": 32,
+                  "endLine": 301,
+                  "endColumn": 56,
+                  "snippet": {
+                    "text": "import('../../../Toast')"
+                  }
+                }
+              }
+            }
+          ],
+          "ruleId": "@rushstack/import-requires-chunk-name",
+          "ruleIndex": 17,
+          "suppressions": []
+        },
+        {
+          "level": "warning",
+          "message": {
+            "text": "Usage of \"import(...)\" for code splitting requires a /* webpackChunkName: '...' */ comment"
+          },
+          "locations": [
+            {
+              "physicalLocation": {
+                "artifactLocation": {
+                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 302,
+                  "startLine": 303,
                   "startColumn": 35,
-                  "endLine": 302,
+                  "endLine": 303,
                   "endColumn": 62,
                   "snippet": {
                     "text": "import('../../../RichText')"
@@ -23522,12 +23585,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 303,
+                  "startLine": 304,
                   "startColumn": 38,
-                  "endLine": 303,
+                  "endLine": 304,
                   "endColumn": 68,
                   "snippet": {
                     "text": "import('../../../ShareDialog')"
@@ -23550,12 +23613,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 305,
+                  "startLine": 306,
                   "startColumn": 49,
-                  "endLine": 305,
+                  "endLine": 306,
                   "endColumn": 90,
                   "snippet": {
                     "text": "import('../../../SecurityTrimmedControl')"
@@ -23578,12 +23641,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 307,
+                  "startLine": 308,
                   "startColumn": 41,
-                  "endLine": 307,
+                  "endLine": 308,
                   "endColumn": 74,
                   "snippet": {
                     "text": "import('../../../SiteBreadcrumb')"
@@ -23606,12 +23669,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 309,
+                  "startLine": 310,
                   "startColumn": 41,
-                  "endLine": 309,
+                  "endLine": 310,
                   "endColumn": 74,
                   "snippet": {
                     "text": "import('../../../TaxonomyPicker')"
@@ -23634,12 +23697,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 311,
+                  "startLine": 312,
                   "startColumn": 44,
-                  "endLine": 311,
+                  "endLine": 312,
                   "endColumn": 80,
                   "snippet": {
                     "text": "import('../../../TeamChannelPicker')"
@@ -23662,12 +23725,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 312,
+                  "startLine": 313,
                   "startColumn": 37,
-                  "endLine": 312,
+                  "endLine": 313,
                   "endColumn": 66,
                   "snippet": {
                     "text": "import('../../../TeamPicker')"
@@ -23690,12 +23753,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 313,
+                  "startLine": 314,
                   "startColumn": 44,
-                  "endLine": 313,
+                  "endLine": 314,
                   "endColumn": 80,
                   "snippet": {
                     "text": "import('../../../TermSetNavigation')"
@@ -23718,12 +23781,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 314,
+                  "startLine": 315,
                   "startColumn": 39,
-                  "endLine": 314,
+                  "endLine": 315,
                   "endColumn": 70,
                   "snippet": {
                     "text": "import('../../../WebPartTitle')"
@@ -23746,12 +23809,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 316,
+                  "startLine": 317,
                   "startColumn": 38,
-                  "endLine": 316,
+                  "endLine": 317,
                   "endColumn": 61,
                   "snippet": {
                     "text": "import('./TestControl')"
@@ -23774,12 +23837,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 318,
+                  "startLine": 319,
                   "startColumn": 37,
-                  "endLine": 318,
+                  "endLine": 319,
                   "endColumn": 66,
                   "snippet": {
                     "text": "import('../../../UserPicker')"
@@ -23802,12 +23865,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 324,
+                  "startLine": 325,
                   "startColumn": 23,
-                  "endLine": 324,
+                  "endLine": 325,
                   "endColumn": 26,
                   "snippet": {
                     "text": "any"
@@ -23830,12 +23893,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 482,
+                  "startLine": 483,
                   "startColumn": 3,
-                  "endLine": 482,
+                  "endLine": 483,
                   "endColumn": 31,
                   "snippet": {
                     "text": "private onSelectedChannel = "
@@ -23858,12 +23921,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 765,
+                  "startLine": 766,
                   "startColumn": 3,
-                  "endLine": 765,
+                  "endLine": 766,
                   "endColumn": 33,
                   "snippet": {
                     "text": "public async componentDidMount"
@@ -23886,12 +23949,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 771,
+                  "startLine": 772,
                   "startColumn": 42,
-                  "endLine": 771,
+                  "endLine": 772,
                   "endColumn": 45,
                   "snippet": {
                     "text": "any"
@@ -23914,12 +23977,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 792,
+                  "startLine": 793,
                   "startColumn": 121,
-                  "endLine": 792,
+                  "endLine": 793,
                   "endColumn": 124,
                   "snippet": {
                     "text": "any"
@@ -23942,12 +24005,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 799,
+                  "startLine": 800,
                   "startColumn": 18,
-                  "endLine": 799,
+                  "endLine": 800,
                   "endColumn": 23,
                   "snippet": {
                     "text": "error"
@@ -23970,12 +24033,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 823,
+                  "startLine": 824,
                   "startColumn": 3,
-                  "endLine": 823,
+                  "endLine": 824,
                   "endColumn": 23,
                   "snippet": {
                     "text": "private _onConfigure"
@@ -23998,12 +24061,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 831,
+                  "startLine": 832,
                   "startColumn": 3,
-                  "endLine": 831,
+                  "endLine": 832,
                   "endColumn": 24,
                   "snippet": {
                     "text": "private _getSelection"
@@ -24026,12 +24089,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 831,
+                  "startLine": 832,
                   "startColumn": 32,
-                  "endLine": 831,
+                  "endLine": 832,
                   "endColumn": 35,
                   "snippet": {
                     "text": "any"
@@ -24054,12 +24117,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 840,
+                  "startLine": 841,
                   "startColumn": 3,
-                  "endLine": 840,
+                  "endLine": 841,
                   "endColumn": 27,
                   "snippet": {
                     "text": "private _getDropFiles = "
@@ -24082,12 +24145,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 865,
+                  "startLine": 866,
                   "startColumn": 3,
-                  "endLine": 865,
+                  "endLine": 866,
                   "endColumn": 32,
                   "snippet": {
                     "text": "private _onTaxPickerChange = "
@@ -24110,12 +24173,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 877,
+                  "startLine": 878,
                   "startColumn": 3,
-                  "endLine": 877,
+                  "endLine": 878,
                   "endColumn": 37,
                   "snippet": {
                     "text": "private _onDateTimePickerChange = "
@@ -24138,12 +24201,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 886,
+                  "startLine": 887,
                   "startColumn": 3,
-                  "endLine": 886,
+                  "endLine": 887,
                   "endColumn": 32,
                   "snippet": {
                     "text": "private onListPickerChange = "
@@ -24166,12 +24229,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 897,
+                  "startLine": 898,
                   "startColumn": 3,
-                  "endLine": 897,
+                  "endLine": 898,
                   "endColumn": 32,
                   "snippet": {
                     "text": "private onViewPickerChange = "
@@ -24194,12 +24257,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 904,
+                  "startLine": 905,
                   "startColumn": 3,
-                  "endLine": 904,
+                  "endLine": 905,
                   "endColumn": 24,
                   "snippet": {
                     "text": "private deleteItem = "
@@ -24222,12 +24285,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 918,
+                  "startLine": 919,
                   "startColumn": 3,
-                  "endLine": 918,
+                  "endLine": 919,
                   "endColumn": 35,
                   "snippet": {
                     "text": "private _getPeoplePickerItems = "
@@ -24250,12 +24313,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 918,
+                  "startLine": 919,
                   "startColumn": 43,
-                  "endLine": 918,
+                  "endLine": 919,
                   "endColumn": 46,
                   "snippet": {
                     "text": "any"
@@ -24278,12 +24341,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 933,
+                  "startLine": 934,
                   "startColumn": 3,
-                  "endLine": 933,
+                  "endLine": 934,
                   "endColumn": 37,
                   "snippet": {
                     "text": "private listItemPickerDataSelected"
@@ -24306,12 +24369,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 933,
+                  "startLine": 934,
                   "startColumn": 44,
-                  "endLine": 933,
+                  "endLine": 934,
                   "endColumn": 47,
                   "snippet": {
                     "text": "any"
@@ -24334,12 +24397,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 937,
+                  "startLine": 938,
                   "startColumn": 3,
-                  "endLine": 937,
+                  "endLine": 938,
                   "endColumn": 25,
                   "snippet": {
                     "text": "private _startProgress"
@@ -24362,12 +24425,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 998,
+                  "startLine": 999,
                   "startColumn": 3,
-                  "endLine": 998,
+                  "endLine": 999,
                   "endColumn": 37,
                   "snippet": {
                     "text": "private _onFilePickerSave = async "
@@ -24390,12 +24453,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1011,
+                  "startLine": 1012,
                   "startColumn": 3,
-                  "endLine": 1011,
+                  "endLine": 1012,
                   "endColumn": 44,
                   "snippet": {
                     "text": "private onToolbarSelectedFiltersChange = "
@@ -24418,12 +24481,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1017,
+                  "startLine": 1018,
                   "startColumn": 3,
-                  "endLine": 1017,
+                  "endLine": 1018,
                   "endColumn": 33,
                   "snippet": {
                     "text": "private toggleToolbarFilter = "
@@ -24446,12 +24509,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1037,
+                  "startLine": 1038,
                   "startColumn": 3,
-                  "endLine": 1037,
+                  "endLine": 1038,
                   "endColumn": 23,
                   "snippet": {
                     "text": "private addFilter = "
@@ -24474,12 +24537,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1045,
+                  "startLine": 1046,
                   "startColumn": 3,
-                  "endLine": 1045,
+                  "endLine": 1046,
                   "endColumn": 28,
                   "snippet": {
                     "text": "private onClearFilters = "
@@ -24502,12 +24565,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1050,
+                  "startLine": 1051,
                   "startColumn": 3,
-                  "endLine": 1050,
+                  "endLine": 1051,
                   "endColumn": 28,
                   "snippet": {
                     "text": "private onRemoveFilter = "
@@ -24530,12 +24593,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1067,
+                  "startLine": 1068,
                   "startColumn": 38,
-                  "endLine": 1067,
+                  "endLine": 1068,
                   "endColumn": 41,
                   "snippet": {
                     "text": "any"
@@ -24558,12 +24621,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1118,
+                  "startLine": 1119,
                   "startColumn": 32,
-                  "endLine": 1118,
+                  "endLine": 1119,
                   "endColumn": 39,
                   "snippet": {
                     "text": "\"Title\""
@@ -24586,12 +24649,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1163,
+                  "startLine": 1164,
                   "startColumn": 24,
-                  "endLine": 1163,
+                  "endLine": 1164,
                   "endColumn": 27,
                   "snippet": {
                     "text": "any"
@@ -24614,12 +24677,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1164,
+                  "startLine": 1165,
                   "startColumn": 32,
-                  "endLine": 1164,
+                  "endLine": 1165,
                   "endColumn": 51,
                   "snippet": {
                     "text": "'ServerRelativeUrl'"
@@ -24642,12 +24705,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1188,
+                  "startLine": 1189,
                   "startColumn": 34,
-                  "endLine": 1188,
+                  "endLine": 1189,
                   "endColumn": 37,
                   "snippet": {
                     "text": "any"
@@ -24670,12 +24733,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1276,
+                  "startLine": 1277,
                   "startColumn": 60,
-                  "endLine": 1276,
+                  "endLine": 1277,
                   "endColumn": 68,
                   "snippet": {
                     "text": "itemdata"
@@ -24698,12 +24761,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1383,
+                  "startLine": 1384,
                   "startColumn": 23,
-                  "endLine": 1383,
+                  "endLine": 1384,
                   "endColumn": 34,
                   "snippet": {
                     "text": "<TextField>"
@@ -24726,12 +24789,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1713,
+                  "startLine": 1714,
                   "startColumn": 51,
-                  "endLine": 1713,
+                  "endLine": 1714,
                   "endColumn": 54,
                   "snippet": {
                     "text": "any"
@@ -24754,12 +24817,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 1713,
+                  "startLine": 1714,
                   "startColumn": 56,
-                  "endLine": 1713,
+                  "endLine": 1714,
                   "endColumn": 67,
                   "snippet": {
                     "text": "\"loginName\""
@@ -24775,22 +24838,22 @@
         {
           "level": "warning",
           "message": {
-            "text": "File has too many lines (3245). Maximum allowed is 2000."
+            "text": "File has too many lines (3261). Maximum allowed is 2000."
           },
           "locations": [
             {
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
                   "startLine": 2001,
                   "startColumn": 1,
-                  "endLine": 3246,
+                  "endLine": 3262,
                   "endColumn": 1,
                   "snippet": {
-                    "text": "            </div>\n          }\n          {controlVisibility.ListItemPicker &&\n            <div id=\"ListItemPickerDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">List Item picker list data tester:\n\n                <ListItemPicker listId={'b1416fca-dc77-4198-a082-62a7657dcfa9'}\n                  columnInternalName=\"DateAndTime\"\n                  keyColumnInternalName=\"Id\"\n                  // filter={\"Title eq 'SPFx'\"}\n                  orderBy={'Title desc'}\n                  itemLimit={5}\n                  context={this.props.context}\n                  placeholder={'Select list items'}\n                  onSelectedItem={this.listItemPickerDataSelected} />\n\n              </div>\n            </div>\n          }\n          {controlVisibility.ListItemComments &&\n            <div id=\"ListItemCommentsDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">List Item Comments Tester\n                <ListItemComments webUrl='https://contoso.sharepoint.com/sites/ThePerspective'\n                  listId='6f151a33-a7af-4fae-b8c4-f2f04cbc690f'\n                  itemId={\"1\"}\n                  serviceScope={this.props.context.serviceScope}\n                  numberCommentsPerPage={10}\n                  label=\"ListItem Comments\"\n                />\n              </div>\n            </div>\n          }\n          {controlVisibility.ViewPicker &&\n            <div id=\"ViewPickerDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">View picker tester:\n                <ViewPicker context={this.props.context}\n                  label=\"Select view(s)\"\n                  listId={\"9f3908cd-1e88-4ab3-ac42-08efbbd64ec9\"}\n                  placeholder={'Select list view(s)'}\n                  orderBy={1}\n                  multiSelect={true}\n                  onSelectionChanged={this.onViewPickerChange} />\n              </div>\n            </div>\n          }\n          {controlVisibility.FieldPicker &&\n            <div id=\"FieldPickerDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">Field picker tester:\n                <FieldPicker\n                  context={this.props.context}\n                  label={'Select a field'}\n                  listId={this.state.selectedList}\n                  onSelectionChanged={(fields) => {\n                    console.log(fields);\n                  }}\n                />\n              </div>\n            </div>\n          }\n          {controlVisibility.IconPicker &&\n            <div id=\"IconPickerDiv\" className={styles.container}>\n              <div>Icon Picker</div>\n              <div>\n                <IconPicker\n                  renderOption=\"panel\"\n                  onSave={(value) => { console.log(value); }}\n                  currentIcon={'Warning'}\n                  buttonLabel=\"Icon Picker\" />\n              </div>\n              <IconPicker buttonLabel={'Icon'}\n                onChange={(iconName: string) => { console.log(iconName); }}\n                onCancel={() => { console.log(\"Panel closed\"); }}\n                onSave={(iconName: string) => { console.log(iconName); }} />\n            </div>\n          }\n          {controlVisibility.ComboBoxListItemPicker &&\n            <div id=\"ComboBoxListItemPickerDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">ComboBoxListItemPicker:\n\n                <ComboBoxListItemPicker listId={this.state.comboBoxListItemPickerListId}\n                  columnInternalName='Title'\n                  keyColumnInternalName='Id'\n                  orderBy='Title desc'\n                  multiSelect={true}\n                  onSelectedItem={(data) => {\n                    console.log(`Item(s):`, data);\n                  }}\n                  defaultSelectedItems={this.state.comboBoxListItemPickerIds}\n                  webUrl={this.props.context.pageContext.web.absoluteUrl}\n                  spHttpClient={this.props.context.spHttpClient} />\n\n                <PrimaryButton text=\"Change List\" onClick={() => {\n                  this.setState({\n                    comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b'\n                  });\n                }} />\n                <PrimaryButton text=\"Change default items\" onClick={() => {\n                  this.setState({\n                    comboBoxListItemPickerIds: [{ Id: 2, Title: '222' }]\n                  });\n                }} />\n\n              </div>\n            </div>\n          }\n          {controlVisibility.IFrameDialog &&\n            <div id=\"IFrameDialogDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">iframe dialog tester:\n                <PrimaryButton\n                  text=\"Open iframe Dialog\"\n                  onClick={() => { this.setState({ iFrameDialogOpened: true }); }} />\n                <IFrameDialog\n                  url={iframeUrl}\n                  iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n                  hidden={!this.state.iFrameDialogOpened}\n                  onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}\n                  modalProps={{\n                    isBlocking: true,\n                    styles: {\n                      root: {\n                        backgroundColor: '#00ff00'\n                      },\n                      main: {\n                        backgroundColor: '#ff0000'\n                      }\n                    }\n                  }}\n                  dialogContentProps={{\n                    type: DialogType.close,\n                    showCloseButton: true\n                  }}\n                  width={'570px'}\n                  height={'315px'} />\n              </div>\n            </div>\n          }\n          {controlVisibility.IFramePanel &&\n            <div id=\"IFramePanelDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">iframe Panel tester:\n                <PrimaryButton\n                  text=\"Open iframe Panel\"\n                  onClick={() => { this.setState({ iFramePanelOpened: true }); }} />\n                <IFramePanel\n                  url={iframeUrl}\n                  type={PanelType.medium}\n                  //  height=\"300px\"\n                  headerText=\"iframe panel title\"\n                  closeButtonAriaLabel=\"Close\"\n                  isOpen={this.state.iFramePanelOpened}\n                  onDismiss={() => { this.setState({ iFramePanelOpened: false }); }}\n                  iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n                />\n              </div>\n            </div>\n          }\n          {controlVisibility.ImagePicker &&\n            <div id=\"ImagePickerDiv\" className={styles.container}>\n              <ImagePicker\n                context={this.props.context}\n                onFileSelected={(file) => { console.log(file); this.setState({ selectedUrlImagePicker: file.fileAbsoluteUrl }); }}\n                onDeleteFile={() => { console.log('file deleted'); }}\n                selectedFileUrl={this.state.selectedUrlImagePicker}\n              />\n            </div>\n          }\n          {controlVisibility.FolderPicker &&\n            <div id=\"FolderPickerDiv\" className={styles.container}>\n              <FolderPicker context={this.props.context}\n                rootFolder={{\n                  Name: 'Documents',\n                  ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n                }}\n                onSelect={this._onFolderSelect}\n                label='Folder Picker'\n                required={true}\n                canCreateFolders={true}\n              ></FolderPicker>\n            </div>\n          }\n          <div id=\"FilterBarDiv\" className={styles.container} hidden={!controlVisibility.FilterBar}>\n            <FilterBar items={this.state.filters} inlineItemCount={3} onClearFilters={this.onClearFilters} onRemoveFilter={this.onRemoveFilter} />\n            <button onClick={this.addFilter}>Add new filter</button>\n          </div>\n          {controlVisibility.Carousel &&\n\n            <div id=\"CarouselDiv\" className={styles.container}>\n              <div>\n                <h3>Carousel with fixed elements:</h3>\n                <Carousel\n                  buttonsLocation={CarouselButtonsLocation.top}\n                  buttonsDisplay={CarouselButtonsDisplay.block}\n\n                  contentContainerStyles={styles.carouselContent}\n                  containerButtonsStyles={styles.carouselButtonsContainer}\n\n                  isInfinite={true}\n\n                  element={this.carouselElements}\n                  onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n                />\n              </div>\n              <div>\n                <h3>Carousel with CarouselImage elements:</h3>\n                <Carousel\n                  buttonsLocation={CarouselButtonsLocation.center}\n                  buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n                  contentContainerStyles={styles.carouselImageContent}\n                  //containerButtonsStyles={styles.carouselButtonsContainer}\n\n                  isInfinite={true}\n                  indicatorShape={CarouselIndicatorShape.circle}\n                  indicatorsDisplay={CarouselIndicatorsDisplay.block}\n                  pauseOnHover={true}\n\n                  element={[\n                    {\n                      imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',\n                      title: 'Colosseum',\n                      description: 'This is Colosseum',\n                      url: 'https://en.wikipedia.org/wiki/Colosseum',\n                      showDetailsOnHover: true,\n                      imageFit: ImageFit.cover\n                    },\n                    {\n                      imageSrc: 'https://www.telegraph.co.uk/content/dam/science/2018/06/20/stonehenge-2326750_1920_trans%2B%2BZgEkZX3M936N5BQK4Va8RWtT0gK_6EfZT336f62EI5U.jpg',\n                      title: 'Stonehenge',\n                      description: 'This is Stonehendle',\n                      url: 'https://en.wikipedia.org/wiki/Stonehenge',\n                      showDetailsOnHover: true,\n                      imageFit: ImageFit.cover\n                    },\n                    {\n                      imageSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/2560px-All_Gizah_Pyramids.jpg',\n                      title: 'Pyramids of Giza',\n                      description: 'This are Pyramids of Giza (Egypt)',\n                      url: 'https://en.wikipedia.org/wiki/Egyptian_pyramids',\n                      showDetailsOnHover: true,\n                      imageFit: ImageFit.cover\n                    }\n                  ]}\n                  onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}\n                  onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n                  rootStyles={mergeStyles({\n                    backgroundColor: '#C3C3C3'\n                  })}\n                />\n              </div>\n              <div>\n                <h3>Carousel with triggerPageElement:</h3>\n                <Carousel\n                  buttonsLocation={CarouselButtonsLocation.bottom}\n                  buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n                  contentContainerStyles={styles.carouselContent}\n\n                  canMoveNext={this.state.canMoveNext}\n                  canMovePrev={this.state.canMovePrev}\n                  triggerPageEvent={this.triggerNextElement}\n                  element={this.state.currentCarouselElement}\n                />\n              </div>\n              <div>\n                <h3>Carousel with minimal configuration:</h3>\n                <Carousel\n                  element={this.carouselElements}\n                  contentHeight={200}\n                />\n              </div>\n            </div>\n          }\n          {controlVisibility.SiteBreadcrumb &&\n            <div id=\"SiteBreadcrumbDiv\" className={styles.container}>\n              <div className={styles.siteBreadcrumb}>\n                <SiteBreadcrumb context={this.props.context} />\n              </div>\n            </div>\n          }\n          {controlVisibility.FilePicker &&\n            <div id=\"FilePickerDiv\" className={styles.container}>\n              <div>\n                <h3>File Picker</h3>\n                <TextField\n                  label=\"Default SiteFileTab Folder\"\n                  onChange={debounce((ev, newVal) => { this.setState({ filePickerDefaultFolderAbsolutePath: newVal }); }, 500)}\n                  styles={{ root: { marginBottom: 10 } }}\n                />\n                <FilePicker\n                  bingAPIKey=\"<BING API KEY>\"\n                  //webAbsoluteUrl=\"https://023xn.sharepoint.com/sites/test1\"\n                  //defaultFolderAbsolutePath={\"https://aterentiev.sharepoint.com/sites/SPFxinTeamsDemo/Shared%20Documents/General\"}\n                  //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n                  buttonLabel=\"Add File\"\n                  buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}\n                  onSave={this._onFilePickerSave}\n                  onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n                  context={this.props.context}\n                  hideRecentTab={false}\n                  includePageLibraries={true}\n                  checkIfFileExists={false}\n                />\n                {\n                  this.state.filePickerResult &&\n                  <div>\n                    <div>\n                      FileName: {this.state.filePickerResult[0].fileName}\n                    </div>\n                    <div>\n                      File size: {GeneralHelper.formatBytes(this.state.filePickerResult[0].fileSize, 2)}\n                    </div>\n                  </div>\n                }\n              </div>\n\n              <div>\n                <h3>File Picker with target folder browser</h3>\n                <FilePicker\n                  bingAPIKey=\"<BING API KEY>\"\n                  //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n                  buttonLabel=\"Upload image\"\n                  buttonIcon=\"FileImage\"\n                  onSave={this._onFilePickerSave}\n                  onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n                  context={this.props.context}\n                  hideRecentTab={false}\n                  renderCustomUploadTabContent={() => (\n                    <FolderExplorer context={this.props.context}\n                      rootFolder={this.rootFolder}\n                      defaultFolder={this.rootFolder}\n                      onSelect={this._onFolderSelect}\n                      canCreateFolders={true}\n                    />)}\n                />\n              </div>\n              <p><a href=\"javascript:;\" onClick={this.deleteItem}>Deletes second item</a></p>\n            </div>\n          }\n          {controlVisibility.Progress &&\n            <div id=\"ProgressDiv\" className={styles.container}>\n              <Progress title={'Progress Test'}\n                showOverallProgress={true}\n                showIndeterminateOverallProgress={false}\n                hideNotStartedActions={false}\n                actions={this.state.progressActions}\n                currentActionIndex={this.state.currentProgressActionIndex}\n                longRunningText={'This operation takes longer than expected'}\n                longRunningTextDisplayDelay={7000}\n                height={'350px'}\n                inProgressIconName={'ChromeBackMirrored'} />\n              <PrimaryButton text={'Start Progress'} onClick={this._startProgress} />\n            </div>\n          }\n          {controlVisibility.ProgressStepsIndicator &&\n            <div id=\"ProgressStepsIndicatorDiv\" className={styles.container}>\n              <ProgressStepsIndicator steps={this.progressSteps} currentStep={0} themeVariant={this.props.themeVariant} />\n            </div>\n          }\n          {controlVisibility.GridLayout &&\n            <div id=\"GridLayoutDiv\" className={styles.container}>\n              <div className=\"ms-font-l\">Grid Layout</div>\n              <GridLayout\n                ariaLabel={\"List of content, use right and left arrow keys to navigate, arrow down to access details.\"}\n                items={sampleGridData}\n                onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}\n                itemMinWidth={250}\n                itemMaxWidth={600}\n                itemPadding={60}\n                //compactThreshold={220}\n                //rowsPerPage={1}\n                />\n            </div>\n          }\n          {controlVisibility.HoverReactionsBar &&\n            <div ref={this.divRefAddReaction} id=\"HoverReactionsBarDiv\" className={styles.container}>\n              <PrimaryButton text=\"Open HoverReactionsBar\" onClick={() => { this.setState({ isOpenHoverReactionBar: true }); }} />\n              <HoverReactionsBar\n                isOpen={this.state.isOpenHoverReactionBar}\n                onSelect={(emoji, emojiInfo) => { console.log(emoji); }}\n                onDismiss={(): void => {\n                  this.setState({ isOpenHoverReactionBar: false });\n                }}\n                target={this.divRefAddReaction.current as HTMLDivElement} />\n            </div>\n          }\n          {controlVisibility.FolderExplorer &&\n            <div id=\"FolderExplorerDiv\" className={styles.container}>\n              <FolderExplorer\n                context={this.props.context}\n                rootFolder={{\n                  Name: 'Documents',\n                  ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n                }}\n                defaultFolder={{\n                  Name: 'Documents',\n                  ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n                }}\n                onSelect={this._onFolderSelect}\n                canCreateFolders={true}\n                orderby='Name' //'ListItemAllFields/Created'\n                orderAscending={true}\n                showFiles={true}\n                onFileClick={this._onFileClick}\n              />\n            </div>\n          }\n          {controlVisibility.TreeView &&\n            <div id=\"TreeViewDiv\" className={styles.container}>\n              <h3>Tree View</h3>\n              <TreeView items={this.treeitems}\n                defaultExpanded={false}\n                selectionMode={TreeViewSelectionMode.Multiple}\n                showCheckboxes={true}\n                treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}\n                defaultSelectedKeys={this.state.treeViewSelectedKeys}\n                onExpandCollapse={this.onExpandCollapseTree}\n                onSelect={this.onItemSelected}\n                defaultExpandedChildren={true}\n                theme={this.props.themeVariant}\n              //expandToSelected={true}\n              // onRenderItem={this.renderCustomTreeItem}\n              />\n              <PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>\n            </div>\n          }\n          {controlVisibility.Pagination &&\n            <div id=\"PaginationDiv\" className={styles.container}>\n              <Pagination\n                currentPage={3}\n                onChange={(page) => (this._getPage(page))}\n                totalPages={this.props.paginationTotalPages || 13}\n              //limiter={3}\n              // hideFirstPageJump\n              //hideLastPageJump\n              //limiterIcon={\"NumberedListText\"}\n              />\n            </div>\n          }\n          {controlVisibility.FieldCollectionData &&\n            <div id=\"FieldCollectionDataDiv\" className={styles.container}>\n              <FieldCollectionData\n                key={\"FieldCollectionData\"}\n                label={\"Fields Collection\"}\n                itemsPerPage={3}\n                manageBtnLabel={\"Manage\"}\n                onChanged={(value) => { console.log(value); }}\n                panelHeader={\"Manage values\"}\n                enableSorting={true}\n                panelProps={{ type: PanelType.custom, customWidth: \"98vw\" }}\n                fields={[\n                  { id: \"Field1\", title: \"String field\", type: CustomCollectionFieldType.string, required: true },\n                  { id: \"Field2\", title: \"Number field\", type: CustomCollectionFieldType.number },\n                  { id: \"Field3\", title: \"URL field\", type: CustomCollectionFieldType.url },\n                  { id: \"Field4\", title: \"Boolean field\", type: CustomCollectionFieldType.boolean },\n                  {\n                    id: \"Field5\", title: \"People picker\", type: CustomCollectionFieldType.peoplepicker, required: true,\n                    minimumUsers: 2, minimumUsersMessage: \"2 Users is the minimum\", maximumUsers: 3,\n                  },\n                  {\n                    id: \"Field6\", title: \"Combo Single\", type: CustomCollectionFieldType.combobox, required: true,\n                    multiSelect: false, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n                  },\n                  {\n                    id: \"Field7\", title: \"Combo Multi\", type: CustomCollectionFieldType.combobox,\n                    allowFreeform: true, multiSelect: true, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n                  },\n                  { id: \"Field8\", title: \"Date field\", type: CustomCollectionFieldType.date, placeholder: \"Select a date\" }\n                ]}\n                value={this.getRandomCollectionFieldData()}\n\n                // value = {null}\n                context={this.props.context as any} //error when this is omitted and people picker is used\n                usePanel={true}\n                noDataMessage=\"No data is selected\" //overrides the default message\n              />\n            </div>\n          }\n          {controlVisibility.ContentTypePicker &&\n            <ContentTypePicker\n              context={this.props.context}\n            // group=\"Content Feedback\"\n            // includeHidden={false}\n            // includeReadOnly={false}\n            // label=\"Select your content type\"\n            // multiSelect={false}\n            // orderBy={ContentTypesOrderBy.Name}\n            // listId=\"00000000-0000-0000-0000-000000000000\"\n            // onSelectionChanged={this.onContentTypePickerChanged}\n            // showBlankOption={true}\n            />\n          }\n          {controlVisibility.Dashboard &&\n            <div id=\"DashboardDiv\" className={styles.container}>\n              <Dashboard\n                widgets={[{\n                  title: \"Card 1\",\n                  desc: \"Last updated Monday, April 4 at 11:15 AM (PT)\",\n                  widgetActionGroup: calloutItemsExample,\n                  size: WidgetSize.Quadruple,\n                  body: [\n                    {\n                      id: \"t1\",\n                      title: \"Tab 1\",\n                      content: (\n                        <Flex\n                          vAlign=\"center\"\n                          hAlign=\"center\"\n                          styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n                        >\n                          <NorthstarText size=\"large\" weight=\"semibold\">\n                            Content #1\n                          </NorthstarText>\n                        </Flex>\n                      ),\n                    },\n                    {\n                      id: \"t2\",\n                      title: \"Tab 2\",\n                      content: (\n                        <Flex\n                          vAlign=\"center\"\n                          hAlign=\"center\"\n                          styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n                        >\n                          <NorthstarText size=\"large\" weight=\"semibold\">\n                            Content #2\n                          </NorthstarText>\n                        </Flex>\n                      ),\n                    },\n                    {\n                      id: \"t3\",\n                      title: \"Tab 3\",\n                      content: (\n                        <Flex\n                          vAlign=\"center\"\n                          hAlign=\"center\"\n                          styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n                        >\n                          <NorthstarText size=\"large\" weight=\"semibold\">\n                            Content #3\n                          </NorthstarText>\n                        </Flex>\n                      ),\n                    },\n                  ],\n                  link: linkExample,\n                },\n                {\n                  title: \"Card 2\",\n                  size: WidgetSize.Single,\n                  link: customizedLinkExample,\n                  rowSpan: 2\n                },\n                {\n                  title: \"Card 3\",\n                  size: WidgetSize.Double,\n                  link: linkExample,\n                },\n                {\n                  title: \"Card 4\",\n                  size: WidgetSize.Single,\n                  link: customizedLinkExample,\n                },\n                {\n                  title: \"Card 5\",\n                  size: WidgetSize.Single,\n                  link: linkExample,\n                },\n                {\n                  title: \"Card 6\",\n                  size: WidgetSize.Single,\n                  link: linkExample,\n                }]} />\n            </div>\n          }\n          {controlVisibility.Toolbar &&\n            <div id=\"ToolbarDiv\" className={styles.container}>\n              <div>\n                <h3>Uncontrolled toolbar</h3>\n                <Toolbar actionGroups={{\n                  'group1': {\n                    'action1': {\n                      title: 'Edit',\n                      iconName: 'Edit',\n                      onClick: () => { console.log('Edit action click'); }\n                    },\n                    'action2': {\n                      title: 'New',\n                      iconName: 'Add',\n                      onClick: () => { console.log('New action click'); }\n                    }\n                  }\n                }}\n                  filters={toolbarFilters}\n                  onSelectedFiltersChange={this.onToolbarSelectedFiltersChange}\n                />\n              </div>\n              <div>\n                <h3>Controlled toolbar</h3>\n                <Toolbar actionGroups={{\n                  'group1': {\n                    'action1': {\n                      title: 'Edit',\n                      iconName: 'Edit',\n                      onClick: () => { console.log('Edit action click'); }\n                    },\n                    'action2': {\n                      title: 'New',\n                      iconName: 'Add',\n                      onClick: () => { console.log('New action click'); }\n                    }\n                  }\n                }}\n                  filters={toolbarFilters}\n                  selectedFilterIds={this.state.selectedFilters}\n                  onSelectedFiltersChange={this.onToolbarSelectedFiltersChange} />\n              </div>\n              <div>Selected filter IDs: {this.state.selectedFilters.join(\", \")}</div>\n              <PrimaryButton text='Toggle filter1' onClick={() => this.toggleToolbarFilter(\"filter1\")} />\n              <PrimaryButton text='Toggle filter2' onClick={() => this.toggleToolbarFilter(\"filter2\")} />\n            </div>\n          }\n          {controlVisibility.AnimatedDialog &&\n            <div id=\"AnimatedDialogDiv\" className={styles.container}>\n              <h3>Animated Dialogs</h3>\n\n              {/* Multiple elements added only for demo - can be controlled with fewer elements */}\n\n              <PrimaryButton text='Show animated dialog' onClick={() => { this.setState({ showAnimatedDialog: true }); }} />\n              {/* Normal animated dialog */}\n              <AnimatedDialog\n                hidden={!this.state.showAnimatedDialog}\n                onDismiss={() => { this.setState({ showAnimatedDialog: false }); }}\n                dialogContentProps={animatedDialogContentProps}\n                modalProps={animatedModalProps}\n              >\n                <DialogFooter>\n                  <PrimaryButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"Yes\" />\n                  <DefaultButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"No\" />\n                </DialogFooter>\n              </AnimatedDialog>\n              <br />\n              <br />\n\n              <PrimaryButton text='Show animated dialog with icon' onClick={() => { this.setState({ showCustomisedAnimatedDialog: true }); }} />\n              {/* Animated dialog with icon */}\n              <AnimatedDialog\n                hidden={!this.state.showCustomisedAnimatedDialog}\n                onDismiss={() => { this.setState({ showCustomisedAnimatedDialog: false }); }}\n                dialogContentProps={customizedAnimatedDialogContentProps}\n                modalProps={customizedAnimatedModalProps}\n                dialogAnimationInType='fadeInDown'\n                dialogAnimationOutType='fadeOutDown'\n                iconName='UnknownSolid'\n                iconAnimationType='zoomInDown'\n                showAnimatedDialogFooter={true}\n                okButtonText=\"Yes\"\n                cancelButtonText=\"No\"\n                onOkClick={() => timeout(1500)}\n                onSuccess={() => {\n                  this.setState({ showCustomisedAnimatedDialog: false });\n                  this.setState({ showSuccessDialog: true });\n                }}\n                onError={() => {\n                  this.setState({ showCustomisedAnimatedDialog: false });\n                  this.setState({ showErrorDialog: true });\n                }}>\n                <div className={styles.dialogContent}>\n                  <span>Do you like the animated dialog?</span>\n                </div>\n              </AnimatedDialog>\n\n              {/* Success animated dialog */}\n              <AnimatedDialog\n                hidden={!this.state.showSuccessDialog}\n                onDismiss={() => { this.setState({ showSuccessDialog: false }); }}\n                dialogContentProps={successDialogContentProps}\n                modalProps={customizedAnimatedModalProps}\n                iconName='CompletedSolid'\n              >\n                <div className={styles.dialogContent}><span>Thank you.</span></div>\n                <div className={styles.dialogFooter}>\n                  <PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text=\"OK\" >\n                  </PrimaryButton>\n                </div>\n              </AnimatedDialog>\n\n              {/* Error animated dialog */}\n              <AnimatedDialog\n                hidden={!this.state.showErrorDialog}\n                onDismiss={() => { this.setState({ showErrorDialog: false }); }}\n                dialogContentProps={errorDialogContentProps}\n                modalProps={customizedAnimatedModalProps}\n                iconName='StatusErrorFull'\n              >\n                <div className={styles.dialogContent}><span>Ther was an error.</span></div>\n                <div className={styles.dialogFooter}>\n                  <PrimaryButton onClick={() => { this.setState({ showErrorDialog: false }); }} text=\"OK\" >\n                  </PrimaryButton>\n                </div>\n              </AnimatedDialog>\n            </div>\n          }\n          {controlVisibility.LivePersona &&\n            <div id=\"LivePersonaDiv\" className={styles.container}>\n              <LivePersona upn=\"meganb@contoso.onmicrosoft.com\"\n                template={\n                  <>\n                    <Persona text=\"Megan Bowen\" secondaryText=\"meganb@contoso.onmicrosoft.com\" coinSize={48} />\n                  </>\n                }\n                serviceScope={this.props.context.serviceScope}\n              />\n            </div>\n          }\n          {controlVisibility.LocationPicker &&\n            <div id=\"LocationPickerDiv\" className={styles.container}>\n              <LocationPicker context={this.props.context} label=\"Location\" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + \", \" + locValue.Address.Street); }}></LocationPicker>\n            </div>\n          }\n          {controlVisibility.ModernTaxonomyPicker &&\n            <div id=\"ModernTaxonomyPickerDiv\" className={styles.container}>\n              <ModernTaxonomyPicker\n                allowMultipleSelections={true}\n                termSetId={this.termSetId}\n                panelTitle=\"Panel title\"\n                label={\"Modern Taxonomy Picker\"}\n                context={this.props.context}\n                required={false}\n                disabled={false}\n                customPanelWidth={400}\n              />\n            </div>\n          }\n          {controlVisibility.MonacoEditor &&\n            <div id=\"MonacoEditorDiv\" className={styles.container}>\n              <MonacoEditor value={\"\"}\n                showMiniMap={true}\n                onValueChange={(value, validationErrors) => { console.log(value); console.log(validationErrors); }}\n                language={\"javascript\"} />\n            </div>\n          }\n          {controlVisibility.AdaptiveCardHost &&\n            <div id=\"AdaptiveCardHostDiv\" className={styles.container}>\n              <h3>Adaptive Card Host</h3>\n              <AdaptiveCardHost\n                card={{\n                  \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n                  \"type\": \"AdaptiveCard\",\n                  \"version\": \"1.0\",\n                  \"body\": [\n                    {\n                      \"type\": \"TextBlock\",\n                      \"size\": \"medium\",\n                      \"weight\": \"bolder\",\n                      \"text\": \" ${ParticipantInfoForm.title}\",\n                      \"horizontalAlignment\": \"center\",\n                      \"wrap\": true,\n                      \"style\": \"heading\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Name\",\n                      \"style\": \"text\",\n                      \"id\": \"SimpleVal\",\n                      \"isRequired\": true,\n                      \"errorMessage\": \"Name is required\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Homepage\",\n                      \"style\": \"url\",\n                      \"id\": \"UrlVal\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Email\",\n                      \"style\": \"email\",\n                      \"id\": \"EmailVal\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Phone\",\n                      \"style\": \"tel\",\n                      \"id\": \"TelVal\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Comments\",\n                      \"style\": \"text\",\n                      \"isMultiline\": true,\n                      \"id\": \"MultiLineVal\"\n                    },\n                    {\n                      \"type\": \"Input.Number\",\n                      \"label\": \"Quantity\",\n                      \"min\": -5,\n                      \"max\": 5,\n                      \"value\": 1,\n                      \"id\": \"NumVal\",\n                      \"errorMessage\": \"The quantity must be between -5 and 5\"\n                    },\n                    {\n                      \"type\": \"Input.Date\",\n                      \"label\": \"Due Date\",\n                      \"id\": \"DateVal\",\n                      \"value\": \"2017-09-20\"\n                    },\n                    {\n                      \"type\": \"Input.Time\",\n                      \"label\": \"Start time\",\n                      \"id\": \"TimeVal\",\n                      \"value\": \"16:59\"\n                    },\n                    {\n                      \"type\": \"TextBlock\",\n                      \"size\": \"medium\",\n                      \"weight\": \"bolder\",\n                      \"text\": \"${Survey.title} \",\n                      \"horizontalAlignment\": \"center\",\n                      \"wrap\": true,\n                      \"style\": \"heading\"\n                    },\n                    {\n                      \"type\": \"Input.ChoiceSet\",\n                      \"id\": \"CompactSelectVal\",\n                      \"label\": \"${Survey.questions[0].question}\",\n                      \"style\": \"compact\",\n                      \"value\": \"1\",\n                      \"choices\": [\n                        {\n                          \"$data\": \"${Survey.questions[0].items}\",\n                          \"title\": \"${choice}\",\n                          \"value\": \"${value}\"\n                        }\n                      ]\n                    },\n                    {\n                      \"type\": \"Input.ChoiceSet\",\n                      \"id\": \"SingleSelectVal\",\n                      \"label\": \"${Survey.questions[1].question}\",\n                      \"style\": \"expanded\",\n                      \"value\": \"1\",\n                      \"choices\": [\n                        {\n                          \"$data\": \"${Survey.questions[1].items}\",\n                          \"title\": \"${choice}\",\n                          \"value\": \"${value}\"\n                        }\n                      ]\n                    },\n                    {\n                      \"type\": \"Input.ChoiceSet\",\n                      \"id\": \"MultiSelectVal\",\n                      \"label\": \"${Survey.questions[2].question}\",\n                      \"isMultiSelect\": true,\n                      \"value\": \"1,3\",\n                      \"choices\": [\n                        {\n                          \"$data\": \"${Survey.questions[2].items}\",\n                          \"title\": \"${choice}\",\n                          \"value\": \"${value}\"\n                        }\n                      ]\n                    },\n                    {\n                      \"type\": \"TextBlock\",\n                      \"size\": \"medium\",\n                      \"weight\": \"bolder\",\n                      \"text\": \"Input.Toggle\",\n                      \"horizontalAlignment\": \"center\",\n                      \"wrap\": true,\n                      \"style\": \"heading\"\n                    },\n                    {\n                      \"type\": \"Input.Toggle\",\n                      \"label\": \"Please accept the terms and conditions:\",\n                      \"title\": \"${Survey.questions[3].question}\",\n                      \"valueOn\": \"true\",\n                      \"valueOff\": \"false\",\n                      \"id\": \"AcceptsTerms\",\n                      \"isRequired\": true,\n                      \"errorMessage\": \"Accepting the terms and conditions is required\"\n                    },\n                    {\n                      \"type\": \"Input.Toggle\",\n                      \"label\": \"How do you feel about red cars?\",\n                      \"title\": \"${Survey.questions[4].question}\",\n                      \"valueOn\": \"RedCars\",\n                      \"valueOff\": \"NotRedCars\",\n                      \"id\": \"ColorPreference\"\n                    }\n                  ],\n                  \"actions\": [\n                    {\n                      \"type\": \"Action.Submit\",\n                      \"title\": \"Submit\",\n                      \"data\": {\n                        \"id\": \"1234567890\"\n                      }\n                    },\n                    {\n                      \"type\": \"Action.ShowCard\",\n                      \"title\": \"Show Card\",\n                      \"card\": {\n                        \"type\": \"AdaptiveCard\",\n                        \"body\": [\n                          {\n                            \"type\": \"Input.Text\",\n                            \"label\": \"enter comment\",\n                            \"style\": \"text\",\n                            \"id\": \"CommentVal\"\n                          }\n                        ],\n                        \"actions\": [\n                          {\n                            \"type\": \"Action.Submit\",\n                            \"title\": \"OK\"\n                          }\n                        ]\n                      }\n                    }\n                  ]\n                }}\n                data={{\n                  \"$root\": {\n                    \"ParticipantInfoForm\": {\n                      \"title\": \"Input.Text elements\"\n                    },\n                    \"Survey\": {\n                      \"title\": \"Input ChoiceSet\",\n                      \"questions\": [\n                        {\n                          \"question\": \"What color do you want? (compact)\",\n                          \"items\": [\n                            {\n                              \"choice\": \"Red\",\n                              \"value\": \"1\"\n                            },\n                            {\n                              \"choice\": \"Green\",\n                              \"value\": \"2\"\n                            },\n                            {\n                              \"choice\": \"Blue\",\n                              \"value\": \"3\"\n                            }\n                          ]\n                        },\n                        {\n                          \"question\": \"What color do you want? (expanded)\",\n                          \"items\": [\n                            {\n                              \"choice\": \"Red\",\n                              \"value\": \"1\"\n                            },\n                            {\n                              \"choice\": \"Green\",\n                              \"value\": \"2\"\n                            },\n                            {\n                              \"choice\": \"Blue\",\n                              \"value\": \"3\"\n                            }\n                          ]\n                        },\n                        {\n                          \"question\": \"What color do you want? (multiselect)\",\n                          \"items\": [\n                            {\n                              \"choice\": \"Red\",\n                              \"value\": \"1\"\n                            },\n                            {\n                              \"choice\": \"Green\",\n                              \"value\": \"2\"\n                            },\n                            {\n                              \"choice\": \"Blue\",\n                              \"value\": \"3\"\n                            }\n                          ]\n                        },\n                        {\n                          \"question\": \"I accept the terms and conditions (True/False)\"\n                        },\n                        {\n                          \"question\": \"Red cars are better than other cars\"\n                        }\n                      ]\n                    }\n                  }\n                }}\n                theme={this.props.themeVariant}\n                themeType={AdaptiveCardHostThemeType.SharePoint}\n                onInvokeAction={(action) => alert(JSON.stringify(action))}\n                onError={(error) => console.log(error.message)}\n                onSetCustomElements={(registry: CardObjectRegistry<CardElement>) => { }}\n                onSetCustomActions={(registry: CardObjectRegistry<Action>) => { }}\n                onUpdateHostCapabilities={(hostCapabilities: HostCapabilities) => {\n                  hostCapabilities.setCustomProperty(\"CustomPropertyName\", Date.now);\n                }}\n                context={this.props.context}\n              />\n            </div>\n          }\n          {controlVisibility.VariantThemeProvider &&\n            <div id=\"VariantThemeProviderDiv\" className={styles.container}>\n              <h3>Variant Theme Provider</h3>\n              <VariantThemeProvider variantType={VariantType.Strong}>\n                <Stack tokens={{ childrenGap: 5, padding: 5 }}>\n                  <Label>This Web Part implements an example on how to use the 'Fluent UI' theme library and how to apply/generate theme variation for the Web Part itself.</Label>\n                  <PrimaryButton>Primary Button</PrimaryButton>\n                  <DefaultButton>Default Button</DefaultButton>\n                  <Link>Link</Link>\n                </Stack>\n              </VariantThemeProvider>\n            </div>\n          }\n          {controlVisibility.EnhancedThemeProvider &&\n            <div id=\"EnhancedThemeProviderDiv\" className={styles.container}>\n              <h3>Enhanced Theme Provider</h3>\n              <EnhancedThemeProvider applyTo=\"element\" context={this.props.context} theme={this.props.themeVariant}>\n                <ControlsTestEnhancedThemeProviderFunctionComponent />\n                <ControlsTestEnhancedThemeProvider />\n              </EnhancedThemeProvider>\n            </div>\n          }\n          {controlVisibility.AdaptiveCardDesignerHost &&\n            <div id=\"AdaptiveCardDesignerHostDiv\" className={styles.container}>\n              <h3>Adaptive Card Designer Host</h3>\n              <AdaptiveCardDesignerHost\n                headerText={`Adaptive Card Designer`}\n                buttonText=\"Open Designer\"\n                card={{ \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\", \"type\": \"AdaptiveCard\", \"version\": \"1.5\", \"body\": [{ \"type\": \"ColumnSet\", \"columns\": [{ \"width\": \"auto\", \"items\": [{ \"type\": \"Image\", \"size\": \"Small\", \"style\": \"Person\", \"url\": \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }, { \"width\": \"stretch\", \"items\": [{ \"type\": \"TextBlock\", \"text\": \"${$root['@context']['userInfo']['displayName']}\", \"weight\": \"Bolder\" }, { \"type\": \"TextBlock\", \"spacing\": \"None\", \"text\": \"${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }] }] }}\n                data={undefined}\n                context={this.props.context}\n                theme={this.props.themeVariant}\n                onSave={(payload: object) => alert(JSON.stringify(payload))}\n                snippets={[{\n                  name: \"Persona\",\n                  category: \"Snippets\",\n                  payload: {\n                    type: \"ColumnSet\",\n                    columns: [\n                      {\n                        width: \"auto\",\n                        items: [\n                          {\n                            type: \"Image\",\n                            size: \"Small\",\n                            style: \"Person\",\n                            url: \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\"\n                          }\n                        ]\n                      },\n                      {\n                        width: \"stretch\",\n                        items: [\n                          {\n                            type: \"TextBlock\",\n                            text: \"${$root['@context']['userInfo']['displayName']}\",\n                            weight: \"Bolder\"\n                          },\n                          {\n                            type: \"TextBlock\",\n                            spacing: \"None\",\n                            text: \"${$root['@context']['userInfo']['email']}\"\n                          }\n                        ]\n                      }\n                    ]\n                  }\n                }]}\n              />\n            </div>\n          }\n          {controlVisibility.ShareDialog &&\n            <div id=\"ShareDialogDiv\" className={styles.container}>\n              <PrimaryButton text=\"Open Share dialog\" onClick={() => { this.setState({ isOpenShareDialog: true }); }} />\n              <ShareDialog\n                isOpen={this.state.isOpenShareDialog}\n                onClose={() => this.setState({ isOpenShareDialog: false })}\n                options={{\n                  siteUrl: this.props.context.pageContext.web.absoluteUrl,\n                  listId: 'b1416fca-dc77-4198-a082-62a7657dcfa9',\n                  itemId: 1,\n                  name: 'Document Name'\n                }} />\n            </div>\n          }\n          {controlVisibility.TaxonomyTree &&\n            <div id=\"TaxonomyTreeDiv\" className={styles.container} hidden={!controlVisibility.TaxonomyTree}>\n              <h3>Modern Taxonomy Tree</h3>\n              {this.state.termStoreInfo && (\n                <TaxonomyTree\n                  languageTag={this.state.termStoreInfo.defaultLanguageTag}\n                  onLoadMoreData={this.spTaxonomyService.getTerms}\n                  pageSize={50}\n                  setTerms={(value) => this.setState({ testTerms: value as any })}\n                  termStoreInfo={this.state.termStoreInfo}\n                  termSetInfo={this.state.termSetInfo}\n                  terms={this.state.testTerms as any[]}\n                  onRenderActionButton={() => <button>test button</button>}\n                  hideDeprecatedTerms={false}\n                  showIcons={true}\n                />\n              )}\n            </div>\n          }\n          {controlVisibility.ListToolbar &&\n            <div id=\"ListToolbarDiv\" className={styles.container}>\n              <h3>ListToolbar</h3>\n              <ListToolbar\n                context={this.props.context}\n                theme={this.props.themeVariant as any}\n                items={[\n                  { key: 'new', label: 'New', icon: <span>+</span>, onClick: () => console.log('New clicked'), group: 'actions' },\n                  { key: 'edit', label: 'Edit', icon: <span>✎</span>, onClick: () => console.log('Edit clicked'), group: 'actions' },\n                  { key: 'delete', label: 'Delete', icon: <span>🗑</span>, onClick: () => console.log('Delete clicked'), appearance: 'subtle', group: 'danger' },\n                ]}\n                farItems={[\n                  { key: 'filter', label: 'Filter', icon: <span>🔍</span>, onClick: () => console.log('Filter clicked'), isFarItem: true },\n                  { key: 'settings', label: 'Settings', icon: <span>⚙</span>, onClick: () => console.log('Settings clicked'), isFarItem: true },\n                ]}\n                totalCount={10}\n                showGroupDividers={true}\n                ariaLabel=\"List Toolbar\"\n              />\n            </div>\n          }\n          {controlVisibility.TestControl &&\n            <div id=\"TestControlDiv\" className={styles.container}>\n              <TestControl context={this.props.context} themeVariant={this.props.themeVariant} />\n            </div>\n          }\n          {controlVisibility.UploadFiles &&\n            <div id=\"UploadFilesDiv\" className={styles.container}>\n              <h3>Upload Files</h3>\n              <EnhancedThemeProvider theme={this.props.themeVariant} context={this.props.context}>\n                <Stack>\n                  <UploadFiles\n                    context={this.props.context}\n                    title=\"Upload Files\"\n                    onUploadFiles={(files) => {\n                      console.log(\"files\", files);\n                    }}\n                    themeVariant={this.props.themeVariant}\n                  />\n                </Stack>\n              </EnhancedThemeProvider>\n            </div>\n          }\n          {controlVisibility.UserPicker &&\n            <div id=\"UserPickerDiv\" className={styles.container}>\n              <UserPicker\n                context={this.props.context}\n                secondaryTextPropertyName=\"mail\"\n                theme={this.props.themeVariant}\n                placeholder={\"Search User\"}\n              // label={\n              //   <div>\n              //     <Person20Filled color={tokens.colorBrandForeground1} />\n              //     <Body1>Select User</Body1>\n              //   </div>\n              // }\n              // onSelectedUsers={onSelectedUsers}\n              // onRemoveSelectedUser={onRemovedUser}\n              />\n            </div>\n          }\n          {\n            controlVisibility.Calendar &&\n            <div id=\"CalendarDiv\" className={styles.container}>\n              <TestCalendarControl\n                  context={this.props.context} theme={this.props.themeVariant as any}   hasTeamsContext={false} themeString={'default'} title={'Calendar'} appHostName={EAppHostName.SharePoint} />\n            </div>\n\n          }\n          {\n            controlVisibility.SPFilePicker &&\n            <div id=\"SPFilePickerDiv\" className={styles.container}>\n              <TestSPFilePickerControl context={this.props.context} />\n            </div>\n\n          }\n          {controlVisibility.WorldMap &&\n            <div id=\"WorldMapDiv\" className={styles.container}>\n              <WorldMap description={'World Map Sample'} isDarkTheme={false} hasTeamsContext={false} title={'Microsoft Locations Worldwide'}     />\n            </div>\n          }\n        </div>\n      </React.Suspense>\n    );\n  }\n\n  private getRandomCollectionFieldData = () => {\n    let result = [];\n    for (let i = 1; i < 16; i++) {\n\n      const sampleDate = new Date();\n      sampleDate.setDate(sampleDate.getDate() + i);\n\n      result.push({\n        \"Field1\": `String${i}`,\n        \"Field2\": i,\n        \"Field3\": \"https://pnp.github.io/\",\n        \"Field4\": true,\n        \"Field5\": null as any,\n        \"Field6\": { key: \"choice 1\", text: \"choice 1\" },\n        \"Field7\": [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }],\n        \"Field8\": sampleDate\n      });\n    }\n    return result;\n  }\n\n  private onExpandCollapseTree(item: ITreeItem, isExpanded: boolean) {\n    console.log((isExpanded ? \"item expanded: \" : \"item collapsed: \") + item);\n  }\n\n  private onItemSelected(items: ITreeItem[]) {\n    console.log(\"items selected: \" + items.length);\n  }\n\n  private renderCustomTreeItem(item: ITreeItem): JSX.Element {\n    return (\n      <span>\n        {\n          item.iconProps &&\n          <i className={\"ms-Icon ms-Icon--\" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />\n        }\n        {item.label}\n      </span>\n    );\n  }\n\n  private _getPage(page: number) {\n    console.log('Page:', page);\n  }\n\n  // private _onFolderSelect = (folder: IFolder): void => {\n  //   console.log('selected folder', folder);\n  //\n}\n"
+                    "text": "              </div>\n            </div>\n          }\n          {controlVisibility.ListItemPicker &&\n            <div id=\"ListItemPickerDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">List Item picker list data tester:\n\n                <ListItemPicker listId={'b1416fca-dc77-4198-a082-62a7657dcfa9'}\n                  columnInternalName=\"DateAndTime\"\n                  keyColumnInternalName=\"Id\"\n                  // filter={\"Title eq 'SPFx'\"}\n                  orderBy={'Title desc'}\n                  itemLimit={5}\n                  context={this.props.context}\n                  placeholder={'Select list items'}\n                  onSelectedItem={this.listItemPickerDataSelected} />\n\n              </div>\n            </div>\n          }\n          {controlVisibility.ListItemComments &&\n            <div id=\"ListItemCommentsDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">List Item Comments Tester\n                <ListItemComments webUrl='https://contoso.sharepoint.com/sites/ThePerspective'\n                  listId='6f151a33-a7af-4fae-b8c4-f2f04cbc690f'\n                  itemId={\"1\"}\n                  serviceScope={this.props.context.serviceScope}\n                  numberCommentsPerPage={10}\n                  label=\"ListItem Comments\"\n                />\n              </div>\n            </div>\n          }\n          {controlVisibility.ViewPicker &&\n            <div id=\"ViewPickerDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">View picker tester:\n                <ViewPicker context={this.props.context}\n                  label=\"Select view(s)\"\n                  listId={\"9f3908cd-1e88-4ab3-ac42-08efbbd64ec9\"}\n                  placeholder={'Select list view(s)'}\n                  orderBy={1}\n                  multiSelect={true}\n                  onSelectionChanged={this.onViewPickerChange} />\n              </div>\n            </div>\n          }\n          {controlVisibility.FieldPicker &&\n            <div id=\"FieldPickerDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">Field picker tester:\n                <FieldPicker\n                  context={this.props.context}\n                  label={'Select a field'}\n                  listId={this.state.selectedList}\n                  onSelectionChanged={(fields) => {\n                    console.log(fields);\n                  }}\n                />\n              </div>\n            </div>\n          }\n          {controlVisibility.IconPicker &&\n            <div id=\"IconPickerDiv\" className={styles.container}>\n              <div>Icon Picker</div>\n              <div>\n                <IconPicker\n                  renderOption=\"panel\"\n                  onSave={(value) => { console.log(value); }}\n                  currentIcon={'Warning'}\n                  buttonLabel=\"Icon Picker\" />\n              </div>\n              <IconPicker buttonLabel={'Icon'}\n                onChange={(iconName: string) => { console.log(iconName); }}\n                onCancel={() => { console.log(\"Panel closed\"); }}\n                onSave={(iconName: string) => { console.log(iconName); }} />\n            </div>\n          }\n          {controlVisibility.ComboBoxListItemPicker &&\n            <div id=\"ComboBoxListItemPickerDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">ComboBoxListItemPicker:\n\n                <ComboBoxListItemPicker listId={this.state.comboBoxListItemPickerListId}\n                  columnInternalName='Title'\n                  keyColumnInternalName='Id'\n                  orderBy='Title desc'\n                  multiSelect={true}\n                  onSelectedItem={(data) => {\n                    console.log(`Item(s):`, data);\n                  }}\n                  defaultSelectedItems={this.state.comboBoxListItemPickerIds}\n                  webUrl={this.props.context.pageContext.web.absoluteUrl}\n                  spHttpClient={this.props.context.spHttpClient} />\n\n                <PrimaryButton text=\"Change List\" onClick={() => {\n                  this.setState({\n                    comboBoxListItemPickerListId: '71210430-8436-4962-a14d-5525475abd6b'\n                  });\n                }} />\n                <PrimaryButton text=\"Change default items\" onClick={() => {\n                  this.setState({\n                    comboBoxListItemPickerIds: [{ Id: 2, Title: '222' }]\n                  });\n                }} />\n\n              </div>\n            </div>\n          }\n          {controlVisibility.IFrameDialog &&\n            <div id=\"IFrameDialogDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">iframe dialog tester:\n                <PrimaryButton\n                  text=\"Open iframe Dialog\"\n                  onClick={() => { this.setState({ iFrameDialogOpened: true }); }} />\n                <IFrameDialog\n                  url={iframeUrl}\n                  iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n                  hidden={!this.state.iFrameDialogOpened}\n                  onDismiss={() => { this.setState({ iFrameDialogOpened: false }); }}\n                  modalProps={{\n                    isBlocking: true,\n                    styles: {\n                      root: {\n                        backgroundColor: '#00ff00'\n                      },\n                      main: {\n                        backgroundColor: '#ff0000'\n                      }\n                    }\n                  }}\n                  dialogContentProps={{\n                    type: DialogType.close,\n                    showCloseButton: true\n                  }}\n                  width={'570px'}\n                  height={'315px'} />\n              </div>\n            </div>\n          }\n          {controlVisibility.IFramePanel &&\n            <div id=\"IFramePanelDiv\" className={styles.container}>\n              <div className=\"ms-font-m\">iframe Panel tester:\n                <PrimaryButton\n                  text=\"Open iframe Panel\"\n                  onClick={() => { this.setState({ iFramePanelOpened: true }); }} />\n                <IFramePanel\n                  url={iframeUrl}\n                  type={PanelType.medium}\n                  //  height=\"300px\"\n                  headerText=\"iframe panel title\"\n                  closeButtonAriaLabel=\"Close\"\n                  isOpen={this.state.iFramePanelOpened}\n                  onDismiss={() => { this.setState({ iFramePanelOpened: false }); }}\n                  iframeOnLoad={(iframe: any) => { console.log('iframe loaded'); }}\n                />\n              </div>\n            </div>\n          }\n          {controlVisibility.ImagePicker &&\n            <div id=\"ImagePickerDiv\" className={styles.container}>\n              <ImagePicker\n                context={this.props.context}\n                onFileSelected={(file) => { console.log(file); this.setState({ selectedUrlImagePicker: file.fileAbsoluteUrl }); }}\n                onDeleteFile={() => { console.log('file deleted'); }}\n                selectedFileUrl={this.state.selectedUrlImagePicker}\n              />\n            </div>\n          }\n          {controlVisibility.FolderPicker &&\n            <div id=\"FolderPickerDiv\" className={styles.container}>\n              <FolderPicker context={this.props.context}\n                rootFolder={{\n                  Name: 'Documents',\n                  ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n                }}\n                onSelect={this._onFolderSelect}\n                label='Folder Picker'\n                required={true}\n                canCreateFolders={true}\n              ></FolderPicker>\n            </div>\n          }\n          <div id=\"FilterBarDiv\" className={styles.container} hidden={!controlVisibility.FilterBar}>\n            <FilterBar items={this.state.filters} inlineItemCount={3} onClearFilters={this.onClearFilters} onRemoveFilter={this.onRemoveFilter} />\n            <button onClick={this.addFilter}>Add new filter</button>\n          </div>\n          {controlVisibility.Carousel &&\n\n            <div id=\"CarouselDiv\" className={styles.container}>\n              <div>\n                <h3>Carousel with fixed elements:</h3>\n                <Carousel\n                  buttonsLocation={CarouselButtonsLocation.top}\n                  buttonsDisplay={CarouselButtonsDisplay.block}\n\n                  contentContainerStyles={styles.carouselContent}\n                  containerButtonsStyles={styles.carouselButtonsContainer}\n\n                  isInfinite={true}\n\n                  element={this.carouselElements}\n                  onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n                />\n              </div>\n              <div>\n                <h3>Carousel with CarouselImage elements:</h3>\n                <Carousel\n                  buttonsLocation={CarouselButtonsLocation.center}\n                  buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n                  contentContainerStyles={styles.carouselImageContent}\n                  //containerButtonsStyles={styles.carouselButtonsContainer}\n\n                  isInfinite={true}\n                  indicatorShape={CarouselIndicatorShape.circle}\n                  indicatorsDisplay={CarouselIndicatorsDisplay.block}\n                  pauseOnHover={true}\n\n                  element={[\n                    {\n                      imageSrc: 'https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80',\n                      title: 'Colosseum',\n                      description: 'This is Colosseum',\n                      url: 'https://en.wikipedia.org/wiki/Colosseum',\n                      showDetailsOnHover: true,\n                      imageFit: ImageFit.cover\n                    },\n                    {\n                      imageSrc: 'https://www.telegraph.co.uk/content/dam/science/2018/06/20/stonehenge-2326750_1920_trans%2B%2BZgEkZX3M936N5BQK4Va8RWtT0gK_6EfZT336f62EI5U.jpg',\n                      title: 'Stonehenge',\n                      description: 'This is Stonehendle',\n                      url: 'https://en.wikipedia.org/wiki/Stonehenge',\n                      showDetailsOnHover: true,\n                      imageFit: ImageFit.cover\n                    },\n                    {\n                      imageSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/All_Gizah_Pyramids.jpg/2560px-All_Gizah_Pyramids.jpg',\n                      title: 'Pyramids of Giza',\n                      description: 'This are Pyramids of Giza (Egypt)',\n                      url: 'https://en.wikipedia.org/wiki/Egyptian_pyramids',\n                      showDetailsOnHover: true,\n                      imageFit: ImageFit.cover\n                    }\n                  ]}\n                  onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}\n                  onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}\n                  rootStyles={mergeStyles({\n                    backgroundColor: '#C3C3C3'\n                  })}\n                />\n              </div>\n              <div>\n                <h3>Carousel with triggerPageElement:</h3>\n                <Carousel\n                  buttonsLocation={CarouselButtonsLocation.bottom}\n                  buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}\n\n                  contentContainerStyles={styles.carouselContent}\n\n                  canMoveNext={this.state.canMoveNext}\n                  canMovePrev={this.state.canMovePrev}\n                  triggerPageEvent={this.triggerNextElement}\n                  element={this.state.currentCarouselElement}\n                />\n              </div>\n              <div>\n                <h3>Carousel with minimal configuration:</h3>\n                <Carousel\n                  element={this.carouselElements}\n                  contentHeight={200}\n                />\n              </div>\n            </div>\n          }\n          {controlVisibility.SiteBreadcrumb &&\n            <div id=\"SiteBreadcrumbDiv\" className={styles.container}>\n              <div className={styles.siteBreadcrumb}>\n                <SiteBreadcrumb context={this.props.context} />\n              </div>\n            </div>\n          }\n          {controlVisibility.FilePicker &&\n            <div id=\"FilePickerDiv\" className={styles.container}>\n              <div>\n                <h3>File Picker</h3>\n                <TextField\n                  label=\"Default SiteFileTab Folder\"\n                  onChange={debounce((ev, newVal) => { this.setState({ filePickerDefaultFolderAbsolutePath: newVal }); }, 500)}\n                  styles={{ root: { marginBottom: 10 } }}\n                />\n                <FilePicker\n                  bingAPIKey=\"<BING API KEY>\"\n                  //webAbsoluteUrl=\"https://023xn.sharepoint.com/sites/test1\"\n                  //defaultFolderAbsolutePath={\"https://aterentiev.sharepoint.com/sites/SPFxinTeamsDemo/Shared%20Documents/General\"}\n                  //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n                  buttonLabel=\"Add File\"\n                  buttonIconProps={{ iconName: 'Add', styles: { root: { fontSize: 42 } } }}\n                  onSave={this._onFilePickerSave}\n                  onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n                  context={this.props.context}\n                  hideRecentTab={false}\n                  includePageLibraries={true}\n                  checkIfFileExists={false}\n                />\n                {\n                  this.state.filePickerResult &&\n                  <div>\n                    <div>\n                      FileName: {this.state.filePickerResult[0].fileName}\n                    </div>\n                    <div>\n                      File size: {GeneralHelper.formatBytes(this.state.filePickerResult[0].fileSize, 2)}\n                    </div>\n                  </div>\n                }\n              </div>\n\n              <div>\n                <h3>File Picker with target folder browser</h3>\n                <FilePicker\n                  bingAPIKey=\"<BING API KEY>\"\n                  //accepts={[\".gif\", \".jpg\", \".jpeg\", \".bmp\", \".dib\", \".tif\", \".tiff\", \".ico\", \".png\", \".jxr\", \".svg\"]}\n                  buttonLabel=\"Upload image\"\n                  buttonIcon=\"FileImage\"\n                  onSave={this._onFilePickerSave}\n                  onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}\n                  context={this.props.context}\n                  hideRecentTab={false}\n                  renderCustomUploadTabContent={() => (\n                    <FolderExplorer context={this.props.context}\n                      rootFolder={this.rootFolder}\n                      defaultFolder={this.rootFolder}\n                      onSelect={this._onFolderSelect}\n                      canCreateFolders={true}\n                    />)}\n                />\n              </div>\n              <p><a href=\"javascript:;\" onClick={this.deleteItem}>Deletes second item</a></p>\n            </div>\n          }\n          {controlVisibility.Progress &&\n            <div id=\"ProgressDiv\" className={styles.container}>\n              <Progress title={'Progress Test'}\n                showOverallProgress={true}\n                showIndeterminateOverallProgress={false}\n                hideNotStartedActions={false}\n                actions={this.state.progressActions}\n                currentActionIndex={this.state.currentProgressActionIndex}\n                longRunningText={'This operation takes longer than expected'}\n                longRunningTextDisplayDelay={7000}\n                height={'350px'}\n                inProgressIconName={'ChromeBackMirrored'} />\n              <PrimaryButton text={'Start Progress'} onClick={this._startProgress} />\n            </div>\n          }\n          {controlVisibility.ProgressStepsIndicator &&\n            <div id=\"ProgressStepsIndicatorDiv\" className={styles.container}>\n              <ProgressStepsIndicator steps={this.progressSteps} currentStep={0} themeVariant={this.props.themeVariant} />\n            </div>\n          }\n          {controlVisibility.Toast &&\n            <div id=\"ToastDiv\" className={styles.container}>\n              <h3>Toast</h3>\n              <Toast\n                title=\"Decision saved\"\n                body=\"This native Fluent UI toast will dismiss after five seconds.\"\n                subtitle=\"Controls Test\"\n                intent=\"success\"\n                dismissible\n                autoDismiss\n                duration={5}\n                durationUnit=\"seconds\"\n              />\n            </div>\n          }\n          {controlVisibility.GridLayout &&\n            <div id=\"GridLayoutDiv\" className={styles.container}>\n              <div className=\"ms-font-l\">Grid Layout</div>\n              <GridLayout\n                ariaLabel={\"List of content, use right and left arrow keys to navigate, arrow down to access details.\"}\n                items={sampleGridData}\n                onRenderGridItem={(item: any, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}\n                itemMinWidth={250}\n                itemMaxWidth={600}\n                itemPadding={60}\n                //compactThreshold={220}\n                //rowsPerPage={1}\n                />\n            </div>\n          }\n          {controlVisibility.HoverReactionsBar &&\n            <div ref={this.divRefAddReaction} id=\"HoverReactionsBarDiv\" className={styles.container}>\n              <PrimaryButton text=\"Open HoverReactionsBar\" onClick={() => { this.setState({ isOpenHoverReactionBar: true }); }} />\n              <HoverReactionsBar\n                isOpen={this.state.isOpenHoverReactionBar}\n                onSelect={(emoji, emojiInfo) => { console.log(emoji); }}\n                onDismiss={(): void => {\n                  this.setState({ isOpenHoverReactionBar: false });\n                }}\n                target={this.divRefAddReaction.current as HTMLDivElement} />\n            </div>\n          }\n          {controlVisibility.FolderExplorer &&\n            <div id=\"FolderExplorerDiv\" className={styles.container}>\n              <FolderExplorer\n                context={this.props.context}\n                rootFolder={{\n                  Name: 'Documents',\n                  ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n                }}\n                defaultFolder={{\n                  Name: 'Documents',\n                  ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n                }}\n                onSelect={this._onFolderSelect}\n                canCreateFolders={true}\n                orderby='Name' //'ListItemAllFields/Created'\n                orderAscending={true}\n                showFiles={true}\n                onFileClick={this._onFileClick}\n              />\n            </div>\n          }\n          {controlVisibility.TreeView &&\n            <div id=\"TreeViewDiv\" className={styles.container}>\n              <h3>Tree View</h3>\n              <TreeView items={this.treeitems}\n                defaultExpanded={false}\n                selectionMode={TreeViewSelectionMode.Multiple}\n                showCheckboxes={true}\n                treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}\n                defaultSelectedKeys={this.state.treeViewSelectedKeys}\n                onExpandCollapse={this.onExpandCollapseTree}\n                onSelect={this.onItemSelected}\n                defaultExpandedChildren={true}\n                theme={this.props.themeVariant}\n              //expandToSelected={true}\n              // onRenderItem={this.renderCustomTreeItem}\n              />\n              <PrimaryButton onClick={() => { this.setState({ treeViewSelectedKeys: [] }); }}>Clear selection</PrimaryButton>\n            </div>\n          }\n          {controlVisibility.Pagination &&\n            <div id=\"PaginationDiv\" className={styles.container}>\n              <Pagination\n                currentPage={3}\n                onChange={(page) => (this._getPage(page))}\n                totalPages={this.props.paginationTotalPages || 13}\n              //limiter={3}\n              // hideFirstPageJump\n              //hideLastPageJump\n              //limiterIcon={\"NumberedListText\"}\n              />\n            </div>\n          }\n          {controlVisibility.FieldCollectionData &&\n            <div id=\"FieldCollectionDataDiv\" className={styles.container}>\n              <FieldCollectionData\n                key={\"FieldCollectionData\"}\n                label={\"Fields Collection\"}\n                itemsPerPage={3}\n                manageBtnLabel={\"Manage\"}\n                onChanged={(value) => { console.log(value); }}\n                panelHeader={\"Manage values\"}\n                enableSorting={true}\n                panelProps={{ type: PanelType.custom, customWidth: \"98vw\" }}\n                fields={[\n                  { id: \"Field1\", title: \"String field\", type: CustomCollectionFieldType.string, required: true },\n                  { id: \"Field2\", title: \"Number field\", type: CustomCollectionFieldType.number },\n                  { id: \"Field3\", title: \"URL field\", type: CustomCollectionFieldType.url },\n                  { id: \"Field4\", title: \"Boolean field\", type: CustomCollectionFieldType.boolean },\n                  {\n                    id: \"Field5\", title: \"People picker\", type: CustomCollectionFieldType.peoplepicker, required: true,\n                    minimumUsers: 2, minimumUsersMessage: \"2 Users is the minimum\", maximumUsers: 3,\n                  },\n                  {\n                    id: \"Field6\", title: \"Combo Single\", type: CustomCollectionFieldType.combobox, required: true,\n                    multiSelect: false, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n                  },\n                  {\n                    id: \"Field7\", title: \"Combo Multi\", type: CustomCollectionFieldType.combobox,\n                    allowFreeform: true, multiSelect: true, options: [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }, { key: \"choice 3\", text: \"choice 3\" }]\n                  },\n                  { id: \"Field8\", title: \"Date field\", type: CustomCollectionFieldType.date, placeholder: \"Select a date\" }\n                ]}\n                value={this.getRandomCollectionFieldData()}\n\n                // value = {null}\n                context={this.props.context as any} //error when this is omitted and people picker is used\n                usePanel={true}\n                noDataMessage=\"No data is selected\" //overrides the default message\n              />\n            </div>\n          }\n          {controlVisibility.ContentTypePicker &&\n            <ContentTypePicker\n              context={this.props.context}\n            // group=\"Content Feedback\"\n            // includeHidden={false}\n            // includeReadOnly={false}\n            // label=\"Select your content type\"\n            // multiSelect={false}\n            // orderBy={ContentTypesOrderBy.Name}\n            // listId=\"00000000-0000-0000-0000-000000000000\"\n            // onSelectionChanged={this.onContentTypePickerChanged}\n            // showBlankOption={true}\n            />\n          }\n          {controlVisibility.Dashboard &&\n            <div id=\"DashboardDiv\" className={styles.container}>\n              <Dashboard\n                widgets={[{\n                  title: \"Card 1\",\n                  desc: \"Last updated Monday, April 4 at 11:15 AM (PT)\",\n                  widgetActionGroup: calloutItemsExample,\n                  size: WidgetSize.Quadruple,\n                  body: [\n                    {\n                      id: \"t1\",\n                      title: \"Tab 1\",\n                      content: (\n                        <Flex\n                          vAlign=\"center\"\n                          hAlign=\"center\"\n                          styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n                        >\n                          <NorthstarText size=\"large\" weight=\"semibold\">\n                            Content #1\n                          </NorthstarText>\n                        </Flex>\n                      ),\n                    },\n                    {\n                      id: \"t2\",\n                      title: \"Tab 2\",\n                      content: (\n                        <Flex\n                          vAlign=\"center\"\n                          hAlign=\"center\"\n                          styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n                        >\n                          <NorthstarText size=\"large\" weight=\"semibold\">\n                            Content #2\n                          </NorthstarText>\n                        </Flex>\n                      ),\n                    },\n                    {\n                      id: \"t3\",\n                      title: \"Tab 3\",\n                      content: (\n                        <Flex\n                          vAlign=\"center\"\n                          hAlign=\"center\"\n                          styles={{ height: \"100%\", border: \"1px dashed rgb(179, 176, 173)\" }}\n                        >\n                          <NorthstarText size=\"large\" weight=\"semibold\">\n                            Content #3\n                          </NorthstarText>\n                        </Flex>\n                      ),\n                    },\n                  ],\n                  link: linkExample,\n                },\n                {\n                  title: \"Card 2\",\n                  size: WidgetSize.Single,\n                  link: customizedLinkExample,\n                  rowSpan: 2\n                },\n                {\n                  title: \"Card 3\",\n                  size: WidgetSize.Double,\n                  link: linkExample,\n                },\n                {\n                  title: \"Card 4\",\n                  size: WidgetSize.Single,\n                  link: customizedLinkExample,\n                },\n                {\n                  title: \"Card 5\",\n                  size: WidgetSize.Single,\n                  link: linkExample,\n                },\n                {\n                  title: \"Card 6\",\n                  size: WidgetSize.Single,\n                  link: linkExample,\n                }]} />\n            </div>\n          }\n          {controlVisibility.Toolbar &&\n            <div id=\"ToolbarDiv\" className={styles.container}>\n              <div>\n                <h3>Uncontrolled toolbar</h3>\n                <Toolbar actionGroups={{\n                  'group1': {\n                    'action1': {\n                      title: 'Edit',\n                      iconName: 'Edit',\n                      onClick: () => { console.log('Edit action click'); }\n                    },\n                    'action2': {\n                      title: 'New',\n                      iconName: 'Add',\n                      onClick: () => { console.log('New action click'); }\n                    }\n                  }\n                }}\n                  filters={toolbarFilters}\n                  onSelectedFiltersChange={this.onToolbarSelectedFiltersChange}\n                />\n              </div>\n              <div>\n                <h3>Controlled toolbar</h3>\n                <Toolbar actionGroups={{\n                  'group1': {\n                    'action1': {\n                      title: 'Edit',\n                      iconName: 'Edit',\n                      onClick: () => { console.log('Edit action click'); }\n                    },\n                    'action2': {\n                      title: 'New',\n                      iconName: 'Add',\n                      onClick: () => { console.log('New action click'); }\n                    }\n                  }\n                }}\n                  filters={toolbarFilters}\n                  selectedFilterIds={this.state.selectedFilters}\n                  onSelectedFiltersChange={this.onToolbarSelectedFiltersChange} />\n              </div>\n              <div>Selected filter IDs: {this.state.selectedFilters.join(\", \")}</div>\n              <PrimaryButton text='Toggle filter1' onClick={() => this.toggleToolbarFilter(\"filter1\")} />\n              <PrimaryButton text='Toggle filter2' onClick={() => this.toggleToolbarFilter(\"filter2\")} />\n            </div>\n          }\n          {controlVisibility.AnimatedDialog &&\n            <div id=\"AnimatedDialogDiv\" className={styles.container}>\n              <h3>Animated Dialogs</h3>\n\n              {/* Multiple elements added only for demo - can be controlled with fewer elements */}\n\n              <PrimaryButton text='Show animated dialog' onClick={() => { this.setState({ showAnimatedDialog: true }); }} />\n              {/* Normal animated dialog */}\n              <AnimatedDialog\n                hidden={!this.state.showAnimatedDialog}\n                onDismiss={() => { this.setState({ showAnimatedDialog: false }); }}\n                dialogContentProps={animatedDialogContentProps}\n                modalProps={animatedModalProps}\n              >\n                <DialogFooter>\n                  <PrimaryButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"Yes\" />\n                  <DefaultButton onClick={() => { this.setState({ showAnimatedDialog: false }); }} text=\"No\" />\n                </DialogFooter>\n              </AnimatedDialog>\n              <br />\n              <br />\n\n              <PrimaryButton text='Show animated dialog with icon' onClick={() => { this.setState({ showCustomisedAnimatedDialog: true }); }} />\n              {/* Animated dialog with icon */}\n              <AnimatedDialog\n                hidden={!this.state.showCustomisedAnimatedDialog}\n                onDismiss={() => { this.setState({ showCustomisedAnimatedDialog: false }); }}\n                dialogContentProps={customizedAnimatedDialogContentProps}\n                modalProps={customizedAnimatedModalProps}\n                dialogAnimationInType='fadeInDown'\n                dialogAnimationOutType='fadeOutDown'\n                iconName='UnknownSolid'\n                iconAnimationType='zoomInDown'\n                showAnimatedDialogFooter={true}\n                okButtonText=\"Yes\"\n                cancelButtonText=\"No\"\n                onOkClick={() => timeout(1500)}\n                onSuccess={() => {\n                  this.setState({ showCustomisedAnimatedDialog: false });\n                  this.setState({ showSuccessDialog: true });\n                }}\n                onError={() => {\n                  this.setState({ showCustomisedAnimatedDialog: false });\n                  this.setState({ showErrorDialog: true });\n                }}>\n                <div className={styles.dialogContent}>\n                  <span>Do you like the animated dialog?</span>\n                </div>\n              </AnimatedDialog>\n\n              {/* Success animated dialog */}\n              <AnimatedDialog\n                hidden={!this.state.showSuccessDialog}\n                onDismiss={() => { this.setState({ showSuccessDialog: false }); }}\n                dialogContentProps={successDialogContentProps}\n                modalProps={customizedAnimatedModalProps}\n                iconName='CompletedSolid'\n              >\n                <div className={styles.dialogContent}><span>Thank you.</span></div>\n                <div className={styles.dialogFooter}>\n                  <PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text=\"OK\" >\n                  </PrimaryButton>\n                </div>\n              </AnimatedDialog>\n\n              {/* Error animated dialog */}\n              <AnimatedDialog\n                hidden={!this.state.showErrorDialog}\n                onDismiss={() => { this.setState({ showErrorDialog: false }); }}\n                dialogContentProps={errorDialogContentProps}\n                modalProps={customizedAnimatedModalProps}\n                iconName='StatusErrorFull'\n              >\n                <div className={styles.dialogContent}><span>Ther was an error.</span></div>\n                <div className={styles.dialogFooter}>\n                  <PrimaryButton onClick={() => { this.setState({ showErrorDialog: false }); }} text=\"OK\" >\n                  </PrimaryButton>\n                </div>\n              </AnimatedDialog>\n            </div>\n          }\n          {controlVisibility.LivePersona &&\n            <div id=\"LivePersonaDiv\" className={styles.container}>\n              <LivePersona upn=\"meganb@contoso.onmicrosoft.com\"\n                template={\n                  <>\n                    <Persona text=\"Megan Bowen\" secondaryText=\"meganb@contoso.onmicrosoft.com\" coinSize={48} />\n                  </>\n                }\n                serviceScope={this.props.context.serviceScope}\n              />\n            </div>\n          }\n          {controlVisibility.LocationPicker &&\n            <div id=\"LocationPickerDiv\" className={styles.container}>\n              <LocationPicker context={this.props.context} label=\"Location\" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + \", \" + locValue.Address.Street); }}></LocationPicker>\n            </div>\n          }\n          {controlVisibility.ModernTaxonomyPicker &&\n            <div id=\"ModernTaxonomyPickerDiv\" className={styles.container}>\n              <ModernTaxonomyPicker\n                allowMultipleSelections={true}\n                termSetId={this.termSetId}\n                panelTitle=\"Panel title\"\n                label={\"Modern Taxonomy Picker\"}\n                context={this.props.context}\n                required={false}\n                disabled={false}\n                customPanelWidth={400}\n              />\n            </div>\n          }\n          {controlVisibility.MonacoEditor &&\n            <div id=\"MonacoEditorDiv\" className={styles.container}>\n              <MonacoEditor value={\"\"}\n                showMiniMap={true}\n                onValueChange={(value, validationErrors) => { console.log(value); console.log(validationErrors); }}\n                language={\"javascript\"} />\n            </div>\n          }\n          {controlVisibility.AdaptiveCardHost &&\n            <div id=\"AdaptiveCardHostDiv\" className={styles.container}>\n              <h3>Adaptive Card Host</h3>\n              <AdaptiveCardHost\n                card={{\n                  \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n                  \"type\": \"AdaptiveCard\",\n                  \"version\": \"1.0\",\n                  \"body\": [\n                    {\n                      \"type\": \"TextBlock\",\n                      \"size\": \"medium\",\n                      \"weight\": \"bolder\",\n                      \"text\": \" ${ParticipantInfoForm.title}\",\n                      \"horizontalAlignment\": \"center\",\n                      \"wrap\": true,\n                      \"style\": \"heading\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Name\",\n                      \"style\": \"text\",\n                      \"id\": \"SimpleVal\",\n                      \"isRequired\": true,\n                      \"errorMessage\": \"Name is required\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Homepage\",\n                      \"style\": \"url\",\n                      \"id\": \"UrlVal\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Email\",\n                      \"style\": \"email\",\n                      \"id\": \"EmailVal\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Phone\",\n                      \"style\": \"tel\",\n                      \"id\": \"TelVal\"\n                    },\n                    {\n                      \"type\": \"Input.Text\",\n                      \"label\": \"Comments\",\n                      \"style\": \"text\",\n                      \"isMultiline\": true,\n                      \"id\": \"MultiLineVal\"\n                    },\n                    {\n                      \"type\": \"Input.Number\",\n                      \"label\": \"Quantity\",\n                      \"min\": -5,\n                      \"max\": 5,\n                      \"value\": 1,\n                      \"id\": \"NumVal\",\n                      \"errorMessage\": \"The quantity must be between -5 and 5\"\n                    },\n                    {\n                      \"type\": \"Input.Date\",\n                      \"label\": \"Due Date\",\n                      \"id\": \"DateVal\",\n                      \"value\": \"2017-09-20\"\n                    },\n                    {\n                      \"type\": \"Input.Time\",\n                      \"label\": \"Start time\",\n                      \"id\": \"TimeVal\",\n                      \"value\": \"16:59\"\n                    },\n                    {\n                      \"type\": \"TextBlock\",\n                      \"size\": \"medium\",\n                      \"weight\": \"bolder\",\n                      \"text\": \"${Survey.title} \",\n                      \"horizontalAlignment\": \"center\",\n                      \"wrap\": true,\n                      \"style\": \"heading\"\n                    },\n                    {\n                      \"type\": \"Input.ChoiceSet\",\n                      \"id\": \"CompactSelectVal\",\n                      \"label\": \"${Survey.questions[0].question}\",\n                      \"style\": \"compact\",\n                      \"value\": \"1\",\n                      \"choices\": [\n                        {\n                          \"$data\": \"${Survey.questions[0].items}\",\n                          \"title\": \"${choice}\",\n                          \"value\": \"${value}\"\n                        }\n                      ]\n                    },\n                    {\n                      \"type\": \"Input.ChoiceSet\",\n                      \"id\": \"SingleSelectVal\",\n                      \"label\": \"${Survey.questions[1].question}\",\n                      \"style\": \"expanded\",\n                      \"value\": \"1\",\n                      \"choices\": [\n                        {\n                          \"$data\": \"${Survey.questions[1].items}\",\n                          \"title\": \"${choice}\",\n                          \"value\": \"${value}\"\n                        }\n                      ]\n                    },\n                    {\n                      \"type\": \"Input.ChoiceSet\",\n                      \"id\": \"MultiSelectVal\",\n                      \"label\": \"${Survey.questions[2].question}\",\n                      \"isMultiSelect\": true,\n                      \"value\": \"1,3\",\n                      \"choices\": [\n                        {\n                          \"$data\": \"${Survey.questions[2].items}\",\n                          \"title\": \"${choice}\",\n                          \"value\": \"${value}\"\n                        }\n                      ]\n                    },\n                    {\n                      \"type\": \"TextBlock\",\n                      \"size\": \"medium\",\n                      \"weight\": \"bolder\",\n                      \"text\": \"Input.Toggle\",\n                      \"horizontalAlignment\": \"center\",\n                      \"wrap\": true,\n                      \"style\": \"heading\"\n                    },\n                    {\n                      \"type\": \"Input.Toggle\",\n                      \"label\": \"Please accept the terms and conditions:\",\n                      \"title\": \"${Survey.questions[3].question}\",\n                      \"valueOn\": \"true\",\n                      \"valueOff\": \"false\",\n                      \"id\": \"AcceptsTerms\",\n                      \"isRequired\": true,\n                      \"errorMessage\": \"Accepting the terms and conditions is required\"\n                    },\n                    {\n                      \"type\": \"Input.Toggle\",\n                      \"label\": \"How do you feel about red cars?\",\n                      \"title\": \"${Survey.questions[4].question}\",\n                      \"valueOn\": \"RedCars\",\n                      \"valueOff\": \"NotRedCars\",\n                      \"id\": \"ColorPreference\"\n                    }\n                  ],\n                  \"actions\": [\n                    {\n                      \"type\": \"Action.Submit\",\n                      \"title\": \"Submit\",\n                      \"data\": {\n                        \"id\": \"1234567890\"\n                      }\n                    },\n                    {\n                      \"type\": \"Action.ShowCard\",\n                      \"title\": \"Show Card\",\n                      \"card\": {\n                        \"type\": \"AdaptiveCard\",\n                        \"body\": [\n                          {\n                            \"type\": \"Input.Text\",\n                            \"label\": \"enter comment\",\n                            \"style\": \"text\",\n                            \"id\": \"CommentVal\"\n                          }\n                        ],\n                        \"actions\": [\n                          {\n                            \"type\": \"Action.Submit\",\n                            \"title\": \"OK\"\n                          }\n                        ]\n                      }\n                    }\n                  ]\n                }}\n                data={{\n                  \"$root\": {\n                    \"ParticipantInfoForm\": {\n                      \"title\": \"Input.Text elements\"\n                    },\n                    \"Survey\": {\n                      \"title\": \"Input ChoiceSet\",\n                      \"questions\": [\n                        {\n                          \"question\": \"What color do you want? (compact)\",\n                          \"items\": [\n                            {\n                              \"choice\": \"Red\",\n                              \"value\": \"1\"\n                            },\n                            {\n                              \"choice\": \"Green\",\n                              \"value\": \"2\"\n                            },\n                            {\n                              \"choice\": \"Blue\",\n                              \"value\": \"3\"\n                            }\n                          ]\n                        },\n                        {\n                          \"question\": \"What color do you want? (expanded)\",\n                          \"items\": [\n                            {\n                              \"choice\": \"Red\",\n                              \"value\": \"1\"\n                            },\n                            {\n                              \"choice\": \"Green\",\n                              \"value\": \"2\"\n                            },\n                            {\n                              \"choice\": \"Blue\",\n                              \"value\": \"3\"\n                            }\n                          ]\n                        },\n                        {\n                          \"question\": \"What color do you want? (multiselect)\",\n                          \"items\": [\n                            {\n                              \"choice\": \"Red\",\n                              \"value\": \"1\"\n                            },\n                            {\n                              \"choice\": \"Green\",\n                              \"value\": \"2\"\n                            },\n                            {\n                              \"choice\": \"Blue\",\n                              \"value\": \"3\"\n                            }\n                          ]\n                        },\n                        {\n                          \"question\": \"I accept the terms and conditions (True/False)\"\n                        },\n                        {\n                          \"question\": \"Red cars are better than other cars\"\n                        }\n                      ]\n                    }\n                  }\n                }}\n                theme={this.props.themeVariant}\n                themeType={AdaptiveCardHostThemeType.SharePoint}\n                onInvokeAction={(action) => alert(JSON.stringify(action))}\n                onError={(error) => console.log(error.message)}\n                onSetCustomElements={(registry: CardObjectRegistry<CardElement>) => { }}\n                onSetCustomActions={(registry: CardObjectRegistry<Action>) => { }}\n                onUpdateHostCapabilities={(hostCapabilities: HostCapabilities) => {\n                  hostCapabilities.setCustomProperty(\"CustomPropertyName\", Date.now);\n                }}\n                context={this.props.context}\n              />\n            </div>\n          }\n          {controlVisibility.VariantThemeProvider &&\n            <div id=\"VariantThemeProviderDiv\" className={styles.container}>\n              <h3>Variant Theme Provider</h3>\n              <VariantThemeProvider variantType={VariantType.Strong}>\n                <Stack tokens={{ childrenGap: 5, padding: 5 }}>\n                  <Label>This Web Part implements an example on how to use the 'Fluent UI' theme library and how to apply/generate theme variation for the Web Part itself.</Label>\n                  <PrimaryButton>Primary Button</PrimaryButton>\n                  <DefaultButton>Default Button</DefaultButton>\n                  <Link>Link</Link>\n                </Stack>\n              </VariantThemeProvider>\n            </div>\n          }\n          {controlVisibility.EnhancedThemeProvider &&\n            <div id=\"EnhancedThemeProviderDiv\" className={styles.container}>\n              <h3>Enhanced Theme Provider</h3>\n              <EnhancedThemeProvider applyTo=\"element\" context={this.props.context} theme={this.props.themeVariant}>\n                <ControlsTestEnhancedThemeProviderFunctionComponent />\n                <ControlsTestEnhancedThemeProvider />\n              </EnhancedThemeProvider>\n            </div>\n          }\n          {controlVisibility.AdaptiveCardDesignerHost &&\n            <div id=\"AdaptiveCardDesignerHostDiv\" className={styles.container}>\n              <h3>Adaptive Card Designer Host</h3>\n              <AdaptiveCardDesignerHost\n                headerText={`Adaptive Card Designer`}\n                buttonText=\"Open Designer\"\n                card={{ \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\", \"type\": \"AdaptiveCard\", \"version\": \"1.5\", \"body\": [{ \"type\": \"ColumnSet\", \"columns\": [{ \"width\": \"auto\", \"items\": [{ \"type\": \"Image\", \"size\": \"Small\", \"style\": \"Person\", \"url\": \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }, { \"width\": \"stretch\", \"items\": [{ \"type\": \"TextBlock\", \"text\": \"${$root['@context']['userInfo']['displayName']}\", \"weight\": \"Bolder\" }, { \"type\": \"TextBlock\", \"spacing\": \"None\", \"text\": \"${$root['@context']['userInfo']['email']}\" }], \"type\": \"Column\" }] }] }}\n                data={undefined}\n                context={this.props.context}\n                theme={this.props.themeVariant}\n                onSave={(payload: object) => alert(JSON.stringify(payload))}\n                snippets={[{\n                  name: \"Persona\",\n                  category: \"Snippets\",\n                  payload: {\n                    type: \"ColumnSet\",\n                    columns: [\n                      {\n                        width: \"auto\",\n                        items: [\n                          {\n                            type: \"Image\",\n                            size: \"Small\",\n                            style: \"Person\",\n                            url: \"/_layouts/15/userphoto.aspx?size=M&username=${$root['@context']['userInfo']['email']}\"\n                          }\n                        ]\n                      },\n                      {\n                        width: \"stretch\",\n                        items: [\n                          {\n                            type: \"TextBlock\",\n                            text: \"${$root['@context']['userInfo']['displayName']}\",\n                            weight: \"Bolder\"\n                          },\n                          {\n                            type: \"TextBlock\",\n                            spacing: \"None\",\n                            text: \"${$root['@context']['userInfo']['email']}\"\n                          }\n                        ]\n                      }\n                    ]\n                  }\n                }]}\n              />\n            </div>\n          }\n          {controlVisibility.ShareDialog &&\n            <div id=\"ShareDialogDiv\" className={styles.container}>\n              <PrimaryButton text=\"Open Share dialog\" onClick={() => { this.setState({ isOpenShareDialog: true }); }} />\n              <ShareDialog\n                isOpen={this.state.isOpenShareDialog}\n                onClose={() => this.setState({ isOpenShareDialog: false })}\n                options={{\n                  siteUrl: this.props.context.pageContext.web.absoluteUrl,\n                  listId: 'b1416fca-dc77-4198-a082-62a7657dcfa9',\n                  itemId: 1,\n                  name: 'Document Name'\n                }} />\n            </div>\n          }\n          {controlVisibility.TaxonomyTree &&\n            <div id=\"TaxonomyTreeDiv\" className={styles.container} hidden={!controlVisibility.TaxonomyTree}>\n              <h3>Modern Taxonomy Tree</h3>\n              {this.state.termStoreInfo && (\n                <TaxonomyTree\n                  languageTag={this.state.termStoreInfo.defaultLanguageTag}\n                  onLoadMoreData={this.spTaxonomyService.getTerms}\n                  pageSize={50}\n                  setTerms={(value) => this.setState({ testTerms: value as any })}\n                  termStoreInfo={this.state.termStoreInfo}\n                  termSetInfo={this.state.termSetInfo}\n                  terms={this.state.testTerms as any[]}\n                  onRenderActionButton={() => <button>test button</button>}\n                  hideDeprecatedTerms={false}\n                  showIcons={true}\n                />\n              )}\n            </div>\n          }\n          {controlVisibility.ListToolbar &&\n            <div id=\"ListToolbarDiv\" className={styles.container}>\n              <h3>ListToolbar</h3>\n              <ListToolbar\n                context={this.props.context}\n                theme={this.props.themeVariant as any}\n                items={[\n                  { key: 'new', label: 'New', icon: <span>+</span>, onClick: () => console.log('New clicked'), group: 'actions' },\n                  { key: 'edit', label: 'Edit', icon: <span>✎</span>, onClick: () => console.log('Edit clicked'), group: 'actions' },\n                  { key: 'delete', label: 'Delete', icon: <span>🗑</span>, onClick: () => console.log('Delete clicked'), appearance: 'subtle', group: 'danger' },\n                ]}\n                farItems={[\n                  { key: 'filter', label: 'Filter', icon: <span>🔍</span>, onClick: () => console.log('Filter clicked'), isFarItem: true },\n                  { key: 'settings', label: 'Settings', icon: <span>⚙</span>, onClick: () => console.log('Settings clicked'), isFarItem: true },\n                ]}\n                totalCount={10}\n                showGroupDividers={true}\n                ariaLabel=\"List Toolbar\"\n              />\n            </div>\n          }\n          {controlVisibility.TestControl &&\n            <div id=\"TestControlDiv\" className={styles.container}>\n              <TestControl context={this.props.context} themeVariant={this.props.themeVariant} />\n            </div>\n          }\n          {controlVisibility.UploadFiles &&\n            <div id=\"UploadFilesDiv\" className={styles.container}>\n              <h3>Upload Files</h3>\n              <EnhancedThemeProvider theme={this.props.themeVariant} context={this.props.context}>\n                <Stack>\n                  <UploadFiles\n                    context={this.props.context}\n                    title=\"Upload Files\"\n                    onUploadFiles={(files) => {\n                      console.log(\"files\", files);\n                    }}\n                    themeVariant={this.props.themeVariant}\n                  />\n                </Stack>\n              </EnhancedThemeProvider>\n            </div>\n          }\n          {controlVisibility.UserPicker &&\n            <div id=\"UserPickerDiv\" className={styles.container}>\n              <UserPicker\n                context={this.props.context}\n                secondaryTextPropertyName=\"mail\"\n                theme={this.props.themeVariant}\n                placeholder={\"Search User\"}\n              // label={\n              //   <div>\n              //     <Person20Filled color={tokens.colorBrandForeground1} />\n              //     <Body1>Select User</Body1>\n              //   </div>\n              // }\n              // onSelectedUsers={onSelectedUsers}\n              // onRemoveSelectedUser={onRemovedUser}\n              />\n            </div>\n          }\n          {\n            controlVisibility.Calendar &&\n            <div id=\"CalendarDiv\" className={styles.container}>\n              <TestCalendarControl\n                  context={this.props.context} theme={this.props.themeVariant as any}   hasTeamsContext={false} themeString={'default'} title={'Calendar'} appHostName={EAppHostName.SharePoint} />\n            </div>\n\n          }\n          {\n            controlVisibility.SPFilePicker &&\n            <div id=\"SPFilePickerDiv\" className={styles.container}>\n              <TestSPFilePickerControl context={this.props.context} />\n            </div>\n\n          }\n          {controlVisibility.WorldMap &&\n            <div id=\"WorldMapDiv\" className={styles.container}>\n              <WorldMap description={'World Map Sample'} isDarkTheme={false} hasTeamsContext={false} title={'Microsoft Locations Worldwide'}     />\n            </div>\n          }\n        </div>\n      </React.Suspense>\n    );\n  }\n\n  private getRandomCollectionFieldData = () => {\n    let result = [];\n    for (let i = 1; i < 16; i++) {\n\n      const sampleDate = new Date();\n      sampleDate.setDate(sampleDate.getDate() + i);\n\n      result.push({\n        \"Field1\": `String${i}`,\n        \"Field2\": i,\n        \"Field3\": \"https://pnp.github.io/\",\n        \"Field4\": true,\n        \"Field5\": null as any,\n        \"Field6\": { key: \"choice 1\", text: \"choice 1\" },\n        \"Field7\": [{ key: \"choice 1\", text: \"choice 1\" }, { key: \"choice 2\", text: \"choice 2\" }],\n        \"Field8\": sampleDate\n      });\n    }\n    return result;\n  }\n\n  private onExpandCollapseTree(item: ITreeItem, isExpanded: boolean) {\n    console.log((isExpanded ? \"item expanded: \" : \"item collapsed: \") + item);\n  }\n\n  private onItemSelected(items: ITreeItem[]) {\n    console.log(\"items selected: \" + items.length);\n  }\n\n  private renderCustomTreeItem(item: ITreeItem): JSX.Element {\n    return (\n      <span>\n        {\n          item.iconProps &&\n          <i className={\"ms-Icon ms-Icon--\" + item.iconProps.iconName} style={{ paddingRight: '4px' }} />\n        }\n        {item.label}\n      </span>\n    );\n  }\n\n  private _getPage(page: number) {\n    console.log('Page:', page);\n  }\n\n  // private _onFolderSelect = (folder: IFolder): void => {\n  //   console.log('selected folder', folder);\n  //\n}\n"
                   }
                 }
               }
@@ -24810,12 +24873,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2114,
+                  "startLine": 2115,
                   "startColumn": 42,
-                  "endLine": 2114,
+                  "endLine": 2115,
                   "endColumn": 45,
                   "snippet": {
                     "text": "any"
@@ -24838,12 +24901,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2151,
+                  "startLine": 2152,
                   "startColumn": 42,
-                  "endLine": 2151,
+                  "endLine": 2152,
                   "endColumn": 45,
                   "snippet": {
                     "text": "any"
@@ -24866,12 +24929,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2168,
+                  "startLine": 2169,
                   "startColumn": 15,
-                  "endLine": 2177,
+                  "endLine": 2178,
                   "endColumn": 16,
                   "snippet": {
                     "text": "<FolderPicker context={this.props.context}\n                rootFolder={{\n                  Name: 'Documents',\n                  ServerRelativeUrl: `${this.props.context.pageContext.web.serverRelativeUrl === '/' ? '' : this.props.context.pageContext.web.serverRelativeUrl}/Shared Documents`\n                }}\n                onSelect={this._onFolderSelect}\n                label='Folder Picker'\n                required={true}\n                canCreateFolders={true}\n              >"
@@ -24894,12 +24957,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2335,
+                  "startLine": 2336,
                   "startColumn": 26,
-                  "endLine": 2335,
+                  "endLine": 2336,
                   "endColumn": 40,
                   "snippet": {
                     "text": "\"javascript:;\""
@@ -24922,12 +24985,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2364,
+                  "startLine": 2380,
                   "startColumn": 42,
-                  "endLine": 2364,
+                  "endLine": 2380,
                   "endColumn": 45,
                   "snippet": {
                     "text": "any"
@@ -24950,12 +25013,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2471,
+                  "startLine": 2487,
                   "startColumn": 48,
-                  "endLine": 2471,
+                  "endLine": 2487,
                   "endColumn": 51,
                   "snippet": {
                     "text": "any"
@@ -24978,12 +25041,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2683,
+                  "startLine": 2699,
                   "startColumn": 19,
-                  "endLine": 2683,
+                  "endLine": 2699,
                   "endColumn": 110,
                   "snippet": {
                     "text": "<PrimaryButton onClick={() => { this.setState({ showSuccessDialog: false }); }} text=\"OK\" >"
@@ -25006,12 +25069,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2698,
+                  "startLine": 2714,
                   "startColumn": 19,
-                  "endLine": 2698,
+                  "endLine": 2714,
                   "endColumn": 108,
                   "snippet": {
                     "text": "<PrimaryButton onClick={() => { this.setState({ showErrorDialog: false }); }} text=\"OK\" >"
@@ -25034,12 +25097,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 2718,
+                  "startLine": 2734,
                   "startColumn": 15,
-                  "endLine": 2718,
+                  "endLine": 2734,
                   "endColumn": 195,
                   "snippet": {
                     "text": "<LocationPicker context={this.props.context} label=\"Location\" onChange={(locValue: ILocationPickerItem) => { console.log(locValue.DisplayName + \", \" + locValue.Address.Street); }}>"
@@ -25062,10 +25125,10 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3012,
+                  "startLine": 3028,
                   "startColumn": 80,
                   "snippet": {
                     "text": "'Fluent UI' theme library and how to apply/generate theme variation for the Web Part itself.</Label>"
@@ -25088,10 +25151,10 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3012,
+                  "startLine": 3028,
                   "startColumn": 90,
                   "snippet": {
                     "text": "' theme library and how to apply/generate theme variation for the Web Part itself.</Label>"
@@ -25114,12 +25177,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3100,
+                  "startLine": 3116,
                   "startColumn": 76,
-                  "endLine": 3100,
+                  "endLine": 3116,
                   "endColumn": 79,
                   "snippet": {
                     "text": "any"
@@ -25142,12 +25205,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3103,
+                  "startLine": 3119,
                   "startColumn": 50,
-                  "endLine": 3103,
+                  "endLine": 3119,
                   "endColumn": 53,
                   "snippet": {
                     "text": "any"
@@ -25170,12 +25233,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3116,
+                  "startLine": 3132,
                   "startColumn": 51,
-                  "endLine": 3116,
+                  "endLine": 3132,
                   "endColumn": 54,
                   "snippet": {
                     "text": "any"
@@ -25198,12 +25261,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3176,
+                  "startLine": 3192,
                   "startColumn": 82,
-                  "endLine": 3176,
+                  "endLine": 3192,
                   "endColumn": 85,
                   "snippet": {
                     "text": "any"
@@ -25226,12 +25289,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3197,
+                  "startLine": 3213,
                   "startColumn": 3,
-                  "endLine": 3197,
+                  "endLine": 3213,
                   "endColumn": 42,
                   "snippet": {
                     "text": "private getRandomCollectionFieldData = "
@@ -25254,12 +25317,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3198,
+                  "startLine": 3214,
                   "startColumn": 9,
-                  "endLine": 3198,
+                  "endLine": 3214,
                   "endColumn": 15,
                   "snippet": {
                     "text": "result"
@@ -25282,12 +25345,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3209,
+                  "startLine": 3225,
                   "startColumn": 27,
-                  "endLine": 3209,
+                  "endLine": 3225,
                   "endColumn": 30,
                   "snippet": {
                     "text": "any"
@@ -25310,12 +25373,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3218,
+                  "startLine": 3234,
                   "startColumn": 3,
-                  "endLine": 3218,
+                  "endLine": 3234,
                   "endColumn": 31,
                   "snippet": {
                     "text": "private onExpandCollapseTree"
@@ -25338,12 +25401,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3222,
+                  "startLine": 3238,
                   "startColumn": 3,
-                  "endLine": 3222,
+                  "endLine": 3238,
                   "endColumn": 25,
                   "snippet": {
                     "text": "private onItemSelected"
@@ -25366,12 +25429,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 3238,
+                  "startLine": 3254,
                   "startColumn": 3,
-                  "endLine": 3238,
+                  "endLine": 3254,
                   "endColumn": 19,
                   "snippet": {
                     "text": "private _getPage"
@@ -25394,12 +25457,12 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 907
+                  "index": 914
                 },
                 "region": {
-                  "startLine": 840,
+                  "startLine": 841,
                   "startColumn": 35,
-                  "endLine": 840,
+                  "endLine": 841,
                   "endColumn": 38,
                   "snippet": {
                     "text": "any"
@@ -25427,7 +25490,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/propertyPane/PropertyPaneListPicker.ts",
-                  "index": 911
+                  "index": 918
                 },
                 "region": {
                   "startLine": 15,
@@ -25457,7 +25520,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/ControlsTestWebPart.ts",
-                  "index": 912
+                  "index": 919
                 },
                 "region": {
                   "startLine": 124,
@@ -25484,7 +25547,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listItemPicker/ComboBoxListItemPicker.test.tsx",
-                  "index": 922
+                  "index": 929
                 },
                 "region": {
                   "startLine": 68,
@@ -25514,7 +25577,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listItemPicker/ComboBoxListItemPicker.test.tsx",
-                  "index": 922
+                  "index": 929
                 },
                 "region": {
                   "startLine": 88,
@@ -25544,7 +25607,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listItemPicker/ComboBoxListItemPicker.test.tsx",
-                  "index": 922
+                  "index": 929
                 },
                 "region": {
                   "startLine": 141,
@@ -25574,7 +25637,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listItemPicker/ComboBoxListItemPicker.test.tsx",
-                  "index": 922
+                  "index": 929
                 },
                 "region": {
                   "startLine": 167,
@@ -25604,7 +25667,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 49,
@@ -25637,7 +25700,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 65,
@@ -25670,7 +25733,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 73,
@@ -25703,7 +25766,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 91,
@@ -25736,7 +25799,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 97,
@@ -25769,7 +25832,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 108,
@@ -25802,7 +25865,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 109,
@@ -25835,7 +25898,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 118,
@@ -25868,7 +25931,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 119,
@@ -25901,7 +25964,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 120,
@@ -25934,7 +25997,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 122,
@@ -25967,7 +26030,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 123,
@@ -26000,7 +26063,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 125,
@@ -26033,7 +26096,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 127,
@@ -26066,7 +26129,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 128,
@@ -26099,7 +26162,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 130,
@@ -26132,7 +26195,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 138,
@@ -26165,7 +26228,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 141,
@@ -26198,7 +26261,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 141,
@@ -26231,7 +26294,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 144,
@@ -26264,7 +26327,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 145,
@@ -26297,7 +26360,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 147,
@@ -26330,7 +26393,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 150,
@@ -26363,7 +26426,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 150,
@@ -26396,7 +26459,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 151,
@@ -26429,7 +26492,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 152,
@@ -26462,7 +26525,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 154,
@@ -26495,7 +26558,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 157,
@@ -26528,7 +26591,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 157,
@@ -26561,7 +26624,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/controls/listView/ListView.test.tsx",
-                  "index": 923
+                  "index": 930
                 },
                 "region": {
                   "startLine": 159,
@@ -26594,7 +26657,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestImagePickerControl.tsx",
-                  "index": 928
+                  "index": 935
                 },
                 "region": {
                   "startLine": 11,
@@ -26621,7 +26684,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestImagePickerControl.tsx",
-                  "index": 928
+                  "index": 935
                 },
                 "region": {
                   "startLine": 23,
@@ -26648,7 +26711,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestImagePickerControl.tsx",
-                  "index": 928
+                  "index": 935
                 },
                 "region": {
                   "startLine": 28,
@@ -26675,7 +26738,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestUserPickerControl.tsx",
-                  "index": 929
+                  "index": 936
                 },
                 "region": {
                   "startLine": 43,
@@ -26702,7 +26765,7 @@
               "physicalLocation": {
                 "artifactLocation": {
                   "uri": "src/webparts/controlsTest/components/TestUserPickerControl.tsx",
-                  "index": 929
+                  "index": 936
                 },
                 "region": {
                   "startLine": 57,
@@ -27643,7 +27706,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/uploadFiles/components/FileCommandBar/FileCommandBar.tsx",
-                      "index": 742
+                      "index": 749
                     },
                     "region": {
                       "startLine": 1,
@@ -27669,7 +27732,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/uploadFiles/components/FileCommandBar/FileCommandBar.tsx",
-                      "index": 742
+                      "index": 749
                     },
                     "region": {
                       "startLine": 2,
@@ -27695,7 +27758,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/uploadFiles/components/FileCommandBar/FileCommandBar.tsx",
-                      "index": 742
+                      "index": 749
                     },
                     "region": {
                       "startLine": 3,
@@ -27721,7 +27784,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/uploadFiles/components/DocumentList/useDocumentListStyles.ts",
-                      "index": 747
+                      "index": 754
                     },
                     "region": {
                       "startLine": 17,
@@ -27747,7 +27810,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/uploadFiles/components/DocumentList/DocumentList.tsx",
-                      "index": 748
+                      "index": 755
                     },
                     "region": {
                       "startLine": 1,
@@ -27773,7 +27836,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/uploadFiles/components/DocumentList/DocumentList.tsx",
-                      "index": 748
+                      "index": 755
                     },
                     "region": {
                       "startLine": 2,
@@ -27799,7 +27862,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/uploadFiles/components/DocumentList/DocumentList.tsx",
-                      "index": 748
+                      "index": 755
                     },
                     "region": {
                       "startLine": 3,
@@ -27825,7 +27888,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/uploadFiles/components/UploadFiles/UploadFilesControl.tsx",
-                      "index": 756
+                      "index": 763
                     },
                     "region": {
                       "startLine": 1,
@@ -27851,7 +27914,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/userPicker/IUserPickerProps.ts",
-                      "index": 769
+                      "index": 776
                     },
                     "region": {
                       "startLine": 2,
@@ -27877,7 +27940,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/userPicker/atoms/globalState.ts",
-                      "index": 771
+                      "index": 778
                     },
                     "region": {
                       "startLine": 3,
@@ -27903,7 +27966,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/userPicker/hooks/useGraphUserAPI.ts",
-                      "index": 776
+                      "index": 783
                     },
                     "region": {
                       "startLine": 1,
@@ -27929,7 +27992,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/userPicker/userCard/UserCard.tsx",
-                      "index": 783
+                      "index": 790
                     },
                     "region": {
                       "startLine": 3,
@@ -27955,7 +28018,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/userPicker/PopUpMenu.tsx",
-                      "index": 785
+                      "index": 792
                     },
                     "region": {
                       "startLine": 1,
@@ -27981,7 +28044,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/userPicker/UserPickerControl.tsx",
-                      "index": 788
+                      "index": 795
                     },
                     "region": {
                       "startLine": 2,
@@ -28007,7 +28070,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/userPicker/UserPickerControl.tsx",
-                      "index": 788
+                      "index": 795
                     },
                     "region": {
                       "startLine": 3,
@@ -28033,7 +28096,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/worldMap/WorldMapControl.tsx",
-                      "index": 812
+                      "index": 819
                     },
                     "region": {
                       "startLine": 2,
@@ -28059,7 +28122,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/ListToolbar/ListToolbar.tsx",
-                      "index": 828
+                      "index": 835
                     },
                     "region": {
                       "startLine": 2,
@@ -28085,7 +28148,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/webparts/controlsTest/propertyPane/PropertyPaneControlToggles.ts",
-                      "index": 909
+                      "index": 916
                     },
                     "region": {
                       "startLine": 13,
@@ -28111,7 +28174,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/listView/ListView.test.tsx",
-                      "index": 923
+                      "index": 930
                     },
                     "region": {
                       "startLine": 65,
@@ -28137,7 +28200,7 @@
                   "physicalLocation": {
                     "artifactLocation": {
                       "uri": "src/controls/listView/ListView.test.tsx",
-                      "index": 923
+                      "index": 930
                     },
                     "region": {
                       "startLine": 73,