Merge for v2.0.0 release

.circleci/config.yml

@@ -1,7 +1,7 @@
 defaults: &defaults
   working_directory: ~/sp-dev-fx-controls-react
   docker:
-    - image: circleci/node:8.9.1
+    - image: circleci/node:10.22.0
 
 version: 2
 jobs:
@@ -126,25 +126,31 @@ workflows:
       - build:
           filters:
             branches:
-              ignore: /^(dev|master)/
+              ignore: /^(dev|master|v2)/
   release_next:
     jobs:
       - build:
           filters:
             branches:
-              only: dev
+              only:
+                - dev
+                - v2
       - build_next:
           requires:
             - build
           filters:
             branches:
-              only: dev
+              only:
+                - dev
+                - v2
       - publish_next:
           requires:
             - build_next
           filters:
             branches:
-              only: dev
+              only:
+                - dev
+                - v2
   release:
     jobs:
       - build:

.nvmrc

@@ -0,0 +1 @@
+10.22.0

.yo-rc.json

@@ -1,8 +1,12 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.2.0",
+    "version": "1.11.0",
     "libraryName": "sp-dev-fx-controls-react",
     "libraryId": "92b1e52c-a5fa-490a-bcf4-76080f39442c",
-    "environment": "spo"
+    "environment": "spo",
+    "isDomainIsolated": false,
+    "isCreatingSolution": true,
+    "packageManager": "npm",
+    "componentType": "webpart"
   }
-}
+}

CHANGELOG.JSON

