@pnp/spfx-controls-react 3.16.0-beta.6145311 → 3.16.0-beta.6149226

package/CHANGELOG.json

@@ -7,6 +7,7 @@
           "`ViewPicker`: new control ViewPicker [#1439](https://github.com/pnp/sp-dev-fx-controls-react/issues/1439)"
         ],
         "enhancements": [
+          "`FieldCollectionData`: render on page instead of panel and added combobox and peoplepicker controls [#1588](https://github.com/pnp/sp-dev-fx-controls-react/pull/1588)"
         ],
         "fixes": [
           "`AccessibleAccordion`: fix typo in documentation [#1634](https://github.com/pnp/sp-dev-fx-controls-react/pull/1634)",
@@ -17,7 +18,8 @@
       "contributions": [
         "[Guido Zambarda](https://github.com/GuidoZam)",
         "[Nils Andresen](https://github.com/nils-a)",
-        "[Nishkalank Bezawada](https://github.com/NishkalankBezawada)"
+        "[Nishkalank Bezawada](https://github.com/NishkalankBezawada)",
+        "[Rico van de Ven](https://github.com/RicoNL)"
       ]
     },
     {

package/lib/common/telemetry/version.js

@@ -1,2 +1,2 @@
-export var version = "3.16.0-beta.6145311";
+export var version = "3.16.0-beta.6149226";
 //# sourceMappingURL=version.js.map

package/lib/controls/fieldCollectionData/FieldCollectionData.d.ts

@@ -15,5 +15,6 @@ export declare class FieldCollectionData extends React.Component<IFieldCollectio
      */
     private onSave;
     render(): JSX.Element;
+    private getElement;
 }
 //# sourceMappingURL=FieldCollectionData.d.ts.map

package/lib/controls/fieldCollectionData/FieldCollectionData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCollectionData.d.ts","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/FieldCollectionData.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAI9F,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,yBAAyB,EAAE,yBAAyB,CAAC;gBAChG,KAAK,EAAE,yBAAyB;IAU5C;;OAEG;IACH,OAAO,CAAC,SAAS,CAIhB;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAIjB;IAED;;OAEG;IACH,OAAO,CAAC,MAAM,CAKb;IAEM,MAAM,IAAI,GAAG,CAAC,OAAO;CAgC7B"}
+{"version":3,"file":"FieldCollectionData.d.ts","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/FieldCollectionData.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAI9F,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,yBAAyB,EAAE,yBAAyB,CAAC;gBAChG,KAAK,EAAE,yBAAyB;IAU5C;;OAEG;IACH,OAAO,CAAC,SAAS,CAIhB;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAIjB;IAED;;OAEG;IACH,OAAO,CAAC,MAAM,CAKb;IAEM,MAAM,IAAI,GAAG,CAAC,OAAO;IAO5B,OAAO,CAAC,UAAU;CAoCnB"}

package/lib/controls/fieldCollectionData/FieldCollectionData.js

@@ -68,15 +68,24 @@ var FieldCollectionData = /** @class */ (function (_super) {
         return _this;
     }
     FieldCollectionData.prototype.render = function () {
+        var _element = this.getElement();
+        return (_element);
+    };
+    FieldCollectionData.prototype.getElement = function () {
         var _a;
-        return (React.createElement("div", null,
-            React.createElement(Label, null, this.props.label),
-            React.createElement(DefaultButton, { text: this.props.manageBtnLabel, onClick: this.openPanel, disabled: this.props.fields.length === 0 || this.props.disabled }),
-            (!this.props.fields || this.props.fields.length === 0) && //<FieldErrorMessage errorMessage={strings.CollectionDataEmptyFields} />
-                React.createElement(MessageBar, { messageBarType: MessageBarType.error }, strings.CollectionDataItemMissingFields),
-            React.createElement(Panel, __assign({ isOpen: this.state.panelOpen, onDismiss: this.closePanel, type: PanelType.large, headerText: this.props.panelHeader, onOuterClick: function () { }, className: "FieldCollectionData__panel ".concat(this.props.panelClassName || "") }, (_a = this.props.panelProps) !== null && _a !== void 0 ? _a : {}),
-                this.props.panelDescription && (React.createElement("p", { className: "FieldCollectionData__panel__description" }, this.props.panelDescription)),
-                React.createElement(CollectionDataViewer, __assign({}, this.props, { fOnSave: this.onSave, fOnClose: this.closePanel })))));
+        var _element = typeof this.props.usePanel === "boolean" && this.props.usePanel === false
+            ?
+                React.createElement(CollectionDataViewer, __assign({}, this.props, { fOnSave: this.onSave, fOnClose: this.closePanel }))
+            :
+                React.createElement("div", null,
+                    React.createElement(Label, null, this.props.label),
+                    React.createElement(DefaultButton, { text: this.props.manageBtnLabel, onClick: this.openPanel, disabled: this.props.fields.length === 0 || this.props.disabled }),
+                    (!this.props.fields || this.props.fields.length === 0) && //<FieldErrorMessage errorMessage={strings.CollectionDataEmptyFields} />
+                        React.createElement(MessageBar, { messageBarType: MessageBarType.error }, strings.CollectionDataItemMissingFields),
+                    React.createElement(Panel, __assign({ isOpen: this.state.panelOpen, onDismiss: this.closePanel, type: PanelType.large, headerText: this.props.panelHeader, onOuterClick: function () { }, className: "FieldCollectionData__panel ".concat(this.props.panelClassName || "") }, (_a = this.props.panelProps) !== null && _a !== void 0 ? _a : {}),
+                        this.props.panelDescription && (React.createElement("p", { className: "FieldCollectionData__panel__description" }, this.props.panelDescription)),
+                        React.createElement(CollectionDataViewer, __assign({}, this.props, { fOnSave: this.onSave, fOnClose: this.closePanel }))));
+        return _element;
     };
     return FieldCollectionData;
 }(React.Component));

