@pnp/spfx-controls-react 3.21.0-beta.1386581 → 3.21.0-beta.1391106

package/lib/controls/dynamicForm/DynamicForm.js

@@ -72,7 +72,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 /* eslint-disable @microsoft/spfx/no-async-await */
 import * as React from "react";
 import * as strings from "ControlStrings";
-import styles from "./DynamicForm.module.scss";
 // Controls
 import { DefaultButton, PrimaryButton, } from "@fluentui/react/lib/Button";
 import { Dialog, DialogFooter, DialogType, } from "@fluentui/react/lib/Dialog";
@@ -81,6 +80,7 @@ import { ProgressIndicator } from "@fluentui/react/lib/ProgressIndicator";
 import { Stack } from "@fluentui/react/lib/Stack";
 import { DynamicField } from "./dynamicField";
 import { FilePicker } from "../filePicker";
+import { Guid } from '@microsoft/sp-core-library';
 // pnp/sp, helpers / utils
 import { sp } from "@pnp/sp";
 import "@pnp/sp/lists";
@@ -91,17 +91,24 @@ import { cloneDeep, isEqual } from "lodash";
 import SPservice from "../../services/SPService";
 import { FormulaEvaluation } from "../../common/utilities/FormulaEvaluation";
 import CustomFormattingHelper from "../../common/utilities/CustomFormatting";
+import { SPTaxonomyService } from '../../services/SPTaxonomyService';
+import { getStyles } from "./DynamicForm.styles";
+import { getFluentUIThemeOrDefault } from "../../common/utilities/ThemeUtility";
+import { classNamesFunction, styled } from "@fluentui/react";
 import { Icon } from "@fluentui/react/lib/Icon";
 var stackTokens = { childrenGap: 20 };
+var getstyles = classNamesFunction();
+var getFieldstyles = classNamesFunction();
+var theme = getFluentUIThemeOrDefault();
 var timeout = function (ms) {
     return new Promise(function (resolve) { return setTimeout(resolve, ms); });
 };
 /**
  * DynamicForm Class Control
  */