@@ -1,5 +1,21 @@
 {
   "versions": [
+    {
+      "version": "2.0.0",
+      "changes": {
+        "new": [],
+        "enhancements": [
+          "`FilePicker`: added additional properties - `isPanelOpen` and `onCancel` [#668](https://github.com/pnp/sp-dev-fx-controls-react/pull/668)"
+        ],
+        "fixes": [
+          "`PeoplePicker`: Disabled doesn't work [#484](https://github.com/pnp/sp-dev-fx-controls-react/issues/484)",
+          "`Pagination`: control not re-rendering when `currentPage` is updated in state [#663](https://github.com/pnp/sp-dev-fx-controls-react/issues/663)"
+        ]
+      },
+      "contributions": [
+        "[Gautam Sheth](https://github.com/gautamdsheth)"
+      ]
+    },
     {
       "version": "1.20.0",
       "changes": {

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Releases
 
+## 2.0.0
+
+### Enhancements
+
+- `FilePicker`: added additional properties - `isPanelOpen` and `onCancel` [#668](https://github.com/pnp/sp-dev-fx-controls-react/pull/668)
+
+### Fixes
+
+- `PeoplePicker`: Disabled doesn't work [#484](https://github.com/pnp/sp-dev-fx-controls-react/issues/484)
+- `Pagination`: control not re-rendering when `currentPage` is updated in state [#663](https://github.com/pnp/sp-dev-fx-controls-react/issues/663)
+
+### Contributors
+
+Special thanks to our contributor: [Gautam Sheth](https://github.com/gautamdsheth).
+
 ## 1.20.0
 
 ### New control(s)

config/config.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
   "version": "2.0",
   "bundles": {
     "controls-test-web-part": {

config/copy-assets.json

@@ -1,4 +1,4 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
   "deployCdnPath": "temp/deploy"
 }

config/deploy-azure-storage.json

@@ -1,7 +1,7 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
   "workingDir": "./temp/deploy/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "sp-dev-fx-controls-react",
   "accessKey": "<!-- ACCESS KEY -->"
-}
+}

config/package-solution.json

@@ -1,10 +1,12 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "sp-dev-fx-controls-react-client-side-solution",
     "id": "92b1e52c-a5fa-490a-bcf4-76080f39442c",
     "version": "1.0.0.0",
-    "skipFeatureDeployment": true
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "includeClientSideAssets": true
   },
   "paths": {
     "zippedPackage": "solution/sp-dev-fx-controls-react.sppkg"

config/serve.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "initialPage": "https://localhost:5432/workbench",
   "https": true,

config/write-manifests.json

@@ -1,4 +1,4 @@
 {
-  "$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
   "cdnBasePath": "<!-- PATH TO CDN -->"
-}
+}

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

@@ -1,5 +1,20 @@
 # Releases
 
+## 2.0.0
+
+### Enhancements
+
+- `FilePicker`: added additional properties - `isPanelOpen` and `onCancel` [#668](https://github.com/pnp/sp-dev-fx-controls-react/pull/668)
+
+### Fixes
+
+- `PeoplePicker`: Disabled doesn't work [#484](https://github.com/pnp/sp-dev-fx-controls-react/issues/484)
+- `Pagination`: control not re-rendering when `currentPage` is updated in state [#663](https://github.com/pnp/sp-dev-fx-controls-react/issues/663)
+
+### Contributors
+
+Special thanks to our contributor: [Gautam Sheth](https://github.com/gautamdsheth).
+
 ## 1.20.0
 
 ### New control(s)

docs/documentation/docs/controls/FolderPicker.md

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

docs/documentation/docs/controls/PeoplePicker.md

@@ -59,15 +59,15 @@ The People picker control can be configured with the following properties:
 | titleText | string | no | Text to be displayed on the control | |
 | groupName | string | no | group from which users are fetched. Leave it blank if need to filter all users | _none_ |
 | personSelectionLimit | number | no | Defines the limit of people that can be selected in the control | 1 |
-| isRequired | boolean | no | Set if the control is required or not | false |
+| required | boolean | no | Set if the control is required or not | false |
 | disabled | boolean | no | Set if the control is disabled or not | false |
-| errorMessage | string | no | Specifies the error message to display if the the control is required and no items selected | |
-| showRequiredError | boolean | no | Specifies if the component should show mandatory field error message because of some changes occured in parent. Use this props (set to `true`), for example, when "Save" button on the form has been clicked | |
+| errorMessage | string | no | Static error message displayed below the picker. Use `onGetErrorMessage` to dynamically change the error message displayed (if any) based on the current value. `errorMessage` and `onGetErrorMessage` are mutually exclusive (`errorMessage` takes precedence). | |
+| onGetErrorMessage | (items: IPersonaProps[]) => string \| Promise&lt;string&gt; | no | The method is used to get the validation error message and determine whether the picker value is valid or not. Mutually exclusive with the static string `errorMessage` (it will take precedence over this).<br />When it returns string:<ul><li>If valid, it returns empty string.</li><li>If invalid, it returns the error message string to be shown below the picker.</li></ul><br />When it returns Promise&lt;string&gt;:<ul><li>The resolved value is display as error message.</li><li>The rejected, the value is thrown away.</li></ul> | |
 | errorMessageClassName | string | no | applies custom styling to the error message section | |
 | showtooltip | boolean | no | Defines if need a tooltip or not | false |
 | tooltipMessage | string | no | Specify the tooltip message to display | |
 | tooltipDirectional | DirectionalHint | no | Direction where the tooltip would be shown | |
-| selectedItems | (items: IPersonaProps[]) => void | no | Get the selected users in the control. | |
+| 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 | |

docs/documentation/docs/guides/index.md

@@ -5,3 +5,4 @@ Following is an overview of guides for this project. If you're considering contr
 - [Contributing](./contributing.md) - how you can contribute to the project
 - [Minimal Path to Awesome](./mpa.md) - setup your development environment
 - [Submitting a PR](./submitting-pr.md) - how to submit a PR
+- [Migrating from V1](./migrate-from-v1.md) - how to migrate from v1

docs/documentation/docs/guides/migrate-from-v1.md

@@ -0,0 +1,86 @@
+# Migrating from v1 to v2
+
+Most of the controls have no breaking changes when moving from v1 to v2. However, some APIs were changed to make the library more stable and controls behavior more even.
+
+Also, we've bumped up React and Fluent UI versions used in the library. It means you will need to update the `package.json` file in your SPFx projects.
+
+The below guide is an overview of what it takes to migrate from v1 to v2.  If we missed something, please let us know on the issues list so we can update the guide. Thanks!
+
+## v2 Supports SharePoint Online **only**
+
+V2 of Reusable Controls is based on SharePoint Framework 1.11. Due to this change, it does not support SharePoint on-premises. **Please, use v1 if you plan to deploy your solution on-premises.**
+
+## React and Fluent UI versions
+
+V2 of Reusable Controls uses React.js v16.8.5 and Fluent UI (Office UI Fabric React) v6.214.0.
+
+Although it is not necessary to use the same modules' versions in your project, we highly recommend to update your solution accordingly:
+
+```json
+"dependencies": {
+    // other dependencies
+    "office-ui-fabric-react": "6.214.0",
+    "react": "16.8.5",
+    "react-dom": "16.8.5"
+  },
+  "devDependencies": {
+    "@types/react": "16.8.8",
+    "@types/react-dom": "16.8.3",
+  },
+```
+
+The easiest way to upgrade the SharePoint Framework solution is to use [Office365 CLI](https://pnp.github.io/office365-cli/cmd/spfx/project/project-upgrade/#spfx-project-upgrade) `spfx project upgrade` command.
+
+## APIs Changes
+
+### PeoplePicker
+
+- `isRequired` is renamed to `required`
+  - The property has been renamed to use the common approach for mandatory field naming.
+- `errorMessage` represents a static error message to be displayed in the control. 
+  - In v1 `errorMessage` is used to provide the text that will be displayed if the field is set as `required` and no value is selected.
+  - In v2 you can use this property to display an error message for whatever reason statically.
+
+```typescript
+/**
+ * Static error message displayed below the text field. Use onGetErrorMessage to dynamically change the error message displayed (if any) based on the current value. errorMessage and onGetErrorMessage are mutually exclusive (errorMessage takes precedence).
+ */
+  errorMessage?: string;
+```
+
+- `onGetErrorMessage` to get error messages dynamically.
+  - The method is used to get the validation error message and determine whether the input value is valid. Mutually exclusive with the static string errorMessage (it will take precedence over this).
+
+```typescript
+/**
+ * The method is used to get the validation error message and determine whether the picker value is valid.
+ * Mutually exclusive with the static string errorMessage (it will take precedence over this).
+ *
+ *   When it returns string:
+ *   - If valid, it returns empty string.
+ *   - If invalid, it returns the error message string and the picker will
+ *     show an error message below the picker.
+ *
+ *   When it returns Promise<string>:
+ *   - The resolved value is display as error message.
+ *   - The rejected, the value is thrown away.
+ *
+ */
+  onGetErrorMessage?: (items: IPersonaProps[]) => string | Promise<string>;
+```
+
+- `showRequiredError` has been deleted.
+  - Use `errorMessage` or `onGetErrorMessage` to provide the error message.
+- `selectedItems` is renamed to `onChange`
+  - `onChange` better describes the purpose of the property.
+
+  ### FolderPicker
+  `FolderPicker` default picker has been removed.
+  If you used `FolderPicker` as:
+  ```typescript
+  import FolderPicker from '@pnp/spfx-controls-react/lib/controls/folderPicker/FolderPicker';
+  ```
+  You should update to 
+  ```typescript
+  import { FolderPicker } from '@pnp/spfx-controls-react/lib/FolderPicker';
+  ```

docs/documentation/docs/guides/mpa.md

@@ -4,7 +4,7 @@ The shortest way to prepare your local copy of the project for development and t
 
 ## Install prerequisites
 
-Before you start contributing to this project, you will need Node.js. This project has been tested with the 6.x and 8.x versions of Node.js and the version of NPM that comes with it. You can use [Node Version Manager](https://github.com/nvm-sh/nvm) to switch between different versions of Node.js.
+Before you start contributing to this project, you will need Node.js. This project has been tested with the 10.x version of Node.js and the version of NPM that comes with it. You can use [Node Version Manager](https://github.com/nvm-sh/nvm) to switch between different versions of Node.js.
 
 ## Get the local version of the CLI
 

gulpfile.js

@@ -4,6 +4,8 @@ const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 const fs = require('fs');
 
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
 // Update the version number in the version.ts file
 gulp.task('versionUpdater', (done) => {
   const pkgContents = require('./package.json');