Merge pull request #704 from pnp/dev

Merge for v2.1.0 release

Author: estruyf

CHANGELOG.JSON

@@ -1,5 +1,34 @@
 {
   "versions": [
+    {
+      "version": "2.1.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)",
+          "`FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)",
+          "`ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)",
+          "`FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)",
+          "`ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)",
+          "`IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`",
+          "`ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696)",
+          "`ListView`: `StickyHeader` code consistency [#697](https://github.com/pnp/sp-dev-fx-controls-react/pull/697)",
+          "`TreeView`: Added (optional) property 'defaultExpandedChildren' that controls the behavior of the expansion of child elements.[#698](https://github.com/pnp/sp-dev-fx-controls-react/pull/698)"
+        ],
+        "fixes": [
+          "`RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)",
+          "`TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367)",
+          "Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695)",
+          "`ComboBoxListItemPicker`: update options when `listId` has been changed [#683](https://github.com/pnp/sp-dev-fx-controls-react/issues/683)",
+          "`FilePicker`: styles are updated to match OOB control [#700](https://github.com/pnp/sp-dev-fx-controls-react/issues/700)"
+        ]
+      },
+      "contributions": [
+        "[Abderahman88](https://github.com/Abderahman88)",
+        "[André Lage](https://github.com/aaclage)",
+        "[Gautam Sheth](https://github.com/gautamdsheth)"
+      ]
+    },
     {
       "version": "2.0.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,31 @@
 # Releases
 
+## 2.1.0
+
+### Enhancements
+
+- `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)
+- `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)
+- `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)
+- `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)
+- `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)
+- `IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`
+- `ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696)
+- `ListView`: `StickyHeader` code consistency [#697](https://github.com/pnp/sp-dev-fx-controls-react/pull/697)
+- `TreeView`: Added (optional) property 'defaultExpandedChildren' that controls the behavior of the expansion of child elements.[#698](https://github.com/pnp/sp-dev-fx-controls-react/pull/698)
+
+### Fixes
+
+- `RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)
+- `TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367)
+- Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695)
+- `ComboBoxListItemPicker`: update options when `listId` has been changed [#683](https://github.com/pnp/sp-dev-fx-controls-react/issues/683)
+- `FilePicker`: styles are updated to match OOB control [#700](https://github.com/pnp/sp-dev-fx-controls-react/issues/700)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Abderahman88](https://github.com/Abderahman88), [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth).
+
 ## 2.0.0
 
 ### Enhancements

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

@@ -1,5 +1,31 @@
 # Releases
 
+## 2.1.0
+
+### Enhancements
+
+- `Carousel`: Ability to display indicators in a dedicated block [#681](https://github.com/pnp/sp-dev-fx-controls-react/pull/681)
+- `FilePicker`: Org Assets are not displayed for non-admin users [#687](https://github.com/pnp/sp-dev-fx-controls-react/pull/687)
+- `ListView`: Drag and Drop option [#679](https://github.com/pnp/sp-dev-fx-controls-react/issues/679)
+- `FolderExplorerService`: support special characters if folder name [#691](https://github.com/pnp/sp-dev-fx-controls-react/pull/691)
+- `ListView`: Sticky Header [#634](https://github.com/pnp/sp-dev-fx-controls-react/issues/634)
+- `IconPicker`: get icons from `@uifabric/icons/lib/data/AllIconNames.json`
+- `ListView`: Sticky header with `className` instead of additional components [#696](https://github.com/pnp/sp-dev-fx-controls-react/pull/696)
+- `ListView`: `StickyHeader` code consistency [#697](https://github.com/pnp/sp-dev-fx-controls-react/pull/697)
+- `TreeView`: Added (optional) property 'defaultExpandedChildren' that controls the behavior of the expansion of child elements.[#698](https://github.com/pnp/sp-dev-fx-controls-react/pull/698)
+
+### Fixes
+
+- `RichText`: Cannot add link in first line [#672](https://github.com/pnp/sp-dev-fx-controls-react/issues/672)
+- `TaxonomyPicker`: Ability to reset the TaxonomyPicker (Remove all selected Terms) [#367](https://github.com/pnp/sp-dev-fx-controls-react/issues/367)
+- Documentation fix for `TaxonomyPicker`: the `disabled` property is a `boolean` and not a `string` as currently specified [#695](https://github.com/pnp/sp-dev-fx-controls-react/pull/695)
+- `ComboBoxListItemPicker`: update options when `listId` has been changed [#683](https://github.com/pnp/sp-dev-fx-controls-react/issues/683)
+- `FilePicker`: styles are updated to match OOB control [#700](https://github.com/pnp/sp-dev-fx-controls-react/issues/700)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Abderahman88](https://github.com/Abderahman88), [André Lage](https://github.com/aaclage), [Gautam Sheth](https://github.com/gautamdsheth).
+
 ## 2.0.0
 
 ### Enhancements

docs/documentation/docs/assets/ListView-DragDrop.png

@@ -128,7 +128,10 @@ The Carousel component can be configured with the following properties:
 | indicatorShape | CarouselIndicatorShape | no | Specifies indicators' shape. If onRenderIndicator is provided - this property is ignored |
 | indicatorClassName | string | no | Specifies additional class applied to slide position indicators |
 | indicatorStyle | React.CSSProperties | no | Specifies additional styles applied to slide position indicators |
-| onRenderIndicator | (index: number, onClick: (e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>, selectedIndex: number) => void) => JSX.Element | no | Function to render indicator element |
+| onRenderIndicator | (index: number, onClick: (e: React.MouseEvent<HTMLElement> \| React.TouchEvent<HTMLElement>, selectedIndex: number) => void) => JSX.Element | no | Function to render indicator element |
+| indicatorsDisplay | CarouselIndicatorsDisplay | no | Specifies display mode of the indicators. Default value `overlap`. |
+| rootStyles | ICssInput | no | Allows to specify own styles for root element |
+| indicatorsContainerStyles | ICssInput | no | Allows to specify own styles for indicators container when indicatorsDisplay is set to "block" |
 
 enum `CarouselButtonsLocation`
 
@@ -160,6 +163,13 @@ Provides options for carousel indicators' shape.
 | square | Indicators displayed as squares |
 | rectangle | Indicators displayed as rectangles |
 
+enum `CarouselIndicatorsDisplay`
+
+Provides options for carousel indicators display mode.
+| Value | Description |
+| overlap | Indicators are displayed on top of the carousel content |
+| block | Reserves space for indicators |
+
 Interface `ICarouselImageProps`
 
 Allows to easily render a set of `CarouselImage` components in the carousel

docs/documentation/docs/controls/Carousel.md

@@ -8,6 +8,10 @@ This control renders a list view for the given set of items.
 
 ![ListView control with grouping](../assets/ListView-grouping.png)
 
+**List view control with drag and drop applied**
+
+![ListView control with grouping](../assets/ListView-DragDrop.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.
@@ -30,7 +34,10 @@ import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from "@pnp
   showFilter={true}
   defaultFilter="John"
   filterPlaceHolder="Search..."
-  groupByFields={groupByFields} />
+  groupByFields={groupByFields}
+  dragDropFiles={true}
+  onDrop={this._getDropFiles}
+  stickyHeader={true} />
 ```
 - The control provides full text filtering through all the columns. If you want to exectue filtering on the specified columns, you can use syntax : `<ColumndName>`:`<FilterValue>`. Use `':'` as a separator between column name and value. Control support both `'fieldName'` and `'name'` properties of IColumn interface.
 
@@ -41,7 +48,6 @@ private _getSelection(items: any[]) {
   console.log('Selected items:', items);
 }
 ```
-
 - With the `groupByFields` property you can define an array of field objects which will be used for grouping. 
 
 **Important**: the same order of the fields defines how grouping will be applied. In the snippet the `ListView` control will first group by the `Extension` and after that by the `Author` field.
@@ -61,6 +67,16 @@ const groupByFields: IGrouping[] = [
 !!! note "Extend ListView with a ContextualMenu"
     To extend the `ListView` control with a [ContextualMenu](https://developer.microsoft.com/en-us/fabric#/components/contextualmenu) refer to [ListView.ContextualMenu](./ListView.ContextualMenu.md).
 
+- With the `onDrop` handler you can define a method that returns files that where drag and drop by user in the list view:
+
+```typescript
+private _getDropFiles = (files) => {
+    for (var i = 0; i < files.length; i++) {
+      console.log(files[i].name);
+    }
+  }
+```
+
 ## Implementation
 
 The ListView control can be configured with the following properties:
@@ -78,6 +94,9 @@ The ListView control can be configured with the following properties:
 | filterPlaceHolder | string | no | Specify the placeholder for the filter text box. Default 'Search' |
 | showFilter | boolean | no | Specify if the filter text box should be rendered. |
 | defaultFilter | string | no | Specify the initial filter to be applied to the list. |
+| 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 |
 
 The `IViewField` has the following implementation:
 

docs/documentation/docs/controls/ListView.md

@@ -35,13 +35,13 @@ import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/People
     showtooltip={true}
     isRequired={true}
     disabled={true}
-    selectedItems={this._getPeoplePickerItems}
+    onChange={this._getPeoplePickerItems}
     showHiddenInUI={false}
     principalTypes={[PrincipalType.User]}
     resolveDelay={1000} />
 ```
 
-- With the `selectedItems` property you can get the selected People in the Peoplepicker :
+- With the `onChange` property you can get the selected People in the `PeoplePicker` :
 
 ```typescript
 private _getPeoplePickerItems(items: any[]) {

docs/documentation/docs/controls/PeoplePicker.md

@@ -152,7 +152,7 @@ The TaxonomyPicker control can be configured with the following properties:
 | ---- | ---- | ---- | ---- |
 | panelTitle | string | yes | TermSet Picker Panel title. |
 | label | string | yes | Text displayed above the Taxonomy Picker. |
-| disabled | string | no | Specify if the control needs to be disabled. |
+| disabled | boolean | no | Specify if the control needs to be disabled. |
 | context | WebPartContext \| ExtensionContext | yes | Context of the current web part or extension. |
 | initialValues | IPickerTerms | no | Defines the selected by default term sets. |
 | allowMultipleSelections | boolean | no | Defines if the user can select only one or many term sets. Default value is false. |

docs/documentation/docs/controls/TaxonomyPicker.md

@@ -39,6 +39,7 @@ import { TreeView, ITreeItem } from "@pnp/spfx-controls-react/lib/TreeView";
     treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
     defaultSelectedKeys={['key1', 'key2']},
     expandToSelected={true}
+    defaultExpandedChildren={true}
     onSelect={this.onTreeItemSelect}
     onExpandCollapse={this.onTreeItemExpandCollapse}
     onRenderItem={this.renderCustomTreeItem} />
@@ -88,7 +89,7 @@ The `TreeView` control can be configured with the following properties:
 | Property                       | Type                       | Required | Description                                                                                                                        |
 |--------------------------------|----------------------------|----------|------------------------------------------------------------------------------------------------------------------------------------|
 | items                          | ITreeItem[]                | yes      | An array of tree items to display. refer [example](#example-of-array-of-tree-items-used-to-render-control-as-in-first-screenshot). |
-| defaultExpanded                | boolean                    | no       | Specify if the tree items are displayed as expanded by default (defaults to false).                                                |
+| defaultExpanded                | boolean                    | no       | Specify if the tree items are displayed as expanded by default (defaults to false.                                                |
 | selectionMode                  | enum                       | no       | Specifies the selection mode of tree view (defaults to Single selection).                                                            |
 | selectChildrenIfParentSelected | boolean                    | no       | Specifies if the childrens should be selected when parent item is selected (defaults to false).                                      |
 | showCheckboxes                 | boolean                    | yes      | Specify if the checkboxes should be displayed for selection.                                                                       |
@@ -98,6 +99,7 @@ The `TreeView` control can be configured with the following properties:
 | onExpandCollapse               | function                   | no       | Defines a onExpandCollapse function to raise when the tree item has expanded or collapsed.                                         |
 | onSelect                       | function                   | no       | Captures the event of when the tree item selection has changed.                                                                    |
 | onRenderItem                   | function                   | no       | Optional callback to provide custom rendering of the item (default is simple text of item label and a checkbox for selection).     |
+| defaultExpandedChildren        | boolean                    | no       | Default expand / collapse behavior for the child nodes. By default this is set to true. |
 
 Enum `TreeViewSelectionMode`
 

docs/documentation/docs/controls/TreeView.md

@@ -7,7 +7,7 @@ FieldRendererHelper class is used to automatically apply needed Field Control ba
 - Import the following modules to your component:
 
 ```TypeScript
-import { FieldRendererHelper } from "@pnp/spfx-controls-react/lib/Utilities/FieldRendererHelper";
+import { FieldRendererHelper } from "@pnp/spfx-controls-react/lib/Utilities";
 ```
 
 - Use the `FieldRendererHelper.getFieldRenderer` method to asynchronously request proper React control (As the method returns `Promise` it should be called in one of React component lifecycle methods, for example, `componentWillMount` that will occur before `render`):