-var DynamicForm = /** @class */ (function (_super) {
-    __extends(DynamicForm, _super);
-    function DynamicForm(props) {
+var DynamicFormBase = /** @class */ (function (_super) {
+    __extends(DynamicFormBase, _super);
+    function DynamicFormBase(props) {
         var _this = _super.call(this, props) || this;
         _this.webURL = _this.props.webAbsoluteUrl
             ? _this.props.webAbsoluteUrl
@@ -124,8 +131,9 @@ var DynamicForm = /** @class */ (function (_super) {
         _this.renderField = function (field) {
             var fieldOverrides = _this.props.fieldOverrides;
             var _a = _this.state, hiddenByFormula = _a.hiddenByFormula, isSaving = _a.isSaving, validationErrors = _a.validationErrors;
-            // If the field is hidden by a formula, don't render it
-            if (hiddenByFormula.find(function (h) { return h === field.columnInternalName; })) {
+            var styles = getFieldstyles(_this._classNames.subComponentStyles.fieldStyles(), { theme: theme });
+            // If the field is hidden by a formula or field doesn't exist (usually occurs in custom formatting section layout when field display name changed), don't render it
+            if (!field || hiddenByFormula.find(function (h) { return h === field.columnInternalName; })) {
                 return null;
             }
             // If validation error, show error message
@@ -139,23 +147,23 @@ var DynamicForm = /** @class */ (function (_super) {
                 return fieldOverrides[field.columnInternalName](__assign(__assign({}, field), { disabled: field.disabled || isSaving }));
             }
             // Default render
-            return (React.createElement(DynamicField, __assign({ key: field.columnInternalName }, field, { disabled: field.disabled || isSaving, validationErrorMessage: validationErrorMessage })));
+            return (React.createElement(DynamicField, __assign({ key: field.columnInternalName, styles: styles }, field, { disabled: field.disabled || isSaving, validationErrorMessage: validationErrorMessage })));
         };
         /** Triggered when the user submits the form. */
         _this.onSubmitClick = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, listId, listItemId, onSubmitted, onBeforeSubmit, onSubmitError, enableFileSelection, validationErrorDialogProps, returnListItemInstanceOnSubmit, contentTypeId, fileSelectRendered, shouldBeReturnBack_1, fields, validationDisabled, validationErrors, objects, _loop_1, this_1, i, len, isCancelled, apiError, newETag, iur, error_1, contentTypeIdField, iar, error_2, idField, contentTypeIdField, library, folderFileName, folder, _b, newFolder, fields_2, folderId, iur, error_3, error_4;
-            var _c, _d, _e, _f;
-            return __generator(this, function (_g) {
-                switch (_g.label) {
+            var _a, listId, listItemId, onSubmitted, onBeforeSubmit, onSubmitError, enableFileSelection, validationErrorDialogProps, returnListItemInstanceOnSubmit, useModernTaxonomyPicker, contentTypeId, fileSelectRendered, shouldBeReturnBack_1, fields, validationDisabled, validationErrors, objects, _loop_1, this_1, i, len, isCancelled, apiError, newETag, iur, error_1, contentTypeIdField, iar, error_2, idField, contentTypeIdField, library, folderFileName, folder, _b, newFolder, fields_2, folderId, iur, error_3, error_4;
+            var _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            return __generator(this, function (_m) {
+                switch (_m.label) {
                     case 0:
-                        _a = this.props, listId = _a.listId, listItemId = _a.listItemId, onSubmitted = _a.onSubmitted, onBeforeSubmit = _a.onBeforeSubmit, onSubmitError = _a.onSubmitError, enableFileSelection = _a.enableFileSelection, validationErrorDialogProps = _a.validationErrorDialogProps, returnListItemInstanceOnSubmit = _a.returnListItemInstanceOnSubmit;
+                        _a = this.props, listId = _a.listId, listItemId = _a.listItemId, onSubmitted = _a.onSubmitted, onBeforeSubmit = _a.onBeforeSubmit, onSubmitError = _a.onSubmitError, enableFileSelection = _a.enableFileSelection, validationErrorDialogProps = _a.validationErrorDialogProps, returnListItemInstanceOnSubmit = _a.returnListItemInstanceOnSubmit, useModernTaxonomyPicker = _a.useModernTaxonomyPicker;
                         contentTypeId = this.props.contentTypeId;
                         if (this.state.contentTypeId !== undefined)
                             contentTypeId = this.state.contentTypeId;
                         fileSelectRendered = !listItemId && contentTypeId.startsWith("0x0101") && enableFileSelection === true;
-                        _g.label = 1;
+                        _m.label = 1;
                     case 1:
-                        _g.trys.push([1, 33, , 34]);
+                        _m.trys.push([1, 33, , 34]);
                         shouldBeReturnBack_1 = false;
                         fields = (this.state.fieldCollection || []).slice();
                         fields.forEach(function (field) {
@@ -194,11 +202,11 @@ var DynamicForm = /** @class */ (function (_super) {
                         if (!!validationDisabled) return [3 /*break*/, 3];
                         return [4 /*yield*/, this.evaluateFormulas(this.state.validationFormulas, true, true, this.state.hiddenByFormula)];
                     case 2:
-                        validationErrors = (_g.sent());
+                        validationErrors = (_m.sent());
                         if (Object.keys(validationErrors).length > 0) {
                             shouldBeReturnBack_1 = true;
                         }
-                        _g.label = 3;
+                        _m.label = 3;
                     case 3:
                         // If validation failed, return without saving
                         if (shouldBeReturnBack_1) {
@@ -222,8 +230,8 @@ var DynamicForm = /** @class */ (function (_super) {
                         objects = {};
                         _loop_1 = function (i, len) {
                             var field, fieldType, additionalData, columnInternalName, hiddenFieldName, fieldcolumnInternalName, value_1, uploadedImage;
-                            return __generator(this, function (_h) {
-                                switch (_h.label) {
+                            return __generator(this, function (_o) {
+                                switch (_o.label) {
                                     case 0:
                                         field = fields[i];
                                         fieldType = field.fieldType, additionalData = field.additionalData, columnInternalName = field.columnInternalName, hiddenFieldName = field.hiddenFieldName;
@@ -271,18 +279,37 @@ var DynamicForm = /** @class */ (function (_super) {
                                             };
                                         }
                                         // Taxonomy / Managed Metadata fields
-                                        if (fieldType === "TaxonomyFieldType") {
-                                            objects[fieldcolumnInternalName] = {
-                                                __metadata: { type: "SP.Taxonomy.TaxonomyFieldValue" },
-                                                Label: (_d = (_c = value_1[0]) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "",
-                                                TermGuid: (_f = (_e = value_1[0]) === null || _e === void 0 ? void 0 : _e.key) !== null && _f !== void 0 ? _f : "11111111-1111-1111-1111-111111111111",
-                                                WssId: "-1",
-                                            };
+                                        if (useModernTaxonomyPicker) {
+                                            //Use ITermInfo[] for modern taxonomy picker
+                                            if (fieldType === "TaxonomyFieldType") {
+                                                objects[fieldcolumnInternalName] = {
+                                                    __metadata: { type: "SP.Taxonomy.TaxonomyFieldValue" },
+                                                    Label: (_e = (_d = (_c = value_1[0]) === null || _c === void 0 ? void 0 : _c.labels[0]) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : "",
+                                                    TermGuid: (_g = (_f = value_1[0]) === null || _f === void 0 ? void 0 : _f.id) !== null && _g !== void 0 ? _g : "11111111-1111-1111-1111-111111111111",
+                                                    WssId: "-1",
+                                                };
+                                            }
+                                            if (fieldType === "TaxonomyFieldTypeMulti") {
+                                                objects[hiddenFieldName] = field.newValue
+                                                    .map(function (term) { var _a; return "-1#;".concat(((_a = term.labels[0]) === null || _a === void 0 ? void 0 : _a.name) || "", "|").concat(term.id, ";"); })
+                                                    .join("#");
+                                            }
                                         }
-                                        if (fieldType === "TaxonomyFieldTypeMulti") {
-                                            objects[hiddenFieldName] = field.newValue
-                                                .map(function (term) { return "-1#;".concat(term.name, "|").concat(term.key, ";"); })
-                                                .join("#");
+                                        else {
+                                            //Use IPickerTerms
+                                            if (fieldType === "TaxonomyFieldType") {
+                                                objects[fieldcolumnInternalName] = {
+                                                    __metadata: { type: "SP.Taxonomy.TaxonomyFieldValue" },
+                                                    Label: (_j = (_h = value_1[0]) === null || _h === void 0 ? void 0 : _h.name) !== null && _j !== void 0 ? _j : "",
+                                                    TermGuid: (_l = (_k = value_1[0]) === null || _k === void 0 ? void 0 : _k.key) !== null && _l !== void 0 ? _l : "11111111-1111-1111-1111-111111111111",
+                                                    WssId: "-1",
+                                                };
+                                            }
+                                            if (fieldType === "TaxonomyFieldTypeMulti") {
+                                                objects[hiddenFieldName] = field.newValue
+                                                    .map(function (term) { return "-1#;".concat(term.name, "|").concat(term.key, ";"); })
+                                                    .join("#");
+                                            }
                                         }
                                         // Other fields
                                         if (fieldType === "Location") {
@@ -292,7 +319,7 @@ var DynamicForm = /** @class */ (function (_super) {
                                         if (!additionalData) return [3 /*break*/, 2];
                                         return [4 /*yield*/, this_1.uploadImage(additionalData)];
                                     case 1:
-                                        uploadedImage = _h.sent();
+                                        uploadedImage = _o.sent();
                                         objects[fieldcolumnInternalName] = JSON.stringify({
                                             type: "thumbnail",
                                             fileName: uploadedImage.Name,
@@ -302,20 +329,20 @@ var DynamicForm = /** @class */ (function (_super) {
                                         return [3 /*break*/, 3];
                                     case 2:
                                         objects[fieldcolumnInternalName] = null;
-                                        _h.label = 3;
+                                        _o.label = 3;
                                     case 3: return [2 /*return*/];
                                 }
                             });
                         };
                         this_1 = this;
                         i = 0, len = fields.length;
-                        _g.label = 4;
+                        _m.label = 4;
                     case 4:
                         if (!(i < len)) return [3 /*break*/, 7];
                         return [5 /*yield**/, _loop_1(i, len)];
                     case 5:
-                        _g.sent();
-                        _g.label = 6;
+                        _m.sent();
+                        _m.label = 6;
                     case 6:
                         i++;
                         return [3 /*break*/, 4];
@@ -323,27 +350,27 @@ var DynamicForm = /** @class */ (function (_super) {
                         if (!onBeforeSubmit) return [3 /*break*/, 9];
                         return [4 /*yield*/, onBeforeSubmit(objects)];
                     case 8:
-                        isCancelled = _g.sent();
+                        isCancelled = _m.sent();
                         if (isCancelled) {
                             this.setState({
                                 isSaving: false,
                             });
                             return [2 /*return*/];
                         }
-                        _g.label = 9;
+                        _m.label = 9;
                     case 9:
                         apiError = void 0;
                         newETag = undefined;
                         if (!listItemId) return [3 /*break*/, 14];
-                        _g.label = 10;
+                        _m.label = 10;
                     case 10:
-                        _g.trys.push([10, 12, , 13]);
+                        _m.trys.push([10, 12, , 13]);
                         return [4 /*yield*/, sp.web.lists
                                 .getById(listId)
                                 .items.getById(listItemId)
                                 .update(objects, this.state.etag)];
                     case 11:
-                        iur = _g.sent();
+                        iur = _m.sent();
                         newETag = iur.data["odata.etag"];
                         if (onSubmitted) {
                             onSubmitted(iur.data, returnListItemInstanceOnSubmit !== false
@@ -352,7 +379,7 @@ var DynamicForm = /** @class */ (function (_super) {
                         }
                         return [3 /*break*/, 13];
                     case 12:
-                        error_1 = _g.sent();
+                        error_1 = _m.sent();
                         apiError = error_1.message;
                         if (onSubmitError) {
                             onSubmitError(objects, error_1);
@@ -368,17 +395,17 @@ var DynamicForm = /** @class */ (function (_super) {
                         if (!(fileSelectRendered === true)) return [3 /*break*/, 16];
                         return [4 /*yield*/, this.addFileToLibrary(objects)];
                     case 15:
-                        _g.sent();
+                        _m.sent();
                         return [3 /*break*/, 19];
                     case 16:
-                        _g.trys.push([16, 18, , 19]);
+                        _m.trys.push([16, 18, , 19]);
                         contentTypeIdField = "ContentTypeId";
                         // check if item contenttype is passed, then update the object with content type id, else, pass the object
                         if (contentTypeId !== undefined && contentTypeId.startsWith("0x01"))
                             objects[contentTypeIdField] = contentTypeId;
                         return [4 /*yield*/, sp.web.lists.getById(listId).items.add(objects)];
                     case 17:
-                        iar = _g.sent();
+                        iar = _m.sent();
                         if (onSubmitted) {
                             onSubmitted(iar.data, this.props.returnListItemInstanceOnSubmit !== false
                                 ? iar.item
@@ -386,7 +413,7 @@ var DynamicForm = /** @class */ (function (_super) {
                         }
                         return [3 /*break*/, 19];
                     case 18:
-                        error_2 = _g.sent();
+                        error_2 = _m.sent();
                         apiError = error_2.message;
                         if (onSubmitError) {
                             onSubmitError(objects, error_2);
@@ -396,37 +423,37 @@ var DynamicForm = /** @class */ (function (_super) {
                     case 19: return [3 /*break*/, 32];
                     case 20:
                         if (!contentTypeId.startsWith("0x0120")) return [3 /*break*/, 32];
-                        _g.label = 21;
+                        _m.label = 21;
                     case 21:
-                        _g.trys.push([21, 31, , 32]);
+                        _m.trys.push([21, 31, , 32]);
                         idField = "ID";
                         contentTypeIdField = "ContentTypeId";
                         return [4 /*yield*/, sp.web.lists.getById(listId)];
                     case 22:
-                        library = _g.sent();
+                        library = _m.sent();
                         folderFileName = this.getFolderName(objects);
                         if (!!this.props.folderPath) return [3 /*break*/, 23];
                         _b = library.rootFolder;
                         return [3 /*break*/, 25];
                     case 23: return [4 /*yield*/, this.getFolderByPath(this.props.folderPath, library.rootFolder)];
                     case 24:
-                        _b = _g.sent();
-                        _g.label = 25;
+                        _b = _m.sent();
+                        _m.label = 25;
                     case 25:
                         folder = _b;
                         return [4 /*yield*/, folder.addSubFolderUsingPath(folderFileName)];
                     case 26:
-                        newFolder = _g.sent();
+                        newFolder = _m.sent();
                         return [4 /*yield*/, newFolder.listItemAllFields()];
                     case 27:
-                        fields_2 = _g.sent();
+                        fields_2 = _m.sent();
                         if (!fields_2[idField]) return [3 /*break*/, 29];
                         folderId = fields_2[idField];
                         // Set the content type ID for the target item
                         objects[contentTypeIdField] = contentTypeId;
                         return [4 /*yield*/, this.updateListItemRetry(library, folderId, objects)];
                     case 28:
-                        iur = _g.sent();
+                        iur = _m.sent();
                         if (onSubmitted) {
                             onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false
                                 ? iur.item
@@ -436,7 +463,7 @@ var DynamicForm = /** @class */ (function (_super) {
                     case 29: throw new Error("Unable to read the ID of the just created folder or Document Set");
                     case 30: return [3 /*break*/, 32];
                     case 31:
-                        error_3 = _g.sent();
+                        error_3 = _m.sent();
                         apiError = error_3.message;
                         if (onSubmitError) {
                             onSubmitError(objects, error_3);
@@ -451,7 +478,7 @@ var DynamicForm = /** @class */ (function (_super) {
                         });
                         return [3 /*break*/, 34];
                     case 33:
-                        error_4 = _g.sent();
+                        error_4 = _m.sent();
                         if (onSubmitError) {
                             onSubmitError(null, error_4);
                         }
@@ -533,7 +560,7 @@ var DynamicForm = /** @class */ (function (_super) {
         _this.onChange = function (internalName, 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         newValue, validate, additionalData) { return __awaiter(_this, void 0, void 0, function () {
-            var fieldCol, field, user, result, emails, index, element, user, result, validationErrors;
+            var fieldCol, field, useModernTaxonomyPicker, user, result, emails, index, element, user, result, validationErrors;
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -542,6 +569,7 @@ var DynamicForm = /** @class */ (function (_super) {
                         field = fieldCol.filter(function (element, i) {
                             return element.columnInternalName === internalName;
                         })[0];
+                        useModernTaxonomyPicker = this.props.useModernTaxonomyPicker;
                         // Init new value(s)
                         field.newValue = newValue;
                         field.stringValue = newValue.toString();
@@ -557,8 +585,20 @@ var DynamicForm = /** @class */ (function (_super) {
                         if (field.fieldType === "Lookup" || field.fieldType === "LookupMulti") {
                             field.stringValue = newValue.map(function (nv) { return nv.key + ';#' + nv.name; }).join(';#');
                         }
-                        if (field.fieldType === "TaxonomyFieldType" || field.fieldType === "TaxonomyFieldTypeMulti") {
-                            field.stringValue = newValue.map(function (nv) { return nv.name; }).join(';');
+                        if (useModernTaxonomyPicker) {
+                            if (field.fieldType === "TaxonomyFieldType" || field.fieldType === "TaxonomyFieldTypeMulti") {
+                                if (Array.isArray(newValue) && newValue.length > 0) {
+                                    field.stringValue = newValue.map(function (nv) { return nv.labels.map(function (label) { return label.name; }).join(';'); }).join(';');
+                                }
+                                else {
+                                    field.stringValue = "";
+                                }
+                            }
+                        }
+                        else {
+                            if (field.fieldType === "TaxonomyFieldType" || field.fieldType === "TaxonomyFieldTypeMulti") {
+                                field.stringValue = newValue.map(function (nv) { return nv.name; }).join(';');
+                            }
                         }
                         if (!(field.fieldType === "User" && newValue.length !== 0)) return [3 /*break*/, 3];
                         if (!(newValue[0].id === undefined ||
@@ -752,21 +792,21 @@ var DynamicForm = /** @class */ (function (_super) {
         _this.getListInformation = function () { return __awaiter(_this, void 0, void 0, function () {
             var _a, listId, listItemId, disabledFields, respectETag, customIcons, onListItemLoaded, contentTypeId, listInfo, additionalInfo, numberFields, validationFormulas, contentTypeName, clientValidationFormulas, headerJSON, footerJSON, bodySections, customFormatInfo, spList, item, isEditingItem, etag, spListItem, tempFields, sortedFields, installedLanguages, error_6;
             var _this = this;
-            var _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
                         _a = this.props, listId = _a.listId, listItemId = _a.listItemId, disabledFields = _a.disabledFields, respectETag = _a.respectETag, customIcons = _a.customIcons, onListItemLoaded = _a.onListItemLoaded;
                         contentTypeId = this.props.contentTypeId;
-                        _c.label = 1;
+                        _d.label = 1;
                     case 1:
-                        _c.trys.push([1, 11, , 12]);
+                        _d.trys.push([1, 11, , 12]);
                         return [4 /*yield*/, this._spService.getListFormRenderInfo(listId, this.webURL)];
                     case 2:
-                        listInfo = _c.sent();
+                        listInfo = _d.sent();
                         return [4 /*yield*/, this._spService.getAdditionalListFormFieldInfo(listId, this.webURL)];
                     case 3:
-                        additionalInfo = _c.sent();
+                        additionalInfo = _d.sent();
                         numberFields = additionalInfo.filter(function (f) { return f.TypeAsString === "Number" || f.TypeAsString === "Currency"; });
                         validationFormulas = additionalInfo.reduce(function (prev, cur) {
                             if (!prev[cur.InternalName] && cur.ValidationFormula) {
@@ -795,7 +835,7 @@ var DynamicForm = /** @class */ (function (_super) {
                         bodySections = void 0;
                         if (listInfo.ClientFormCustomFormatter && listInfo.ClientFormCustomFormatter[contentTypeId]) {
                             customFormatInfo = JSON.parse(listInfo.ClientFormCustomFormatter[contentTypeId]);
-                            bodySections = customFormatInfo.bodyJSONFormatter.sections;
+                            bodySections = (_b = customFormatInfo.bodyJSONFormatter) === null || _b === void 0 ? void 0 : _b.sections;
                             headerJSON = customFormatInfo.headerJSONFormatter;
                             footerJSON = customFormatInfo.footerJSONFormatter;
                         }
@@ -810,29 +850,29 @@ var DynamicForm = /** @class */ (function (_super) {
                         }
                         return [4 /*yield*/, spListItem.get().catch(function (err) { return _this.updateFormMessages(MessageBarType.error, err.message); })];
                     case 4:
-                        item = _c.sent();
+                        item = _d.sent();
                         if (!onListItemLoaded) return [3 /*break*/, 6];
                         return [4 /*yield*/, onListItemLoaded(item)];
                     case 5:
-                        _c.sent();
-                        _c.label = 6;
+                        _d.sent();
+                        _d.label = 6;
                     case 6:
                         if (respectETag !== false) {
                             etag = item["odata.etag"];
                         }
-                        _c.label = 7;
+                        _d.label = 7;
                     case 7: return [4 /*yield*/, this.buildFieldCollection(listInfo, contentTypeName, item, numberFields, listId, listItemId, disabledFields, customIcons)];
                     case 8:
-                        tempFields = _c.sent();
-                        sortedFields = ((_b = this.props.fieldOrder) === null || _b === void 0 ? void 0 : _b.length) > 0
+                        tempFields = _d.sent();
+                        sortedFields = ((_c = this.props.fieldOrder) === null || _c === void 0 ? void 0 : _c.length) > 0
                             ? this.sortFields(tempFields, this.props.fieldOrder)
                             : tempFields;
                         installedLanguages = void 0;
                         if (!(tempFields.filter(function (f) { return f.fieldType === "Currency"; }).length > 0)) return [3 /*break*/, 10];
                         return [4 /*yield*/, sp.web.regionalSettings.getInstalledLanguages()];
                     case 9:
-                        installedLanguages = _c.sent();
-                        _c.label = 10;
+                        installedLanguages = _d.sent();
+                        _d.label = 10;
                     case 10:
                         this.setState({
                             contentTypeId: contentTypeId,
@@ -849,7 +889,7 @@ var DynamicForm = /** @class */ (function (_super) {
                         }, function () { return _this.performValidation(true); });
                         return [3 /*break*/, 12];
                     case 11:
-                        error_6 = _c.sent();
+                        error_6 = _d.sent();
                         this.updateFormMessages(MessageBarType.error, 'An error occurred while loading: ' + error_6.message);
                         console.error("An error occurred while loading DynamicForm", error_6);
                         return [2 /*return*/, null];
@@ -857,6 +897,68 @@ var DynamicForm = /** @class */ (function (_super) {
                 }
             });
         }); };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this.getTermsForModernTaxonomyPicker = function (termsetId, terms) { return __awaiter(_this, void 0, void 0, function () {
+            var selectedTerms;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!terms || terms.length === 0) {
+                            return [2 /*return*/, []];
+                        }
+                        return [4 /*yield*/, Promise.all(
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            terms.map(function (fetchedterm) { return __awaiter(_this, void 0, void 0, function () {
+                                var response, error_7;
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+                                return __generator(this, function (_v) {
+                                    switch (_v.label) {
+                                        case 0:
+                                            if (!(fetchedterm === null || fetchedterm === void 0 ? void 0 : fetchedterm.TermGuid)) {
+                                                console.error("Error: TermGuid is undefined for term", fetchedterm);
+                                                return [2 /*return*/, null];
+                                            }
+                                            _v.label = 1;
+                                        case 1:
+                                            _v.trys.push([1, 3, , 4]);
+                                            return [4 /*yield*/, this._taxonomyService.getTermById(Guid.parse(termsetId), Guid.parse(fetchedterm.TermGuid))];
+                                        case 2:
+                                            response = _v.sent();
+                                            return [2 /*return*/, {
+                                                    id: response.id,
+                                                    labels: [
+                                                        {
+                                                            name: (_c = (_b = (_a = response.labels) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : fetchedterm.Label,
+                                                            isDefault: (_f = (_e = (_d = response.labels) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.isDefault) !== null && _f !== void 0 ? _f : true,
+                                                            languageTag: (_j = (_h = (_g = response.labels) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.languageTag) !== null && _j !== void 0 ? _j : "en-US",
+                                                        },
+                                                    ],
+                                                    childrenCount: (_k = response.childrenCount) !== null && _k !== void 0 ? _k : 0,
+                                                    createdDateTime: (_l = response.createdDateTime) !== null && _l !== void 0 ? _l : new Date().toISOString(),
+                                                    lastModifiedDateTime: (_m = response.lastModifiedDateTime) !== null && _m !== void 0 ? _m : new Date().toISOString(),
+                                                    descriptions: (_o = response.descriptions) !== null && _o !== void 0 ? _o : [],
+                                                    customSortOrder: (_p = response.customSortOrder) !== null && _p !== void 0 ? _p : [],
+                                                    properties: (_q = response.properties) !== null && _q !== void 0 ? _q : [],
+                                                    localProperties: (_r = response.localProperties) !== null && _r !== void 0 ? _r : [],
+                                                    isDeprecated: (_s = response.isDeprecated) !== null && _s !== void 0 ? _s : false,
+                                                    isAvailableForTagging: (_t = response.isAvailableForTagging) !== null && _t !== void 0 ? _t : [],
+                                                    topicRequested: (_u = response.topicRequested) !== null && _u !== void 0 ? _u : false,
+                                                }];
+                                        case 3:
+                                            error_7 = _v.sent();
+                                            console.error("Error fetching term ".concat(fetchedterm.TermGuid, ":"), error_7);
+                                            return [2 /*return*/, null];
+                                        case 4: return [2 /*return*/];
+                                    }
+                                });
+                            }); }))];
+                    case 1:
+                        selectedTerms = _a.sent();
+                        return [2 /*return*/, selectedTerms.filter(function (term) { return term !== null; })];
+                }
+            });
+        }); };
         _this.uploadImage = function (file) { return __awaiter(_this, void 0, void 0, function () {
             var _a, listId, listItemId, fileInstance, buffer;
             return __generator(this, function (_b) {
@@ -913,6 +1015,7 @@ var DynamicForm = /** @class */ (function (_super) {
         _this.renderFileSelectionControl = function () {
             var _a;
             var _b = _this.state, selectedFile = _b.selectedFile, missingSelectedFile = _b.missingSelectedFile;
+            var styles = getFieldstyles(_this._classNames.subComponentStyles.fieldStyles(), { theme: theme });
             var labelEl = React.createElement("label", { className: styles.fieldRequired + ' ' + styles.fieldLabel }, strings.DynamicFormChooseFileLabel);
             return React.createElement("div", null,
                 React.createElement("div", { className: styles.titleContainer },
@@ -1013,7 +1116,7 @@ var DynamicForm = /** @class */ (function (_super) {
         _this.updateListItemRetry = function (list, itemId, objects, retry) {
             if (retry === void 0) { retry = 0; }
             return __awaiter(_this, void 0, void 0, function () {
-                var error_7;
+                var error_8;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -1021,14 +1124,14 @@ var DynamicForm = /** @class */ (function (_super) {
                             return [4 /*yield*/, list.items.getById(itemId).update(objects)];
                         case 1: return [2 /*return*/, _a.sent()];
                         case 2:
-                            error_7 = _a.sent();
-                            if (!(error_7.status === 409 && retry < 3)) return [3 /*break*/, 5];
+                            error_8 = _a.sent();
+                            if (!(error_8.status === 409 && retry < 3)) return [3 /*break*/, 5];
                             return [4 /*yield*/, timeout(100)];
                         case 3:
                             _a.sent();
                             return [4 /*yield*/, this.updateListItemRetry(list, itemId, objects, retry + 1)];
                         case 4: return [2 /*return*/, _a.sent()];
-                        case 5: throw error_7;
+                        case 5: throw error_8;
                         case 6: return [2 /*return*/];
                     }
                 });
@@ -1050,6 +1153,8 @@ var DynamicForm = /** @class */ (function (_super) {
                 spfxContext: { pageContext: _this.props.context.pageContext },
             });
         }
+        // Initialize taxonomy service
+        _this._taxonomyService = new SPTaxonomyService(_this.props.context);
         // Initialize state
         _this.state = {
             infoErrorMessages: [],
@@ -1073,7 +1178,7 @@ var DynamicForm = /** @class */ (function (_super) {
     /**
      * Lifecycle hook when component is mounted
      */
-    DynamicForm.prototype.componentDidMount = function () {
+    DynamicFormBase.prototype.componentDidMount = function () {
         this.getListInformation()
             .then(function () {
             /* no-op; */
@@ -1083,7 +1188,7 @@ var DynamicForm = /** @class */ (function (_super) {
             console.error(err);
         });
     };
-    DynamicForm.prototype.componentDidUpdate = function (prevProps, prevState) {
+    DynamicFormBase.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _this = this;
         if (!isEqual(prevProps, this.props)) {
             // Props have changed due to parent component or workbench config, reset state
@@ -1111,15 +1216,17 @@ var DynamicForm = /** @class */ (function (_super) {
     /**
      * Default React component render method
      */
-    DynamicForm.prototype.render = function () {
+    DynamicFormBase.prototype.render = function () {
         var _a;
         var _this = this;
         var _b = this.state, customFormatting = _b.customFormatting, fieldCollection = _b.fieldCollection, hiddenByFormula = _b.hiddenByFormula, infoErrorMessages = _b.infoErrorMessages, isSaving = _b.isSaving;
         var customFormattingDisabled = this.props.useCustomFormatting === false;
+        var className = this.props.className;
+        var styles = (this._classNames = getstyles(this.props.styles, { className: className }));
         // Custom Formatting - Header
         var headerContent;
         if (!customFormattingDisabled && (customFormatting === null || customFormatting === void 0 ? void 0 : customFormatting.header)) {
-            headerContent = this._customFormatter.renderCustomFormatContent(customFormatting.header, this.getFormValuesForValidation(), true);
+            headerContent = React.createElement("div", { className: styles.header }, this._customFormatter.renderCustomFormatContent(customFormatting.header, this.getFormValuesForValidation(), true));
         }
         // Custom Formatting - Body
         var bodySections = [];
@@ -1137,7 +1244,7 @@ var DynamicForm = /** @class */ (function (_super) {
         // Custom Formatting - Footer
         var footerContent;
         if (!customFormattingDisabled && (customFormatting === null || customFormatting === void 0 ? void 0 : customFormatting.footer)) {
-            footerContent = this._customFormatter.renderCustomFormatContent(customFormatting.footer, this.getFormValuesForValidation(), true);
+            footerContent = React.createElement("div", { className: styles.footer }, this._customFormatter.renderCustomFormatContent(customFormatting.footer, this.getFormValuesForValidation(), true));
         }
         // Content Type
         var contentTypeId = this.props.contentTypeId;
@@ -1178,7 +1285,7 @@ var DynamicForm = /** @class */ (function (_super) {
                     React.createElement("div", { className: "ms-Dialog-actionsRight ".concat(styles.actionsRight) },
                         React.createElement(DefaultButton, { className: styles.action, onClick: this.closeValidationErrorDialog, text: strings.CloseButton }))))));
     };
-    DynamicForm.prototype.updateFormMessages = function (type, message) {
+    DynamicFormBase.prototype.updateFormMessages = function (type, message) {
         var infoErrorMessages = this.state.infoErrorMessages;
         var newMessages = infoErrorMessages.slice();
         newMessages.push({ type: type, message: message });
@@ -1196,24 +1303,25 @@ var DynamicForm = /** @class */ (function (_super) {
      * @returns
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    DynamicForm.prototype.buildFieldCollection = function (listInfo, contentTypeName, item, numberFields, listId, listItemId, disabledFields, customIcons) {
+    DynamicFormBase.prototype.buildFieldCollection = function (listInfo, contentTypeName, item, numberFields, listId, listItemId, disabledFields, customIcons) {
         return __awaiter(this, void 0, void 0, function () {
-            var tempFields, order, hiddenFields, defaultDayOfWeek, _loop_3, this_2, i, len;
+            var useModernTaxonomyPicker, tempFields, order, hiddenFields, defaultDayOfWeek, _loop_3, this_2, i, len;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        useModernTaxonomyPicker = this.props.useModernTaxonomyPicker;
                         tempFields = [];
                         order = 0;
                         hiddenFields = this.props.hiddenFields !== undefined ? this.props.hiddenFields : [];
                         defaultDayOfWeek = 0;
                         _loop_3 = function (i, len) {
-                            var field, hiddenName, termSetId, anchorId, lookupListId, lookupField, choices_1, defaultValue, value, stringValue, subPropertyValues, richText, dateFormat, principalType, cultureName, minValue, maxValue, showAsPercentage, selectedTags_1, fieldName, numberField, userEmails, _b, _c, response;
+                            var field, hiddenName, termSetId, anchorId, lookupListId, lookupField, choices_1, defaultValue, value, stringValue, subPropertyValues, richText, dateFormat, principalType, cultureName, minValue, maxValue, showAsPercentage, selectedTags_1, fieldName, numberField, userEmails, _b, _c, response, term, _selectedTags, response;
                             return __generator(this, function (_d) {
                                 switch (_d.label) {
                                     case 0:
                                         field = listInfo.ClientForms.Edit[contentTypeName][i];
-                                        if (!(hiddenFields.indexOf(field.InternalName) < 0)) return [3 /*break*/, 18];
-                                        if (!(field.Hidden === false)) return [3 /*break*/, 18];
+                                        if (!(hiddenFields.indexOf(field.InternalName) < 0)) return [3 /*break*/, 30];
+                                        if (!(field.Hidden === false)) return [3 /*break*/, 30];
                                         order++;
                                         hiddenName = "";
                                         termSetId = "";
@@ -1325,12 +1433,82 @@ var DynamicForm = /** @class */ (function (_super) {
                                         principalType = field.PrincipalAccountType;
                                         _d.label = 11;
                                     case 11:
-                                        if (!(field.FieldType === "TaxonomyFieldType")) return [3 /*break*/, 15];
+                                        if (!useModernTaxonomyPicker) return [3 /*break*/, 22];
+                                        if (!(field.FieldType === "TaxonomyFieldType")) return [3 /*break*/, 17];
                                         termSetId = field.TermSetId;
-                                        anchorId = field.AnchorId;
-                                        if (!(item !== null)) return [3 /*break*/, 13];
+                                        anchorId = field.AnchorId !== Guid.empty.toString() ? field.AnchorId : null;
+                                        if (!(item !== null)) return [3 /*break*/, 15];
                                         return [4 /*yield*/, this_2._spService.getSingleManagedMetadataLabel(listId, listItemId, field.InternalName, this_2.webURL)];
                                     case 12:
+                                        response = _d.sent();
+                                        if (!response) return [3 /*break*/, 14];
+                                        return [4 /*yield*/, this_2._taxonomyService.getTermById(Guid.parse(field.TermSetId), Guid.parse(response.TermID))];
+                                    case 13:
+                                        term = _d.sent();
+                                        selectedTags_1.push({
+                                            key: response.TermID,
+                                            name: response.Label,
+                                        });
+                                        value = term; //selectedTags;
+                                        stringValue = selectedTags_1 === null || selectedTags_1 === void 0 ? void 0 : selectedTags_1.map(function (dv) { return dv.key + ';#' + dv.name; }).join(';#');
+                                        _d.label = 14;
+                                    case 14: return [3 /*break*/, 16];
+                                    case 15:
+                                        if (defaultValue !== "") {
+                                            selectedTags_1.push({
+                                                key: defaultValue.split("|")[1],
+                                                name: defaultValue.split("|")[0].split("#")[1],
+                                            });
+                                            value = selectedTags_1;
+                                        }
+                                        _d.label = 16;
+                                    case 16:
+                                        if (defaultValue === "")
+                                            defaultValue = null;
+                                        _d.label = 17;
+                                    case 17:
+                                        if (!(field.FieldType === "TaxonomyFieldTypeMulti")) return [3 /*break*/, 21];
+                                        hiddenName = field.HiddenListInternalName;
+                                        termSetId = field.TermSetId;
+                                        anchorId = field.AnchorId !== Guid.empty.toString() ? field.AnchorId : null;
+                                        if (!(item && item[field.InternalName])) return [3 /*break*/, 19];
+                                        return [4 /*yield*/, this_2.getTermsForModernTaxonomyPicker(field.TermSetId, item[field.InternalName])];
+                                    case 18:
+                                        _selectedTags = _d.sent();
+                                        item[field.InternalName].forEach(function (element) {
+                                            selectedTags_1.push({
+                                                key: element.TermGuid,
+                                                name: element.Label,
+                                            });
+                                        });
+                                        //value = selectedTags; _selectedTags
+                                        value = _selectedTags;
+                                        return [3 /*break*/, 20];
+                                    case 19:
+                                        if (defaultValue && defaultValue !== "") {
+                                            defaultValue.split(/#|;/).forEach(function (element) {
+                                                if (element.indexOf("|") !== -1)
+                                                    selectedTags_1.push({
+                                                        key: element.split("|")[1],
+                                                        name: element.split("|")[0],
+                                                    });
+                                            });
+                                            value = selectedTags_1;
+                                            stringValue = selectedTags_1 === null || selectedTags_1 === void 0 ? void 0 : selectedTags_1.map(function (dv) { return dv.key + ';#' + dv.name; }).join(';#');
+                                        }
+                                        _d.label = 20;
+                                    case 20:
+                                        if (defaultValue === "")
+                                            defaultValue = null;
+                                        _d.label = 21;
+                                    case 21: return [3 /*break*/, 27];
+                                    case 22:
+                                        if (!(field.FieldType === "TaxonomyFieldType")) return [3 /*break*/, 26];
+                                        termSetId = field.TermSetId;
+                                        anchorId = field.AnchorId;
+                                        if (!(item !== null)) return [3 /*break*/, 24];
+                                        return [4 /*yield*/, this_2._spService.getSingleManagedMetadataLabel(listId, listItemId, field.InternalName, this_2.webURL)];
+                                    case 23:
                                         response = _d.sent();
                                         if (response) {
                                             selectedTags_1.push({
@@ -1340,8 +1518,8 @@ var DynamicForm = /** @class */ (function (_super) {
                                             value = selectedTags_1;
                                             stringValue = selectedTags_1 === null || selectedTags_1 === void 0 ? void 0 : selectedTags_1.map(function (dv) { return dv.key + ';#' + dv.name; }).join(';#');
                                         }
-                                        return [3 /*break*/, 14];
-                                    case 13:
+                                        return [3 /*break*/, 25];
+                                    case 24:
                                         if (defaultValue !== "") {
                                             selectedTags_1.push({
                                                 key: defaultValue.split("|")[1],
@@ -1349,12 +1527,12 @@ var DynamicForm = /** @class */ (function (_super) {
                                             });
                                             value = selectedTags_1;
                                         }
-                                        _d.label = 14;
-                                    case 14:
+                                        _d.label = 25;
+                                    case 25:
                                         if (defaultValue === "")
                                             defaultValue = null;
-                                        _d.label = 15;
-                                    case 15:
+                                        _d.label = 26;
+                                    case 26:
                                         if (field.FieldType === "TaxonomyFieldTypeMulti") {
                                             hiddenName = field.HiddenListInternalName;
                                             termSetId = field.TermSetId;
@@ -1378,13 +1556,27 @@ var DynamicForm = /** @class */ (function (_super) {
                                                             });
                                                     });
                                                     value = selectedTags_1;
-                                                    stringValue = selectedTags_1 === null || selectedTags_1 === void 0 ? void 0 : selectedTags_1.map(function (dv) { return dv.key + ';#' + dv.name; }).join(';#');
                                                 }
+                                                else {
+                                                    if (defaultValue && defaultValue !== "") {
+                                                        defaultValue.split(/#|;/).forEach(function (element) {
+                                                            if (element.indexOf("|") !== -1)
+                                                                selectedTags_1.push({
+                                                                    key: element.split("|")[1],
+                                                                    name: element.split("|")[0],
+                                                                });
+                                                        });
+                                                        value = selectedTags_1;
+                                                        stringValue = selectedTags_1 === null || selectedTags_1 === void 0 ? void 0 : selectedTags_1.map(function (dv) { return dv.key + ';#' + dv.name; }).join(';#');
+                                                    }
+                                                }
+                                                if (defaultValue === "")
+                                                    defaultValue = null;
                                             }
-                                            if (defaultValue === "")
-                                                defaultValue = null;
                                         }
-                                        if (!(field.FieldType === "DateTime")) return [3 /*break*/, 17];
+                                        _d.label = 27;
+                                    case 27:
+                                        if (!(field.FieldType === "DateTime")) return [3 /*break*/, 29];
                                         if (item !== null && item[fieldName]) {
                                             value = new Date(item[fieldName]);
                                             stringValue = value.toISOString();
@@ -1397,10 +1589,10 @@ var DynamicForm = /** @class */ (function (_super) {
                                         }
                                         dateFormat = field.DateFormat || "DateOnly";
                                         return [4 /*yield*/, this_2._spService.getRegionalWebSettings(this_2.webURL)];
-                                    case 16:
+                                    case 28:
                                         defaultDayOfWeek = (_d.sent()).FirstDayOfWeek;
-                                        _d.label = 17;
-                                    case 17:
+                                        _d.label = 29;
+                                    case 29:
                                         // Setup Thumbnail, Location and Boolean fields
                                         if (field.FieldType === "Thumbnail") {
                                             if (defaultValue) {
@@ -1457,12 +1649,13 @@ var DynamicForm = /** @class */ (function (_super) {
                                             minimumValue: minValue,
                                             maximumValue: maxValue,
                                             showAsPercentage: showAsPercentage,
-                                            customIcon: customIcons ? customIcons[field.InternalName] : undefined
+                                            customIcon: customIcons ? customIcons[field.InternalName] : undefined,
+                                            useModernTaxonomyPickerControl: useModernTaxonomyPicker,
                                         });
                                         // This may not be necessary now using RenderListDataAsStream
                                         tempFields.sort(function (a, b) { return a.Order - b.Order; });
-                                        _d.label = 18;
-                                    case 18: return [2 /*return*/];
+                                        _d.label = 30;
+                                    case 30: return [2 /*return*/];
                                 }
                             });
                         };
@@ -1483,14 +1676,17 @@ var DynamicForm = /** @class */ (function (_super) {
             });
         });
     };
-    DynamicForm.prototype.cultureNameLookup = function (lcid) {
+    DynamicFormBase.prototype.cultureNameLookup = function (lcid) {
         var _a, _b;
         var pageCulture = this.props.context.pageContext.cultureInfo.currentCultureName;
         if (!lcid)
             return pageCulture;
         return (_b = (_a = this.state.installedLanguages) === null || _a === void 0 ? void 0 : _a.find(function (lang) { return lang.Lcid === lcid; }).DisplayName) !== null && _b !== void 0 ? _b : pageCulture;
     };
-    return DynamicForm;
+    return DynamicFormBase;
 }(React.Component));
-export { DynamicForm };
+export { DynamicFormBase };
+export var DynamicForm = styled(DynamicFormBase, getStyles, undefined, {
+    scope: 'DynamicForm',
+});
 //# sourceMappingURL=DynamicForm.js.map