@pnp/spfx-controls-react 4.0.0-beta.3798679 → 4.0.0-beta.3809332

package/lib/controls/dynamicForm/DynamicForm.js

@@ -10,13 +10,8 @@ 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";
-import "@pnp/sp/content-types";
-import "@pnp/sp/folders";
-import "@pnp/sp/items";
-import { ChoiceFieldFormatType } from "@pnp/sp/presets/all";
+import { ChoiceFieldFormatType } from "../../common/SPRestTypes";
+import { DynamicFormService, DynamicFormSaveError } from "../../services/DynamicFormService";
 import { cloneDeep, isEqual } from "lodash";
 import SPservice from "../../services/SPService";
 import { FormulaEvaluation } from "../../common/utilities/FormulaEvaluation";
@@ -30,9 +25,6 @@ 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
  */
@@ -40,9 +32,10 @@ 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
-            : _this.props.context.pageContext.web.absoluteUrl;
+        _this._loadVersion = 0;
+        _this._operationVersion = 0;
+        _this._isLoading = false;
+        _this._unmounted = false;
         _this.sortFields = function (fields, customSort) {
             var fMap = new Map();
             for (var _i = 0, fields_1 = fields; _i < fields_1.length; _i++) {
@@ -77,23 +70,33 @@ var DynamicFormBase = /** @class */ (function (_super) {
                 return fieldOverrides[field.columnInternalName](__assign(__assign({}, field), { disabled: field.disabled || isSaving }));
             }
             // Default render
-            return (React.createElement(DynamicField, __assign({ key: field.columnInternalName, styles: styles }, field, { disabled: field.disabled || isSaving, validationErrorMessage: validationErrorMessage, itemsQueryCountLimit: _this.props.itemsQueryCountLimit })));
+            return (React.createElement(DynamicField, __assign({ key: field.columnInternalName, styles: styles }, field, { webAbsoluteUrl: _this.webURL, disabled: field.disabled || isSaving, validationErrorMessage: validationErrorMessage, itemsQueryCountLimit: _this.props.itemsQueryCountLimit })));
         };
         /** 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, 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, updatedExtendedInfo_1, error_4;
-            var _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            return __generator(this, function (_m) {
-                switch (_m.label) {
+            var operationVersion, isCurrent, dataService, spService, webUrl, _a, listId, listItemId, onSubmitted, onBeforeSubmit, onSubmitError, enableFileSelection, validationErrorDialogProps, returnListItemReferenceOnSubmit, useModernTaxonomyPicker, folderPath, contentTypeId, fileSelectRendered, shouldBeReturnBack_1, fields, validationDisabled, validationErrors, objects, _loop_1, this_1, i, len, state_1, isCancelled, apiError, newETag, iur, error_1, error_2, contentTypeIdField, iar, error_3, contentTypeIdField, folderFileName, iur, error_4, updatedExtendedInfo_1, error_5;
+            var _this = this;
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            return __generator(this, function (_l) {
+                switch (_l.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, useModernTaxonomyPicker = _a.useModernTaxonomyPicker;
+                        if (this._unmounted || this._isLoading || this.state.isSaving || this._submissionVersion !== undefined)
+                            return [2 /*return*/];
+                        operationVersion = this._operationVersion;
+                        this._submissionVersion = operationVersion;
+                        isCurrent = function () { return !_this._unmounted && operationVersion === _this._operationVersion; };
+                        dataService = this._dataService;
+                        spService = this._spService;
+                        webUrl = this.webURL;
+                        _a = this.props, listId = _a.listId, listItemId = _a.listItemId, onSubmitted = _a.onSubmitted, onBeforeSubmit = _a.onBeforeSubmit, onSubmitError = _a.onSubmitError, enableFileSelection = _a.enableFileSelection, validationErrorDialogProps = _a.validationErrorDialogProps, returnListItemReferenceOnSubmit = _a.returnListItemReferenceOnSubmit, useModernTaxonomyPicker = _a.useModernTaxonomyPicker, folderPath = _a.folderPath;
+                        _l.label = 1;
+                    case 1:
+                        _l.trys.push([1, 33, 34, 35]);
+                        this.setState({ isSaving: true });
                         contentTypeId = this.props.contentTypeId;
                         if (this.state.contentTypeId !== undefined)
                             contentTypeId = this.state.contentTypeId;
-                        fileSelectRendered = !listItemId && contentTypeId.startsWith("0x0101") && enableFileSelection === true;
-                        _m.label = 1;
-                    case 1:
-                        _m.trys.push([1, 35, , 36]);
+                        fileSelectRendered = !listItemId && (contentTypeId === null || contentTypeId === void 0 ? void 0 : contentTypeId.startsWith("0x0101")) && enableFileSelection === true;
                         shouldBeReturnBack_1 = false;
                         fields = (this.state.fieldCollection || []).slice();
                         fields.forEach(function (field) {
@@ -132,11 +135,13 @@ var DynamicFormBase = /** @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 = (_m.sent());
+                        validationErrors = (_l.sent());
+                        if (!isCurrent())
+                            return [2 /*return*/];
                         if (Object.keys(validationErrors).length > 0) {
                             shouldBeReturnBack_1 = true;
                         }
-                        _m.label = 3;
+                        _l.label = 3;
                     case 3:
                         // If validation failed, return without saving
                         if (shouldBeReturnBack_1) {
@@ -154,14 +159,11 @@ var DynamicFormBase = /** @class */ (function (_super) {
                             });
                             return [2 /*return*/];
                         }
-                        this.setState({
-                            isSaving: true,
-                        });
                         objects = {};
                         _loop_1 = function (i, len) {
                             var field, fieldType, additionalData, columnInternalName, hiddenFieldName, fieldcolumnInternalName, value_1, uploadedImage;
-                            return __generator(this, function (_o) {
-                                switch (_o.label) {
+                            return __generator(this, function (_m) {
+                                switch (_m.label) {
                                     case 0:
                                         field = fields[i];
                                         fieldType = field.fieldType, additionalData = field.additionalData, columnInternalName = field.columnInternalName, hiddenFieldName = field.hiddenFieldName;
@@ -214,8 +216,8 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                             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",
+                                                    Label: (_d = (_c = (_b = value_1[0]) === null || _b === void 0 ? void 0 : _b.labels[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.id) !== null && _f !== void 0 ? _f : "11111111-1111-1111-1111-111111111111",
                                                     WssId: "-1",
                                                 };
                                             }
@@ -230,8 +232,8 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                             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",
+                                                    Label: (_h = (_g = value_1[0]) === null || _g === void 0 ? void 0 : _g.name) !== null && _h !== void 0 ? _h : "",
+                                                    TermGuid: (_k = (_j = value_1[0]) === null || _j === void 0 ? void 0 : _j.key) !== null && _k !== void 0 ? _k : "11111111-1111-1111-1111-111111111111",
                                                     WssId: "-1",
                                                 };
                                             }
@@ -247,9 +249,11 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                         }
                                         if (!(fieldType === "Thumbnail")) return [3 /*break*/, 3];
                                         if (!additionalData) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, this_1.uploadImage(additionalData)];
+                                        return [4 /*yield*/, this_1.uploadImage(additionalData, isCurrent)];
                                     case 1:
-                                        uploadedImage = _o.sent();
+                                        uploadedImage = _m.sent();
+                                        if (!isCurrent())
+                                            return [2 /*return*/, { value: void 0 }];
                                         objects[fieldcolumnInternalName] = JSON.stringify({
                                             type: "thumbnail",
                                             fileName: uploadedImage.Name,
@@ -259,20 +263,22 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                         return [3 /*break*/, 3];
                                     case 2:
                                         objects[fieldcolumnInternalName] = null;
-                                        _o.label = 3;
+                                        _m.label = 3;
                                     case 3: return [2 /*return*/];
                                 }
                             });
                         };
                         this_1 = this;
                         i = 0, len = fields.length;
-                        _m.label = 4;
+                        _l.label = 4;
                     case 4:
                         if (!(i < len)) return [3 /*break*/, 7];
                         return [5 /*yield**/, _loop_1(i, len)];
                     case 5:
-                        _m.sent();
-                        _m.label = 6;
+                        state_1 = _l.sent();
+                        if (typeof state_1 === "object")
+                            return [2 /*return*/, state_1.value];
+                        _l.label = 6;
                     case 6:
                         i++;
                         return [3 /*break*/, 4];
@@ -280,219 +286,204 @@ var DynamicFormBase = /** @class */ (function (_super) {
                         if (!onBeforeSubmit) return [3 /*break*/, 9];
                         return [4 /*yield*/, onBeforeSubmit(objects)];
                     case 8:
-                        isCancelled = _m.sent();
+                        isCancelled = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
                         if (isCancelled) {
                             this.setState({
                                 isSaving: false,
                             });
                             return [2 /*return*/];
                         }
-                        _m.label = 9;
+                        _l.label = 9;
                     case 9:
+                        if (!isCurrent())
+                            return [2 /*return*/];
                         apiError = void 0;
                         newETag = undefined;
-                        if (!listItemId) return [3 /*break*/, 14];
-                        _m.label = 10;
+                        if (!listItemId) return [3 /*break*/, 15];
+                        _l.label = 10;
                     case 10:
-                        _m.trys.push([10, 12, , 13]);
-                        return [4 /*yield*/, sp.web.lists
-                                .getById(listId)
-                                .items.getById(listItemId)
-                                .update(objects, this.state.etag)];
+                        _l.trys.push([10, 13, , 14]);
+                        return [4 /*yield*/, dataService.updateItem(listId, listItemId, objects, this.state.etag)];
                     case 11:
-                        iur = _m.sent();
-                        newETag = iur.data["odata.etag"];
-                        if (onSubmitted) {
-                            onSubmitted(iur.data, returnListItemInstanceOnSubmit !== false
-                                ? iur.item
-                                : undefined);
-                        }
-                        return [3 /*break*/, 13];
+                        iur = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        newETag = iur.reference.etag;
+                        return [4 /*yield*/, this.notifySubmitted(iur, onSubmitted, returnListItemReferenceOnSubmit)];
                     case 12:
-                        error_1 = _m.sent();
+                        _l.sent();
+                        return [3 /*break*/, 14];
+                    case 13:
+                        error_1 = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
                         apiError = error_1.message;
                         if (onSubmitError) {
                             onSubmitError(objects, error_1);
                         }
                         console.log("Error", error_1);
-                        return [3 /*break*/, 13];
-                    case 13: return [3 /*break*/, 32];
-                    case 14:
+                        return [3 /*break*/, 14];
+                    case 14: return [3 /*break*/, 30];
+                    case 15:
                         if (!(contentTypeId === undefined ||
                             contentTypeId === "" ||
                             (!contentTypeId.startsWith("0x0120") &&
-                                contentTypeId.startsWith("0x01")))) return [3 /*break*/, 20];
-                        if (!(fileSelectRendered === true)) return [3 /*break*/, 16];
-                        return [4 /*yield*/, this.addFileToLibrary(objects)];
-                    case 15:
-                        _m.sent();
-                        return [3 /*break*/, 19];
+                                contentTypeId.startsWith("0x01")))) return [3 /*break*/, 25];
+                        if (!(fileSelectRendered === true)) return [3 /*break*/, 20];
+                        _l.label = 16;
                     case 16:
-                        _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)];
+                        _l.trys.push([16, 18, , 19]);
+                        return [4 /*yield*/, this.addFileToLibrary(objects, dataService, isCurrent)];
                     case 17:
