Optimizing ControlsTest webpart (lazy loading)

docs/documentation/docs/controls/HoverReactionsBar.md

@@ -42,24 +42,24 @@ const onSelectEmoji = React.useCallback(async (emoji: string, emojiInfo: IEmojiI
 }, []);
 
 onSelect: (emoji: string | undefined, emojiInfo?: IEmojiInfo) => void;
-  isOpen: boolean;
-  onDismiss: () => void;
-  top4Reactions?: string[];
-  target: HTMLDivElement;
-  themeV8?: Theme ;
+isOpen: boolean;
+onDismiss: () => void;
+top4Reactions?: string[];
+target: HTMLDivElement;
+themeV8?: Theme;
 ```
 
 ## Implementation
 
 The HoverReactionsBar control can be configured with the following properties:
 
-| Property | Type | Required | Description |
-| ---- | ---- | ---- | ---- |
-| isOpen | boolean | yes | show hoverReactionsBar |
-| onSelected |onSelect: (emoji: string, emojiInfo?: IEmojiInfo) => void;| yes | selected Emoji |
-| top4Reactions |  string[] | no |  name of emojis to show on the bar  |
-| target | HTMLDivElement | yes | container of controls who fire the HoverReactionsBar |
-| onDismiss | onDismiss: () => void; | yes | function to call to dismiss HoverReactionsBar|
-| themeV8 | Theme | No | Set Fluent UI Theme|
+| Property      | Type                                                       | Required | Description                                          |
+| ------------- | ---------------------------------------------------------- | -------- | ---------------------------------------------------- |
+| isOpen        | boolean                                                    | yes      | show hoverReactionsBar                               |
+| onSelected    | onSelect: (emoji: string, emojiInfo?: IEmojiInfo) => void; | yes      | selected Emoji                                       |
+| top4Reactions | string[]                                                   | no       | name of emojis to show on the bar                    |
+| target        | HTMLDivElement                                             | yes      | container of controls who fire the HoverReactionsBar |
+| onDismiss     | onDismiss: () => void;                                     | yes      | function to call to dismiss HoverReactionsBar        |
+| themeV8       | Theme                                                      | No       | Set Fluent UI Theme                                  |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/HoverReactionsBar)

docs/documentation/docs/controls/ImagePicker.md

@@ -33,8 +33,7 @@ import { ImagePicker } from '@pnp/spfx-controls-react/lib/ImagePicker';
   onFileSelected={handleFileSelected}
   onDeleteFile={handleDeleteFile}
   selectedFileUrl={selectedImageUrl}
-  context={appContext}
- >
+  context={appContext} />
 ```
 
 - With the `onFileSelect` property you can get the selected image:
@@ -60,8 +59,8 @@ The HoverReactionsBar control can be configured with the following properties:
 | Property        | Type                                              | Required | Description             |
 | --------------- | ------------------------------------------------- | -------- | ----------------------- |
 | onFileSelected  | onFileSelect: (file: IFilePickerResult ) => void; | yes      | OnSelectedFile Callback |
-| onDeleteFile    | onDeleteFile: () => void                          | no       | onDeleteFile CallBack   |
-| selectedFileUrl | string                                            | no       | Default Selected Image  |
+| onDeleteFile    | onDeleteFile: () => void                          | yes      | onDeleteFile CallBack   |
+| selectedFileUrl | string                                            | yes      | Default Selected Image  |
 | context         | BaseComponentContext                              | yes      | Context                 |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ImagePicker)

docs/documentation/docs/controls/TermSetNavigation.md

@@ -82,6 +82,4 @@ This control requires at least one of the following scopes:
 - `TermStore.Read.All`
 - `TermStore.ReadWrite.All`
 
-These M365Cli or PnP Powershell to add these permissions.
-
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/TermSetNavigation)

src/controls/dragDropFiles/DragDropFiles.tsx

@@ -14,7 +14,7 @@ export class DragDropFiles extends React.Component<IDragDropFilesProps, IDragDro
   private _dropEffect;
   private _enable;
 
