diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 1f703f48c..14324271c 100644 --- a/CHANGELOG.JSON +++ b/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": { diff --git a/CHANGELOG.md b/CHANGELOG.md index 11cf2c0a9..db13745c3 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 11cf2c0a9..db13745c3 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/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) diff --git a/docs/documentation/docs/controls/FilePicker.md b/docs/documentation/docs/controls/FilePicker.md index 40a04190d..20ac60724 100644 --- a/docs/documentation/docs/controls/FilePicker.md +++ b/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` diff --git a/docs/documentation/docs/controls/FolderExplorer.md b/docs/documentation/docs/controls/FolderExplorer.md index 39beb7a91..c6dbba9b6 100644 --- a/docs/documentation/docs/controls/FolderExplorer.md +++ b/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) diff --git a/docs/documentation/docs/controls/PeoplePicker.md b/docs/documentation/docs/controls/PeoplePicker.md index a2b591b88..25124c35b 100644 --- a/docs/documentation/docs/controls/PeoplePicker.md +++ b/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 | diff --git a/docs/documentation/docs/controls/Progress.md b/docs/documentation/docs/controls/Progress.md index bbf002451..62f049c70 100644 --- a/docs/documentation/docs/controls/Progress.md +++ b/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 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 `

` tag, and likewise a value -of `6` would make it equivalent to an `

` 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 `

` tag, and likewise a value of `6` would make it equivalent to an `

` 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) diff --git a/docs/documentation/docs/index.md b/docs/documentation/docs/index.md index 25a27b466..063eaf850 100644 --- a/docs/documentation/docs/index.md +++ b/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) diff --git a/docs/documentation/mkdocs.yml b/docs/documentation/mkdocs.yml index 664d0019c..4f616c75e 100644 --- a/docs/documentation/mkdocs.yml +++ b/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: diff --git a/package-lock.json b/package-lock.json index 55d4e669c..c90eb00b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@pnp/spfx-controls-react", - "version": "2.4.0", + "version": "2.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ece802c81..0b36a5856 100644 --- a/package.json +++ b/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" }, diff --git a/src/common/SPEntities.ts b/src/common/SPEntities.ts index 003bde1b6..808219f3f 100644 --- a/src/common/SPEntities.ts +++ b/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; -} \ No newline at end of file +} diff --git a/src/common/telemetry/version.ts b/src/common/telemetry/version.ts index f24bf981c..880815613 100644 --- a/src/common/telemetry/version.ts +++ b/src/common/telemetry/version.ts @@ -1 +1 @@ -export const version: string = "2.4.0"; \ No newline at end of file +export const version: string = "2.5.0"; \ No newline at end of file diff --git a/src/controls/dateTimePicker/DateTimePicker.tsx b/src/controls/dateTimePicker/DateTimePicker.tsx index 92737192f..8f2bf4b7d 100644 --- a/src/controls/dateTimePicker/DateTimePicker.tsx +++ b/src/controls/dateTimePicker/DateTimePicker.tsx @@ -69,7 +69,7 @@ export class DateTimePicker extends React.Component 23) { diff --git a/src/controls/filePicker/FilePicker.tsx b/src/controls/filePicker/FilePicker.tsx index c963f89b8..2b1b5c519 100644 --- a/src/controls/filePicker/FilePicker.tsx +++ b/src/controls/filePicker/FilePicker.tsx @@ -211,6 +211,7 @@ export class FilePicker extends React.Component< {this.state.selectedTab === "keySite" && ( )} diff --git a/src/controls/filePicker/IFilePickerProps.ts b/src/controls/filePicker/IFilePickerProps.ts index ecdde713f..fd3beca1e 100644 --- a/src/controls/filePicker/IFilePickerProps.ts +++ b/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; } diff --git a/src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabProps.ts b/src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabProps.ts index 107333786..404f9c826 100644 --- a/src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabProps.ts +++ b/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; } diff --git a/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx b/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx index e0ac3eeeb..bab1b683e 100644 --- a/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx +++ b/src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx @@ -46,6 +46,7 @@ export default class SiteFilePickerTab extends React.Component this._handleOpenLibrary(selectedLibrary, true)} />} {this.state.libraryAbsolutePath !== undefined && void; + includePageLibraries?: boolean; } diff --git a/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx b/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx index 6a3dddf00..c000a72ed 100644 --- a/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx +++ b/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx @@ -44,7 +44,11 @@ export class FileBrowser extends React.Component diff --git a/src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx b/src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx index 83ddaeb65..6187583b5 100644 --- a/src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx +++ b/src/controls/folderExplorer/FolderExplorer/FolderExplorer.tsx @@ -166,7 +166,9 @@ export class FolderExplorer extends React.Component { this.setDialogStyling(); } }; + const dlgContentProps = merge({}, dialogContentProps, { + styles: { + content: { + display: 'flex', + flexDirection: 'column', + height: '100%' + }, + inner: { + flexGrow: 1 + }, + innerContent: { + height: '100%' + } + } + }); + + + const dlgStyles: IStyleFunctionOrObject = { + main: { + width: width, + maxWidth: width, + minWidth: width, + height: height + } + }; + return ( + dialogContentProps={dlgContentProps} + {...omit(this.props, 'className', 'modalProps', 'dialogContentProps')}> -