pnp · joaojmendes · Oct 18, 2024 · Oct 7, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/aria": "off",
+    "no-inline-styles": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "frame-title": "off"
+      }
+    ]
+  }
+}
diff --git a/CHANGELOG.json b/CHANGELOG.json
@@ -7,7 +7,8 @@
         "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)"
+          "`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)"
         ],
         "fixes": [
           "Debug Controls in any language [#1882](https://github.com/pnp/sp-dev-fx-controls-react/pull/1882)",
@@ -18,7 +19,8 @@
         "[Guido Zambarda](https://github.com/GuidoZam)",
         "[Michaël Maillot](https://github.com/michaelmaillot)",
         "[srpmtt](https://github.com/srpmtt)",
-        "[wilecoyotegenius](https://github.com/wilecoyotegenius)"
+        "[wilecoyotegenius](https://github.com/wilecoyotegenius)",
+        "[joaojmendes](https://github.com/joaojmendes)"
       ]
     },
     {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - `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)
 
 ### Fixes
 
@@ -15,7 +16,7 @@
 
 ### Contributors
 
-Special thanks to our contributors (in alphabetical order): [Guido Zambarda](https://github.com/GuidoZam), [Michaël Maillot](https://github.com/michaelmaillot), [srpmtt](https://github.com/srpmtt), [wilecoyotegenius](https://github.com/wilecoyotegenius).
+Special thanks to our contributors (in alphabetical order): [Guido Zambarda](https://github.com/GuidoZam), [Michaël Maillot](https://github.com/michaelmaillot), [srpmtt](https://github.com/srpmtt), [wilecoyotegenius](https://github.com/wilecoyotegenius), [joaojmendes](https://github.com/joaojmendes).
 
 ## 3.19.0
 

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -7,6 +7,7 @@
 - `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)
 
 ### Fixes
 
@@ -15,7 +16,7 @@
 
 ### Contributors
 
-Special thanks to our contributors (in alphabetical order): [Guido Zambarda](https://github.com/GuidoZam), [Michaël Maillot](https://github.com/michaelmaillot), [srpmtt](https://github.com/srpmtt), [wilecoyotegenius](https://github.com/wilecoyotegenius).
+Special thanks to our contributors (in alphabetical order): [Guido Zambarda](https://github.com/GuidoZam), [Michaël Maillot](https://github.com/michaelmaillot), [srpmtt](https://github.com/srpmtt), [wilecoyotegenius](https://github.com/wilecoyotegenius), [joaojmendes](https://github.com/joaojmendes).
 
 ## 3.19.0
 

diff --git a/docs/documentation/docs/assets/ImagePicker00.png b/docs/documentation/docs/assets/ImagePicker00.png
diff --git a/docs/documentation/docs/assets/ImagePicker01.png b/docs/documentation/docs/assets/ImagePicker01.png
diff --git a/docs/documentation/docs/assets/ImagePicker02.png b/docs/documentation/docs/assets/ImagePicker02.png
diff --git a/docs/documentation/docs/assets/ImagePicker03.png b/docs/documentation/docs/assets/ImagePicker03.png
diff --git a/docs/documentation/docs/assets/ImagePicker04.png b/docs/documentation/docs/assets/ImagePicker04.png
diff --git a/docs/documentation/docs/assets/ImagePicker05.png b/docs/documentation/docs/assets/ImagePicker05.png
diff --git a/docs/documentation/docs/assets/userPicker01.png b/docs/documentation/docs/assets/userPicker01.png
diff --git a/docs/documentation/docs/assets/userPicker02.png b/docs/documentation/docs/assets/userPicker02.png
diff --git a/docs/documentation/docs/assets/userPicker03.png b/docs/documentation/docs/assets/userPicker03.png
diff --git a/docs/documentation/docs/controls/ImagePicker.md b/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)
diff --git a/docs/documentation/docs/controls/UserPicker.md b/docs/documentation/docs/controls/UserPicker.md
@@ -0,0 +1,90 @@
+# User Picker
+
+This control allows you to select one or more user from a AAD via its name or starting characters.
+
+!
+
+**Empty user picker**
+
+![Empty user picker](../assets/userPicker03.png)
+
+**Selecting Users**
+
+![Selecting users](../assets/userPicker02.png)
+
+**Selected users in picker**
+
+![Selected users in the input](../assets/userPicker01.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 { UserPicker } from '@pnp/spfx-controls-react/lib/userPicker';
+import { IUserInfo } from '@pnp/spfx-controls-react/lib/userPicker/models/IUserInfo';
+```
+
+- Use the `UserPicker` control in your code as follows:
+
+```TypeScript
+ <UserPicker
+        context={context}
+        secondaryTextPropertyName="mail"
+        theme={theme}
+        label={
+          <div className={styles.attributeHader}>
+            <Person20Filled color={tokens.colorBrandForeground1} />
+            <Body1>Select User</Body1>
+          </div>
+        }
+        placeholder={"Search User"}
+        onSelectedUsers={onSelectedUsers}
+        onRemoveSelectedUser={onRemovedUser}
+/>
+```
+
+- With the `onSelectedUsers` property you can capture the event of when the user in the picker has changed:
+
+```typescript
+const onSelectedUsers = React.useCallback((users: IUserInfo[]) => {
+  console.log(users);
+}, []);
+```
+
+- With the `onRemoveSelectedUser` property you can capture the event, when the user is removed from picker.
+
+```typescript
+const onRemovedUser = React.useCallback((user: IUserInfo) => {
+  console.log(user);
+}, []);
+```
+
+## Implementation
+
+The UseryPicker control can be configured with the following properties:
+
+| Property                  | Type                                                                                                                  | Required | Description                                                     |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------- |
+| userSelectionLimit        | number                                                                                                                | no       | Number selected users allowed                                   |
+| label                     | string or JSX.Element                                                                                                 | no       | Text or control displayed above the User Picker.                |
+| required                  | boolean                                                                                                               | no       | Specify if the control is required                              |
+| context                   | BaseComponentContext                                                                                                  | yes      | Context of the current web part or extension.                   |
+| validationMessage         | string                                                                                                                | no       | Defines message to show on picker                               |
+| messageType               | "error", "success" , "warning" , "none"                                                                               | no       | Defines message type to show if validationMessage is defined    |
+| onSelectedUsers           | (users: IUserInfo[]) => void                                                                                          | no       | captures the event of when the users in the picker has changed. |
+| onRemoveSelectedUser      | (user: IUserInfo) => void                                                                                             | no       | captures the event of when the user in the picker was removed   |
+| placeholder               | string                                                                                                                | no       | placeholder to show                                             |
+| defaultSelectdUsers       | IUserInfo[]                                                                                                           | no       | default users to show on the picker                             |
+| theme                     | IReadonlyTheme                                                                                                        | no       | theme                                                           |
+| secondaryTextPropertyName | values :"jobTitle" , "department" , "mail", "officeLocation" , "mobilePhone" , "businessPhones" , "userPrincipalName" | no       | secondary text to show on persona card                          |
+
+Interface `IUserInfo` extends User interface from `@microsoft/microsoft-graph-types``
+
+| Property  | Type     | Required | Description                      |
+| --------- | -------- | -------- | -------------------------------- |
+| userPhoto | string   | yes      | userPhoto to show on Person card |
+| presence  | Presence | yes      | user Presence                    |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/UserPicker)