Merge pull request #813 from pnp/dev

Merge for 2.5.0

CHANGELOG.JSON

@@ -1,5 +1,33 @@
 {
   "versions": [
+    {
+      "version": "2.5.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`TreeView`: Adding support to clear TreeView selected items by passing an empty array. [#787](https://github.com/pnp/sp-dev-fx-controls-react/pull/787)",
+          "`FilePicker`: new property `includePageLibraries` to optionally display Site Pages library on Site tab [#601](https://github.com/pnp/sp-dev-fx-controls-react/issues/601)",
+          "`ListItemPicker`: Support of `Calculated` columns [#805](https://github.com/pnp/sp-dev-fx-controls-react/issues/805)",
+          "`Progress`: Documentation update to have consistency in variables names [#811](https://github.com/pnp/sp-dev-fx-controls-react/pull/811)",
+          "`FolderExplorer`: Add support for sorting folder explorer items [#812](https://github.com/pnp/sp-dev-fx-controls-react/pull/812)"
+        ],
+        "fixes": [
+          "`ListView`: Selection is reset when putting a ListView inside a React Component that controls its items and selection props [#251](https://github.com/pnp/sp-dev-fx-controls-react/issues/251)",
+          "Documentation fix for `PeoplePicker`: Removed unwanted new line in help content. [#783](https://github.com/pnp/sp-dev-fx-controls-react/pull/783)",
+          "Documentation fix for `TreeView`: `TreeViewSelectionMode` added in the import [#780](https://github.com/pnp/sp-dev-fx-controls-react/pull/780)",
+          "Documentation fix for `TreeView`: removed unwanted comma [#779](https://github.com/pnp/sp-dev-fx-controls-react/pull/779)",
+          "`IFrameDialog`: height unable to resize relative to screen size, even if we provide in % it is taking default value. [#636](https://github.com/pnp/sp-dev-fx-controls-react/issues/636)",
+          "`DateTimePicker`: Clear Date functionality [#799](https://github.com/pnp/sp-dev-fx-controls-react/issues/799)"
+        ]
+      },
+      "contributions": [
+        "[Ari Gunawan](https://github.com/AriGunawan)",
+        "[Joel Rodrigues](https://github.com/joelfmrodrigues)",
+        "[Mike Myers](https://github.com/thespooler)",
+        "[Ravichandran Krishnasamy](https://github.com/ravichandran-blog)",
+        "[San](https://github.com/sankarkumar23)"
+      ]
+    },
     {
       "version": "2.4.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,28 @@
 # Releases
 
+## 2.5.0
+
+### Enhancements
+
+- `TreeView`: Adding support to clear TreeView selected items by passing an empty array. [#787](https://github.com/pnp/sp-dev-fx-controls-react/pull/787)
+- `FilePicker`: new property `includePageLibraries` to optionally display Site Pages library on Site tab [#601](https://github.com/pnp/sp-dev-fx-controls-react/issues/601)
+- `ListItemPicker`: Support of `Calculated` columns [#805](https://github.com/pnp/sp-dev-fx-controls-react/issues/805)
+- `Progress`: Documentation update to have consistency in variables names [#811](https://github.com/pnp/sp-dev-fx-controls-react/pull/811)
+- `FolderExplorer`: Add support for sorting folder explorer items [#812](https://github.com/pnp/sp-dev-fx-controls-react/pull/812)
+
+### Fixes
+
+- `ListView`: Selection is reset when putting a ListView inside a React Component that controls its items and selection props [#251](https://github.com/pnp/sp-dev-fx-controls-react/issues/251)
+- Documentation fix for `PeoplePicker`: Removed unwanted new line in help content. [#783](https://github.com/pnp/sp-dev-fx-controls-react/pull/783)
+- Documentation fix for `TreeView`: `TreeViewSelectionMode` added in the import [#780](https://github.com/pnp/sp-dev-fx-controls-react/pull/780)
+- Documentation fix for `TreeView`: removed unwanted comma [#779](https://github.com/pnp/sp-dev-fx-controls-react/pull/779)
+- `IFrameDialog`: height unable to resize relative to screen size, even if we provide in % it is taking default value. [#636](https://github.com/pnp/sp-dev-fx-controls-react/issues/636)
+- `DateTimePicker`: Clear Date functionality [#799](https://github.com/pnp/sp-dev-fx-controls-react/issues/799)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Ari Gunawan](https://github.com/AriGunawan), [Joel Rodrigues](https://github.com/joelfmrodrigues), [Mike Myers](https://github.com/thespooler), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog), [San](https://github.com/sankarkumar23).
+
 ## 2.4.0
 
 ### New control(s)

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

@@ -1,5 +1,28 @@
 # Releases
 
+## 2.5.0
+
+### Enhancements
+
+- `TreeView`: Adding support to clear TreeView selected items by passing an empty array. [#787](https://github.com/pnp/sp-dev-fx-controls-react/pull/787)
+- `FilePicker`: new property `includePageLibraries` to optionally display Site Pages library on Site tab [#601](https://github.com/pnp/sp-dev-fx-controls-react/issues/601)
+- `ListItemPicker`: Support of `Calculated` columns [#805](https://github.com/pnp/sp-dev-fx-controls-react/issues/805)
+- `Progress`: Documentation update to have consistency in variables names [#811](https://github.com/pnp/sp-dev-fx-controls-react/pull/811)
+- `FolderExplorer`: Add support for sorting folder explorer items [#812](https://github.com/pnp/sp-dev-fx-controls-react/pull/812)
+
+### Fixes
+
+- `ListView`: Selection is reset when putting a ListView inside a React Component that controls its items and selection props [#251](https://github.com/pnp/sp-dev-fx-controls-react/issues/251)
+- Documentation fix for `PeoplePicker`: Removed unwanted new line in help content. [#783](https://github.com/pnp/sp-dev-fx-controls-react/pull/783)
+- Documentation fix for `TreeView`: `TreeViewSelectionMode` added in the import [#780](https://github.com/pnp/sp-dev-fx-controls-react/pull/780)
+- Documentation fix for `TreeView`: removed unwanted comma [#779](https://github.com/pnp/sp-dev-fx-controls-react/pull/779)
+- `IFrameDialog`: height unable to resize relative to screen size, even if we provide in % it is taking default value. [#636](https://github.com/pnp/sp-dev-fx-controls-react/issues/636)
+- `DateTimePicker`: Clear Date functionality [#799](https://github.com/pnp/sp-dev-fx-controls-react/issues/799)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Ari Gunawan](https://github.com/AriGunawan), [Joel Rodrigues](https://github.com/joelfmrodrigues), [Mike Myers](https://github.com/thespooler), [Ravichandran Krishnasamy](https://github.com/ravichandran-blog), [San](https://github.com/sankarkumar23).
+
 ## 2.4.0
 
 ### New control(s)

docs/documentation/docs/controls/FilePicker.md

@@ -79,6 +79,7 @@ The FilePicker component can be configured with the following properties:
 | storeLastActiveTab | boolean | no | Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default `true` |
 | renderCustomUploadTabContent | (filePickerResult: IFilePickerResult) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Upload" tab |
 | renderCustomLinkTabContent | (filePickerResult: IFilePickerResult) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Link" tab |
+| includePageLibraries | boolean | no | Specifies if Site Pages library to be visible on Sites tab |
 
 interface `IFilePickerResult`
 

docs/documentation/docs/controls/FolderExplorer.md

@@ -59,5 +59,7 @@ The `FolderExplorer` control can be configured with the following properties:
 | initialBreadcrumbItems | IBreadcrumbItem | no | Additional items to be added to the beginning of the breadcrumb. |
 | hiddenFilterBox | boolean | no | Hide the filter box |
 | onSelect | (folder: IFolder): void | no | Callback function called after a folder is selected. |
+| orderby | string | no | The name of the field on which to sort. Default: Name. For list item properties, use ListItemAllFields/Title, ListItemAllFields/Created, etc |
+| orderAscending | boolean | no | If set to true, results will be sorted in ascending order. Otherwise, descending will be used as default |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FolderExplorer)

docs/documentation/docs/controls/PeoplePicker.md

@@ -70,8 +70,7 @@ The People picker control can be configured with the following properties:
 | onChange | (items: IPersonaProps[]) => void | no | Get the selected users in the control. | |
 | peoplePickerWPclassName | string | no | applies custom styling to the people picker element | |
 | peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only | |
-| defaultSelectedUsers | string[] | no | Default selected user emails or login names, optionally append `/title` with forward slash.
-If user is not found then only optional title will be shown. If you do not have email or login name of inactive users just pass `/title` alone prefixed with slash.| |
+| defaultSelectedUsers | string[] | no | Default selected user emails or login names, optionally append `/title` with forward slash. If user is not found then only optional title will be shown. If you do not have email or login name of inactive users just pass `/title` alone prefixed with slash.| |
 | webAbsoluteUrl | string | no | Specify the site URL on which you want to perform the user query call. If not provided, the people picker will perform a tenant wide people/group search. When provided it will search users/groups on the provided site. | |
 | principalTypes | PrincipalType[] | no | Define which type of data you want to retrieve: User, SharePoint groups, Security groups. Multiple are possible. | |
 | ensureUser | boolean | no | When ensure user property is true, it will return the local user ID on the current site when doing a tenant wide search. | false |

docs/documentation/docs/controls/Progress.md

@@ -63,8 +63,8 @@ Now, in a component, where `Progress` is used you can have code as below:
 
 ```TypeScript
 export interface IYourComponentState {
-  actions: IProgressAction[];
-  currentActionIndex?: number;
+  progressActions: IProgressAction[];
+  currentProgressActionIndex?: number;
   // other state properties
 }
 
@@ -75,7 +75,7 @@ export class YourComponent extends React.Component<IYourComponentProps, IYourCom
 
   private _initActions() {
     this.setState({
-      actions: [
+      progressActions: [
         new FirstAction(),
         new SecondAction()
       ]
@@ -84,7 +84,7 @@ export class YourComponent extends React.Component<IYourComponentProps, IYourCom
 
   private async _execute() {
     for (let i = 0; i <= this.state.actions.length; i++) {
-      this.setState(currentActionIndex: i);
+      this.setState(currentProgressActionIndex: i);
 
       if (i < this.state.actions.length) {
         await this.state.actions[i].execute();

docs/documentation/docs/controls/TreeView.md

@@ -24,7 +24,7 @@ Here are examples of the control in action:
 - Import the following modules to your component:
 
 ```TypeScript
-import { TreeView, ITreeItem } from "@pnp/spfx-controls-react/lib/TreeView";
+import { TreeView, ITreeItem, TreeViewSelectionMode } from "@pnp/spfx-controls-react/lib/TreeView";
 ```
 
 - Use the `TreeView` control in your code as follows:
@@ -37,7 +37,7 @@ import { TreeView, ITreeItem } from "@pnp/spfx-controls-react/lib/TreeView";
     selectChildrenIfParentSelected={true}
     showCheckboxes={true}
     treeItemActionsDisplayMode={TreeItemActionsDisplayMode.ContextualMenu}
-    defaultSelectedKeys={['key1', 'key2']},
+    defaultSelectedKeys={['key1', 'key2']}
     expandToSelected={true}
     defaultExpandedChildren={true}
     onSelect={this.onTreeItemSelect}

docs/documentation/docs/controls/accessibleAccordion/Accordion.md

@@ -1,10 +1,10 @@
 # Accessible Accordion
 
-This control allows you to render an accordion control. Is a Implementation based on React Accessible Accordion Control, that was customize UI to be more Fluent.
+This control allows you to render an accordion control. It is an implementation based on React Accessible Accordion Control, that was customized to be more "Fluent".
 
 Here is an example of the control in action:
 
-![Accessible Accordion control](../assets/AccessibleAccordion.gif)
+![Accessible Accordion control](../../assets/AccessibleAccordion.gif)
 
 ## How to use this control in your solutions
 
@@ -66,90 +66,63 @@ The `Accordion` control can be configured with the following properties:
 
 ### Accordion
 
-#### allowMultipleExpanded : `boolean` [*optional*, default: `false`]
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| allowMultipleExpanded | boolean | no | Don't autocollapse items when expanding other items. | `false` |
+| allowZeroExpanded | boolean | no | Allow the only remaining expanded item to be collapsed. | `false` |
+| 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. | |
 
-Don't autocollapse items when expanding other items.
 
-#### allowZeroExpanded : `boolean` [*optional*, default: `false`]
-
-Allow the only remaining expanded item to be collapsed.
-
-#### preExpanded: `string[]` [_optional_, default: `[]`]
-
-Accepts an array of strings and any `AccordionItem` whose `uuid` prop matches
-any one of these strings will be expanded on mount.
-
-#### className : `string` [*optional*, default: `'accordion'`]
-
-Class(es) to apply to element.
-
-#### onChange : `(string[]) => void` [*optional*]
-
-Callback which is invoked when items are expanded or collapsed. Gets passed
-`uuid`s of the currently expanded `AccordionItem`s.
-
----
 
 ### AccordionItem
 
-#### className : `string` [*optional*, default: `accordion__item`]
-
-Class(es) to apply to element.
-
-#### uuid : `string|number` [*optional*]
-
-Recommended for use with `onChange`. Will be auto-generated if not provided.
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| className | string | no | Class(es) to apply to element. | "accordion__item" |
+| uuid | string \| number | no | Recommended for use with `onChange`. Will be auto-generated if not provided. | |
+| dangerouslySetExpanded | boolean | no | Enables external control of the expansion. **Warning: This may impact accessibility negatively, use at your own risk** | |
 
-#### dangerouslySetExpanded: `boolean` [*optional*]
-
-Enables external control of the expansion.
-
-> Warning: This may impact accessibility negatively, use at your own risk
-
----
 
 ### AccordionItemHeading
 
-#### className : `string` [*optional*, default: `'accordion__heading'`]
-
-Class(es) to apply to the 'heading' element.
-
-#### aria-level : `number` [*optional*, default: `3`]
-
-Semantics to apply to the 'heading' element. A value of `1` would make your
-heading element hierarchically equivalent to an `<h1>` tag, and likewise a value
-of `6` would make it equivalent to an `<h6>` tag.
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| className | string | no | Class(es) to apply to the 'heading' element. | "accordion__heading" |
+| aria-level | number | no | Semantics to apply to the 'heading' element. A value of `1` would make your heading element hierarchically equivalent to an `<h1>` tag, and likewise a value of `6` would make it equivalent to an `<h6>` tag. | `3` |
 
 ### AccordionItemButton
 
-#### className : `string` [*optional*, default: `'accordion__button'`]
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| className | string | no | Class(es) to apply to the 'button' element. | "accordion__button" |
 
-Class(es) to apply to the 'button' element.
-
----
 
 ### AccordionItemPanel
 
-#### className : `string` [*optional*, default: `'accordion__panel'`]
-
-Class(es) to apply to element.
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| className | string | no | Class(es) to apply to element. | "accordion__panel" |
 
----
 
 ### AccordionItemState
 
-#### children : `({ expanded: boolean, disabled: boolean }): JSX.Element` [**required**]
+| Property | Type | Required | Description | Default |
+| ---- | ---- | ---- | ---- | ---- |
+| children | ({ expanded: boolean, disabled: booleam }): JSX.Element | yes | item's children. | |
 
----
 
 ## Helpers
 
-### resetNextUuid : `(): void`
+### resetNextUuid
+
+```typescript
+resetNextUuid : () => void
+```
 
 Resets the internal counter for Accordion items' identifiers (including `id`
 attributes). For use in test suites and isomorphic frameworks.
 
----
-
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/AccessibleAccordion)

docs/documentation/docs/index.md

@@ -52,6 +52,7 @@ telemetry.optOut();
 
 The following controls are currently available:
 
+- [AccessibleAccordion](./controls/AccessibleAccordion/Accordion) (Control to render an accordion. React `AccessibleAccourdion`-based implementation)
 - [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)

docs/documentation/mkdocs.yml

@@ -9,6 +9,7 @@ nav:
     - 'Submitting a PR': 'guides/submitting-pr.md'
     - 'Migrate v1 to v2': 'guides/migrate-from-v1.md'
   - Controls:
+    - AccessibleAccordion: 'controls/AccessibleAccordion/Accordion.md'
     - Accordion: 'controls/Accordion.md'
     - Carousel: 'controls/Carousel.md'
     - Charts:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "engines": {
     "node": ">=10"
   },

src/common/SPEntities.ts

@@ -23,6 +23,8 @@ export interface ISPField {
     RichText?: boolean;
     SchemaXml?: string;
     LookupDisplayUrl?: string;
+    TypeAsString?: string;
+    ResultType?: string;
 }
 
 /**
@@ -166,4 +168,4 @@ export interface ICultureInfo {
     name: string;
     dateTimeFormat: ICultureDateTimeFormat;
     numberFormat: ICultureNumberFormat;
-}
+}

src/common/telemetry/version.ts

@@ -1 +1 @@
-export const version: string = "2.4.0";
+export const version: string = "2.5.0";

src/controls/dateTimePicker/DateTimePicker.tsx

@@ -69,7 +69,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
    * Called before the component receives new props, used for matching state with new props.
    */
   public componentWillReceiveProps(nextProps: IDateTimePickerProps): void {
-    if (nextProps.value != null && !isEqual(nextProps.value, this.props.value)) {
+    if (!isEqual(nextProps.value, this.props.value)) {
       const { day, hours, minutes, seconds } = DateTimePicker.getDateComponents(nextProps.value, this.props.dateConvention);
       this.setState({ day, hours, minutes, seconds });
     }
@@ -134,9 +134,9 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
           }
         }
         else if (hours === 12) {
-            //am - if hours == 12, set hours to 0 here
-            hours = 0;
-          }
+          //am - if hours == 12, set hours to 0 here
+          hours = 0;
+        }
       }
 
       if (hours > 23) {

src/controls/filePicker/FilePicker.tsx

@@ -211,6 +211,7 @@ export class FilePicker extends React.Component<
             {this.state.selectedTab === "keySite" && (
               <SiteFilePickerTab
                 fileBrowserService={this.fileBrowserService}
+                includePageLibraries={this.props.includePageLibraries}
                 {...linkTabProps}
               />
             )}

src/controls/filePicker/IFilePickerProps.ts

@@ -137,4 +137,9 @@ export interface IFilePickerProps {
    * Optional additional renderer for Upload tab
    */
   renderCustomUploadTabContent?: (filePickerResult: IFilePickerResult) => JSX.Element | null;
+
+  /**
+   * Specifies if Site Pages library to be visible on Sites tab
+   */
+  includePageLibraries?: boolean;
 }

src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabProps.ts

@@ -9,4 +9,6 @@ export interface ISiteFilePickerTabProps extends IFilePickerTab {
    * Represents the base node in the breadrumb navigation
    */
   breadcrumbFirstNode?: IBreadcrumbItem;
+
+  includePageLibraries?: boolean;
 }