@pnp/spfx-controls-react 3.26.0-beta.4125643 → 3.26.0-beta.4125690

package/release/analysis-logs/lint.sarif

@@ -9826,181 +9826,10 @@
                   "index": 320
                 },
                 "region": {
-                  "startLine": 1029,
-                  "startColumn": 34,
-                  "endLine": 1029,
-                  "endColumn": 37,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/controls/richText/RichText.tsx",
-                  "index": 320
-                },
-                "region": {
-                  "startLine": 1029,
-                  "startColumn": 47,
-                  "endLine": 1029,
-                  "endColumn": 50,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/controls/richText/RichText.tsx",
-                  "index": 320
-                },
-                "region": {
-                  "startLine": 1029,
-                  "startColumn": 60,
-                  "endLine": 1029,
-                  "endColumn": 63,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/controls/richText/RichText.tsx",
-                  "index": 320
-                },
-                "region": {
-                  "startLine": 1147,
-                  "startColumn": 10,
-                  "endLine": 1147,
-                  "endColumn": 13,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/controls/richText/RichText.tsx",
-                  "index": 320
-                },
-                "region": {
-                  "startLine": 1148,
-                  "startColumn": 13,
-                  "endLine": 1148,
-                  "endColumn": 16,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/controls/richText/RichText.tsx",
-                  "index": 320
-                },
-                "region": {
-                  "startLine": 1149,
-                  "startColumn": 11,
-                  "endLine": 1149,
-                  "endColumn": 14,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/controls/richText/RichText.tsx",
-                  "index": 320
-                },
-                "region": {
-                  "startLine": 1133,
+                  "startLine": 1137,
                   "startColumn": 43,
-                  "endLine": 1133,
-                  "endColumn": 46,
-                  "snippet": {
-                    "text": "any"
-                  }
+                  "endLine": 1137,
+                  "endColumn": 46
                 }
               }
             }
@@ -10027,13 +9856,10 @@
                   "index": 320
                 },
                 "region": {
-                  "startLine": 1213,
+                  "startLine": 1217,
                   "startColumn": 19,
-                  "endLine": 1213,
-                  "endColumn": 22,
-                  "snippet": {
-                    "text": "any"
-                  }
+                  "endLine": 1217,
+                  "endColumn": 22
                 }
               }
             }
@@ -10060,13 +9886,10 @@
                   "index": 320
                 },
                 "region": {
-                  "startLine": 1273,
+                  "startLine": 1277,
                   "startColumn": 26,
-                  "endLine": 1273,
-                  "endColumn": 29,
-                  "snippet": {
-                    "text": "any"
-                  }
+                  "endLine": 1277,
+                  "endColumn": 29
                 }
               }
             }
@@ -10093,13 +9916,10 @@
                   "index": 320
                 },
                 "region": {
-                  "startLine": 1282,
+                  "startLine": 1286,
                   "startColumn": 33,
-                  "endLine": 1282,
-                  "endColumn": 36,
-                  "snippet": {
-                    "text": "any"
-                  }
+                  "endLine": 1286,
+                  "endColumn": 36
                 }
               }
             }
@@ -21357,61 +21177,6 @@
             }
           ]
         },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/TestControl.tsx",