-                        iar = _m.sent();
-                        if (onSubmitted) {
-                            onSubmitted(iar.data, this.props.returnListItemInstanceOnSubmit !== false
-                                ? iar.item
-                                : undefined);
-                        }
+                        _l.sent();
                         return [3 /*break*/, 19];
                     case 18:
-                        error_2 = _m.sent();
+                        error_2 = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
                         apiError = error_2.message;
                         if (onSubmitError) {
                             onSubmitError(objects, error_2);
                         }
-                        console.log("Error", error_2);
                         return [3 /*break*/, 19];
-                    case 19: return [3 /*break*/, 32];
+                    case 19: return [3 /*break*/, 24];
                     case 20:
-                        if (!contentTypeId.startsWith("0x0120")) return [3 /*break*/, 32];
-                        _m.label = 21;
-                    case 21:
-                        _m.trys.push([21, 31, , 32]);
-                        idField = "ID";
+                        _l.trys.push([20, 23, , 24]);
                         contentTypeIdField = "ContentTypeId";
-                        return [4 /*yield*/, sp.web.lists.getById(listId)];
+                        // 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*/, dataService.addItem(listId, objects)];
+                    case 21:
+                        iar = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        return [4 /*yield*/, this.notifySubmitted(iar, onSubmitted, returnListItemReferenceOnSubmit)];
                     case 22:
-                        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 = _m.sent();
-                        _m.label = 25;
+                        _l.sent();
+                        return [3 /*break*/, 24];
+                    case 23:
+                        error_3 = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        apiError = error_3.message;
+                        if (onSubmitError) {
+                            onSubmitError(objects, error_3);
+                        }
+                        console.log("Error", error_3);
+                        return [3 /*break*/, 24];
+                    case 24: return [3 /*break*/, 30];
                     case 25:
-                        folder = _b;
-                        return [4 /*yield*/, folder.addSubFolderUsingPath(folderFileName)];
+                        if (!contentTypeId.startsWith("0x0120")) return [3 /*break*/, 30];
+                        _l.label = 26;
                     case 26:
-                        newFolder = _m.sent();
-                        return [4 /*yield*/, newFolder.listItemAllFields()];
+                        _l.trys.push([26, 29, , 30]);
+                        contentTypeIdField = "ContentTypeId";
+                        folderFileName = this.getFolderName(objects);
+                        objects[contentTypeIdField] = contentTypeId;
+                        return [4 /*yield*/, dataService.addFolder(listId, folderFileName, objects, folderPath)];
                     case 27:
-                        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; // eslint-disable-line @typescript-eslint/no-explicit-any
-                        return [4 /*yield*/, this.updateListItemRetry(library, folderId, objects)];
+                        iur = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        return [4 /*yield*/, this.notifySubmitted(iur, onSubmitted, returnListItemReferenceOnSubmit)];
                     case 28:
-                        iur = _m.sent();
-                        if (onSubmitted) {
-                            onSubmitted(iur.data, this.props.returnListItemInstanceOnSubmit !== false
-                                ? iur.item
-                                : undefined);
-                        }
+                        _l.sent();
                         return [3 /*break*/, 30];
-                    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 = _m.sent();
-                        apiError = error_3.message;
+                    case 29:
+                        error_4 = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        apiError = error_4.message;
                         if (onSubmitError) {
-                            onSubmitError(objects, error_3);
+                            onSubmitError(objects, error_4);
                         }
