merge with dev

Author: AJIXuMuK

CHANGELOG.JSON

@@ -4,6 +4,7 @@
       "version": "1.20.0",
       "changes": {
         "new": [
+          "`Accordion` control [#638](https://github.com/pnp/sp-dev-fx-controls-react/pull/638)",
           "`FieldCollectionData` control [#591](https://github.com/pnp/sp-dev-fx-controls-react/pull/591)"
         ],
         "enhancements": [
@@ -13,7 +14,10 @@
           "`ListItemPicker`: ability to use substring search instead of startswith [#583](https://github.com/pnp/sp-dev-fx-controls-react/issues/583)",
           "`Map`: return display name and address details for the location [#585](https://github.com/pnp/sp-dev-fx-controls-react/issues/585)",
           "`Map`: support for draggable and static Bing maps [#586](https://github.com/pnp/sp-dev-fx-controls-react/issues/586)",
-          "`TaxonomyPicker`: onLoad validation [#602](https://github.com/pnp/sp-dev-fx-controls-react/issues/602)"
+          "`TaxonomyPicker`: onLoad validation [#602](https://github.com/pnp/sp-dev-fx-controls-react/issues/602)",
+          "`FieldCollectionData`: Add pagining and filtering [#617](https://github.com/pnp/sp-dev-fx-controls-react/pull/617)",
+          "`TaxonomyPicker`: Finding terms with labels [#288](https://github.com/pnp/sp-dev-fx-controls-react/issues/288)",
+          "`FileTypeIcon`: Added support for additional file type in `Image` mode [#640](https://github.com/pnp/sp-dev-fx-controls-react/pull/640)"
         ],
         "fixes": [
           "`ComboBoxListItemPicker`: fetching only 100 items [#569](https://github.com/pnp/sp-dev-fx-controls-react/issues/569)",
@@ -23,13 +27,24 @@
           "`ListItemAttachments`: fails in Microsoft Teams Tab SPFx applications [#582](fails in Microsoft Teams Tab SPFx applications)",
           "`Carousel`: Changing pages doesn't work [#609](https://github.com/pnp/sp-dev-fx-controls-react/issues/609)",
           "`TaxonomyPicker`: no suggestions are displayed if `anchorId` is not set",
-          "`TaxonomyPicker`: Suggestion/match does not work as expected [#604](https://github.com/pnp/sp-dev-fx-controls-react/issues/604)"
+          "`TaxonomyPicker`: Suggestion/match does not work as expected [#604](https://github.com/pnp/sp-dev-fx-controls-react/issues/604)",
+          "`TaxonomyPicker`: Include check for separator while filtering path of terms when anchorId is configured [#625](https://github.com/pnp/sp-dev-fx-controls-react/issues/625)",
+          "`FilePicker`: Bing API search issue [#633](https://github.com/pnp/sp-dev-fx-controls-react/pull/633)",
+          "`ListView`: Sort fires selection [#621](https://github.com/pnp/sp-dev-fx-controls-react/issues/621)",
+          "`Map`: A minor issue in componentWillUpdate method to get the next props rather than the current props.[#641](https://github.com/pnp/sp-dev-fx-controls-react/pull/641)",
+          "`IFrameDialog`: dialog size is incorrect when opening the dialog second time [#615](https://github.com/pnp/sp-dev-fx-controls-react/issues/615)",
+          "`FolderPicker`: imports don't work [#614](https://github.com/pnp/sp-dev-fx-controls-react/issues/614)"
         ]
       },
       "contributions": [
+        "[Alexey Sadomov](https://github.com/sadomovalex)",
+        "[Anoop Tatti](https://github.com/anoopt)",
+        "[Devang Bhavsar](https://github.com/devangbhavsar89)",
+        "[Gautam Sheth](https://github.com/gautamdsheth)",
         "[geltapatio](https://github.com/geltapatio)",
         "[Joel Jeffery](https://github.com/joeljeffery)",
-        "[Piotr Siatka](https://github.com/siata13)"
+        "[Piotr Siatka](https://github.com/siata13)",
+        "[Victor Pollet](https://github.com/TheThor59)"
       ]
     },
     {

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### New control(s)
 
+- `Accordion` control [#638](https://github.com/pnp/sp-dev-fx-controls-react/pull/638)
 - `FieldCollectionData` control [#591](https://github.com/pnp/sp-dev-fx-controls-react/pull/591)
 
 ### Enhancements
@@ -15,6 +16,9 @@
 - `Map`: return display name and address details for the location [#585](https://github.com/pnp/sp-dev-fx-controls-react/issues/585)
 - `Map`: support for draggable and static Bing maps [#586](https://github.com/pnp/sp-dev-fx-controls-react/issues/586)
 - `TaxonomyPicker`: onLoad validation [#602](https://github.com/pnp/sp-dev-fx-controls-react/issues/602)
+- `FieldCollectionData`: Add pagining and filtering [#617](https://github.com/pnp/sp-dev-fx-controls-react/pull/617)
+- `TaxonomyPicker`: Finding terms with labels [#288](https://github.com/pnp/sp-dev-fx-controls-react/issues/288)
+- `FileTypeIcon`: Added support for additional file type in `Image` mode [#640](https://github.com/pnp/sp-dev-fx-controls-react/pull/640)
 
 ### Fixes
 
@@ -26,10 +30,20 @@
 - `Carousel`: Changing pages doesn't work [#609](https://github.com/pnp/sp-dev-fx-controls-react/issues/609)
 - `TaxonomyPicker`: no suggestions are displayed if `anchorId` is not set
 - `TaxonomyPicker`: Suggestion/match does not work as expected [#604](https://github.com/pnp/sp-dev-fx-controls-react/issues/604)
+<<<<<<< HEAD
 
 ### Contributors
 
 Special thanks to our contributors (in alphabetical order): [geltapatio](https://github.com/geltapatio), [Joel Jeffery](https://github.com/joeljeffery), [Piotr Siatka](https://github.com/siata13).
+=======
+- `TaxonomyPicker`: Include check for separator while filtering path of terms when anchorId is configured [#625](https://github.com/pnp/sp-dev-fx-controls-react/issues/625)
+- `FilePicker`: Bing API search issue [#633](https://github.com/pnp/sp-dev-fx-controls-react/pull/633)
+- `ListView`: Sort fires selection [#621](https://github.com/pnp/sp-dev-fx-controls-react/issues/621)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Devang Bhavsar](https://github.com/devangbhavsar89), [geltapatio](https://github.com/geltapatio), [Joel Jeffery](https://github.com/joeljeffery), [Victor Pollet](https://github.com/TheThor59), [Alexey Sadomov](https://github.com/sadomovalex), [Gautam Sheth](https://github.com/gautamdsheth), [Piotr Siatka](https://github.com/siata13).
+>>>>>>> dev
 
 ## 1.19.0
 

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

@@ -4,6 +4,7 @@
 
 ### New control(s)
 
+- `Accordion` control [#638](https://github.com/pnp/sp-dev-fx-controls-react/pull/638)
 - `FieldCollectionData` control [#591](https://github.com/pnp/sp-dev-fx-controls-react/pull/591)
 
 ### Enhancements
@@ -15,6 +16,12 @@
 - `Map`: return display name and address details for the location [#585](https://github.com/pnp/sp-dev-fx-controls-react/issues/585)
 - `Map`: support for draggable and static Bing maps [#586](https://github.com/pnp/sp-dev-fx-controls-react/issues/586)
 - `TaxonomyPicker`: onLoad validation [#602](https://github.com/pnp/sp-dev-fx-controls-react/issues/602)
+<<<<<<< HEAD
+=======
+- `FieldCollectionData`: Add pagining and filtering [#617](https://github.com/pnp/sp-dev-fx-controls-react/pull/617)
+- `TaxonomyPicker`: Finding terms with labels [#288](https://github.com/pnp/sp-dev-fx-controls-react/issues/288)
+- `FileTypeIcon`: Added support for additional file type in `Image` mode [#640](https://github.com/pnp/sp-dev-fx-controls-react/pull/640)
+>>>>>>> dev
 
 ### Fixes
 
@@ -26,10 +33,20 @@
 - `Carousel`: Changing pages doesn't work [#609](https://github.com/pnp/sp-dev-fx-controls-react/issues/609)
 - `TaxonomyPicker`: no suggestions are displayed if `anchorId` is not set
 - `TaxonomyPicker`: Suggestion/match does not work as expected [#604](https://github.com/pnp/sp-dev-fx-controls-react/issues/604)
+<<<<<<< HEAD
 
 ### Contributors
 
 Special thanks to our contributors (in alphabetical order): [geltapatio](https://github.com/geltapatio), [Joel Jeffery](https://github.com/joeljeffery), [Piotr Siatka](https://github.com/siata13).
+=======
+- `TaxonomyPicker`: Include check for separator while filtering path of terms when anchorId is configured [#625](https://github.com/pnp/sp-dev-fx-controls-react/issues/625)
+- `FilePicker`: Bing API search issue [#633](https://github.com/pnp/sp-dev-fx-controls-react/pull/633)
+- `ListView`: Sort fires selection [#621](https://github.com/pnp/sp-dev-fx-controls-react/issues/621)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Devang Bhavsar](https://github.com/devangbhavsar89), [geltapatio](https://github.com/geltapatio), [Joel Jeffery](https://github.com/joeljeffery), [Victor Pollet](https://github.com/TheThor59), [Alexey Sadomov](https://github.com/sadomovalex), [Gautam Sheth](https://github.com/gautamdsheth), [Piotr Siatka](https://github.com/siata13).
+>>>>>>> dev
 
 ## 1.19.0
 

docs/documentation/docs/assets/FieldCollectionData.gif

@@ -0,0 +1,44 @@
+# Accordion
+
+This control allows you to render an accordion control.
+
+Here is an example of the control in action:
+
+![Accordion control](../assets/accordion.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.
+- In your component file, import the `Accordion` control as follows:
+
+```TypeScript
+import { Accordion } from "@pnp/spfx-controls-react/lib/Accordion";
+```
+
+- Use the `Accordion` control in your code as follows:
+
+```TypeScript
+{
+  sampleItems.map((item, index) => (
+    <Accordion title={item.Question} defaultCollapsed={true} className={"itemCell"} key={index}>
+      <div className={"itemContent"}>
+        <div className={"itemResponse"}>{item.Reponse}</div>
+        <div className={"itemIndex"}>{`Langue :  ${item.Langue.Nom}`}</div>
+      </div>
+    </Accordion>
+  ))
+}
+```
+
+## Implementation
+
+The `Accordion` control can be configured with the following properties:
+
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| title | string | yes | The title in the accordion to display. | |
+| defaultCollapsed | boolean | no | Is the accordion by default collapsed? | false |
+| className | string | no | Additional class name to add to your accordion. | |
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/Accordion)

docs/documentation/docs/assets/accordion.png

@@ -37,6 +37,10 @@ import { FieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-contro
   manageBtnLabel={"Manage"} onChanged={(value) => { console.log(value); }}
   panelHeader={"Manage values"}
 
+  executeFiltering={(searchFilter: string, item: any) => {
+    return item["Field2"] === +searchFilter;
+  }}
+  itemsPerPage={3}
   fields={[
     {id: "Field1", title:"String field", type: CustomCollectionFieldType.string, required: true},
     {id: "Field2", title:"Number field", type: CustomCollectionFieldType.number},
@@ -99,6 +103,8 @@ The `FieldCollectionData` control can be configured with the following propertie
 | disableItemDeletion | boolean | no | Allows you to specify if users can delete already inserted items. | false |
 | panelClassName | string | no | Allows you to specify a custom CSS class name for the collection data panel. | |
 | tableClassName | string | no | Allows you to specify a custom CSS class name for the collection data table inside the panel. | |
+| itemsPerPage | number | no | Allows you to specify the amount of items displayed per page. Paging control is added automatically. | |
+| itemsPerPage | (searchFilter: string, item: any) => boolean | no | Allows you to show Search Box and specify own filtering logic. | |
 
 Interface `ICustomCollectionField`
 

docs/documentation/docs/controls/Accordion.md

@@ -25,7 +25,8 @@ Here is an example of the control:
 - Import the control into your component:
 
 ```TypeScript
-import { FolderPicker, IFolder } from "@pnp/spfx-controls-react/lib/FolderPicker";
+import FolderPicker from "@pnp/spfx-controls-react/lib/controls/folderPicker/FolderPicker";
+import { IFolder } from "@pnp/spfx-controls-react/lib/FolderPicker";
 ```
 
 - Use the `FolderPicker` control in your code as follows:

docs/documentation/docs/controls/FieldCollectionData.md

@@ -49,6 +49,7 @@ telemetry.optOut();
 
 The following controls are currently available:
 
+- [Accordion](./controls/Accordion) (Control to render an accordion)
 - [Carousel](./controls/Carousel) (Control displays children elements with 'previous/next element' options)
 - [Charts](./controls/ChartControl) (makes it easy to integrate [Chart.js](https://www.chartjs.org/) charts into web part)
 - [ComboBoxListItemPicker](./controls/ComboBoxListItemPicker) (allows to select one or more items from a list)

docs/documentation/docs/controls/FolderPicker.md

@@ -2,6 +2,7 @@ site_name: '@pnp/spfx-controls-react'
 nav:
   - Home: 'index.md'
   - Controls:
+    - Accordion: 'controls/Accordion.md'
     - Carousel: 'controls/Carousel.md'
     - Charts:
       - "ChartControl": 'controls/ChartControl.md'