package/lib/controls/fieldCollectionData/FieldCollectionData.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCollectionData.js","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/FieldCollectionData.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,SAAS,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,KAAK,EAAE,MAAM,6CAA6C,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAEnF;IAAyC,uCAAqE;IAC5G,6BAAY,KAAgC;QAA5C,YACE,kBAAM,KAAK,CAAC,SAOb;QAED;;WAEG;QACK,eAAS,GAAG;YAClB,KAAI,CAAC,QAAQ,CAAC;gBACZ,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;QACL,CAAC,CAAA;QAED;;WAEG;QACK,gBAAU,GAAG;YACnB,KAAI,CAAC,QAAQ,CAAC;gBACZ,SAAS,EAAE,KAAK;aACjB,CAAC,CAAC;QACL,CAAC,CAAA;QAED;;WAEG;QACK,YAAM,GAAG,UAAC,KAAY;YAC5B,KAAI,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YAC5B,KAAI,CAAC,QAAQ,CAAC;gBACZ,SAAS,EAAE,KAAK;aACjB,CAAC,CAAC;QACL,CAAC,CAAA;QAjCC,KAAI,CAAC,KAAK,GAAG;YACX,SAAS,EAAE,KAAK;SACjB,CAAC;QAEF,SAAS,CAAC,KAAK,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;;IAC7C,CAAC;IA8BM,oCAAM,GAAb;;QACE,OAAO,CACL;YACE,oBAAC,KAAK,QAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAS;YAEjC,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAC/B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAI;YAGhF,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,wEAAwE;gBAClI,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,KAAK,IAAG,OAAO,CAAC,+BAA+B,CAAc;YAG1G,oBAAC,KAAK,aAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAClC,YAAY,EAAE,cAAkB,CAAC,EACjC,SAAS,EAAE,qCAA8B,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,EAAE,CAAE,IACrE,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,mCAAI,EAAE;gBAEnC,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAC7B,2BAAG,SAAS,EAAC,yCAAyC,IAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAK,CACzF;gBAGH,oBAAC,oBAAoB,eAAK,IAAI,CAAC,KAAK,IAAE,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,UAAU,IAAI,CACnF,CACJ,CACP,CAAC;IACJ,CAAC;IACH,0BAAC;AAAD,CAAC,AAvED,CAAyC,KAAK,CAAC,SAAS,GAuEvD"}
+{"version":3,"file":"FieldCollectionData.js","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/FieldCollectionData.tsx"],"names":[],"mappings":"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"}

package/lib/controls/fieldCollectionData/FieldCollectionData.module.css