-                        console.log("Error", error_3);
-                        return [3 /*break*/, 32];
-                    case 32:
-                        if (!(listItemId && this.state.fieldCollection.some(function (f) { return f.isAppendOnly; }))) return [3 /*break*/, 34];
-                        return [4 /*yield*/, this._spService.getExtendedListFormData(listId, listItemId, this.webURL)];
-                    case 33:
-                        updatedExtendedInfo_1 = _m.sent();
+                        console.log("Error", error_4);
+                        return [3 /*break*/, 30];
+                    case 30:
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        if (!(listItemId && this.state.fieldCollection.some(function (f) { return f.isAppendOnly; }))) return [3 /*break*/, 32];
+                        return [4 /*yield*/, spService.getExtendedListFormData(listId, listItemId, webUrl)];
+                    case 31:
+                        updatedExtendedInfo_1 = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
                         this.setState(function (prevState) { return ({
                             fieldCollection: prevState.fieldCollection.map(function (field) {
                                 return field.isAppendOnly
                                     ? __assign(__assign({}, field), { notesAppendOnlyHistory: updatedExtendedInfo_1[field.columnInternalName], newValue: '', value: '' }) : field;
                             })
                         }); });
-                        _m.label = 34;
-                    case 34:
+                        _l.label = 32;
+                    case 32:
                         this.setState({
                             isSaving: false,
                             etag: newETag,
                             infoErrorMessages: apiError ? [{ type: MessageBarType.error, message: apiError }] : [],
                         });
-                        return [3 /*break*/, 36];
-                    case 35:
-                        error_4 = _m.sent();
+                        return [3 /*break*/, 35];
+                    case 33:
+                        error_5 = _l.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        this.setState({ isSaving: false, infoErrorMessages: [{ type: MessageBarType.error, message: error_5.message }] });
                         if (onSubmitError) {
-                            onSubmitError(null, error_4);
+                            onSubmitError(null, error_5);
                         }
-                        console.log("Error onSubmit", error_4);
-                        return [3 /*break*/, 36];
-                    case 36: return [2 /*return*/];
+                        console.error("Error onSubmit", error_5);
+                        return [3 /*break*/, 35];
+                    case 34:
+                        if (this._submissionVersion === operationVersion) {
+                            this._submissionVersion = undefined;
+                            if (isCurrent())
+                                this.setState({ isSaving: false });
+                        }
+                        return [7 /*endfinally*/];
+                    case 35: return [2 /*return*/];
                 }
             });
         }); };
         /**
          * Adds selected file to the library
          */
