v3.20.0

.eslintrc.js

@@ -27,39 +27,6 @@ module.exports = {
         '@rushstack/security/no-unsafe-regexp': 0,
         // STANDARDIZED BY:   @typescript-eslint\eslint-plugin\dist\configs\recommended.json
         '@typescript-eslint/adjacent-overload-signatures': 1,
-        // STANDARDIZED BY:   @typescript-eslint\eslint-plugin\dist\configs\recommended.json
-        //
-        // CONFIGURATION:     By default, these are banned: String, Boolean, Number, Object, Symbol
-        '@typescript-eslint/ban-types': [
-          1,
-          {
-            'extendDefaults': false,
-            'types': {
-              'String': {
-                'message': 'Use \'string\' instead',
-                'fixWith': 'string'
-              },
-              'Boolean': {
-                'message': 'Use \'boolean\' instead',
-                'fixWith': 'boolean'
-              },
-              'Number': {
-                'message': 'Use \'number\' instead',
-                'fixWith': 'number'
-              },
-              'Object': {
-                'message': 'Use \'object\' instead, or else define a proper TypeScript type:'
-              },
-              'Symbol': {
-                'message': 'Use \'symbol\' instead',
-                'fixWith': 'symbol'
-              },
-              'Function': {
-                'message': 'The \'Function\' type accepts any function-like value.\nIt provides no type safety when calling the function, which can be a common source of bugs.\nIt also accepts things like class declarations, which will throw at runtime as they will not be called with \'new\'.\nIf you are expecting the function to accept certain arguments, you should explicitly define the function shape.'
-              }
-            }
-          }
-        ],
         // RATIONALE:         Code is more readable when the type of every variable is immediately obvious.
         //                    Even if the compiler may be able to infer a type, this inference will be unavailable
         //                    to a person who is reviewing a GitHub diff.  This rule makes writing code harder,
@@ -125,7 +92,7 @@ module.exports = {
         //
         // STANDARDIZED BY:   @typescript-eslint\eslint-plugin\dist\configs\recommended.json
         // Set to 1 (warning) or 2 (error) to enable the rule
-        '@typescript-eslint/no-parameter-properties': 0,
+        '@typescript-eslint/parameter-properties': 0,
         // RATIONALE:         When left in shipping code, unused variables often indicate a mistake.  Dead code
         //                    may impact performance.
         //
@@ -358,4 +325,4 @@ module.exports = {
       }
     }
   ]
-};
+};

.hintrc

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/aria": "off",
+    "no-inline-styles": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "frame-title": "off"
+      }
+    ]
+  }
+}

.yo-rc.json

@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.19.0",
+    "version": "1.20.0",
     "libraryName": "sp-dev-fx-controls-react",
     "libraryId": "92b1e52c-a5fa-490a-bcf4-76080f39442c",
     "environment": "spo",
@@ -11,7 +11,7 @@
     "nodeVersion": "18.17.1",
     "sdksVersions": {
       "@microsoft/microsoft-graph-client": "3.0.2",
-      "@microsoft/teams-js": "2.12.0"
+      "@microsoft/teams-js": "2.24.0"
     },
     "componentType": "extension",
     "extensionType": "ApplicationCustomizer"

CHANGELOG.json