-                  "index": 914
-                },
-                "region": {
-                  "startLine": 45,
-                  "startColumn": 17,
-                  "endLine": 45,
-                  "endColumn": 20,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 915
-                },
-                "region": {
-                  "startLine": 324,
-                  "startColumn": 23,
-                  "endLine": 324,
-                  "endColumn": 26,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
         {
           "level": "warning",
           "message": {
@@ -21552,34 +21317,6 @@
           "ruleIndex": 0,
           "suppressions": []
         },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 915
-                },
-                "region": {
-                  "startLine": 1067,
-                  "startColumn": 38,
-                  "endLine": 1067,
-                  "endColumn": 41,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
         {
           "level": "warning",
           "message": {
@@ -21667,7 +21404,7 @@
         {
           "level": "warning",
           "message": {
-            "text": "File has too many lines (3258). Maximum allowed is 2000."
+            "text": "File has too many lines (3260). Maximum allowed is 2000."
           },
           "locations": [
             {
@@ -21679,10 +21416,10 @@
                 "region": {
                   "startLine": 2001,
                   "startColumn": 1,
-                  "endLine": 3259,
+                  "endLine": 3261,
                   "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               />\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                </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                </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); }} />\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 &#39;Fluent UI&#39; 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 = (): Record<string, unknown>[] => {\n    const result: Record<string, unknown>[] = [];\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): void {\n    console.log((isExpanded ? \"item expanded: \" : \"item collapsed: \") + item);\n  }\n\n  private onItemSelected(items: ITreeItem[]): void {\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): void {\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          }\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: HTMLIFrameElement) => { 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: HTMLIFrameElement) => { 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               />\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={this._onRenderGridItem}\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                </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                </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); }} />\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 &#39;Fluent UI&#39; 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(state => ({\n                    testTerms: typeof value === 'function' ? value(state.testTerms) : value\n                  }))}\n                  termStoreInfo={this.state.termStoreInfo}\n                  termSetInfo={this.state.termSetInfo}\n                  terms={this.state.testTerms}\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 as Theme} />\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 = (): Record<string, unknown>[] => {\n    const result: Record<string, unknown>[] = [];\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,\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): void {\n    console.log((isExpanded ? \"item expanded: \" : \"item collapsed: \") + item);\n  }\n\n  private onItemSelected(items: ITreeItem[]): void {\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): void {\n    console.log('Page:', page);\n  }\n\n  // private _onFolderSelect = (folder: IFolder): void => {\n  //   console.log('selected folder', folder);\n  //\n}\n"
                   }
                 }
               }
@@ -21692,62 +21429,6 @@
           "ruleIndex": 16,
           "suppressions": []
         },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 915
-                },
-                "region": {
-                  "startLine": 2114,
-                  "startColumn": 42,
-                  "endLine": 2114,
-                  "endColumn": 45,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 915
-                },
-                "region": {
-                  "startLine": 2151,
-                  "startColumn": 42,
-                  "endLine": 2151,
-                  "endColumn": 45,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
         {
           "level": "warning",
           "message": {
@@ -21776,34 +21457,6 @@
           "ruleIndex": 17,
           "suppressions": []
         },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 915
-                },
-                "region": {
-                  "startLine": 2379,
-                  "startColumn": 42,
-                  "endLine": 2379,
-                  "endColumn": 45,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
         {
           "level": "warning",
           "message": {
@@ -21845,65 +21498,9 @@
                   "index": 915
                 },
                 "region": {
-                  "startLine": 3113,
-                  "startColumn": 76,
-                  "endLine": 3113,
-                  "endColumn": 79,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 915
-                },
-                "region": {
-                  "startLine": 3116,
-                  "startColumn": 50,
-                  "endLine": 3116,
-                  "endColumn": 53,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 915
-                },
-                "region": {
-                  "startLine": 3129,
+                  "startLine": 3131,
                   "startColumn": 51,
-                  "endLine": 3129,
+                  "endLine": 3131,
                   "endColumn": 54,
                   "snippet": {
                     "text": "any"
@@ -21929,9 +21526,9 @@
                   "index": 915
                 },
                 "region": {
-                  "startLine": 3189,
+                  "startLine": 3191,
                   "startColumn": 82,
-                  "endLine": 3189,
+                  "endLine": 3191,
                   "endColumn": 85,
                   "snippet": {
                     "text": "any"
@@ -21944,34 +21541,6 @@
           "ruleIndex": 0,
           "suppressions": []
         },
-        {
-          "level": "warning",
-          "message": {
-            "text": "Unexpected any. Specify a different type."
-          },
-          "locations": [
-            {
-              "physicalLocation": {
-                "artifactLocation": {
-                  "uri": "src/webparts/controlsTest/components/ControlsTest.tsx",
-                  "index": 915
-                },
-                "region": {
-                  "startLine": 3222,
-                  "startColumn": 27,
-                  "endLine": 3222,
-                  "endColumn": 30,
-                  "snippet": {
-                    "text": "any"
-                  }
-                }
-              }
-            }
-          ],
-          "ruleId": "@typescript-eslint/no-explicit-any",
-          "ruleIndex": 0,
-          "suppressions": []
-        },
         {
           "level": "warning",
           "message": {