Merge pull request #1816 from pnp/dev

3.18.0 Release

Author: AJIXuMuK

CHANGELOG.json

@@ -1,5 +1,37 @@
 {
   "versions": [
+    {
+      "version": "3.18.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`DynamicField`: Added orderBy to DynamicField props for lookup fields [#1747](https://github.com/pnp/sp-dev-fx-controls-react/pull/1747)",
+          "`DateTimePicker`: disable array of dates [#516](https://github.com/pnp/sp-dev-fx-controls-react/issues/516)",
+          "`DynamicForm`: new `customIcons` property to allow custom icons for the form [#1745](https://github.com/pnp/sp-dev-fx-controls-react/pull/1745)",
+          "`RichText`: Added style property to Rich text control [#1773](https://github.com/pnp/sp-dev-fx-controls-react/pull/1773)",
+          "`fast-serve`: Fast-serve update to match the most recent changes. [#1782](https://github.com/pnp/sp-dev-fx-controls-react/pull/1782)",
+          "`PeoplePicker`: Added context optimization [#1764](https://github.com/pnp/sp-dev-fx-controls-react/pull/1764)",
+          "`Multiple controls`: Wrong fluentui imports cause webpack build errors [#1763](https://github.com/pnp/sp-dev-fx-controls-react/issues/1763)",
+          "`FileTypeIcon`: Added standard events [#1789](https://github.com/pnp/sp-dev-fx-controls-react/pull/1789)"
+        ],
+        "fixes": [
+          "`FolderPicker`: Update documentation on how to use the control with siteAbsoluteUrl property [#1743](https://github.com/pnp/sp-dev-fx-controls-react/pull/1743)",
+          "Readme documents highlight extension does not work correctly [#1495](https://github.com/pnp/sp-dev-fx-controls-react/issues/1495)",
+          "`DynamicForm`: Error on rendering DynamicForm when having a Date Field with internal name starting with underscore ('_')[#1738](https://github.com/pnp/sp-dev-fx-controls-react/issues/1738)",
+          "`DynamicForm`: Dynamic form loading error in other site [#1758](https://github.com/pnp/sp-dev-fx-controls-react/issues/1758)"
+        ]
+      },
+      "contributions": [
+        "[Guido Zambarda](https://github.com/GuidoZam)",
+        "[Harminder Singh](https://github.com/HarminderSethi)",
+        "[IRRDC](https://github.com/IRRDC)",
+        "[Matthias Z'Brun](https://github.com/raclettierer)",
+        "[Michaël Maillot](https://github.com/michaelmaillot)",
+        "[Nishkalank Bezawada](https://github.com/NishkalankBezawada)",
+        "[Sergei Sergeev](https://github.com/s-KaiNet)",
+        "[srpmtt](https://github.com/srpmtt)"
+      ]
+    },
     {
       "version": "3.17.0",
       "changes":{

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Releases
 
+## 3.18.0
+
+### Enhancements
+
+- `DynamicField`: Added orderBy to DynamicField props for lookup fields [#1747](https://github.com/pnp/sp-dev-fx-controls-react/pull/1747)
+- `DateTimePicker`: disable array of dates [#516](https://github.com/pnp/sp-dev-fx-controls-react/issues/516)
+- `DynamicForm`: new `customIcons` property to allow custom icons for the form [#1745](https://github.com/pnp/sp-dev-fx-controls-react/pull/1745)
+- `RichText`: Added style property to Rich text control [#1773](https://github.com/pnp/sp-dev-fx-controls-react/pull/1773)
+- `fast-serve`: Fast-serve update to match the most recent changes. [#1782](https://github.com/pnp/sp-dev-fx-controls-react/pull/1782)
+- `PeoplePicker`: Added context optimization [#1764](https://github.com/pnp/sp-dev-fx-controls-react/pull/1764)
+- `Multiple controls`: Wrong fluentui imports cause webpack build errors [#1763](https://github.com/pnp/sp-dev-fx-controls-react/issues/1763)
+- `FileTypeIcon`: Added standard events [#1789](https://github.com/pnp/sp-dev-fx-controls-react/pull/1789)
+
+### Fixes
+
+- `FolderPicker`: Update documentation on how to use the control with siteAbsoluteUrl property [#1743](https://github.com/pnp/sp-dev-fx-controls-react/pull/1743)
+- Readme documents highlight extension does not work correctly [#1495](https://github.com/pnp/sp-dev-fx-controls-react/issues/1495)
+- `DynamicForm`: Error on rendering DynamicForm when having a Date Field with internal name starting with underscore ('_')[#1738](https://github.com/pnp/sp-dev-fx-controls-react/issues/1738)
+- `DynamicForm`: Dynamic form loading error in other site [#1758](https://github.com/pnp/sp-dev-fx-controls-react/issues/1758)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Guido Zambarda](https://github.com/GuidoZam), [Harminder Singh](https://github.com/HarminderSethi), [IRRDC](https://github.com/IRRDC), [Matthias Z'Brun](https://github.com/raclettierer), [Michaël Maillot](https://github.com/michaelmaillot), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [Sergei Sergeev](https://github.com/s-KaiNet), [srpmtt](https://github.com/srpmtt).
+
 ## 3.17.0
 
 ### Enhancements

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

@@ -1,5 +1,29 @@
 # Releases
 
+## 3.18.0
+
+### Enhancements
+
+- `DynamicField`: Added orderBy to DynamicField props for lookup fields [#1747](https://github.com/pnp/sp-dev-fx-controls-react/pull/1747)
+- `DateTimePicker`: disable array of dates [#516](https://github.com/pnp/sp-dev-fx-controls-react/issues/516)
+- `DynamicForm`: new `customIcons` property to allow custom icons for the form [#1745](https://github.com/pnp/sp-dev-fx-controls-react/pull/1745)
+- `RichText`: Added style property to Rich text control [#1773](https://github.com/pnp/sp-dev-fx-controls-react/pull/1773)
+- `fast-serve`: Fast-serve update to match the most recent changes. [#1782](https://github.com/pnp/sp-dev-fx-controls-react/pull/1782)
+- `PeoplePicker`: Added context optimization [#1764](https://github.com/pnp/sp-dev-fx-controls-react/pull/1764)
+- `Multiple controls`: Wrong fluentui imports cause webpack build errors [#1763](https://github.com/pnp/sp-dev-fx-controls-react/issues/1763)
+- `FileTypeIcon`: Added standard events [#1789](https://github.com/pnp/sp-dev-fx-controls-react/pull/1789)
+
+### Fixes
+
+- `FolderPicker`: Update documentation on how to use the control with siteAbsoluteUrl property [#1743](https://github.com/pnp/sp-dev-fx-controls-react/pull/1743)
+- Readme documents highlight extension does not work correctly [#1495](https://github.com/pnp/sp-dev-fx-controls-react/issues/1495)
+- `DynamicForm`: Error on rendering DynamicForm when having a Date Field with internal name starting with underscore ('_')[#1738](https://github.com/pnp/sp-dev-fx-controls-react/issues/1738)
+- `DynamicForm`: Dynamic form loading error in other site [#1758](https://github.com/pnp/sp-dev-fx-controls-react/issues/1758)
+
+### Contributors
+
+Special thanks to our contributors (in alphabetical order): [Guido Zambarda](https://github.com/GuidoZam), [Harminder Singh](https://github.com/HarminderSethi), [IRRDC](https://github.com/IRRDC), [Matthias Z'Brun](https://github.com/raclettierer), [Michaël Maillot](https://github.com/michaelmaillot), [Nishkalank Bezawada](https://github.com/NishkalankBezawada), [Sergei Sergeev](https://github.com/s-KaiNet), [srpmtt](https://github.com/srpmtt).
+
 ## 3.17.0
 
 ### Enhancements

docs/documentation/docs/controls/Carousel.md

@@ -104,8 +104,8 @@ The Carousel component can be configured with the following properties:
 | isInfinite | boolean | no | Indicates if infinite scrolling is enabled. |
 | canMoveNext | boolean | no | Property indicates if the next item button can be clicked. If not provided, status of the button is calculated based on the current index. <br />It is mandatory when triggerPageEvent is used. |
 | canMovePrev | boolean | no | Property indicates if the previous item button can be clicked. If not provided, status of the button is calculated based on the current index. <br />It is mandatory when triggerPageEvent is used. |
-| buttonsLocation | CarouselButtonsLocation | yes | Specifies the location of the buttons inside the container. |
-| buttonsDisplay | CarouselButtonsDisplay | yes | Specifies the buttons container display mode. |
+| buttonsLocation | CarouselButtonsLocation | no | Specifies the location of the buttons inside the container. Default: center |
+| buttonsDisplay | CarouselButtonsDisplay | no | Specifies the buttons container display mode. Default: block |
 | containerStyles | ICssInput | no | Allows to specify own styles for carousel container. |
 | loadingComponentContainerStyles | ICssInput | no | Allows to specify own styles for loading component. |
 | contentContainerStyles | ICssInput | no | Allows to specify own styles for elements container. |
@@ -134,6 +134,7 @@ The Carousel component can be configured with the following properties:
 | indicatorsContainerStyles | ICssInput | no | Allows to specify own styles for indicators container when indicatorsDisplay is set to "block" |
 | prevButtonAriaLabel | string | no | Aria label of the PreviousItem button. Default 'Previous item'. |
 | nextButtonAriaLabel | string | no | Aria label of the NextItem button. Default 'Next item'. |
+| contentHeight | number | no | Allows to specify the height of the content. Can be used instead of providing styles for the content container (`contentContainerStyles`). |
 
 enum `CarouselButtonsLocation`
 

docs/documentation/docs/controls/ContentTypePicker.md

@@ -57,20 +57,20 @@ The `ContentTypePicker` control can be configured with the following properties:
 | context | BaseComponentContext | yes | The context object of the SPFx loaded webpart or customizer. |
 | listId | string | no | The ID of the list or library you wish to select content type(s) from. When not specified, picker will be populated with site content types.|
 | className | string | no | If provided, additional class name to provide on the dropdown element. |
-disabled | boolean | no | Whether or not the control is disabled. |
-includeHidden | boolean | no | Whether or not to include hidden content types. Default is true. |
-includeReadOnly | boolean | no | Whether or not to include read-only content types. Default is true. |
-group | string | no | Only show content types of a certain group. |
-filter | string | no | Filter content types from OData query (takes the upperhand of `hidden`, `readOnly` and `group` Filters). |
-orderBy | ContentTypesOrderBy | no | How to order the content types. |
-selectedContentTypes | string \| string[] | no | IDs of the selected item(s). If you provide this, you must maintain selection state by observing `onSelectionChanged` events and passing a new value in when changed.
-multiSelect | boolean | no | Indicates if multi-choice selections is allowed. Default is false. |
-label | string | no | The label to display. |
-placeholder | string | no | Input placeholder text. Displayed until option is selected. |
-onSelectionChanged | (newValue: ISPContentType \| ISPContentType[]): void | no | Callback issued when the selected option changes. |
-filterItems | (contentTypes: ISPContentType[]): ISPContentType[] | no | This function is invoked after the filtering has been done. This allows you to add additional custom filtering.
-webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). |
-showBlankOption | boolean | no | Whether or not to show a blank option. Default is false. Works only when `multiSelect` is false. |
+| disabled | boolean | no | Whether or not the control is disabled. |
+| includeHidden | boolean | no | Whether or not to include hidden content types. Default is true. |
+| includeReadOnly | boolean | no | Whether or not to include read-only content types. Default is true. |
+| group | string | no | Only show content types of a certain group. |
+| filter | string | no | Filter content types from OData query (takes the upperhand of `hidden`, `readOnly` and `group` Filters). |
+| orderBy | ContentTypesOrderBy | no | How to order the content types. |
+| selectedContentTypes | string \| string[] | no | IDs of the selected item(s). If you provide this, you must maintain selection state by observing `onSelectionChanged` events and passing a new value in when changed. |
+| multiSelect | boolean | no | Indicates if multi-choice selections is allowed. Default is false. |
+| label | string | no | The label to display. |
+| placeholder | string | no | Input placeholder text. Displayed until option is selected. |
+| onSelectionChanged | (newValue: ISPContentType \| ISPContentType[]): void | no | Callback issued when the selected option changes. |
+| filterItems | (contentTypes: ISPContentType[]): ISPContentType[] | no | This function is invoked after the filtering has been done. This allows you to add additional custom filtering. |
+| webAbsoluteUrl | string | no | Absolute Web Url of target site (user requires permissions). |
+| showBlankOption | boolean | no | Whether or not to show a blank option. Default is false. Works only when `multiSelect` is false. |
 
 Enum `ContentTypesOrderBy`
 

docs/documentation/docs/controls/DateTimePicker.md

@@ -27,6 +27,7 @@ Here are some examples of the control:
 ```TypeScript
 import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-controls-react/lib/DateTimePicker';
 ```
+
 - Use the `DateTimePicker` control in your code as follows, either as an uncontrolled or a controlled component:
 
 ```TypeScript
@@ -47,7 +48,6 @@ import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-contro
 
 The `DateTimePicker` control can be configured with the following properties:
 
-
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
 | label | string | no | Property field label displayed on top. |
@@ -72,12 +72,13 @@ The `DateTimePicker` control can be configured with the following properties:
 | timeDisplayControlType | TimeDisplayControlType | no | Specifies what type of control to use when rendering time part. |
 | showLabels | boolean | no | Specifies if labels in front of date and time parts should be rendered. |
 | placeholder | string | no | Placeholder text for the DatePicker. |
-| initialPickerDate | Date | no | The initially highlighted date in the calendar picker
+| initialPickerDate | Date | no | The initially highlighted date in the calendar picker |
 | maxDate | Date | no | The maximum allowable date. |
 | minDate | Date | no | The minimum allowable date. |
 | minutesIncrementStep | MinutesIncrement | no | Specifies minutes' increment step for `TimeDisplayControlType.Dropdow` |
-| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false
-| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent'
+| showClearDate | boolean | no | Controls whether the clearDate iconbutton must be available when date is selected, default to false |
+| showClearDateIcon | string | no | Controls the icon used for clearDate iconbutton. Defaults to 'RemoveEvent' |
+| restrictedDates | Date[] | no | If set the Calendar will not allow selection of dates in this array. |
 
 Enum `TimeDisplayControlType`
 
@@ -112,6 +113,7 @@ Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://develope
 | textErrorMessage | string | no | Error message when text is entered in the date picker. |
 
 Type `MinutesIncrement`
+
 ```typescript
 type MinutesIncrement = 1 | 5 | 10 | 15 | 30;
 ```

docs/documentation/docs/controls/DynamicForm.md

@@ -62,6 +62,7 @@ The `DynamicForm` can be configured with the following properties:
 | fieldOverrides | {[columnInternalName: string] : {(fieldProperties: IDynamicFieldProps): React.ReactElement\<IDynamicFieldProps\>}} | no | Key value pair for fields you want to override.  Key is the internal field name, value is the function to be called for the custom element to render. |
 | respectEtag | boolean | no | Specifies if the form should respect the ETag of the item. Default - `true` |
 | validationErrorDialogProps | IValidationErrorDialogProps | no | Specifies validation error dialog properties |
+| customIcons | { [ columnInternalName: string ]: string } | no | Specifies custom icons for the form. The key of this dictionary is the column internal name, the value is the Fluent UI icon name. | 
 
 ## Validation Error Dialog Properties `IValidationErrorDialogProps`
 | Property | Type | Required | Description |

docs/documentation/docs/controls/FileTypeIcon.md

@@ -42,5 +42,11 @@ The FileTypeIcon component can be configured with the following properties:
 | path | string | no | Path to the document. If this is provided, the control will use the file extension to display the corresponding icon. |
 | size | ImageSize | no | This is a property that only needs to be used when the type is set to image. It allows you to specify the image size. small (16px), normal (20px), medium (48px) and large (96px) are possible. Use the **ImageSize** enum to get the list of available images sizes. |
 | type | IconType | yes | This property specifies is you want to use the icon font or image. Use the **IconType** enum to get the list of available icon types. |
+| onClick | React.MouseEvent<HTMLElement> | no | Event triggered when the icon is clicked. |
+| onDoubleClick | React.MouseEvent<HTMLElement> | no | Event triggered when the icon is double clicked. |
+| onMouseEnter | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor enters the icon (without event bubbling). |
+| onMouseLeave | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor leaves the icon. |
+| onMouseOver | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse cursor enters the icon (with event bubbling). |
+| onMouseUp | React.MouseEvent<HTMLElement> | no | Event triggered when the mouse button is released after clicked on the icon. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/FileTypeIcon)

docs/documentation/docs/controls/FolderPicker.md

@@ -42,6 +42,19 @@ import { FolderPicker, IFolder } from "@pnp/spfx-controls-react/lib/FolderPicker
                 canCreateFolders={true} />
 ```
 
+- To use the `FolderExplorer` control to fetch folders from different sitecollection in your code as follows:
+
+```TypeScript
+<FolderExplorer context={this.props.context}
+                rootFolder={{
+                  Name: 'Documents',
+                  ServerRelativeUrl: `/sites/TestSite2/Shared Documents`
+                }}
+                onSelect={this._onFolderSelect}
+                canCreateFolders={true} 
+                siteAbsoluteUrl="https://xxxx.sharepoint.com/sites/TestSite2"/>
+```
+
 - The `onSelect` change event returns the selected folder and can be implemented as follows:
 
 ```TypeScript