-        _this.addFileToLibrary = function (objects) { return __awaiter(_this, void 0, void 0, function () {
-            var selectedFile, _a, listId, contentTypeId, onSubmitted, onSubmitError, returnListItemInstanceOnSubmit, idField, contentTypeIdField, library, itemTitle, folder, _b, fileCreatedResult, _c, _d, _e, fields, fileId, iur, error_5;
-            return __generator(this, function (_f) {
-                switch (_f.label) {
+        _this.addFileToLibrary = function (objects, dataService, isCurrent) { return __awaiter(_this, void 0, void 0, function () {
+            var selectedFile, _a, listId, contentTypeId, onSubmitted, returnListItemReferenceOnSubmit, folderPath, contentTypeIdField, itemTitle, content, iur, error_6;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         selectedFile = this.state.selectedFile;
-                        _a = this.props, listId = _a.listId, contentTypeId = _a.contentTypeId, onSubmitted = _a.onSubmitted, onSubmitError = _a.onSubmitError, returnListItemInstanceOnSubmit = _a.returnListItemInstanceOnSubmit;
-                        if (!(selectedFile !== undefined)) return [3 /*break*/, 13];
-                        _f.label = 1;
+                        _a = this.props, listId = _a.listId, contentTypeId = _a.contentTypeId, onSubmitted = _a.onSubmitted, returnListItemReferenceOnSubmit = _a.returnListItemReferenceOnSubmit, folderPath = _a.folderPath;
+                        if (!(selectedFile !== undefined)) return [3 /*break*/, 6];
+                        _b.label = 1;
                     case 1:
-                        _f.trys.push([1, 12, , 13]);
-                        idField = "ID";
+                        _b.trys.push([1, 5, , 6]);
                         contentTypeIdField = "ContentTypeId";
-                        return [4 /*yield*/, sp.web.lists.getById(listId)];
-                    case 2:
-                        library = _f.sent();
                         itemTitle = selectedFile !== undefined && selectedFile.fileName !== undefined && selectedFile.fileName !== ""
                             ? selectedFile.fileName.replace(/["|*|:|<|>|?|/|\\||]/g, "_").trim() // Replace not allowed chars in folder name and trim empty spaces at the start or end.
                             : "";
-                        if (!!this.props.folderPath) return [3 /*break*/, 3];
-                        _b = library.rootFolder;
-                        return [3 /*break*/, 5];
-                    case 3: return [4 /*yield*/, this.getFolderByPath(this.props.folderPath, library.rootFolder)];
+                        objects[contentTypeIdField] = contentTypeId;
+                        return [4 /*yield*/, selectedFile.downloadFileContent()];
+                    case 2:
+                        content = _b.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        return [4 /*yield*/, dataService.addFile(listId, itemTitle, content, objects, folderPath)];
+                    case 3:
+                        iur = _b.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        return [4 /*yield*/, this.notifySubmitted(iur, onSubmitted, returnListItemReferenceOnSubmit)];
                     case 4:
-                        _b = _f.sent();
-                        _f.label = 5;
+                        _b.sent();
+                        return [3 /*break*/, 6];
                     case 5:
-                        folder = _b;
-                        _d = (_c = folder.files).addChunked;
-                        _e = [encodeURI(itemTitle)];
-                        return [4 /*yield*/, selectedFile.downloadFileContent()];
-                    case 6: return [4 /*yield*/, _d.apply(_c, _e.concat([_f.sent()]))];
-                    case 7:
-                        fileCreatedResult = _f.sent();
-                        return [4 /*yield*/, fileCreatedResult.file.listItemAllFields()];
-                    case 8:
-                        fields = _f.sent();
-                        if (!fields[idField]) return [3 /*break*/, 10];
-                        fileId = fields[idField];
-                        // Set the content type ID for the target item
-                        objects[contentTypeIdField] = contentTypeId;
-                        return [4 /*yield*/, this.updateListItemRetry(library, fileId, objects)];
-                    case 9:
-                        iur = _f.sent();
-                        if (onSubmitted) {
-                            onSubmitted(iur.data, returnListItemInstanceOnSubmit !== false
-                                ? iur.item
-                                : undefined);
-                        }
-                        return [3 /*break*/, 11];
-                    case 10: throw new Error("Unable to read the ID of the just created file");
-                    case 11: return [3 /*break*/, 13];
-                    case 12:
-                        error_5 = _f.sent();
-                        if (onSubmitError) {
-                            onSubmitError(objects, error_5);
-                        }
-                        console.log("Error", error_5);
-                        return [3 /*break*/, 13];
-                    case 13: return [2 /*return*/];
+                        error_6 = _b.sent();
+                        console.error("Error uploading document", error_6);
+                        throw error_6;
+                    case 6: return [2 /*return*/];
                 }
             });
         }); };
@@ -502,11 +493,16 @@ var DynamicFormBase = /** @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, useModernTaxonomyPicker, user, result, emails, index, element, user, result, validationErrors;
+            var operationVersion, isCurrent, dataService, fieldCol, field, useModernTaxonomyPicker, user, result, emails, index, element, user, result, validationErrors;
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
+                        if (this._unmounted || this._isLoading)
+                            return [2 /*return*/];
+                        operationVersion = this._operationVersion;
+                        isCurrent = function () { return !_this._unmounted && operationVersion === _this._operationVersion; };
+                        dataService = this._dataService;
                         fieldCol = cloneDeep(this.state.fieldCollection || []);
                         field = fieldCol.filter(function (element, i) {
                             return element.columnInternalName === internalName;
@@ -549,15 +545,17 @@ var DynamicFormBase = /** @class */ (function (_super) {
                         if (user.indexOf("@") === -1) {
                             user = newValue[0].loginName;
                         }
-                        return [4 /*yield*/, sp.web.ensureUser(user)];
+                        return [4 /*yield*/, dataService.ensureUser(user)];
                     case 1:
                         result = _a.sent();
-                        field.newValue = result.data.Id;
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        field.newValue = result.Id;
                         field.stringValue = user;
                         field.subPropertyValues = {
-                            id: result.data.Id,
-                            title: result.data.Title,
-                            email: result.data.Email,
+                            id: result.Id,
+                            title: result.Title,
+                            email: result.Email,
                         };
                         return [3 /*break*/, 3];
                     case 2:
@@ -578,10 +576,12 @@ var DynamicFormBase = /** @class */ (function (_super) {
                         if (user.indexOf("@") === -1) {
                             user = element.loginName;
                         }
-                        return [4 /*yield*/, sp.web.ensureUser(user)];
+                        return [4 /*yield*/, dataService.ensureUser(user)];
                     case 5:
                         result = _a.sent();
-                        field.newValue.push(result.data.Id);
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        field.newValue.push(result.Id);
                         emails.push(user);
                         return [3 /*break*/, 7];
                     case 6:
@@ -597,11 +597,11 @@ var DynamicFormBase = /** @class */ (function (_super) {
                         validationErrors = __assign({}, this.state.validationErrors);
                         if (validationErrors[field.columnInternalName])
                             delete validationErrors[field.columnInternalName];
-                        this.setState({
+                        this.setState(function () { return isCurrent() ? {
                             fieldCollection: fieldCol,
                             validationErrors: validationErrors
-                        }, function () {
-                            if (validate)
+                        } : null; }, function () {
+                            if (isCurrent() && validate)
                                 _this.performValidation();
                         });
                         return [2 /*return*/];
@@ -732,25 +732,50 @@ var DynamicFormBase = /** @class */ (function (_super) {
          * Invoked when component first mounts, loads information about the SharePoint list, fields and list item
          */
         _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, extendedInfo, spListItem, appendOnlyFields, tempFields, sortedFields, installedLanguages, error_6;
+            var loadVersion, isCurrent, assertCurrent, props, spService, dataService, webUrl, loadContext, listId, listItemId, disabledFields, respectETag, customIcons, onListItemLoaded, fieldOrder, contentTypeId, listInfo, additionalInfo, numberFields, validationFormulas_1, contentTypeName, clientValidationFormulas_1, headerJSON_1, footerJSON_1, bodySections_1, customFormatInfo, item, isEditingItem, etag_1, extendedInfo, appendOnlyFields, tempFields, sortedFields_1, installedLanguages_1, error_7;
             var _this = this;
-            var _b, _c;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.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;
-                        _d.label = 1;
+                        this._isLoading = true;
+                        loadVersion = ++this._loadVersion;
+                        isCurrent = function () { return !_this._unmounted && loadVersion === _this._loadVersion; };
+                        assertCurrent = function () {
+                            if (!isCurrent()) {
+                                var error = new Error('The form load is no longer current.');
+                                error.name = 'AbortError';
+                                throw error;
+                            }
+                        };
+                        props = this.props;
+                        spService = this._spService;
+                        dataService = this._dataService;
+                        webUrl = this.webURL;
+                        loadContext = {
+                            props: props,
+                            spService: spService,
+                            webUrl: webUrl,
+                            assertCurrent: assertCurrent,
+                            taxonomyService: this._taxonomyService,
+                            installedLanguages: this.state.installedLanguages
+                        };
+                        listId = props.listId, listItemId = props.listItemId, disabledFields = props.disabledFields, respectETag = props.respectETag, customIcons = props.customIcons, onListItemLoaded = props.onListItemLoaded, fieldOrder = props.fieldOrder;
+                        contentTypeId = props.contentTypeId;
+                        _b.label = 1;
                     case 1:
-                        _d.trys.push([1, 12, , 13]);
-                        return [4 /*yield*/, this._spService.getListFormRenderInfo(listId, this.webURL)];
+                        _b.trys.push([1, 12, , 13]);
+                        assertCurrent();
+                        return [4 /*yield*/, spService.getListFormRenderInfo(listId, webUrl)];
                     case 2:
-                        listInfo = _d.sent();
-                        return [4 /*yield*/, this._spService.getAdditionalListFormFieldInfo(listId, this.webURL)];
+                        listInfo = _b.sent();
+                        assertCurrent();
+                        return [4 /*yield*/, spService.getAdditionalListFormFieldInfo(listId, webUrl)];
                     case 3:
-                        additionalInfo = _d.sent();
+                        additionalInfo = _b.sent();
+                        assertCurrent();
                         numberFields = additionalInfo === null || additionalInfo === void 0 ? void 0 : additionalInfo.filter(function (f) { return f.TypeAsString === "Number" || f.TypeAsString === "Currency"; });
-                        validationFormulas = additionalInfo.reduce(function (prev, cur) {
+                        validationFormulas_1 = additionalInfo.reduce(function (prev, cur) {
                             if (!prev[cur.InternalName] && cur.ValidationFormula) {
                                 prev[cur.InternalName] = {
                                     ValidationFormula: cur.ValidationFormula,
@@ -764,7 +789,7 @@ var DynamicFormBase = /** @class */ (function (_super) {
                             contentTypeId = Object.keys(listInfo.ContentTypeIdToNameMap)[0];
                         }
                         contentTypeName = listInfo.ContentTypeIdToNameMap[contentTypeId];
-                        clientValidationFormulas = listInfo.ClientForms.Edit[contentTypeName].reduce(function (prev, cur) {
+                        clientValidationFormulas_1 = listInfo.ClientForms.Edit[contentTypeName].reduce(function (prev, cur) {
                             if (cur.ClientValidationFormula) {
                                 prev[cur.InternalName] = {
                                     ValidationFormula: cur.ClientValidationFormula,
@@ -773,147 +798,118 @@ var DynamicFormBase = /** @class */ (function (_super) {
                             }
                             return prev;
                         }, {});
-                        headerJSON = void 0, footerJSON = void 0;
-                        bodySections = void 0;
                         if (listInfo.ClientFormCustomFormatter && listInfo.ClientFormCustomFormatter[contentTypeId]) {
                             customFormatInfo = JSON.parse(listInfo.ClientFormCustomFormatter[contentTypeId]);
-                            bodySections = (_b = customFormatInfo.bodyJSONFormatter) === null || _b === void 0 ? void 0 : _b.sections;
-                            headerJSON = customFormatInfo.headerJSONFormatter;
-                            footerJSON = customFormatInfo.footerJSONFormatter;
+                            bodySections_1 = (_a = customFormatInfo.bodyJSONFormatter) === null || _a === void 0 ? void 0 : _a.sections;
+                            headerJSON_1 = customFormatInfo.headerJSONFormatter;
+                            footerJSON_1 = customFormatInfo.footerJSONFormatter;
                         }
-                        spList = sp.web.lists.getById(listId);
                         item = null;
                         isEditingItem = listItemId !== undefined && listItemId !== null && listItemId !== 0;
-                        etag = undefined;
+                        etag_1 = undefined;
                         extendedInfo = undefined;
                         if (!isEditingItem) return [3 /*break*/, 8];
-                        spListItem = spList.items.getById(listItemId);
-                        if (contentTypeId.startsWith("0x0120") || contentTypeId.startsWith("0x0101")) {
-                            spListItem.select("*", "FileLeafRef"); // Explainer: FileLeafRef is not loaded by default. Load it to show the file/folder name in the field.
-                        }
-                        return [4 /*yield*/, spListItem.get().catch(function (err) { return _this.updateFormMessages(MessageBarType.error, err.message); })];
+                        return [4 /*yield*/, dataService.getItem(listId, listItemId, contentTypeId.startsWith("0x0120") || contentTypeId.startsWith("0x0101"))];
                     case 4:
-                        item = _d.sent();
+                        item = _b.sent();
+                        assertCurrent();
                         if (!onListItemLoaded) return [3 /*break*/, 6];
                         return [4 /*yield*/, onListItemLoaded(item)];
                     case 5:
-                        _d.sent();
-                        _d.label = 6;
+                        _b.sent();
+                        assertCurrent();
+                        _b.label = 6;
                     case 6:
                         if (respectETag !== false) {
-                            etag = item["odata.etag"];
+                            etag_1 = typeof item["odata.etag"] === 'string' ? item["odata.etag"] : undefined;
                         }
                         appendOnlyFields = listInfo.ClientForms.Edit[contentTypeName]
                             .filter(function (field) { return field.FieldType === 'Note' && field.AppendOnly; });
                         if (!(appendOnlyFields.length > 0)) return [3 /*break*/, 8];
-                        return [4 /*yield*/, this._spService.getExtendedListFormData(listId, listItemId, this.webURL)];
+                        return [4 /*yield*/, spService.getExtendedListFormData(listId, listItemId, webUrl)];
                     case 7:
-                        extendedInfo = _d.sent();
-                        _d.label = 8;
-                    case 8: return [4 /*yield*/, this.buildFieldCollection(listInfo, contentTypeName, item, numberFields, listId, listItemId, disabledFields, customIcons, extendedInfo)];
+                        extendedInfo = _b.sent();
+                        assertCurrent();
+                        _b.label = 8;
+                    case 8: return [4 /*yield*/, this.buildFieldCollection(listInfo, contentTypeName, item, numberFields, listId, listItemId, disabledFields, customIcons, extendedInfo, loadContext)];
                     case 9:
-                        tempFields = _d.sent();
-                        sortedFields = ((_c = this.props.fieldOrder) === null || _c === void 0 ? void 0 : _c.length) > 0
-                            ? this.sortFields(tempFields, this.props.fieldOrder)
+                        tempFields = _b.sent();
+                        assertCurrent();
+                        sortedFields_1 = (fieldOrder === null || fieldOrder === void 0 ? void 0 : fieldOrder.length) > 0
+                            ? this.sortFields(tempFields, fieldOrder)
                             : tempFields;
-                        installedLanguages = void 0;
                         if (!(tempFields.filter(function (f) { return f.fieldType === "Currency"; }).length > 0)) return [3 /*break*/, 11];
-                        return [4 /*yield*/, sp.web.regionalSettings.getInstalledLanguages()];
+                        return [4 /*yield*/, dataService.getInstalledLanguages()];
                     case 10:
-                        installedLanguages = _d.sent();
-                        _d.label = 11;
+                        installedLanguages_1 = _b.sent();
+                        assertCurrent();
+                        _b.label = 11;
                     case 11:
-                        this.setState({
+                        this.setState(function () { return isCurrent() ? {
                             contentTypeId: contentTypeId,
-                            clientValidationFormulas: clientValidationFormulas,
+                            clientValidationFormulas: clientValidationFormulas_1,
                             customFormatting: {
-                                header: headerJSON,
-                                body: bodySections,
-                                footer: footerJSON
+                                header: headerJSON_1,
+                                body: bodySections_1,
+                                footer: footerJSON_1
                             },
-                            etag: etag,
-                            fieldCollection: sortedFields,
-                            installedLanguages: installedLanguages,
-                            validationFormulas: validationFormulas
-                        }, function () { return _this.performValidation(true); });
+                            etag: etag_1,
+                            fieldCollection: sortedFields_1,
+                            installedLanguages: installedLanguages_1,
+                            validationFormulas: validationFormulas_1
+                        } : null; }, function () {
+                            if (isCurrent()) {
+                                _this._isLoading = false;
+                                _this.performValidation(true);
+                            }
+                        });
                         return [3 /*break*/, 13];
                     case 12:
-                        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);
+                        error_7 = _b.sent();
+                        if (!isCurrent())
+                            return [2 /*return*/];
+                        this.updateFormMessages(MessageBarType.error, 'An error occurred while loading: ' + error_7.message);
+                        console.error("An error occurred while loading DynamicForm", error_7);
                         return [2 /*return*/, null];
                     case 13: return [2 /*return*/];
                 }
             });
         }); };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        _this.getTermsForModernTaxonomyPicker = function (termsetId, terms) { return __awaiter(_this, void 0, void 0, function () {
-            var selectedTerms;
+        _this.getTermsForModernTaxonomyPicker = function (termsetId, terms, loadContext) { return __awaiter(_this, void 0, void 0, function () {
             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; })];
+                if (!terms || terms.length === 0) {
+                    return [2 /*return*/, []];
                 }
+                return [2 /*return*/, Promise.all(terms.map(function (fetchedterm) { return __awaiter(_this, void 0, void 0, function () {
+                        var term;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    loadContext.assertCurrent();
+                                    if (!(fetchedterm === null || fetchedterm === void 0 ? void 0 : fetchedterm.TermGuid)) {
+                                        throw new Error('A managed metadata value has no term ID.');
+                                    }
+                                    return [4 /*yield*/, loadContext.taxonomyService.getTermById(Guid.parse(termsetId), Guid.parse(fetchedterm.TermGuid))];
+                                case 1:
+                                    term = _a.sent();
+                                    loadContext.assertCurrent();
+                                    if (!term)
+                                        throw new Error('The taxonomy field contains an empty term ID.');
+                                    return [2 /*return*/, term];
+                            }
+                        });
+                    }); }))];
             });
         }); };
-        _this.uploadImage = function (file) { return __awaiter(_this, void 0, void 0, function () {
-            var _a, listId, listItemId, fileInstance, buffer;
+        _this.uploadImage = function (file, isCurrent) { return __awaiter(_this, void 0, void 0, function () {
+            var _a, listId, listItemId, service, webUrl, fileInstance, buffer;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         _a = this.props, listId = _a.listId, listItemId = _a.listItemId;
+                        service = this._spService;
+                        webUrl = this.webURL;
                         if (!file.fileAbsoluteUrl) return [3 /*break*/, 1];
                         return [2 /*return*/, {
                                 Name: file.fileName,
@@ -923,10 +919,14 @@ var DynamicFormBase = /** @class */ (function (_super) {
                     case 1: return [4 /*yield*/, file.downloadFileContent()];
                     case 2:
                         fileInstance = _b.sent();
+                        if (!isCurrent())
+                            throw new Error('The form target changed before image upload.');
                         return [4 /*yield*/, this.getImageArrayBuffer(fileInstance)];
                     case 3:
                         buffer = _b.sent();
-                        return [4 /*yield*/, this._spService.uploadImage(listId, listItemId, file.fileName, buffer, undefined, this.webURL)];
+                        if (!isCurrent())
+                            throw new Error('The form target changed before image upload.');
+                        return [4 /*yield*/, service.uploadImage(listId, listItemId, file.fileName, buffer, undefined, webUrl)];
                     case 4: return [2 /*return*/, _b.sent()];
                 }
             });
@@ -1029,95 +1029,10 @@ var DynamicFormBase = /** @class */ (function (_super) {
                 folderNameValue = objects[titleField];
             return folderNameValue.replace(/["|*|:|<|>|?|/|\\||]/g, "_").trim();
         };
-        /**
-         * Returns a pnp/sp folder object based on the folderPath and the library the folder is in.
-         * The folderPath can be a server relative path, but should be in the same library.
-         * @param folderPath The path to the folder coming from the component properties
-         * @param rootFolder The rootFolder object of the library
-         * @returns
-         */
-        _this.getFolderByPath = function (folderPath, rootFolder) { return __awaiter(_this, void 0, void 0, function () {
-            var libraryFolder, normalizedFolderPath, serverRelativeLibraryPath, folder;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, rootFolder()];
-                    case 1:
-                        libraryFolder = _a.sent();
-                        normalizedFolderPath = decodeURIComponent(folderPath).toLowerCase().replace(/\/$/, "");
-                        serverRelativeLibraryPath = libraryFolder.ServerRelativeUrl.toLowerCase().replace(/\/$/, "");
-                        // In case of a server relative path in the same library, return the folder
-                        if ("".concat(normalizedFolderPath, "/").startsWith("".concat(serverRelativeLibraryPath, "/"))) {
-                            return [2 /*return*/, sp.web.getFolderByServerRelativePath(normalizedFolderPath)];
-                        }
-                        folder = sp.web.getFolderByServerRelativePath("".concat(serverRelativeLibraryPath, "/").concat(normalizedFolderPath));
-                        return [2 /*return*/, folder];
-                }
-            });
-        }); };
-        /**
-         * Updates a list item and retries the operation if a 409 (Save Conflict) was thrown.
-         * @param list The list/library on which to execute the operation
-         * @param itemId The item ID
-         * @param objects The values to update the item with
-         * @param retry The retry index
-         * @returns An update result
-         */
-        _this.updateListItemRetry = function (list_1, itemId_1, objects_1) {
-            var args_1 = [];
-            for (var _i = 3; _i < arguments.length; _i++) {
-                args_1[_i - 3] = arguments[_i];
-            }
-            return __awaiter(_this, __spreadArray([list_1, itemId_1, objects_1], args_1, true), void 0, function (list, itemId, objects, retry) {
-                var error_8;
-                if (retry === void 0) { retry = 0; }
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 2, , 6]);
-                            return [4 /*yield*/, list.items.getById(itemId).update(objects)];
-                        case 1: return [2 /*return*/, _a.sent()];
-                        case 2:
-                            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_8;
-                        case 6: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        // Initialize pnp sp
-        if (_this.props.webAbsoluteUrl) {
-            sp.setup({
-                sp: {
-                    headers: {
-                        Accept: "application/json;odata=verbose",
-                    },
-                    baseUrl: _this.props.webAbsoluteUrl,
-                },
-            });
-        }
-        else {
-            sp.setup({
-                spfxContext: { pageContext: _this.props.context.pageContext },
-            });
-        }
-        // Initialize taxonomy service
-        _this._taxonomyService = new SPTaxonomyService(_this.props.context);
+        _this._dataService = new DynamicFormService(_this.props.context, _this.webURL);
+        _this._taxonomyService = new SPTaxonomyService(_this.props.context, _this.webURL);
         // Initialize state
-        _this.state = {
-            infoErrorMessages: [],
-            fieldCollection: [],
-            validationFormulas: {},
-            clientValidationFormulas: {},
-            validationErrors: {},
-            hiddenByFormula: [],
-            isValidationErrorDialogOpen: false,
-        };
+        _this.state = _this.emptyTargetState();
         // Get SPService Factory
         _this._spService = _this.props.webAbsoluteUrl
             ? new SPservice(_this.props.context, _this.props.webAbsoluteUrl)
@@ -1128,6 +1043,33 @@ var DynamicFormBase = /** @class */ (function (_super) {
         _this._customFormatter = new CustomFormattingHelper(_this._formulaEvaluation);
         return _this;
     }
+    Object.defineProperty(DynamicFormBase.prototype, "webURL", {
+        get: function () {
+            return this.props.webAbsoluteUrl || this.props.context.pageContext.web.absoluteUrl;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DynamicFormBase.prototype.emptyTargetState = function () {
+        return {
+            infoErrorMessages: [],
+            fieldCollection: [],
+            validationFormulas: {},
+            clientValidationFormulas: {},
+            validationErrors: {},
+            hiddenByFormula: [],
+            isValidationErrorDialogOpen: false,
+            isSaving: false,
+            selectedFile: undefined,
+            missingSelectedFile: false,
+            contentTypeId: undefined,
+            etag: undefined,
+            installedLanguages: undefined,
+            customFormatting: undefined,
+            headerContent: undefined,
+            footerContent: undefined
+        };
+    };
     /**
      * Updates the ETag stored in the component's state.
      * This is useful when the list item has been modified externally (e.g., by adding/removing attachments)
@@ -1157,14 +1099,31 @@ var DynamicFormBase = /** @class */ (function (_super) {
     };
     DynamicFormBase.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _this = this;
-        if (!isEqual(prevProps, this.props)) {
+        var targetChanged = prevProps.context !== this.props.context ||
+            prevProps.webAbsoluteUrl !== this.props.webAbsoluteUrl ||
+            prevProps.listId !== this.props.listId || prevProps.listItemId !== this.props.listItemId;
+        if (targetChanged) {
+            this._isLoading = true;
+            this._operationVersion++;
+            this._submissionVersion = undefined;
+            this._loadVersion++;
+            this._dataService.dispose();
+            this._taxonomyService.dispose();
+            this._dataService = new DynamicFormService(this.props.context, this.webURL);
+            this._taxonomyService = new SPTaxonomyService(this.props.context, this.webURL);
+            this._spService = new SPservice(this.props.context, this.webURL);
+            this._formulaEvaluation = new FormulaEvaluation(this.props.context, this.webURL);
+            this._customFormatter = new CustomFormattingHelper(this._formulaEvaluation);
+        }
+        if (targetChanged || !isEqual(prevProps, this.props)) {
             // Props have changed due to parent component or workbench config, reset state
-            this.setState({
+            this.setState(targetChanged ? this.emptyTargetState() : {
                 infoErrorMessages: [], // Reset info/error messages
-                validationErrors: {} // Reset validation errors
+                validationErrors: {}, // Reset validation errors
+                isSaving: this.state.isSaving
             }, function () {
                 // If listId or listItemId have changed, reload list information
-                if (prevProps.listId !== _this.props.listId || prevProps.listItemId !== _this.props.listItemId) {
+                if (targetChanged) {
                     _this.getListInformation()
                         .then(function () {
                         /* no-op; */
@@ -1183,6 +1142,14 @@ var DynamicFormBase = /** @class */ (function (_super) {
     /**
      * Default React component render method
      */
+    DynamicFormBase.prototype.componentWillUnmount = function () {
+        this._unmounted = true;
+        this._operationVersion++;
+        this._submissionVersion = undefined;
+        this._loadVersion++;
+        this._dataService.dispose();
+        this._taxonomyService.dispose();
+    };
     DynamicFormBase.prototype.render = function () {
         var _a;
         var _this = this;
@@ -1260,6 +1227,29 @@ var DynamicFormBase = /** @class */ (function (_super) {
         newMessages.push({ type: type, message: message });
         this.setState({ infoErrorMessages: newMessages });
     };
+    DynamicFormBase.prototype.notifySubmitted = function (result, onSubmitted, returnReference) {
+        return __awaiter(this, void 0, void 0, function () {
+            var error_8;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!onSubmitted)
+                            return [2 /*return*/];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, onSubmitted(result.data, returnReference !== false ? result.reference : undefined)];
+                    case 2:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_8 = _a.sent();
+                        throw new DynamicFormSaveError(result.reference, error_8, 'callback');
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
     /**
      * Builds a collection of fields to be rendered in the form
      * @param listInfo Data returned by RenderListDataAsStream with RenderOptions = 64 (ClientFormSchema)
@@ -1272,22 +1262,24 @@ var DynamicFormBase = /** @class */ (function (_super) {
      * @returns
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    DynamicFormBase.prototype.buildFieldCollection = function (listInfo, contentTypeName, item, numberFields, listId, listItemId, disabledFields, customIcons, extendedInfo) {
+    DynamicFormBase.prototype.buildFieldCollection = function (listInfo, contentTypeName, item, numberFields, listId, listItemId, disabledFields, customIcons, extendedInfo, loadContext) {
         return __awaiter(this, void 0, void 0, function () {
-            var useModernTaxonomyPicker, tempFields, order, hiddenFields, defaultDayOfWeek, _loop_3, this_2, i, len;
+            var props, spService, taxonomyService, webUrl, assertCurrent, 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;
+                        props = loadContext.props, spService = loadContext.spService, taxonomyService = loadContext.taxonomyService, webUrl = loadContext.webUrl, assertCurrent = loadContext.assertCurrent;
+                        useModernTaxonomyPicker = props.useModernTaxonomyPicker;
                         tempFields = [];
                         order = 0;
-                        hiddenFields = this.props.hiddenFields !== undefined ? this.props.hiddenFields : [];
+                        hiddenFields = props.hiddenFields !== undefined ? props.hiddenFields : [];
                         defaultDayOfWeek = 0;
                         _loop_3 = function (i, len) {
-                            var field, hiddenName, termSetId, anchorId, lookupListId, lookupField, choices_1, defaultValue, value, stringValue, subPropertyValues, richText, appendOnly, dateFormat, principalType, cultureName, minValue, maxValue, showAsPercentage, selectedTags_1, choiceType, notesAppendOnlyHistory, fieldName, numberField, userEmails, _b, _c, response, term, termId, term, _selectedTags, _selectedTags, response;
-                            return __generator(this, function (_d) {
-                                switch (_d.label) {
+                            var field, hiddenName, termSetId, anchorId, lookupListId, lookupField, choices_1, defaultValue, value, stringValue, subPropertyValues, richText, appendOnly, dateFormat, principalType, cultureName, minValue, maxValue, showAsPercentage, selectedTags_1, choiceType, notesAppendOnlyHistory, fieldName, numberField, userEmails, userEmail, response, term, termId, term, _selectedTags, _selectedTags, response, regionalSettings;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
                                     case 0:
+                                        assertCurrent();
                                         field = listInfo.ClientForms.Edit[contentTypeName][i];
                                         if (!(hiddenFields.indexOf(field.InternalName) < 0)) return [3 /*break*/, 32];
                                         if (!(field.Hidden === false)) return [3 /*break*/, 32];
@@ -1360,16 +1352,17 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                             }
                                             showAsPercentage = field.ShowAsPercentage;
                                             if (field.FieldType === "Currency") {
-                                                cultureName = this_2.cultureNameLookup(numberField.CurrencyLocaleId);
+                                                cultureName = this_2.cultureNameLookup(numberField.CurrencyLocaleId, loadContext);
                                             }
                                         }
                                         if (!(field.FieldType === "Lookup" || field.FieldType === "LookupMulti")) return [3 /*break*/, 3];
                                         lookupListId = field.LookupListId;
                                         lookupField = field.LookupFieldName;
                                         if (!(item !== null)) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, this_2._spService.getLookupValues(listId, listItemId, field.InternalName, lookupField, this_2.webURL)];
+                                        return [4 /*yield*/, spService.getLookupValues(listId, listItemId, field.InternalName, lookupField, webUrl)];
                                     case 1:
-                                        value = _d.sent();
+                                        value = _b.sent();
+                                        assertCurrent();
                                         stringValue = value === null || value === void 0 ? void 0 : value.map(function (dv) { return dv.key + ';#' + dv.name; }).join(';#');
                                         if (item[field.InternalName + "Id"]) {
                                             subPropertyValues.id = item[field.InternalName + "Id"];
@@ -1379,15 +1372,16 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                         return [3 /*break*/, 3];
                                     case 2:
                                         value = [];
-                                        _d.label = 3;
+                                        _b.label = 3;
                                     case 3:
                                         if (!(field.FieldType === "User")) return [3 /*break*/, 7];
                                         if (!(item !== null)) return [3 /*break*/, 5];
                                         userEmails = [];
-                                        _c = (_b = userEmails).push;
-                                        return [4 /*yield*/, this_2._spService.getUserUPNFromFieldValue(listId, listItemId, field.InternalName, this_2.webURL)];
+                                        return [4 /*yield*/, spService.getUserUPNFromFieldValue(listId, listItemId, field.InternalName, webUrl)];
                                     case 4:
-                                        _c.apply(_b, [(_d.sent()) + ""]);
+                                        userEmail = _b.sent();
+                                        assertCurrent();
+                                        userEmails.push(userEmail + "");
                                         value = userEmails;
                                         stringValue = userEmails === null || userEmails === void 0 ? void 0 : userEmails.map(function (dv) { return dv.split('/').shift(); }).join(';');
                                         if (item[field.InternalName + "Id"]) {
@@ -1398,44 +1392,49 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                         return [3 /*break*/, 6];
                                     case 5:
                                         value = [];
-                                        _d.label = 6;
+                                        _b.label = 6;
                                     case 6:
                                         principalType = field.PrincipalAccountType;
-                                        _d.label = 7;
+                                        _b.label = 7;
                                     case 7:
                                         if (!(field.FieldType === "UserMulti")) return [3 /*break*/, 11];
                                         if (!(item !== null)) return [3 /*break*/, 9];
-                                        return [4 /*yield*/, this_2._spService.getUsersUPNFromFieldValue(listId, listItemId, field.InternalName, this_2.webURL)];
+                                        return [4 /*yield*/, spService.getUsersUPNFromFieldValue(listId, listItemId, field.InternalName, webUrl)];
                                     case 8:
-                                        value = _d.sent();
+                                        value = _b.sent();
+                                        assertCurrent();
                                         stringValue = value === null || value === void 0 ? void 0 : value.map(function (dv) { return dv.split('/').pop(); }).join(';');
                                         return [3 /*break*/, 10];
                                     case 9:
                                         value = [];
-                                        _d.label = 10;
+                                        _b.label = 10;
                                     case 10:
                                         principalType = field.PrincipalAccountType;
-                                        _d.label = 11;
+                                        _b.label = 11;
                                     case 11:
                                         if (!useModernTaxonomyPicker) return [3 /*break*/, 24];
                                         if (!(field.FieldType === "TaxonomyFieldType")) return [3 /*break*/, 18];
                                         termSetId = field.TermSetId;
                                         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)];
+                                        return [4 /*yield*/, spService.getSingleManagedMetadataLabel(listId, listItemId, field.InternalName, webUrl)];
                                     case 12:
-                                        response = _d.sent();
+                                        response = _b.sent();
+                                        assertCurrent();
                                         if (!response) return [3 /*break*/, 14];
-                                        return [4 /*yield*/, this_2._taxonomyService.getTermById(Guid.parse(field.TermSetId), Guid.parse(response.TermID))];
+                                        return [4 /*yield*/, taxonomyService.getTermById(Guid.parse(field.TermSetId), Guid.parse(response.TermID))];
                                     case 13:
-                                        term = _d.sent();
+                                        term = _b.sent();
+                                        assertCurrent();
+                                        if (!term)
+                                            throw new Error('The taxonomy field contains an empty term ID.');
                                         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;
+                                        _b.label = 14;
                                     case 14: return [3 /*break*/, 17];
                                     case 15:
                                         if (!(defaultValue !== "")) return [3 /*break*/, 17];
@@ -1444,24 +1443,28 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                             key: termId,
                                             name: defaultValue.split("|")[0].split("#")[1],
                                         });
-                                        return [4 /*yield*/, this_2._taxonomyService.getTermById(Guid.parse(field.TermSetId), Guid.parse(termId))];
+                                        return [4 /*yield*/, taxonomyService.getTermById(Guid.parse(field.TermSetId), Guid.parse(termId))];
                                     case 16:
-                                        term = _d.sent();
+                                        term = _b.sent();
+                                        assertCurrent();
+                                        if (!term)
+                                            throw new Error('The taxonomy field contains an empty term ID.');
                                         value = term; //selectedTags;
-                                        _d.label = 17;
+                                        _b.label = 17;
                                     case 17:
                                         if (defaultValue === "")
                                             defaultValue = null;
-                                        _d.label = 18;
+                                        _b.label = 18;
                                     case 18:
                                         if (!(field.FieldType === "TaxonomyFieldTypeMulti")) return [3 /*break*/, 23];
                                         hiddenName = field.HiddenListInternalName;
                                         termSetId = field.TermSetId;
                                         anchorId = field.AnchorId !== Guid.empty.toString() ? field.AnchorId : null;
                                         if (!(item && item[field.InternalName])) return [3 /*break*/, 20];
-                                        return [4 /*yield*/, this_2.getTermsForModernTaxonomyPicker(field.TermSetId, item[field.InternalName])];
+                                        return [4 /*yield*/, this_2.getTermsForModernTaxonomyPicker(field.TermSetId, item[field.InternalName], loadContext)];
                                     case 19:
-                                        _selectedTags = _d.sent();
+                                        _selectedTags = _b.sent();
+                                        assertCurrent();
                                         // item[field.InternalName].forEach((element) => {
                                         //   selectedTags.push({
                                         //     key: element.TermGuid,
@@ -1483,26 +1486,28 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                         return [4 /*yield*/, this_2.getTermsForModernTaxonomyPicker(field.TermSetId, selectedTags_1.map(function (dv) { return ({
                                                 Label: dv.name,
                                                 TermGuid: dv.key
-                                            }); }))];
+                                            }); }), loadContext)];
                                     case 21:
-                                        _selectedTags = _d.sent();
+                                        _selectedTags = _b.sent();
+                                        assertCurrent();
                                         //value = selectedTags;
                                         value = _selectedTags;
                                         stringValue = selectedTags_1 === null || selectedTags_1 === void 0 ? void 0 : selectedTags_1.map(function (dv) { return dv.key + ';#' + dv.name; }).join(';#');
-                                        _d.label = 22;
+                                        _b.label = 22;
                                     case 22:
                                         if (defaultValue === "")
                                             defaultValue = null;
-                                        _d.label = 23;
+                                        _b.label = 23;
                                     case 23: return [3 /*break*/, 29];
                                     case 24:
                                         if (!(field.FieldType === "TaxonomyFieldType")) return [3 /*break*/, 28];
                                         termSetId = field.TermSetId;
                                         anchorId = field.AnchorId;
                                         if (!(item !== null)) return [3 /*break*/, 26];
-                                        return [4 /*yield*/, this_2._spService.getSingleManagedMetadataLabel(listId, listItemId, field.InternalName, this_2.webURL)];
+                                        return [4 /*yield*/, spService.getSingleManagedMetadataLabel(listId, listItemId, field.InternalName, webUrl)];
                                     case 25:
-                                        response = _d.sent();
+                                        response = _b.sent();
+                                        assertCurrent();
                                         if (response) {
                                             selectedTags_1.push({
                                                 key: response.TermID,
@@ -1520,11 +1525,11 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                             });
                                             value = selectedTags_1;
                                         }
-                                        _d.label = 27;
+                                        _b.label = 27;
                                     case 27:
                                         if (defaultValue === "")
                                             defaultValue = null;
-                                        _d.label = 28;
+                                        _b.label = 28;
                                     case 28:
                                         if (field.FieldType === "TaxonomyFieldTypeMulti") {
                                             hiddenName = field.HiddenListInternalName;
@@ -1567,7 +1572,7 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                                     defaultValue = null;
                                             }
                                         }
-                                        _d.label = 29;
+                                        _b.label = 29;
                                     case 29:
                                         if (!(field.FieldType === "DateTime")) return [3 /*break*/, 31];
                                         if (item !== null && item[fieldName]) {
@@ -1581,10 +1586,12 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                             defaultValue = new Date(defaultValue);
                                         }
                                         dateFormat = field.DisplayFormat === 1 ? "DateTime" : "DateOnly";
-                                        return [4 /*yield*/, this_2._spService.getRegionalWebSettings(this_2.webURL)];
+                                        return [4 /*yield*/, spService.getRegionalWebSettings(webUrl)];
                                     case 30:
-                                        defaultDayOfWeek = (_d.sent()).FirstDayOfWeek;
-                                        _d.label = 31;
+                                        regionalSettings = _b.sent();
+                                        assertCurrent();
+                                        defaultDayOfWeek = regionalSettings.FirstDayOfWeek;
+                                        _b.label = 31;
                                     case 31:
                                         // Setup Thumbnail, Location and Boolean fields
                                         if (field.FieldType === "Thumbnail") {
@@ -1622,8 +1629,8 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                             fieldType: field.FieldType,
                                             // fieldTitle: field.Title,
                                             defaultValue: defaultValue,
-                                            context: this_2.props.context,
-                                            disabled: this_2.props.disabled ||
+                                            context: props.context,
+                                            disabled: props.disabled ||
                                                 (disabledFields &&
                                                     disabledFields.indexOf(field.InternalName) > -1),
                                             // listId: this.props.listId,
@@ -1650,7 +1657,7 @@ var DynamicFormBase = /** @class */ (function (_super) {
                                         });
                                         // This may not be necessary now using RenderListDataAsStream
                                         tempFields.sort(function (a, b) { return a.Order - b.Order; });
-                                        _d.label = 32;
+                                        _b.label = 32;
                                     case 32: return [2 /*return*/];
                                 }
                             });
@@ -1672,12 +1679,12 @@ var DynamicFormBase = /** @class */ (function (_super) {
             });
         });
     };
-    DynamicFormBase.prototype.cultureNameLookup = function (lcid) {
-        var _a, _b;
-        var pageCulture = this.props.context.pageContext.cultureInfo.currentCultureName;
+    DynamicFormBase.prototype.cultureNameLookup = function (lcid, loadContext) {
+        var _a, _b, _c;
+        var pageCulture = loadContext.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 (_c = (_b = (_a = loadContext.installedLanguages) === null || _a === void 0 ? void 0 : _a.find(function (lang) { return lang.Lcid === lcid; })) === null || _b === void 0 ? void 0 : _b.DisplayName) !== null && _c !== void 0 ? _c : pageCulture;
     };
     return DynamicFormBase;
 }(React.Component));