Merge pull request #1863 from pnp/dev

Dev 3.19.0
pnp · Aug 14, 2024 · a72229f · a72229f
2 parents bf61b7a + b889753
commit a72229f
Show file tree

Hide file tree

Showing 36 changed files with 4,997 additions and 2,617 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -10,6 +10,7 @@ root = true
 # change these settings to your own preference
 indent_style = space
 indent_size = 2
+quote_type = single
 
 # we recommend you to keep these unchanged
 end_of_line = lf

diff --git a/.yo-rc.json b/.yo-rc.json
@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.18.2",
+    "version": "1.19.0",
     "libraryName": "sp-dev-fx-controls-react",
     "libraryId": "92b1e52c-a5fa-490a-bcf4-76080f39442c",
     "environment": "spo",

diff --git a/CHANGELOG.json b/CHANGELOG.json
@@ -1,5 +1,33 @@
 {
   "versions": [
+    {
+      "version": "3.19.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "SharePoint Framework v1.19.0 support [#1857](https://github.com/pnp/sp-dev-fx-controls-react/pull/1857)",
+          "`DynamicForm`: enable/disable save button [#1810](https://github.com/pnp/sp-dev-fx-controls-react/pull/1810)",
+          "`PeoplePicker`: add new prop - `useSubstrateSearch` [#1819](https://github.com/pnp/sp-dev-fx-controls-react/pull/1819)",
+          "`SitePicker`: add button to clear single / multiple selection [#1839](https://github.com/pnp/sp-dev-fx-controls-react/pull/1839)"
+        ],
+        "fixes": [
+          "`DynamicForm`: more than 100 lookups and date format in lookup field [#1722](https://github.com/pnp/sp-dev-fx-controls-react/pull/1722)",
+          "`Richtext`: can not undo ordered lists [#1135](https://github.com/pnp/sp-dev-fx-controls-react/issues/1135)",
+          "`FilePicker`: fixing organization tab browsing issue [#1861](https://github.com/pnp/sp-dev-fx-controls-react/pull/1861)",
+          "`PeoplePicker`: method to clear the array [#1838](https://github.com/pnp/sp-dev-fx-controls-react/pull/1838)",
+          "`SitePicker`: documentation patch [#1842](https://github.com/pnp/sp-dev-fx-controls-react/pull/1842)"
+        ]
+      },
+      "contributions": [
+        "[Alex Terentiev](https://github.com/AJIXuMuK)",
+        "[Antanina Druzhkina](https://github.com/Ateina)",
+        "[Guido Zambarda](https://github.com/GuidoZam)",
+        "[Luccas Castro](https://github.com/DevPio)",
+        "[Michaël Maillot](https://github.com/michaelmaillot)",
+        "[Niels Söth](https://github.com/nsoeth)",
+        "[srpmtt](https://github.com/srpmtt)"
+      ]
+    },
     {
       "version": "3.18.1",
       "changes": {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,26 @@
 # Releases
 
+## 3.19.0
+
+### Enhancements
+
+- SharePoint Framework v1.19.0 support [#1857](https://github.com/pnp/sp-dev-fx-controls-react/pull/1857)
+- `DynamicForm`: enable/disable save button [#1810](https://github.com/pnp/sp-dev-fx-controls-react/pull/1810)
+- `PeoplePicker`: add new prop - `useSubstrateSearch` [#1819](https://github.com/pnp/sp-dev-fx-controls-react/pull/1819)
+- `SitePicker`: add button to clear single / multiple selection [#1839](https://github.com/pnp/sp-dev-fx-controls-react/pull/1839)
+
+### Fixes
+
+- `DynamicForm`: more than 100 lookups and date format in lookup field [#1722](https://github.com/pnp/sp-dev-fx-controls-react/pull/1722)
+- `Richtext`: can not undo ordered lists [#1135](https://github.com/pnp/sp-dev-fx-controls-react/issues/1135)
+- `FilePicker`: fixing organization tab browsing issue [#1861](https://github.com/pnp/sp-dev-fx-controls-react/pull/1861)
+- `PeoplePicker`: method to clear the array [#1838](https://github.com/pnp/sp-dev-fx-controls-react/pull/1838)
+- `SitePicker`: documentation patch [#1842](https://github.com/pnp/sp-dev-fx-controls-react/pull/1842)
+
+### 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), [Luccas Castro](https://github.com/DevPio), [Michaël Maillot](https://github.com/michaelmaillot), [Niels Söth](https://github.com/nsoeth), [srpmtt](https://github.com/srpmtt).
+
 ## 3.18.1
 
 ### Fixes

diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md
@@ -1,5 +1,26 @@
 # Releases
 
+## 3.19.0
+
+### Enhancements
+
+- SharePoint Framework v1.19.0 support [#1857](https://github.com/pnp/sp-dev-fx-controls-react/pull/1857)
+- `DynamicForm`: enable/disable save button [#1810](https://github.com/pnp/sp-dev-fx-controls-react/pull/1810)
+- `PeoplePicker`: add new prop - `useSubstrateSearch` [#1819](https://github.com/pnp/sp-dev-fx-controls-react/pull/1819)
+- `SitePicker`: add button to clear single / multiple selection [#1839](https://github.com/pnp/sp-dev-fx-controls-react/pull/1839)
+
+### Fixes
+
+- `DynamicForm`: more than 100 lookups and date format in lookup field [#1722](https://github.com/pnp/sp-dev-fx-controls-react/pull/1722)
+- `Richtext`: can not undo ordered lists [#1135](https://github.com/pnp/sp-dev-fx-controls-react/issues/1135)
+- `FilePicker`: fixing organization tab browsing issue [#1861](https://github.com/pnp/sp-dev-fx-controls-react/pull/1861)
+- `PeoplePicker`: method to clear the array [#1838](https://github.com/pnp/sp-dev-fx-controls-react/pull/1838)
+- `SitePicker`: documentation patch [#1842](https://github.com/pnp/sp-dev-fx-controls-react/pull/1842)
+
+### 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), [Luccas Castro](https://github.com/DevPio), [Michaël Maillot](https://github.com/michaelmaillot), [Niels Söth](https://github.com/nsoeth), [srpmtt](https://github.com/srpmtt).
+
 ## 3.18.1
 
 ### Fixes

diff --git a/docs/documentation/docs/controls/DynamicForm.md b/docs/documentation/docs/controls/DynamicForm.md
@@ -61,6 +61,7 @@ The `DynamicForm` can be configured with the following properties:
 | webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). |
 | fieldOverrides | {[columnInternalName: string] : {(fieldProperties: IDynamicFieldProps): React.ReactElement\<IDynamicFieldProps\>}} | no | Key value pair for fields you want to override.  Key is the internal field name, value is the function to be called for the custom element to render. |
 | respectEtag | boolean | no | Specifies if the form should respect the ETag of the item. Default - `true` |
+| 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. | 
 

diff --git a/docs/documentation/docs/controls/HoverReactionsBar.md b/docs/documentation/docs/controls/HoverReactionsBar.md
@@ -37,27 +37,27 @@ import { HoverReactionsBar } from '@pnp/spfx-controls-react/lib/HoverReactionsBa
 - With the `onSelect` property you can get the selected emoji:
 
 ```typescript
-   const onSelectEmoji = React.useCallback(async (emoji: string, emojiInfo: IEmojiInfo) => {
-    console.log('emoji', emoji);
-    console.log('emojiInfo object',emojiInfo);
-    setIsOpenHoverReactionBar(false);
-  }, []);
+const onSelectEmoji = React.useCallback(async (emoji: string, emojiInfo: IEmojiInfo) => {
+  console.log('emoji', emoji);
+  console.log('emojiInfo object',emojiInfo);
+  setIsOpenHoverReactionBar(false);
+}, []);
 
-```
 onSelect: (emoji: string | undefined, emojiInfo?: IEmojiInfo) => void;
   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 hoverReactionsVar |
+| 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 |

diff --git a/docs/documentation/docs/controls/ListItemPicker.md b/docs/documentation/docs/controls/ListItemPicker.md
@@ -18,6 +18,7 @@ Here is an example of the control:
 ```TypeScript
 import { ListItemPicker } from '@pnp/spfx-controls-react/lib/ListItemPicker';
 ```
+
 - Use the `ListItemPicker` control in your code as follows:
 
 ```TypeScript
@@ -41,30 +42,31 @@ private onSelectedItem(data: { key: string; name: string }[]) {
   }
 }
 ```
+
 ## Implementation
 
 The `ListItemPicker` control can be configured with the following properties:
 
-
-| Property | Type | Required | Description |
-| ---- | ---- | ---- | ---- |
-| columnInternalName | string | yes | InternalName of column to search and get values. |
-| keyColumnInternalName | string | no | InternalName of column to use as the key for the selection. Must be a column with unique values. Default: Id |
-| context | BaseComponentContext | yes | SPFx web part or extention context |
-| listId | string | yes | Guid or title of the list. |
-| itemLimit | number | yes | Number of items which can be selected |
-| onSelectedItem | (items: any[]) => void | yes | Callback function which returns the selected items. |
-| className | string | no | ClassName for the picker. |
-| webUrl | string | no | URL of the site. By default it uses the current site URL. |
-| defaultSelectedItems | any[] | no | Initial items that have already been selected and should appear in the people picker. |
-| suggestionsHeaderText | string | no | The text that should appear at the top of the suggestion box. |
-| noResultsFoundText | string | no | The text that should appear when no results are returned. |
-| disabled | boolean | no | Specifies if the control is disabled or not. |
-| filter | string | no | condition to filter list Item, same as $filter ODATA parameter|
-| orderBy | string | no | condition to order by list Item, same as $orderby ODATA parameter|
-| placeholder | string | no | Short text hint to display in empty picker |
-| substringSearch | boolean | no | Specifies if substring search should be used |
-| label | string | no | Specifies the text describing the ListItemPicker. |
-| enableDefaultSuggestions | boolean | no | Enable default suggestions. All options are displayed by default when clicking on the control. |
+| Property                 | Type                   | Required | Description                                                                                                  |
+| ------------------------ | ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------ |
+| columnInternalName       | string                 | yes      | InternalName of column to search and get values.                                                             |
+| keyColumnInternalName    | string                 | no       | InternalName of column to use as the key for the selection. Must be a column with unique values. Default: Id |
+| context                  | BaseComponentContext   | yes      | SPFx web part or extention context                                                                           |
+| listId                   | string                 | yes      | Guid or title of the list.                                                                                   |
+| itemLimit                | number                 | yes      | Number of items which can be selected                                                                        |
+| onSelectedItem           | (items: any[]) => void | yes      | Callback function which returns the selected items.                                                          |
+| className                | string                 | no       | ClassName for the picker.                                                                                    |
+| webUrl                   | string                 | no       | URL of the site. By default it uses the current site URL.                                                    |
+| defaultSelectedItems     | any[]                  | no       | Initial items that have already been selected and should appear in the people picker.                        |
+| suggestionsHeaderText    | string                 | no       | The text that should appear at the top of the suggestion box.                                                |
+| noResultsFoundText       | string                 | no       | The text that should appear when no results are returned.                                                    |
+| disabled                 | boolean                | no       | Specifies if the control is disabled or not.                                                                 |
+| filter                   | string                 | no       | condition to filter list Item, same as $filter ODATA parameter                                               |
+| orderBy                  | string                 | no       | condition to order by list Item, same as $orderby ODATA parameter                                            |
+| placeholder              | string                 | no       | Short text hint to display in empty picker                                                                   |
+| substringSearch          | boolean                | no       | Specifies if substring search should be used                                                                 |
+| label                    | string                 | no       | Specifies the text describing the ListItemPicker.                                                            |
+| enableDefaultSuggestions | boolean                | no       | Enable default suggestions. All options are displayed by default when clicking on the control.               |
+| itemsQueryCountLimit     | number                 | no       | Number of items to display in a lookup field                                                                 |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)
diff --git a/docs/documentation/docs/controls/PeoplePicker.md b/docs/documentation/docs/controls/PeoplePicker.md
@@ -13,7 +13,7 @@ This control renders a People picker field which can be used to select one or mo
 
 ![Selecting People](../assets/Peoplepicker-selectingchoices.png)
 
-**Selected people** 
+**Selected people**
 
 ![Selected people](../assets/Peoplepicker-multiplechoices.png)
 
@@ -58,6 +58,10 @@ private _getPeoplePickerItems(items: any[]) {
 }
 ```
 
+## Use Substrate search
+
+Sometimes, depending on how your organization is configured regarding users and groups, performing search can be tricky. As the `PeoplePicker` is using the `SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser` endpoint under the hood, there is an optional parameter called `useSubstrateSearch`. Setting this to `true` will perform a search using the Microsoft 365 Substrate, which will go through centralized stored data in order to find requested info. More details about this feature can be found [here](https://techcommunity.microsoft.com/t5/video-hub/admin-39-s-guide-to-the-microsoft-365-substrate/ba-p/3633132) and [here](https://youtu.be/uuiTR8r27Os?si=JkPyfiQggvCMj0xg&t=467).
+
 ## Implementation
 
 The People picker control can be configured with the following properties:
@@ -66,8 +70,8 @@ The People picker control can be configured with the following properties:
 | ---- | ---- | ---- | ---- | ---- |
 | context | IPeoplePickerContext | yes | Context of the component, based on the SPFx context ([*BaseComponentContext*](https://learn.microsoft.com/javascript/api/sp-component-base/basecomponentcontext?view=sp-typescript-latest)). | |
 | titleText | string | no | Text to be displayed on the control | |
-| groupName | string | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupName and groupId specified groupName takes precedence. | _none_ |
-| groupId | number \| string \| (string\|number)[] | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupId and groupName specified groupName takes precedence. If string is specified, Microsoft 365 Group is used. If array is used, fetch results from multiple groups | _none_ |
+| groupName | string | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupName and groupId specified groupName takes precedence. | *none* |
+| groupId | number \| string \| (string\|number)[] | no | Group from which users are fetched. Leave it blank if need to filter all users. When both groupId and groupName specified groupName takes precedence. If string is specified, Microsoft 365 Group is used. If array is used, fetch results from multiple groups | *none* |
 | personSelectionLimit | number | no | Defines the limit of people that can be selected in the control | 1 |
 | required | boolean | no | Set if the control is required or not | false |
 | disabled | boolean | no | Set if the control is disabled or not | false |
@@ -88,8 +92,9 @@ The People picker control can be configured with the following properties:
 | suggestionsLimit | number | no | Maximum number of suggestions to show in the full suggestion list. | 5 |
 | resolveDelay | number | no | Add delay to resolve and search users | 200 |
 | placeholder | string | no | Short text hint to display in empty picker | |
-| styles | Partial<IBasePickerStyles> | no | Styles to apply on control | |
+| styles | Partial&lt;IBasePickerStyles&gt; | no | Styles to apply on control | |
 | searchTextLimit | number | no | Specifies the minimum character count needed to begin retrieving search results. | 2 |
+| useSubstrateSearch | boolean | no | When `true`, performs a wider search using Microsoft 365 Substrate. | false |
 
 Enum `PrincipalType`
 

diff --git a/docs/documentation/docs/controls/SitePicker.md b/docs/documentation/docs/controls/SitePicker.md
@@ -52,7 +52,7 @@ The `SitePicker` control can be configured with the following properties:
 | isDesc | boolean | no | Specifies if the list is sorted in descending order. Default: `false`. |
 | label | string | no | Label to use for the control. |
 | limitToCurrentSiteCollection | boolean | no | Specifies if the options should be limited by the current site collections. Taken into consideration if selectionMode is set to `web`. |
-| mode | `'site' | 'web' | 'hub'` | no | Defines what entities are available for selection: site collections, sites, hub sites. Default: `web`. |
+| mode | `'associatedsites' | 'site' | 'web' | 'hub'` | no | Defines what entities are available for selection: site collections, sites, hub sites and sites inside hub. Default: `web`. |
 | multiSelect | boolean | no | Optional mode indicates if multi-choice selections is allowed. Default: `true`. |
 | onChange | `(selectedSites: ISite[]) => void` | yes | Selection change handler. | 
 | orderBy | `'title' | 'url'` | no | Specifices if the list is sorted by title or url. Default: `title`. |

diff --git a/docs/documentation/docs/guides/contributing.md b/docs/documentation/docs/guides/contributing.md
@@ -27,22 +27,23 @@ Typos are embarrassing! Most PR's that fix typos will be accepted immediately. I
 Before contributing:
 
 - ensure that the **dev** branch on your fork is in sync with the original **sp-dev-fx-controls-react** repository
-    ```bash
-    # assuming you are in the folder of your locally cloned fork....
-    git checkout dev
 
-    # assuming you have a remote named `upstream` pointing to the official **sp-dev-fx-controls-react** repo
-    git fetch upstream
+```bash
+# assuming you are in the folder of your locally cloned fork....
+git checkout dev
 
-    # update your local dev to be a mirror of what's in the main repo
-    git pull --rebase upstream dev
-    ```
+# assuming you have a remote named `upstream` pointing to the official **sp-dev-fx-controls-react** repo
+git fetch upstream
+
+# update your local dev to be a mirror of what's in the main repo
+git pull --rebase upstream dev
+```
 
 - create a feature branch for your change. If you'll get stuck on an issue or merging your PR will take a while, this will allow you to have a clean dev branch that you can use for contributing other changes
 
-    ```bash
-    git checkout -b my-contribution
-    ```
+```bash
+git checkout -b my-contribution
+```
 
 ## DO's & DON'Ts