@@ -1,5 +1,45 @@
 {
   "versions": [
+    {
+      "version": "3.20.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`Dashboard`: added new WidgetSize [#1845](https://github.com/pnp/sp-dev-fx-controls-react/pull/1845)",
+          "`Dashboard`: IWidgetLink improvements [#1813](https://github.com/pnp/sp-dev-fx-controls-react/pull/1813)",
+          "`DynamicForm`: custom sorting [#1802](https://github.com/pnp/sp-dev-fx-controls-react/pull/1802)",
+          "`ImagePicker`: new Control ImagePicker [#1820](https://github.com/pnp/sp-dev-fx-controls-react/pull/1820)",
+          "`UserPicker`: new Control UserPicker [#1675](https://github.com/pnp/sp-dev-fx-controls-react/pull/1675)",
+          "`DynamicForm`: DynamicForm storeLastActiveTab option #1879 [#1879](https://github.com/pnp/sp-dev-fx-controls-react/pull/1879)",
+          "`FilePicker`: Image picker enhancements [#1805](https://github.com/pnp/sp-dev-fx-controls-react/pull/1805)",
+          "`DynamicForm`: Adds ability to create files/folders in subfolder using DynamicForm. [#1901](https://github.com/pnp/sp-dev-fx-controls-react/issues/1901)"
+        ],
+        "fixes": [
+          "Debug Controls in any language [#1882](https://github.com/pnp/sp-dev-fx-controls-react/pull/1882)",
+          "`AdaptiveCardHost`: lock down adaptive-expression package version [#1876](https://github.com/pnp/sp-dev-fx-controls-react/issues/1876)",
+          "`ListItemPicker`: PR fixes an issue with filtering when using calculated column as columnInternalName in ListItemPicker. [#1887](https://github.com/pnp/sp-dev-fx-controls-react/pull/1887)",
+          "`ListItemAttachments`: Fix 1858 to correct Chinese localization files #1894 [#1894](https://github.com/pnp/sp-dev-fx-controls-react/pull/1894)",
+          "`DynamicForm`: Fixing issue 1862 - Dynamic form should hide fields that are hidden on the List Content Type [#1872](https://github.com/pnp/sp-dev-fx-controls-react/pull/1872)",
+          "`GridLayout`: A quick fix for #838. When compact mode the number of items rendered per page must match the number of all items. [1851](https://github.com/pnp/sp-dev-fx-controls-react/pull/1851)",
+          "`DynamicForm`: Always Show Required Field Validation Error In FormDisplayMode.Edit Mode [#1775](https://github.com/pnp/sp-dev-fx-controls-react/issues/1775)",
+          "`DynamicForm`: Required Field Validation won't work [#1760](https://github.com/pnp/sp-dev-fx-controls-react/issues/1760)",
+          "`DynamicForm`: Adds ability to render file/folder name field in DynamicForm and Field. [#1906](https://github.com/pnp/sp-dev-fx-controls-react/pull/1906)"
+        ]
+      },
+      "contributions": [
+        "[Alex Terentiev](https://github.com/AJIXuMuK)",
+        "[Antanina Druzhkina](https://github.com/Ateina)",
+        "[Guido Zambarda](https://github.com/GuidoZam)",
+        "[IRRDC](https://github.com/IRRDC)",
+        "[joaojmendes](https://github.com/joaojmendes)",
+        "[Martin Lingstuyl](https://github.com/martinlingstuyl)",
+        "[Michaël Maillot](https://github.com/michaelmaillot)",
+        "[Nishkalank Bezawada](https://github.com/NishkalankBezawada)",
+        "[srpmtt](https://github.com/srpmtt)",
+        "[wilecoyotegenius](https://github.com/wilecoyotegenius)",
+        "[wuxiaojun514](https://github.com/wuxiaojun514)"
+      ]
+    },
     {
       "version": "3.19.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Releases
 
+## 3.20.0
+
+### Enhancements
+
+- `Dashboard`: added new WidgetSize [#1845](https://github.com/pnp/sp-dev-fx-controls-react/pull/1845)
+- `Dashboard`: IWidgetLink improvements [#1813](https://github.com/pnp/sp-dev-fx-controls-react/pull/1813)
+- `DynamicForm`: custom sorting [#1802](https://github.com/pnp/sp-dev-fx-controls-react/pull/1802)
+- `ImagePicker`: new Control ImagePicker [#1820](https://github.com/pnp/sp-dev-fx-controls-react/pull/1820)
+- `UserPicker`: new Control UserPicker [#1675](https://github.com/pnp/sp-dev-fx-controls-react/pull/1675)
+- `DynamicForm`: DynamicForm storeLastActiveTab option #1879 [#1879](https://github.com/pnp/sp-dev-fx-controls-react/pull/1879)
+- `FilePicker`: Image picker enhancements [#1805](https://github.com/pnp/sp-dev-fx-controls-react/pull/1805)
+- `DynamicForm`: Adds ability to create files/folders in subfolder using DynamicForm. [#1901](https://github.com/pnp/sp-dev-fx-controls-react/issues/1901)
+
+### Fixes
+
+- Debug Controls in any language [#1882](https://github.com/pnp/sp-dev-fx-controls-react/pull/1882)
+- `AdaptiveCardHost`: lock down adaptive-expression package version [#1876](https://github.com/pnp/sp-dev-fx-controls-react/issues/1876)
+- `ListItemPicker`: PR fixes an issue with filtering when using calculated column as columnInternalName in ListItemPicker. [#1887](https://github.com/pnp/sp-dev-fx-controls-react/pull/1887)
+- `ListItemAttachments`: Fix 1858 to correct Chinese localization files #1894 [#1894](https://github.com/pnp/sp-dev-fx-controls-react/pull/1894)
+- `DynamicForm`: Fixing issue 1862 - Dynamic form should hide fields that are hidden on the List Content Type [#1872](https://github.com/pnp/sp-dev-fx-controls-react/pull/1872)
+- `GridLayout`: A quick fix for #838. When compact mode the number of items rendered per page must match the number of all items. [1851](https://github.com/pnp/sp-dev-fx-controls-react/pull/1851)
+- `DynamicForm`: Always Show Required Field Validation Error In FormDisplayMode.Edit Mode [#1775](https://github.com/pnp/sp-dev-fx-controls-react/issues/1775)
+- `DynamicForm`: Required Field Validation won't work [#1760](https://github.com/pnp/sp-dev-fx-controls-react/issues/1760)
+- `DynamicForm`: Adds ability to render file/folder name field in DynamicForm and Field. [#1906](https://github.com/pnp/sp-dev-fx-controls-react/pull/1906)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Alex Terentiev](https://github.com/AJIXuMuK), [Antanina Druzhkina](https://github.com/Ateina), [Guido Zambarda](https://github.com/GuidoZam), [IRRDC](https://github.com/IRRDC), [joaojmendes](https://github.com/joaojmendes), [Martin Lingstuyl](https://github.com/martinlingstuyl), [Michaël Maillot](https://github.com/michaelmaillot), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [srpmtt](https://github.com/srpmtt), [wilecoyotegenius](https://github.com/wilecoyotegenius), [wuxiaojun514](https://github.com/wuxiaojun514).
+
 ## 3.19.0
 
 ### Enhancements

config/config.json

@@ -37,9 +37,6 @@
   },
   "externals": {},
   "localizedResources": {
-    "ControlStrings": "lib/loc/{locale}.js",
-    "ControlsTestWebPartStrings": "lib/webparts/controlsTest/loc/{locale}.js",
-    "ControlsTestFormCustomizerStrings": "lib/extensions/testForm/loc/{locale}.js",
-    "TestApplicationCustomizerStrings": "lib/extensions/testApp/loc/{locale}.js"
+    "ControlStrings": "lib/loc/{locale}.js"
   }
 }

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,34 @@
 # Releases
 
+## 3.20.0
+
+### Enhancements
+
+- `Dashboard`: added new WidgetSize [#1845](https://github.com/pnp/sp-dev-fx-controls-react/pull/1845)
+- `Dashboard`: IWidgetLink improvements [#1813](https://github.com/pnp/sp-dev-fx-controls-react/pull/1813)
+- `DynamicForm`: custom sorting [#1802](https://github.com/pnp/sp-dev-fx-controls-react/pull/1802)
+- `ImagePicker`: new Control ImagePicker [#1820](https://github.com/pnp/sp-dev-fx-controls-react/pull/1820)
+- `UserPicker`: new Control UserPicker [#1675](https://github.com/pnp/sp-dev-fx-controls-react/pull/1675)
+- `DynamicForm`: DynamicForm storeLastActiveTab option #1879 [#1879](https://github.com/pnp/sp-dev-fx-controls-react/pull/1879)
+- `FilePicker`: Image picker enhancements [#1805](https://github.com/pnp/sp-dev-fx-controls-react/pull/1805)
+- `DynamicForm`: Adds ability to create files/folders in subfolder using DynamicForm. [#1901](https://github.com/pnp/sp-dev-fx-controls-react/issues/1901)
+
+### Fixes
+
+- Debug Controls in any language [#1882](https://github.com/pnp/sp-dev-fx-controls-react/pull/1882)
+- `AdaptiveCardHost`: lock down adaptive-expression package version [#1876](https://github.com/pnp/sp-dev-fx-controls-react/issues/1876)
+- `ListItemPicker`: PR fixes an issue with filtering when using calculated column as columnInternalName in ListItemPicker. [#1887](https://github.com/pnp/sp-dev-fx-controls-react/pull/1887)
+- `ListItemAttachments`: Fix 1858 to correct Chinese localization files #1894 [#1894](https://github.com/pnp/sp-dev-fx-controls-react/pull/1894)
+- `DynamicForm`: Fixing issue 1862 - Dynamic form should hide fields that are hidden on the List Content Type [#1872](https://github.com/pnp/sp-dev-fx-controls-react/pull/1872)
+- `GridLayout`: A quick fix for #838. When compact mode the number of items rendered per page must match the number of all items. [1851](https://github.com/pnp/sp-dev-fx-controls-react/pull/1851)
+- `DynamicForm`: Always Show Required Field Validation Error In FormDisplayMode.Edit Mode [#1775](https://github.com/pnp/sp-dev-fx-controls-react/issues/1775)
+- `DynamicForm`: Required Field Validation won't work [#1760](https://github.com/pnp/sp-dev-fx-controls-react/issues/1760)
+- `DynamicForm`: Adds ability to render file/folder name field in DynamicForm and Field. [#1906](https://github.com/pnp/sp-dev-fx-controls-react/pull/1906)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Alex Terentiev](https://github.com/AJIXuMuK), [Antanina Druzhkina](https://github.com/Ateina), [Guido Zambarda](https://github.com/GuidoZam), [IRRDC](https://github.com/IRRDC), [joaojmendes](https://github.com/joaojmendes), [Martin Lingstuyl](https://github.com/martinlingstuyl), [Michaël Maillot](https://github.com/michaelmaillot), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [srpmtt](https://github.com/srpmtt), [wilecoyotegenius](https://github.com/wilecoyotegenius), [wuxiaojun514](https://github.com/wuxiaojun514).
+
 ## 3.19.0
 
 ### Enhancements

docs/documentation/docs/controls/Dashboard.md

@@ -22,6 +22,12 @@ import { WidgetSize, Dashboard } from '@pnp/spfx-controls-react/lib/Dashboard';
 
 ```TypeScript
 const linkExample = { href: "#" };
+const customizedLinkExample = {
+      href: "#",
+      title: "This is a customized link!",
+      color: "red",
+      target: "_top"
+    };
 const calloutItemsExample = [
   {
     id: "action_1",
@@ -71,7 +77,7 @@ const calloutItemsExample = [
   {
     title: "Card 2",
     size: WidgetSize.Single,
-    link: linkExample,
+    link: customizedLinkExample,
   },
   {
     title: "Card 3",
@@ -142,6 +148,9 @@ Provides Widget link properties
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
 | href | string | yes | Link to be opened. |
+| title | string | no | The text to display for the link, if not provided, the default text will be used. |
+| color | string | no | The color of the link, if not provided, the "default" color will be used. The available colors can be found on the [official Fluent UI documentation of the Text control](https://fluentsite.z22.web.core.windows.net/0.66.2/components/text/definition#variations-color). |
+| target | string | no | The target property value for the generated anchor tag, if not provided, the default target will be *_blank*. |
 
 Enum `WidgetSize`
 
@@ -152,6 +161,7 @@ Provides size of the widget
 | Single | Single-sized grid item. |
 | Double | Double-width grid item. |
 | Triple | Triple width grid item. |
+| Quadruple | Quadruple width grid item. |
 | Box | Double-width, double-height grid item. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Dashboard)

docs/documentation/docs/controls/DynamicForm.md

@@ -50,6 +50,7 @@ The `DynamicForm` can be configured with the following properties:
 | disabled | boolean | no | Allows form to be disabled. Default value is `false`|
 | disabledFields | string[] | no | InternalName of fields that should be disabled. Default value is `false`|
 | enableFileSelection | boolean | no | Specify if the form should support the creation of a new list item in a document library attaching a file to it. This option is only available for document libraries and works only when the contentTypeId is specified and has a base type of type Document. Default value is `false`|
+| fieldOrder | string[] | no | List of fields internal names. Specifies fields custom sorting. |
 | hiddenFields | string[] | no | InternalName of fields that should be hidden. Default value is `false`|
 | onListItemLoaded | (listItemData: any) => Promise<void> | no | List item loaded handler. Allows to access list item information after it's loaded.|
 | onBeforeSubmit | (listItemData: any) => Promise<boolean> | no | Before submit handler. Allows to modify the object to be submitted or cancel the submission. To cancel, return `true`.|
@@ -64,6 +65,8 @@ The `DynamicForm` can be configured with the following properties:
 | saveDisabled | boolean | no | Specifies if save button is disabled. |
 | validationErrorDialogProps | IValidationErrorDialogProps | no | Specifies validation error dialog properties |
 | customIcons | { [ columnInternalName: string ]: string } | no | Specifies custom icons for the form. The key of this dictionary is the column internal name, the value is the Fluent UI icon name. | 
+| storeLastActiveTab | boolean | no |  When uploading files: Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default - `true` |
+| folderPath | string | no | Server relative or library relative folder to create the item in. This option is only available for document libraries and works only when the contentTypeId is specified and has a base type of type Document or Folder. Defaults to the root folder of the library. |
 
 ## Validation Error Dialog Properties `IValidationErrorDialogProps`
 | Property | Type | Required | Description |

docs/documentation/docs/controls/ImagePicker.md

@@ -0,0 +1,67 @@
+# HoverReactionsBar
+
+This control allows you to select or Upload Image from SharePoint, Ondrive or Stock Images.
+
+## ImagePicker
+
+![imagepicker](../assets/ImagePicker00.png)
+
+![imagepicker](../assets/ImagePicker01.png)
+
+![imagepicker](../assets/ImagePicker02.png)
+
+![imagepicker](../assets/ImagePicker03.png)
+
+![imagepicker](../assets/ImagePicker04.png)
+
+![imagepicker](../assets/ImagePicker05.png)
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import { ImagePicker } from '@pnp/spfx-controls-react/lib/ImagePicker';
+```
+
+- Use the `ImagePicker` control in your code as follows:
+
+```Typescript
+
+  <ImagePicker
+  onFileSelected={handleFileSelected}
+  onDeleteFile={handleDeleteFile}
+  selectedFileUrl={selectedImageUrl}
+  context={appContext}
+ >
+```
+
+- With the `onFileSelect` property you can get the selected image:
+
+  ```typescript
+  const handleFileSelected = React.useCallback(async (file: IFilePickerResult) => {
+    console.log("file", file);
+  }, []);
+  ```
+
+- With the `onDelete` property you can execute a callback after delete the image:
+
+```typescript
+const onDeleteFile = React.useCallback(async () => {
+  console.log("onDeleteFile");
+}, []);
+```
+
+## Implementation
+
+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  |
+| context         | BaseComponentContext                              | yes      | Context                 |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ImagePicker)