@@ -1,2 +1,2 @@
-.collectionData_942d0ff1{background-color:#edebe9;padding:10px}.noCollectionData_942d0ff1{text-align:center}.panelActions_942d0ff1{margin-top:15px;text-align:right}.panelActions_942d0ff1 button{margin-right:15px}.panelActions_942d0ff1 button:last-child{margin-right:0}.required_942d0ff1{color:#d83b01;font-size:8px;vertical-align:super}.addBtn_942d0ff1{color:#0078d4}.inputField_942d0ff1{color:inherit}.numberField_942d0ff1{box-sizing:border-box;box-shadow:none;margin:0;padding:0;border:1px solid #a19f9d;background:#fff;height:32px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:stretch;align-items:stretch;position:relative}.numberField_942d0ff1:hover{border-color:#201f1e}.numberField_942d0ff1 input{box-sizing:border-box;box-shadow:none;margin:0;font-size:14px;border-radius:0;border:none;background:0 0;color:#323130;padding:0 12px 0 12px;width:100%;text-overflow:ellipsis;outline:0}.numberField_942d0ff1.invalidField_942d0ff1{border-color:#a80000}.iconField_942d0ff1{position:relative}.iconField_942d0ff1 i{font-size:20px;position:absolute;top:0;right:10px;vertical-align:top}.collectionDataField_942d0ff1>span{display:none}.collectionDataField_942d0ff1 div[class^=invalid_]{border-color:#a80000!important}.table_942d0ff1{display:table;width:100%;border-collapse:collapse}.tableRow_942d0ff1{display:table-row;line-height:30px}.tableRow_942d0ff1:hover{background-color:#f3f2f1;cursor:pointer;outline:1px solid transparent}.tableRow_942d0ff1.tableFooter_942d0ff1{background-color:#edebe9;border-top:1px solid #a19f9d}.tableCell_942d0ff1{display:table-cell;padding:0 10px;vertical-align:middle}.tableCell_942d0ff1>div{margin-bottom:8px;margin-top:8px}.tableCell_942d0ff1>div.ms-TextField{margin-bottom:8px;margin-top:8px}.errorCallout_942d0ff1{padding:0 15px;min-width:200px}.errorCalloutLink_942d0ff1:not([disabled]){color:#a80000}.errorMsgs_942d0ff1{font-size:14px;font-weight:400}.errorMsgs_942d0ff1 p{font-size:17px;font-weight:300}.errorMsgs_942d0ff1 ul{padding-left:15px}.errorMsgs_942d0ff1 li{color:#a80000}.tableHead_942d0ff1{font-weight:300;font-size:12px;color:#605e5c}.tableHead_942d0ff1 .tableCell_942d0ff1{font-weight:400;text-align:left;border-bottom:1px solid #a19f9d}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9zcC1kZXYtZngtY29udHJvbHMtcmVhY3Qvc3AtZGV2LWZ4LWNvbnRyb2xzLXJlYWN0L3NyYy9jb250cm9scy9maWVsZENvbGxlY3Rpb25EYXRhL0ZpZWxkQ29sbGVjdGlvbkRhdGEubW9kdWxlLnNjc3MiLCJmaWxlOi8vL2hvbWUvcnVubmVyL3dvcmsvc3AtZGV2LWZ4LWNvbnRyb2xzLXJlYWN0L3NwLWRldi1meC1jb250cm9scy1yZWFjdC9ub2RlX21vZHVsZXMvb2ZmaWNlLXVpLWZhYnJpYy1yZWFjdC9kaXN0L3Nhc3MvbWl4aW5zL19Gb250Lk1peGlucy5NREwyLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEseUJBQ0UsaUJBQUEsUUFDQSxRQUFBLEtBR0YsMkJBQ0UsV0FBQSxPQUdGLHVCQUNFLFdBQUEsS0FDQSxXQUFBLE1BRUEsOEJBQ0UsYUFBQSxLQUVBLHlDQUNFLGFBQUEsRUFLTixtQkFDRSxNQUFBLFFBQ0EsVUFBQSxJQUNBLGVBQUEsTUFHRixpQkFDRSxNQUFBLFFBR0YscUJBQ0UsTUFBQSxRQUdGLHNCQUNFLFdBQUEsV0FDQSxXQUFBLEtBQ0EsT0FBQSxFQUNBLFFBQUEsRUFDQSxPQUFBLElBQUEsTUFBQSxRQUNBLFdBQUEsS0FDQSxPQUFBLEtBRUEsUUFBQSxZQUNBLFFBQUEsS0FDQSxtQkFBQSxJQUFBLGVBQUEsSUFDQSxlQUFBLFFBQUEsWUFBQSxRQUNBLFNBQUEsU0FFQSw0QkFDRSxhQUFBLFFBR0YsNEJBQ0UsV0FBQSxXQUNBLFdBQUEsS0FDQSxPQUFBLEVBQ0EsVUFBQSxLQUNBLGNBQUEsRUFDQSxPQUFBLEtBQ0EsV0FBQSxJQUNBLE1BQUEsUUFDQSxRQUFBLEVBQUEsS0FBQSxFQUFBLEtBQ0EsTUFBQSxLQUNBLGNBQUEsU0FDQSxRQUFBLEVBR0YsNENBQ0UsYUFBQSxRQUlKLG9CQUNFLFNBQUEsU0FFQSxzQkFDRSxVQUFBLEtBQ0EsU0FBQSxTQUNBLElBQUEsRUFDQSxNQUFBLEtBQ0EsZUFBQSxJQUtGLG1DQUNFLFFBQUEsS0FHRixtREFDRSxhQUFBLGtCQU1KLGdCQUNFLFFBQUEsTUFDQSxNQUFBLEtBQ0EsZ0JBQUEsU0FHRixtQkFDRSxRQUFBLFVBQ0EsWUFBQSxLQUVBLHlCQUNFLGlCQUFBLFFBQ0EsT0FBQSxRQUNBLFFBQUEsSUFBQSxNQUFBLFlBR0Ysd0NBQ0UsaUJBQUEsUUFDQSxXQUFBLElBQUEsTUFBQSxRQUlKLG9CQUNFLFFBQUEsV0FDQSxRQUFBLEVBQUEsS0FDQSxlQUFBLE9BRUEsd0JBQ0UsY0FBQSxJQUNBLFdBQUEsSUFJQSxxQ0FDRSxjQUFBLElBQ0EsV0FBQSxJQUtOLHVCQUNFLFFBQUEsRUFBQSxLQUNBLFVBQUEsTUFHRiwyQ0FDRSxNQUFBLFFBR0Ysb0JDNUdFLFVBQUEsS0FDQSxZQUFBLElEOEdBLHNCQzNIQSxVQUFBLEtBQ0EsWUFBQSxJRDhIQSx1QkFDRSxhQUFBLEtBR0YsdUJBQ0UsTUFBQSxRQUlKLG9CQ3RGRSxZQUFBLElBcUNBLFVBQUEsS0RvREEsTUFBQSxRQUlBLHdDQUNFLFlBQUEsSUFDQSxXQUFBLEtBQ0EsY0FBQSxJQUFBLE1BQUEifQ== */
+.collectionData_7aef373b{background-color:#edebe9;padding:10px}.noCollectionData_7aef373b{text-align:center}.panelActions_7aef373b{margin-top:15px;text-align:right}.panelActions_7aef373b button{margin-right:15px}.panelActions_7aef373b button:last-child{margin-right:0}.required_7aef373b{color:#d83b01;font-size:8px;vertical-align:super}.addBtn_7aef373b{color:#0078d4}.inputField_7aef373b{color:inherit}.numberField_7aef373b{box-sizing:border-box;box-shadow:none;margin:0;padding:0;border:1px solid #a19f9d;background:#fff;height:32px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:stretch;align-items:stretch;position:relative}.numberField_7aef373b:hover{border-color:#201f1e}.numberField_7aef373b input{box-sizing:border-box;box-shadow:none;margin:0;font-size:14px;border-radius:0;border:none;background:0 0;color:#323130;padding:0 12px 0 12px;width:100%;text-overflow:ellipsis;outline:0}.numberField_7aef373b.invalidField_7aef373b{border-color:#a80000}.iconField_7aef373b{position:relative}.iconField_7aef373b i{font-size:20px;position:absolute;top:0;right:10px;vertical-align:top}.collectionDataField_7aef373b>span{display:none}.collectionDataField_7aef373b div[class^=invalid_]{border-color:#a80000!important}.table_7aef373b{display:table;width:100%;border-collapse:collapse}.tableRow_7aef373b{display:table-row;line-height:30px}.tableRow_7aef373b:hover{background-color:#f3f2f1;cursor:pointer;outline:1px solid transparent}.tableRow_7aef373b.tableFooter_7aef373b{background-color:#edebe9;border-top:1px solid #a19f9d}.tableCell_7aef373b{display:table-cell;padding:0 10px;vertical-align:middle}.tableCell_7aef373b>div{margin-bottom:8px;margin-top:8px}.tableCell_7aef373b>div.ms-TextField{margin-bottom:8px;margin-top:8px}.errorCallout_7aef373b{padding:0 15px;min-width:200px}.errorCalloutLink_7aef373b:not([disabled]){color:#a80000}.errorMsgs_7aef373b{font-size:14px;font-weight:400}.errorMsgs_7aef373b p{font-size:17px;font-weight:300}.errorMsgs_7aef373b ul{padding-left:15px}.errorMsgs_7aef373b li{color:#a80000}.tableHead_7aef373b{font-weight:300;font-size:12px;color:#605e5c}.tableHead_7aef373b .tableCell_7aef373b{font-weight:400;text-align:left;border-bottom:1px solid #a19f9d}.peoplePicker_7aef373b{background-color:#fff}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbGU6Ly8vaG9tZS9ydW5uZXIvd29yay9zcC1kZXYtZngtY29udHJvbHMtcmVhY3Qvc3AtZGV2LWZ4LWNvbnRyb2xzLXJlYWN0L3NyYy9jb250cm9scy9maWVsZENvbGxlY3Rpb25EYXRhL0ZpZWxkQ29sbGVjdGlvbkRhdGEubW9kdWxlLnNjc3MiLCJmaWxlOi8vL2hvbWUvcnVubmVyL3dvcmsvc3AtZGV2LWZ4LWNvbnRyb2xzLXJlYWN0L3NwLWRldi1meC1jb250cm9scy1yZWFjdC9ub2RlX21vZHVsZXMvb2ZmaWNlLXVpLWZhYnJpYy1yZWFjdC9kaXN0L3Nhc3MvbWl4aW5zL19Gb250Lk1peGlucy5NREwyLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUEseUJBQ0UsaUJBQUEsUUFDQSxRQUFBLEtBR0YsMkJBQ0UsV0FBQSxPQUdGLHVCQUNFLFdBQUEsS0FDQSxXQUFBLE1BRUEsOEJBQ0UsYUFBQSxLQUVBLHlDQUNFLGFBQUEsRUFLTixtQkFDRSxNQUFBLFFBQ0EsVUFBQSxJQUNBLGVBQUEsTUFHRixpQkFDRSxNQUFBLFFBR0YscUJBQ0UsTUFBQSxRQUdGLHNCQUNFLFdBQUEsV0FDQSxXQUFBLEtBQ0EsT0FBQSxFQUNBLFFBQUEsRUFDQSxPQUFBLElBQUEsTUFBQSxRQUNBLFdBQUEsS0FDQSxPQUFBLEtBRUEsUUFBQSxZQUNBLFFBQUEsS0FDQSxtQkFBQSxJQUFBLGVBQUEsSUFDQSxlQUFBLFFBQUEsWUFBQSxRQUNBLFNBQUEsU0FFQSw0QkFDRSxhQUFBLFFBR0YsNEJBQ0UsV0FBQSxXQUNBLFdBQUEsS0FDQSxPQUFBLEVBQ0EsVUFBQSxLQUNBLGNBQUEsRUFDQSxPQUFBLEtBQ0EsV0FBQSxJQUNBLE1BQUEsUUFDQSxRQUFBLEVBQUEsS0FBQSxFQUFBLEtBQ0EsTUFBQSxLQUNBLGNBQUEsU0FDQSxRQUFBLEVBR0YsNENBQ0UsYUFBQSxRQUlKLG9CQUNFLFNBQUEsU0FFQSxzQkFDRSxVQUFBLEtBQ0EsU0FBQSxTQUNBLElBQUEsRUFDQSxNQUFBLEtBQ0EsZUFBQSxJQUtGLG1DQUNFLFFBQUEsS0FHRixtREFDRSxhQUFBLGtCQU1KLGdCQUNFLFFBQUEsTUFDQSxNQUFBLEtBQ0EsZ0JBQUEsU0FHRixtQkFDRSxRQUFBLFVBQ0EsWUFBQSxLQUVBLHlCQUNFLGlCQUFBLFFBQ0EsT0FBQSxRQUNBLFFBQUEsSUFBQSxNQUFBLFlBR0Ysd0NBQ0UsaUJBQUEsUUFDQSxXQUFBLElBQUEsTUFBQSxRQUlKLG9CQUNFLFFBQUEsV0FDQSxRQUFBLEVBQUEsS0FDQSxlQUFBLE9BRUEsd0JBQ0UsY0FBQSxJQUNBLFdBQUEsSUFJQSxxQ0FDRSxjQUFBLElBQ0EsV0FBQSxJQUtOLHVCQUNFLFFBQUEsRUFBQSxLQUNBLFVBQUEsTUFHRiwyQ0FDRSxNQUFBLFFBR0Ysb0JDNUdFLFVBQUEsS0FDQSxZQUFBLElEOEdBLHNCQzNIQSxVQUFBLEtBQ0EsWUFBQSxJRDhIQSx1QkFDRSxhQUFBLEtBR0YsdUJBQ0UsTUFBQSxRQUlKLG9CQ3RGRSxZQUFBLElBcUNBLFVBQUEsS0RvREEsTUFBQSxRQUlBLHdDQUNFLFlBQUEsSUFDQSxXQUFBLEtBQ0EsY0FBQSxJQUFBLE1BQUEsUUFJSix1QkFDRSxpQkFBQSJ9 */

package/lib/controls/fieldCollectionData/FieldCollectionData.module.scss.d.ts

@@ -17,6 +17,7 @@ declare const styles: {
     errorCalloutLink: string;
     errorMsgs: string;
     tableHead: string;
+    peoplePicker: string;
 };
 export default styles;
 //# sourceMappingURL=FieldCollectionData.module.scss.d.ts.map

package/lib/controls/fieldCollectionData/FieldCollectionData.module.scss.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCollectionData.module.scss.d.ts","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/FieldCollectionData.module.scss.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAmBX,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"FieldCollectionData.module.scss.d.ts","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/FieldCollectionData.module.scss.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAoBX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/controls/fieldCollectionData/FieldCollectionData.module.scss.js

@@ -1,24 +1,25 @@
 /* tslint:disable */
 require("./FieldCollectionData.module.css");
 var styles = {
-    collectionData: 'collectionData_942d0ff1',
-    noCollectionData: 'noCollectionData_942d0ff1',
-    panelActions: 'panelActions_942d0ff1',
-    required: 'required_942d0ff1',
-    addBtn: 'addBtn_942d0ff1',
-    inputField: 'inputField_942d0ff1',
-    numberField: 'numberField_942d0ff1',
-    invalidField: 'invalidField_942d0ff1',
-    iconField: 'iconField_942d0ff1',
-    collectionDataField: 'collectionDataField_942d0ff1',
-    table: 'table_942d0ff1',
-    tableRow: 'tableRow_942d0ff1',
-    tableFooter: 'tableFooter_942d0ff1',
-    tableCell: 'tableCell_942d0ff1',
-    errorCallout: 'errorCallout_942d0ff1',
-    errorCalloutLink: 'errorCalloutLink_942d0ff1',
-    errorMsgs: 'errorMsgs_942d0ff1',
-    tableHead: 'tableHead_942d0ff1'
+    collectionData: 'collectionData_7aef373b',
+    noCollectionData: 'noCollectionData_7aef373b',
+    panelActions: 'panelActions_7aef373b',
+    required: 'required_7aef373b',
+    addBtn: 'addBtn_7aef373b',
+    inputField: 'inputField_7aef373b',
+    numberField: 'numberField_7aef373b',
+    invalidField: 'invalidField_7aef373b',
+    iconField: 'iconField_7aef373b',
+    collectionDataField: 'collectionDataField_7aef373b',
+    table: 'table_7aef373b',
+    tableRow: 'tableRow_7aef373b',
+    tableFooter: 'tableFooter_7aef373b',
+    tableCell: 'tableCell_7aef373b',
+    errorCallout: 'errorCallout_7aef373b',
+    errorCalloutLink: 'errorCalloutLink_7aef373b',
+    errorMsgs: 'errorMsgs_7aef373b',
+    tableHead: 'tableHead_7aef373b',
+    peoplePicker: 'peoplePicker_7aef373b'
 };
 export default styles;
 /* tslint:enable */ 

package/lib/controls/fieldCollectionData/FieldCollectionData.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldCollectionData.module.scss.js","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/FieldCollectionData.module.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAC5C,IAAM,MAAM,GAAG;IACb,cAAc,EAAE,yBAAyB;IACzC,gBAAgB,EAAE,2BAA2B;IAC7C,YAAY,EAAE,uBAAuB;IACrC,QAAQ,EAAE,mBAAmB;IAC7B,MAAM,EAAE,iBAAiB;IACzB,UAAU,EAAE,qBAAqB;IACjC,WAAW,EAAE,sBAAsB;IACnC,YAAY,EAAE,uBAAuB;IACrC,SAAS,EAAE,oBAAoB;IAC/B,mBAAmB,EAAE,8BAA8B;IACnD,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE,mBAAmB;IAC7B,WAAW,EAAE,sBAAsB;IACnC,SAAS,EAAE,oBAAoB;IAC/B,YAAY,EAAE,uBAAuB;IACrC,gBAAgB,EAAE,2BAA2B;IAC7C,SAAS,EAAE,oBAAoB;IAC/B,SAAS,EAAE,oBAAoB;CAChC,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,mBAAmB"}
+{"version":3,"file":"FieldCollectionData.module.scss.js","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/FieldCollectionData.module.scss.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAC5C,IAAM,MAAM,GAAG;IACb,cAAc,EAAE,yBAAyB;IACzC,gBAAgB,EAAE,2BAA2B;IAC7C,YAAY,EAAE,uBAAuB;IACrC,QAAQ,EAAE,mBAAmB;IAC7B,MAAM,EAAE,iBAAiB;IACzB,UAAU,EAAE,qBAAqB;IACjC,WAAW,EAAE,sBAAsB;IACnC,YAAY,EAAE,uBAAuB;IACrC,SAAS,EAAE,oBAAoB;IAC/B,mBAAmB,EAAE,8BAA8B;IACnD,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE,mBAAmB;IAC7B,WAAW,EAAE,sBAAsB;IACnC,SAAS,EAAE,oBAAoB;IAC/B,YAAY,EAAE,uBAAuB;IACrC,gBAAgB,EAAE,2BAA2B;IAC7C,SAAS,EAAE,oBAAoB;IAC/B,SAAS,EAAE,oBAAoB;IAC/B,YAAY,EAAE,uBAAuB;CACtC,CAAC;AAEF,eAAe,MAAM,CAAC;AACtB,mBAAmB"}

package/lib/controls/fieldCollectionData/ICustomCollectionField.d.ts

@@ -2,6 +2,7 @@
 import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { IRenderFunction } from '@uifabric/utilities/lib/IRenderFunction';
 import { ISelectableOption } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
+import { IComboBoxOption } from 'office-ui-fabric-react';
 export interface ICustomCollectionField {
     /**
      * ID of the field.
@@ -24,9 +25,17 @@ export interface ICustomCollectionField {
      */
     required?: boolean;
     /**
-     * Dropdown options. Only nescessary when dropdown type is used.
+     * Dropdown / combobox options. Only nescessary when dropdown or combobox type is used.
      */
-    options?: IDropdownOption[];
+    options?: IDropdownOption[] | IComboBoxOption[];
+    /**
+     * Whether multiple options can be selcted. Only when combobox or peoplepicker is used. Defaults to false (combobox) and true (peoplepicker)
+     */
+    multiSelect?: boolean;
+    /**
+     * Whether own options can be added. Only when combobox is used. Defaults to false
+     */
+    allowFreeform?: boolean;
     /**
      * Dropdown custom options render method.
      */
@@ -35,6 +44,18 @@ export interface ICustomCollectionField {
      * Input placeholder text.
      */
     placeholder?: string;
+    /**
+     * Minimum users to be selected. Only when people picker is used.
+     */
+    minimumUsers?: number;
+    /**
+   * The message to be displayed when minimum users is not met. Only when people picker is used. If omitted, the default value is displayed
+   */
+    minimumUsersMessage?: string;
+    /**
+     * Maximum users to be selected. Only when people picker is used.
+     */
+    maximumUsers?: number;
     /**
      * Default value for the field
      */
@@ -61,8 +82,10 @@ export declare enum CustomCollectionFieldType {
     number = 2,
     boolean = 3,
     dropdown = 4,
-    fabricIcon = 5,
-    url = 6,
-    custom = 7
+    combobox = 5,
+    peoplepicker = 6,
+    fabricIcon = 7,
+    url = 8,
+    custom = 9
 }
 //# sourceMappingURL=ICustomCollectionField.d.ts.map

package/lib/controls/fieldCollectionData/ICustomCollectionField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ICustomCollectionField.d.ts","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/ICustomCollectionField.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,8EAA8E,CAAC;AAEjH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,yBAAyB,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAE9F;;OAEG;IACH,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,sBAAsB,EAE7B,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAC/C,IAAI,EAAE,GAAG,EAET,WAAW,EAAE,MAAM,EACnB,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,KACrE,GAAG,CAAC,OAAO,CAAC;CAClB;AAED,oBAAY,yBAAyB;IACnC,MAAM,IAAI;IACV,MAAM,IAAA;IACN,OAAO,IAAA;IACP,QAAQ,IAAA;IACR,UAAU,IAAA;IACV,GAAG,IAAA;IACH,MAAM,IAAA;CACP"}
+{"version":3,"file":"ICustomCollectionField.d.ts","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/ICustomCollectionField.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,8EAA8E,CAAC;AACjH,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,yBAAyB,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,GAAG,eAAe,EAAE,CAAC;IAChD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACpB;;KAEC;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;;;;OAMG;IACF,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAE/F;;OAEG;IACH,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,sBAAsB,EAE7B,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAC/C,IAAI,EAAE,GAAG,EAET,WAAW,EAAE,MAAM,EACnB,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,KACrE,GAAG,CAAC,OAAO,CAAC;CAClB;AAED,oBAAY,yBAAyB;IACnC,MAAM,IAAI;IACV,MAAM,IAAA;IACN,OAAO,IAAA;IACP,QAAQ,IAAA;IACR,QAAQ,IAAA;IACR,YAAY,IAAA;IACZ,UAAU,IAAA;IACV,GAAG,IAAA;IACH,MAAM,IAAA;CACP"}

package/lib/controls/fieldCollectionData/ICustomCollectionField.js

@@ -4,8 +4,10 @@ export var CustomCollectionFieldType;
     CustomCollectionFieldType[CustomCollectionFieldType["number"] = 2] = "number";
     CustomCollectionFieldType[CustomCollectionFieldType["boolean"] = 3] = "boolean";
     CustomCollectionFieldType[CustomCollectionFieldType["dropdown"] = 4] = "dropdown";
-    CustomCollectionFieldType[CustomCollectionFieldType["fabricIcon"] = 5] = "fabricIcon";
-    CustomCollectionFieldType[CustomCollectionFieldType["url"] = 6] = "url";
-    CustomCollectionFieldType[CustomCollectionFieldType["custom"] = 7] = "custom";
+    CustomCollectionFieldType[CustomCollectionFieldType["combobox"] = 5] = "combobox";
+    CustomCollectionFieldType[CustomCollectionFieldType["peoplepicker"] = 6] = "peoplepicker";
+    CustomCollectionFieldType[CustomCollectionFieldType["fabricIcon"] = 7] = "fabricIcon";
+    CustomCollectionFieldType[CustomCollectionFieldType["url"] = 8] = "url";
+    CustomCollectionFieldType[CustomCollectionFieldType["custom"] = 9] = "custom";
 })(CustomCollectionFieldType || (CustomCollectionFieldType = {}));
 //# sourceMappingURL=ICustomCollectionField.js.map

package/lib/controls/fieldCollectionData/ICustomCollectionField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ICustomCollectionField.js","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/ICustomCollectionField.ts"],"names":[],"mappings":"AAqEA,MAAM,CAAN,IAAY,yBAQX;AARD,WAAY,yBAAyB;IACnC,6EAAU,CAAA;IACV,6EAAM,CAAA;IACN,+EAAO,CAAA;IACP,iFAAQ,CAAA;IACR,qFAAU,CAAA;IACV,uEAAG,CAAA;IACH,6EAAM,CAAA;AACR,CAAC,EARW,yBAAyB,KAAzB,yBAAyB,QAQpC"}
+{"version":3,"file":"ICustomCollectionField.js","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/ICustomCollectionField.ts"],"names":[],"mappings":"AA0FA,MAAM,CAAN,IAAY,yBAUX;AAVD,WAAY,yBAAyB;IACnC,6EAAU,CAAA;IACV,6EAAM,CAAA;IACN,+EAAO,CAAA;IACP,iFAAQ,CAAA;IACR,iFAAQ,CAAA;IACR,yFAAY,CAAA;IACZ,qFAAU,CAAA;IACV,uEAAG,CAAA;IACH,6EAAM,CAAA;AACR,CAAC,EAVW,yBAAyB,KAAzB,yBAAyB,QAUpC"}

package/lib/controls/fieldCollectionData/IFieldCollectionData.d.ts

@@ -1,3 +1,4 @@
+import { BaseComponentContext } from "@microsoft/sp-component-base";
 import { ICustomCollectionField } from "./ICustomCollectionField";
 import { IPanelProps } from "office-ui-fabric-react";
 export interface IFieldCollectionDataProps {
@@ -78,6 +79,18 @@ export interface IFieldCollectionDataProps {
      */
     executeFiltering?: (searchFilter: string, item: any) => boolean;
     onChanged: (value: any[]) => void;
+    /**
+     * Used for CustomCollectionFieldType peoplepicker
+     */
+    context?: BaseComponentContext;
+    /**
+     * Show the collectionDataViewer inside the panel, defaults to true
+     */
+    usePanel?: boolean;
+    /**
+     * The message when no data is added
+     */
+    noDataMessage?: string;
 }
 export interface IFieldCollectionDataState {
     panelOpen: boolean;

package/lib/controls/fieldCollectionData/IFieldCollectionData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IFieldCollectionData.d.ts","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/IFieldCollectionData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,EAAE,sBAAsB,EAAE,CAAC;IACjC;;OAEG;IACH,KAAK,EAAE,GAAG,EAAE,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAEhE,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"IFieldCollectionData.d.ts","sourceRoot":"","sources":["../../../src/controls/fieldCollectionData/IFieldCollectionData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,EAAE,sBAAsB,EAAE,CAAC;IACjC;;OAEG;IACH,KAAK,EAAE,GAAG,EAAE,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;IAEhE,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CAExB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,OAAO,CAAC;CACpB"}

package/lib/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.d.ts

@@ -16,6 +16,8 @@ export declare class CollectionDataItem extends React.Component<ICollectionDataI
      * Update the item value on the field change
      */
     private onValueChanged;
+    private onValueChangedComboBoxSingle;
+    private onValueChangedComboBoxMulti;
     /**
      * Perform all required field checks at once
      */
@@ -68,6 +70,8 @@ export declare class CollectionDataItem extends React.Component<ICollectionDataI
      * @param item
      */
     private urlFieldValidation;
+    private peoplepickerValidation;
+    private comboboxValidation;
     /**
      * Error callout message handler
      *

package/lib/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionDataItem.d.ts","sourceRoot":"","sources":["../../../../src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAetE,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,wBAAwB,EAAE,wBAAwB,CAAC;IACzG,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,cAAc,CAAc;gBAExB,KAAK,EAAE,wBAAwB;IAa3C;;;;OAIG;IACI,kBAAkB,CAAC,SAAS,EAAE,wBAAwB,GAAG,IAAI;IAWpE;;OAEG;IACH,OAAO,CAAC,cAAc,CAWrB;IAED;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoBxB;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAYnC;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IACH,OAAO,CAAC,UAAU;IAIlB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAY9B;;OAEG;IACH,OAAO,CAAC,MAAM,CAeb;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAejB;IAED;;OAEG;IACH,OAAO,CAAC,SAAS,CAIhB;IAED;;;;;OAKG;IACH,OAAO,CAAC,eAAe,CAetB;IAED;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAO9B;IAED;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB,CAuBzB;IAED;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IA4D3B;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAIzB;IAED,OAAO,CAAC,gBAAgB,CAIvB;IAED;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IAuDnB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAYzB;;MAEE;IACF,OAAO,CAAC,iBAAiB;IAYzB;;OAEG;IACI,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,wBAAwB,CAAC;CAkF9D"}
+{"version":3,"file":"CollectionDataItem.d.ts","sourceRoot":"","sources":["../../../../src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAkBtE,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,wBAAwB,EAAE,wBAAwB,CAAC;IACzG,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,cAAc,CAAc;gBAExB,KAAK,EAAE,wBAAwB;IAa3C;;;;OAIG;IACI,kBAAkB,CAAC,SAAS,EAAE,wBAAwB,GAAG,IAAI;IAWpE;;OAEG;IACH,OAAO,CAAC,cAAc,CAYrB;IAED,OAAO,CAAC,4BAA4B,CA0BnC;IAED,OAAO,CAAC,2BAA2B,CAgDlC;IAED;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAoBxB;;OAEG;IACH,OAAO,CAAC,2BAA2B;IAcnC;;;OAGG;IACH,OAAO,CAAC,0BAA0B;IAUlC;;OAEG;IACH,OAAO,CAAC,UAAU;IAIlB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAY9B;;OAEG;IACH,OAAO,CAAC,MAAM,CAgBb;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAejB;IAED;;OAEG;IACH,OAAO,CAAC,SAAS,CAIhB;IAED;;;;;OAKG;IACH,OAAO,CAAC,eAAe,CAetB;IAED;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAO9B;IAED;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB,CAuBzB;IAED,OAAO,CAAC,sBAAsB,CAqB7B;IAED,OAAO,CAAC,kBAAkB,CAWzB;IAED;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IA4D3B;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAIzB;IAED,OAAO,CAAC,gBAAgB,CAIvB;IAED;;;;;OAKG;IACH,OAAO,CAAC,WAAW;IA4HnB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAYzB;;MAEE;IACF,OAAO,CAAC,iBAAiB;IAazB;;OAEG;IACI,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,wBAAwB,CAAC;CAkF9D"}

package/lib/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.js

@@ -69,6 +69,8 @@ import { Checkbox } from 'office-ui-fabric-react/lib/components/Checkbox';
 import * as strings from 'ControlStrings';
 import { CustomCollectionFieldType } from '../ICustomCollectionField';
 import { Dropdown } from 'office-ui-fabric-react/lib/components/Dropdown';
+import { ComboBox } from 'office-ui-fabric-react/lib/components/ComboBox';
+import { PeoplePicker, PrincipalType } from "../../peoplepicker";
 import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/components/Callout';
 import { CollectionIconField } from '../collectionIconField';
 import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
@@ -93,6 +95,71 @@ var CollectionDataItem = /** @class */ (function (_super) {
                 return { crntItem: crntItem };
             });
         };
+        _this.onValueChangedComboBoxSingle = function (fieldId, option, value) {
+            var _selectedOption = null;
+            if (typeof option === "undefined" && typeof value !== "undefined" && value.length === 0) {
+                _selectedOption = null;
+            }
+            else if (typeof option === "undefined" && value.length > 0) {
+                _selectedOption = {
+                    key: value,
+                    text: value
+                };
+            }
+            else {
+                _selectedOption = option;
+            }
+            _this.setState(function (prevState) {
+                var crntItem = prevState.crntItem;
+                // Update the changed field
+                crntItem[fieldId] = _selectedOption;
+                _this.doAllFieldChecks();
+                // Store this in the current state
+                return { crntItem: crntItem };
+            });
+        };
+        _this.onValueChangedComboBoxMulti = function (fieldId, option, value) {
+            var _selectedOption = null;
+            var _selected = [];
+            _this.setState(function (prevState) {
+                var crntItem = prevState.crntItem;
+                _selected = crntItem[fieldId];
+                if (typeof option === "undefined") {
+                    // freeform
+                    _selectedOption = {
+                        key: value,
+                        text: value,
+                        selected: true
+                    };
+                }
+                else {
+                    // selected option
+                    _selectedOption = {
+                        key: option.key,
+                        text: option.text,
+                        selected: option.selected
+                    };
+                }
+                if (_selected === null) {
+                    _selected = [];
+                }
+                if (_selectedOption.selected === true) {
+                    //add to selection
+                    _selected.push(_selectedOption);
+                }
+                else {
+                    //remove from selection
+                    _selected = _selected.filter(function (x) { return x.key !== _selectedOption.key; });
+                }
+                // Update the changed field
+                if (_selected.length === 0) {
+                    _selected = null;
+                }
+                crntItem[fieldId] = _selected;
+                _this.doAllFieldChecks();
+                return { crntItem: crntItem };
+            });
+        };
         /**
          * Add the current row to the collection
          */
@@ -215,6 +282,46 @@ var CollectionDataItem = /** @class */ (function (_super) {
                 }
             });
         }); };
