Merge pull request #1205 from pnp/dev

V 3.8.0

Author: AJIXuMuK

CHANGELOG.JSON

@@ -1,5 +1,48 @@
 {
   "versions": [
+    {
+      "version": "3.8.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`PeoplePicker`: Allow the use of multiple groupId-s [#1163](https://github.com/pnp/sp-dev-fx-controls-react/issues/1163)",
+          "`PeoplePicker`: search users in nested security groups [#1173](https://github.com/pnp/sp-dev-fx-controls-react/issues/1173)",
+          "`ModenrTaxonomyPicker`: Add more complete example of TaxonomyTree usage [#1190](https://github.com/pnp/sp-dev-fx-controls-react/pull/1190)",
+          "`AdaptiveCardHost`: Add SPFx Context property [#1145](https://github.com/pnp/sp-dev-fx-controls-react/issues/1145)",
+          "`AdaptiveCardHost`: Remove the `isUniqueControlInPage` from the control by rebuilding the way to apply AC CSS class names [#1154](https://github.com/pnp/sp-dev-fx-controls-react/issues/1154)",
+          "`ListView`: Different background color to even and odd rows in ListView [#1153](https://github.com/pnp/sp-dev-fx-controls-react/issues/1153)",
+          "`AccessibleAccordion`: Support of section variations [#1195](https://github.com/pnp/sp-dev-fx-controls-react/issues/1195)",
+          "`TreeView`: Support of section variations [#1196](https://github.com/pnp/sp-dev-fx-controls-react/issues/1196)"
+        ],
+        "fixes": [
+          "`LocationPicker`: Resolve issue when in root site [#1162](https://github.com/pnp/sp-dev-fx-controls-react/pull/1162)",
+          "`LocationPicker`: Trigger onChange on picker clear action [#1165](https://github.com/pnp/sp-dev-fx-controls-react/pull/1165)",
+          "`TreeView`: TreeView Control is broken after updating to v3.7.0 [#1170](https://github.com/pnp/sp-dev-fx-controls-react/issues/1170)",
+          "`TreeView`: collapses on selection of a child node [#1182](https://github.com/pnp/sp-dev-fx-controls-react/issues/1182)",
+          "`TreeView`: expanded nodes state is getting lost after refresh [#1062](https://github.com/pnp/sp-dev-fx-controls-react/issues/1062)",
+          "NPM Audit Critical Issues [#1187](https://github.com/pnp/sp-dev-fx-controls-react/issues/1187)",
+          "Bump momentjs from 2.29.1 to 2.29.2 [#1185](https://github.com/pnp/sp-dev-fx-controls-react/pull/1185)",
+          "`TaxonomyPicker`: Sorting the terms in locale language [#1160](https://github.com/pnp/sp-dev-fx-controls-react/pull/1160)",
+          "`ComboboxListItemPicker`: options are not reloaded after the filter is changed [#1180](https://github.com/pnp/sp-dev-fx-controls-react/issues/1180)",
+          "`FieldRendererHelper`: Add missing PnPjs import to SPHelper [#1140](https://github.com/pnp/sp-dev-fx-controls-react/issues/1140)",
+          "`RichText`: Update font style and font size on property pane [#1151](https://github.com/pnp/sp-dev-fx-controls-react/issues/1151)",
+          "`Placeholder`: Support section variations for themes [#1193](https://github.com/pnp/sp-dev-fx-controls-react/issues/1193)"
+        ]
+      },
+      "contributors": [
+        "[Andreas Omayrat](https://github.com/andreasomayrat)",
+        "[brianpmccullough](https://github.com/brianpmccullough)",
+        "[Christophe Humbert](https://github.com/PathToSharePoint)",
+        "[Fabio Franzini](https://github.com/fabiofranzini)",
+        "[Gautam Sheth](https://github.com/gautamdsheth)",
+        "[Joel Lopes](https://github.com/Dixdjo)",
+        "[Milan Holemans](https://github.com/milanholemans)",
+        "[Patrik Hellgren](https://github.com/patrikhellgren)",
+        "[Ravichandran Krishnasamy](https://github.com/ravichandran-blog)",
+        "[Rico van de Ven](https://github.com/RicoNL)",
+        "[Russell gove](https://github.com/russgove)"
+      ]
+    },
     {
       "version": "3.7.2",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,33 @@
 # Releases
 
+## 3.8.0
+
+### Enhancements
+
+- `PeoplePicker`: Allow the use of multiple groupId-s [#1163](https://github.com/pnp/sp-dev-fx-controls-react/issues/1163)
+- `PeoplePicker`: search users in nested security groups [#1173](https://github.com/pnp/sp-dev-fx-controls-react/issues/1173)
+- `ModenrTaxonomyPicker`: Add more complete example of TaxonomyTree usage [#1190](https://github.com/pnp/sp-dev-fx-controls-react/pull/1190)
+- `AdaptiveCardHost`: Add SPFx Context property [#1145](https://github.com/pnp/sp-dev-fx-controls-react/issues/1145)
+- `AdaptiveCardHost`: Remove the `isUniqueControlInPage` from the control by rebuilding the way to apply AC CSS class names [#1154](https://github.com/pnp/sp-dev-fx-controls-react/issues/1154)
+- `ListView`: Different background color to even and odd rows in ListView [#1153](https://github.com/pnp/sp-dev-fx-controls-react/issues/1153)
+- `AccessibleAccordion`: Support of section variations [#1195](https://github.com/pnp/sp-dev-fx-controls-react/issues/1195)
+- `TreeView`: Support of section variations [#1196](https://github.com/pnp/sp-dev-fx-controls-react/issues/1196)
+
+### Fixes
+
+- `LocationPicker`: Resolve issue when in root site [#1162](https://github.com/pnp/sp-dev-fx-controls-react/pull/1162)
+- `LocationPicker`: Trigger onChange on picker clear action [#1165](https://github.com/pnp/sp-dev-fx-controls-react/pull/1165)
+- `TreeView`: TreeView Control is broken after updating to v3.7.0 [#1170](https://github.com/pnp/sp-dev-fx-controls-react/issues/1170)
+- `TreeView`: collapses on selection of a child node [#1182](https://github.com/pnp/sp-dev-fx-controls-react/issues/1182)
+- `TreeView`: expanded nodes state is getting lost after refresh [#1062](https://github.com/pnp/sp-dev-fx-controls-react/issues/1062)
+- NPM Audit Critical Issues [#1187](https://github.com/pnp/sp-dev-fx-controls-react/issues/1187)
+- Bump momentjs from 2.29.1 to 2.29.2 [#1185](https://github.com/pnp/sp-dev-fx-controls-react/pull/1185)
+- `TaxonomyPicker`: Sorting the terms in locale language [#1160](https://github.com/pnp/sp-dev-fx-controls-react/pull/1160)
+- `ComboboxListItemPicker`: options are not reloaded after the filter is changed [#1180](https://github.com/pnp/sp-dev-fx-controls-react/issues/1180)
+- `FieldRendererHelper`: Add missing PnPjs import to SPHelper [#1140](https://github.com/pnp/sp-dev-fx-controls-react/issues/1140)
+- `RichText`: Update font style and font size on property pane [#1151](https://github.com/pnp/sp-dev-fx-controls-react/issues/1151)
+- `Placeholder`: Support section variations for themes [#1193](https://github.com/pnp/sp-dev-fx-controls-react/issues/1193)
+
 ## 3.7.2
 
 ## 3.7.0

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

@@ -1,5 +1,33 @@
 # Releases
 
+## 3.8.0
+
+### Enhancements
+
+- `PeoplePicker`: Allow the use of multiple groupId-s [#1163](https://github.com/pnp/sp-dev-fx-controls-react/issues/1163)
+- `PeoplePicker`: search users in nested security groups [#1173](https://github.com/pnp/sp-dev-fx-controls-react/issues/1173)
+- `ModenrTaxonomyPicker`: Add more complete example of TaxonomyTree usage [#1190](https://github.com/pnp/sp-dev-fx-controls-react/pull/1190)
+- `AdaptiveCardHost`: Add SPFx Context property [#1145](https://github.com/pnp/sp-dev-fx-controls-react/issues/1145)
+- `AdaptiveCardHost`: Remove the `isUniqueControlInPage` from the control by rebuilding the way to apply AC CSS class names [#1154](https://github.com/pnp/sp-dev-fx-controls-react/issues/1154)
+- `ListView`: Different background color to even and odd rows in ListView [#1153](https://github.com/pnp/sp-dev-fx-controls-react/issues/1153)
+- `AccessibleAccordion`: Support of section variations [#1195](https://github.com/pnp/sp-dev-fx-controls-react/issues/1195)
+- `TreeView`: Support of section variations [#1196](https://github.com/pnp/sp-dev-fx-controls-react/issues/1196)
+
+### Fixes
+
+- `LocationPicker`: Resolve issue when in root site [#1162](https://github.com/pnp/sp-dev-fx-controls-react/pull/1162)
+- `LocationPicker`: Trigger onChange on picker clear action [#1165](https://github.com/pnp/sp-dev-fx-controls-react/pull/1165)
+- `TreeView`: TreeView Control is broken after updating to v3.7.0 [#1170](https://github.com/pnp/sp-dev-fx-controls-react/issues/1170)
+- `TreeView`: collapses on selection of a child node [#1182](https://github.com/pnp/sp-dev-fx-controls-react/issues/1182)
+- `TreeView`: expanded nodes state is getting lost after refresh [#1062](https://github.com/pnp/sp-dev-fx-controls-react/issues/1062)
+- NPM Audit Critical Issues [#1187](https://github.com/pnp/sp-dev-fx-controls-react/issues/1187)
+- Bump momentjs from 2.29.1 to 2.29.2 [#1185](https://github.com/pnp/sp-dev-fx-controls-react/pull/1185)
+- `TaxonomyPicker`: Sorting the terms in locale language [#1160](https://github.com/pnp/sp-dev-fx-controls-react/pull/1160)
+- `ComboboxListItemPicker`: options are not reloaded after the filter is changed [#1180](https://github.com/pnp/sp-dev-fx-controls-react/issues/1180)
+- `FieldRendererHelper`: Add missing PnPjs import to SPHelper [#1140](https://github.com/pnp/sp-dev-fx-controls-react/issues/1140)
+- `RichText`: Update font style and font size on property pane [#1151](https://github.com/pnp/sp-dev-fx-controls-react/issues/1151)
+- `Placeholder`: Support section variations for themes [#1193](https://github.com/pnp/sp-dev-fx-controls-react/issues/1193)
+
 ## 3.7.2
 
 ## 3.7.0

docs/documentation/docs/controls/AccessibleAccordion.md

@@ -73,6 +73,7 @@ The `Accordion` control can be configured with the following properties:
 | preExpanded | string[] | no | Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches any one of these strings will be expanded on mount. | `[]` |
 | className | string | no | Class(es) to apply to element. | "accordion" |
 | onChange | (string[]) => void | no | Callback which is invoked when items are expanded or collapsed. Gets passed `uuid`s of the currently expanded `AccordionItem`s. | |
+| theme | IPartialTheme \| ITheme | no | Set Fluent UI Theme. If not set or set to null or not defined, the theme passed through context will be used, or the default theme of the page will be loaded. |
 
 
 

docs/documentation/docs/controls/AdaptiveCardHost.md

@@ -11,6 +11,18 @@ Three custom themes have been created for Microsoft Teams to emulate the colors
 
 All Elements and Actions of Adaptive Cards have been redefined using Fluent UI React, both for SharePoint and Microsoft Teams (in this case the "Fluent UI Northstar" library is not used), adding and improving features that are not managed in Microsoft's implementation of the "adaptivecards-fluentui" library (Theme support for example).
 
+Thanks to the "context" property that allows you to pass the SPFx context, whether the "data" property is passed or not, a new field called @context will be injected into the data object.
+
+This allows, using Adaptive Cards templating syntax, to access to the context informations using the following fields (for more information on these fields, refer to the [BaseComponentContext](https://docs.microsoft.com/en-us/javascript/api/sp-component-base/basecomponentcontext) class):
+- "theme": property "theme" from the current theme applied to the card.
+- "aadInfo": Azure AD informations retrieved from the SPFx context object.
+- "cultureInfo": Culture informations retrieved from the SPFx context object.
+- "userInfo": User informations retrieved from the SPFx context object.
+- "spListInfo": Current List informations retrieved from the SPFx context object.
+- "spListItemInfo": Current List item informations retrieved from the SPFx context object.
+- "spSiteInfo": Current Site informations retrieved from the SPFx context object.
+- "spWebInfo": Current Web informations retrieved from the SPFx context object.
+
 The Adaptive Cards version supported is 1.5, by using the 'adaptivecards' npm package version 2.10.0.
 
 Here is an example of the control in action inside a Web Part:
@@ -27,22 +39,23 @@ Here is an example of the previous Web Part (using different Card), hosted as a
 - In your component file, import the `AdaptiveCardHost` control as follows:
 
 ```TypeScript
-import { AdaptiveCardHost, IAdaptiveCardHostActionResult, AdaptiveCardHostThemeType } from "@pnp/spfx-controls-react/lib/AdaptiveCardHost";
+import { AdaptiveCardHost, IAdaptiveCardHostActionResult, AdaptiveCardHostThemeType, Action, CardElement, CardObjectRegistry, HostCapabilities } from "@pnp/spfx-controls-react/lib/AdaptiveCardHost";
 ```
 
 - Example on use the `AdaptiveCardHost` control with only required properties:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with all properties:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   data={data}
@@ -62,63 +75,68 @@ import { AdaptiveCardHost, IAdaptiveCardHostActionResult, AdaptiveCardHostThemeT
   onUpdateHostCapabilities={(hostCapabilities: HostCapabilities) => {
     hostCapabilities.setCustomProperty("CustomPropertyName", Date.now);
   }}
-  isUniqueControlInPage={true}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with SharePoint Theme:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   themeType={AdaptiveCardHostThemeType.SharePoint}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with SharePoint Theme "Section Variation" ('this.props.theme' is the theme that come from the Web Part) */):
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   theme={this.props.theme}
   themeType={AdaptiveCardHostThemeType.SharePoint}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with Teams "Default" Theme:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   themeType={AdaptiveCardHostThemeType.Teams}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with Teams "Dark" Theme:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   themeType={AdaptiveCardHostThemeType.TeamsDark}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with Teams "High Contrast" Theme:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   themeType={AdaptiveCardHostThemeType.TeamsHighContrast}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
@@ -132,15 +150,15 @@ The `AdaptiveCardHost` control can be configured with the following properties:
 | data | { "$root": object } | no | Set Data Source for template rendering. |
 | style | React.CSSProperties | no | Set CSS Style. |
 | className | string | no | Set CSS Class. |
-| theme | IPartialTheme or ITheme | no | Set Fluent UI Theme. Used only if the "themeType" property is set to 'ThemeType.SharePoint'. If not set or set to null or not defined, the theme passed through context will be searched, or the default theme of the page will be loaded.  |
+| theme | IPartialTheme or ITheme | no | Set Fluent UI Theme. Used only if the "themeType" property is set to 'ThemeType.SharePoint'. If not set or set to null or not defined, the theme passed through context will be searched, or the default theme of the page will be loaded. However, the Theme object will be automatically injected into the data object, so that it can be used by the Adaptive Cards binding engine. |
 | themeType | ThemeType | no | Select the Type of Theme you want to use. If it is not set or set to null or undefined, the 'ThemeType.SharePoint' value will be used and the "theme" property or the theme passed through the context or default page will be loaded. In other cases, the chosen Microsoft Teams theme will be applied. |
 | hostConfig | object | no | Set custom HostConfig. |
 | onInvokeAction | (action: IAdaptiveCardActionResult) => void | yes | Invoked every time an Action is performed. |
 | onError | (error: Error) => void | yes | Invoked every time an exception occurs in the rendering phase. |
 | onSetCustomElements | (registry: CardObjectRegistry<CardElement>) => void | no | Invoked to manage Elements to the current Adaptive Card instance. |
 | onSetCustomActions | (registry: CardObjectRegistry<Action>) => void | no | Invoked to manage Actions to the current Adaptive Card instance. |
 | onUpdateHostCapabilities | (hostCapabilities: HostCapabilities) => void | no | Invoked to manage the HostCapabilities object like add custom properties. |
-| isUniqueControlInPage | boolean | no | Set to true if you want to use only one instance of this control per page, false for multiple controls. This affects how CSS variables are set. |
+| context | BaseComponentContext | no | Set the context from the SPFx component. If set, some context properties will be automatically injected into the data object, so they can be used by the Adaptive Cards binding engine. |
 
 Interface `IAdaptiveCardHostActionResult`
 

docs/documentation/docs/controls/ListView.md

@@ -99,6 +99,7 @@ The ListView control can be configured with the following properties:
 | dragDropFiles | boolean | no | Specify the drag and drop files area option. Default false. |
 | onDrop | file | no | Event handler returns files from drag and drop. |
 | stickyHeader | boolean | no | Specifies if the header of the `ListView`, including search box, is sticky |
+| onRenderRow | (props: IDetailsRowProps) => JSX.Element \| null | no | Callback to override the default row rendering. |
 | sortItems | (items: any[], columnName: string, descending: boolean) => any[] | no | Custom sorting function to handle sorting by column |
 | className | string | no | Class name to apply additional styles on list view wrapper |
 | listClassName | string | no | Class name to apply additional styles on list view |