-  constructor(props: IDragDropFilesProps) {
+  constructor(props: React.PropsWithChildren<IDragDropFilesProps>) {
     super(props);
     // Initialize state
     this.state = {

src/controls/fieldCollectionData/index.ts

@@ -1,5 +1,4 @@
 export * from './ICustomCollectionField';
 export * from './IFieldCollectionData';
-export * from './IFieldCollectionData';
 export * from './FieldCollectionData';
 export * from './FieldValidator';

src/controls/securityTrimmedControl/SecurityTrimmedControl.tsx

@@ -6,7 +6,7 @@ import * as telemetry from '../../common/telemetry';
 import { Spinner } from '@fluentui/react/lib/Spinner';
 
 export class SecurityTrimmedControl extends React.Component<ISecurityTrimmedControlProps, ISecurityTrimmedControlState> {
-  constructor(props: ISecurityTrimmedControlProps) {
+  constructor(props: React.PropsWithChildren<ISecurityTrimmedControlProps>) {
     super(props);
 
     this.state = {

src/webparts/controlsTest/ControlsTestWebPart.manifest.json

@@ -32,13 +32,14 @@
         "dynamicFormFileSelectionEnabled": false,
         "controlVisibility": {
           "all": false,
-          "accessibleAccordion": false,
-          "adaptiveCardDesignerHost": false,
-          "adaptiveCardHost": false,
-          "animatedDialog": false,
+          "AccessibleAccordion": false,
+          "AdaptiveCardDesignerHost": false,
+          "AdaptiveCardHost": false,
+          "AnimatedDialog": false,
           "Carousel": false,
           "ChartControl": false,
           "ComboBoxListItemPicker": false,
+          "ContentTypePicker": false,
           "Dashboard": false,
           "DateTimePicker": false,
           "DragDropFiles": false,
@@ -51,32 +52,40 @@
           "FolderExplorer": false,
           "FolderPicker": false,
           "GridLayout": false,
+          "HoverReactionsBar": false,
           "IconPicker": false,
           "IFrameDialog": false,
           "IFramePanel": false,
+          "ImagePicker": false,
+          "ListItemAttachments": false,
           "ListItemComments": false,
           "ListItemPicker": false,
           "ListPicker": false,
           "ListView": false,
+          "LivePersona": false,
           "LocationPicker": false,
           "Map": false,
           "ModernAudio": false,
           "ModernTaxonomyPicker": false,
+          "MonacoEditor": false,
           "Pagination": false,
           "PeoplePicker": false,
           "Placeholder": false,
           "Progress": false,
+          "ProgressStepsIndicator": false,
           "RichText": false,
           "SecurityTrimmedControl": false,
           "SiteBreadcrumb": false,
           "SitePicker": false,
           "TaxonomyPicker": false,
           "TaxonomyTree": false,
           "Teams": false,
+          "TermSetNavigation": false,
           "TestControl": false,
           "Toolbar": false,
           "TreeView": false,
           "UploadFiles": false,
+          "UserPicker": false,
           "VariantThemeProvider": false,
           "ViewPicker": false,
           "WebPartTitle": false

src/webparts/controlsTest/ControlsTestWebPart.ts

@@ -89,7 +89,6 @@ export default class ControlsTestWebPart extends BaseClientSideWebPart<IControls
   if (listItemId < 1 || isNaN(listItemId)) {
     listItemId = undefined;
   }
-  console.log(listItemId);
 
   const element: React.ReactElement<IControlsTestProps> = React.createElement(
     ControlsTest,

src/webparts/controlsTest/IControlsTestWebPartProps.ts

@@ -1,20 +1,21 @@
 export type ValidControls = "all" | 
-  "accessibleAccordion" | "adaptiveCardDesignerHost" | "adaptiveCardHost" | 
-  "animatedDialog" | "Carousel" | "ChartControl" | 
-  "ComboBoxListItemPicker" | "Dashboard" | "DateTimePicker" | 
+  "AccessibleAccordion" | "AdaptiveCardDesignerHost" | "AdaptiveCardHost" | 
+  "AnimatedDialog" | "Carousel" | "ChartControl" | 
+  "ComboBoxListItemPicker" | "ContentTypePicker" | "Dashboard" | "DateTimePicker" | 
   "DragDropFiles" | "DynamicForm" | "EnhancedThemeProvider" | 
   "FieldCollectionData" | "FieldPicker" | "FilePicker" | 
   "FileTypeIcon" | "FolderExplorer" | "FolderPicker" |
-  "GridLayout" | "IconPicker" | "IFrameDialog" |
-  "IFramePanel" | "ListPicker" | "ListItemPicker" |
-  "ListItemComments" | "ViewPicker" | "ListView" |
+  "GridLayout" | "HoverReactionsBar" | "IconPicker" | "IFrameDialog" |
+  "IFramePanel" | "ImagePicker" | "ListItemAttachments" | "ListItemComments" |
+  "ListItemPicker" | "ListPicker" | "ListView" | "LivePersona" |
   "LocationPicker" | "Map" | "ModernAudio" |
-  "ModernTaxonomyPicker" | "Pagination" | "PeoplePicker" |
-  "Placeholder" | "Progress" | "RichText" |
+  "ModernTaxonomyPicker" | "MonacoEditor" | "Pagination" | "PeoplePicker" |
+  "Placeholder" | "Progress" | "ProgressStepsIndicator" | "RichText" |
   "SecurityTrimmedControl" | "SiteBreadcrumb" | "SitePicker" |
-  "TaxonomyPicker" | "TaxonomyTree" | "Teams" |
+  "TaxonomyPicker" | "TaxonomyTree" | "Teams" | "TermSetNavigation" |
   "TestControl" | "Toolbar" | "TreeView" |
-  "UploadFiles" | "VariantThemeProvider" | "WebPartTitle";
+  "UploadFiles" | "UserPicker" | "VariantThemeProvider" | "ViewPicker" | 
+  "WebPartTitle";
 
 export type ControlVisibility = {
   [K in ValidControls]: boolean;