+        _this.peoplepickerValidation = function (field, value, item) { return __awaiter(_this, void 0, void 0, function () {
+            var isValid, validation;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        isValid = true;
+                        validation = "";
+                        if (!field.onGetErrorMessage) return [3 /*break*/, 2];
+                        return [4 /*yield*/, field.onGetErrorMessage(value, this.props.index, item)];
+                    case 1:
+                        // Using the custom validation
+                        validation = _a.sent();
+                        isValid = validation === "";
+                        return [3 /*break*/, 3];
+                    case 2:
+                        if (typeof field.minimumUsers === "number" && value.length < field.minimumUsers) {
+                            validation = typeof field.minimumUsersMessage === "string" ? field.minimumUsersMessage : strings.CollectionDataMinimumUsersDefaultMessage.replace("{0}", field.minimumUsers.toString());
+                        }
+                        _a.label = 3;
+                    case 3:
+                        // Store the field validation
+                        this.validation[field.id] = isValid;
+                        // Add message for the error callout
+                        this.errorCalloutHandler(field.id, validation);
+                        this.doAllFieldChecks();
+                        // Return empty the error message if needed
+                        return [2 /*return*/, ""];
+                }
+            });
+        }); };
+        _this.comboboxValidation = function (field, selected) {
+            var isValid = true;
+            var validation = "";
+            if (field.required && (selected === null || selected.length === 0)) {
+                isValid = false;
+            }
+            // Store the field validation
+            _this.validation[field.id] = isValid;
+            _this.errorCalloutHandler(field.id, validation);
+        };
         /**
          * Toggle the error callout
          */
@@ -394,6 +501,10 @@ var CollectionDataItem = /** @class */ (function (_super) {
     CollectionDataItem.prototype.renderField = function (field, item) {
         var _this = this;
         var disableFieldOnEdit = field.disableEdit && !!this.props.fUpdateItem;
+        var _selectedComboBoxKeys = [];
+        var _selectedComboBoxKey = null;
+        var _comboBoxOptions = null;
+        var _selectedUsers = null;
         switch (field.type) {
             case CustomCollectionFieldType.boolean:
                 return React.createElement(Checkbox, { checked: item[field.id] ? item[field.id] : false, onChange: function (ev, value) { return _this.onValueChanged(field.id, value); }, disabled: disableFieldOnEdit, className: "PropertyFieldCollectionData__panel__boolean-field" });
@@ -412,6 +523,52 @@ var CollectionDataItem = /** @class */ (function (_super) {
                     return field.onCustomRender(field, item[field.id], this.onValueChanged, item, item.uniqueId, this.onCustomFieldValidation);
                 }
                 return null;
+            case CustomCollectionFieldType.combobox:
+                _comboBoxOptions = field.options;
+                if (field.multiSelect) {
+                    // multivalue
+                    if (item[field.id] !== null) {
+                        var _loop_1 = function (i) {
+                            _selectedComboBoxKeys.push(item[field.id][i].key);
+                            // if selected option is not in list (anymore), add it to choices
+                            if (typeof _comboBoxOptions.find(function (value) { return value.key === item[field.id][i].key; }) === "undefined") {
+                                _comboBoxOptions.push(item[field.id][i]);
+                            }
+                        };
+                        for (var i = 0; i < item[field.id].length; i++) {
+                            _loop_1(i);
+                        }
+                    }
+                }
+                else {
+                    // single value
+                    if (item[field.id] !== null) {
+                        _selectedComboBoxKey = item[field.id].key;
+                        if (typeof _comboBoxOptions.find(function (value) { return value.key === item[field.id].key; }) === "undefined") {
+                            _comboBoxOptions.push(item[field.id]);
+                        }
+                    }
+                }
+                return React.createElement(ComboBox, { onFocus: function () { return _this.comboboxValidation(field, field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey); }, onBlur: function () { return _this.comboboxValidation(field, field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey); }, multiSelect: field.multiSelect, allowFreeform: field.allowFreeform, placeholder: field.placeholder, options: _comboBoxOptions, selectedKey: field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey, required: field.required, disabled: disableFieldOnEdit, onChange: function (event, option, index, value) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            field.multiSelect ? this.onValueChangedComboBoxMulti(field.id, option, value) : this.onValueChangedComboBoxSingle(field.id, option, value);
+                            return [2 /*return*/];
+                        });
+                    }); } });
+            case CustomCollectionFieldType.peoplepicker:
+                _selectedUsers = item[field.id] !== null ? item[field.id] : [];
+                return React.createElement(PeoplePicker, { peoplePickerCntrlclassName: styles.peoplePicker, context: this.props.context, personSelectionLimit: typeof field.maximumUsers === "number" ? field.maximumUsers : typeof field.multiSelect === "boolean" && field.multiSelect === false ? 1 : 99, principalTypes: [PrincipalType.User], ensureUser: true, placeholder: field.placeholder || field.title, required: field.required, onChange: function (items) {
+                        var _selected = items.length === 0 ? null : items.map(function (_a) {
+                            var secondaryText = _a.secondaryText;
+                            return secondaryText;
+                        });
+                        _this.onValueChanged(field.id, _selected);
+                    }, onGetErrorMessage: function (items) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, this.peoplepickerValidation(field, items, item)];
+                            case 1: return [2 /*return*/, _a.sent()];
+                        }
+                    }); }); }, defaultSelectedUsers: _selectedUsers });
             case CustomCollectionFieldType.string:
             default:
                 return React.createElement(TextField, { placeholder: field.placeholder || field.title, className: styles.collectionDataField, value: item[field.id] ? item[field.id] : "", required: field.required, disabled: disableFieldOnEdit, onChange: function (e, value) { return _this.onValueChanged(field.id, value); }, deferredValidationTime: field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200, onGetErrorMessage: function (value) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -462,7 +619,7 @@ var CollectionDataItem = /** @class */ (function (_super) {
         }
         return (React.createElement("div", { className: "PropertyFieldCollectionData__panel__table-row ".concat(styles.tableRow, " ").concat(this.props.index === null ? styles.tableFooter : "") },
             (this.props.sortingEnabled && this.props.totalItems) && (React.createElement("span", { className: "PropertyFieldCollectionData__panel__sorting-field ".concat(styles.tableCell) },
-                React.createElement(Dropdown, { options: opts, selectedKey: this.props.index + 1, onChanged: function (opt) { return _this.props.fOnSorting(_this.props.index, opt.key); } }))),
+                React.createElement(Dropdown, { options: opts, selectedKey: this.props.index + 1, onChange: function (event, opt) { return _this.props.fOnSorting(_this.props.index, opt.key); } }))),
             (this.props.sortingEnabled && this.props.totalItems === null) && (React.createElement("span", { className: "".concat(styles.tableCell) })),
             this.props.fields.map(function (f) { return (React.createElement("span", { key: "dataitem-".concat(f.id), className: "".concat(styles.tableCell, " ").concat(styles.inputField) }, _this.renderField(f, crntItem))); }),
             React.createElement("span", { className: styles.tableCell },