@formio/js 5.3.3 → 5.3.5

package/lib/mjs/Webform.js

@@ -1094,7 +1094,10 @@ export default class Webform extends NestedDataComponent {
             });
         }
         const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
-        this.root?.setAlert('danger', errorsList);
+        // Only paint the alert from a subform when the root won't double paint it to avoid a painful flicker
+        if (this === this.root || !this.root?.submitted) {
+            this.root?.setAlert('danger', errorsList);
+        }
         if (triggerEvent) {
             this.emit('error', errors);
         }
@@ -1215,6 +1218,7 @@ export default class Webform extends NestedDataComponent {
                 ...flags,
                 noValidate: false,
                 process: 'change',
+                dirty: flags.dirty ?? this.submitted,
             })
             : [];
         value.isValid = (errors || []).filter((err) => !err.fromServer).length === 0;

package/lib/mjs/Wizard.js

@@ -200,7 +200,7 @@ export default class Wizard extends Webform {
             wizardNav,
             components: this.renderComponents([
                 ...this.prefixComps,
-                ...this.currentPage.components,
+                ...this.currentPage?.components || [],
                 ...this.suffixComps,
             ]),
         }, this.builderMode ? 'builder' : 'form');
@@ -262,7 +262,7 @@ export default class Wizard extends Webform {
         this.hook('attachWebform', element, this);
         const promises = this.attachComponents(this.refs[this.wizardKey], [
             ...this.prefixComps,
-            ...this.currentPage.components,
+            ...this.currentPage?.components || [],
             ...this.suffixComps,
         ]);
         this.attachNav();
@@ -289,7 +289,7 @@ export default class Wizard extends Webform {
     isBreadcrumbClickable() {
         let currentPage = null;
         this.pages.map((page) => {
-            if (_.isEqual(this.currentPage.component, page.component)) {
+            if (_.isEqual(this.currentPage?.component, page.component)) {
                 currentPage = page;
             }
         });
@@ -304,11 +304,11 @@ export default class Wizard extends Webform {
     isAllowPrevious() {
         let currentPage = null;
         this.pages.map((page) => {
-            if (_.isEqual(this.currentPage.component, page.component)) {
+            if (_.isEqual(this.currentPage?.component, page.component)) {
                 currentPage = page;
             }
         });
-        return _.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);
+        return _.get(currentPage?.component, 'allowPrevious', this.options.allowPrevious);
     }
     /**
      * Handles navigate on 'Enter' key event in a wizard form.
@@ -537,7 +537,7 @@ export default class Wizard extends Webform {
                     const forceShow = this.shouldForceShow(item);
                     const forceHide = this.shouldForceHide(item);
                     let isVisible = !page
-                        ? checkCondition(item, data, data, this.component, this) && !item.hidden
+                        ? (checkCondition(item, data, data, this.component, this) && !item.hidden)
                         : page.visible;
                     if (forceShow) {
                         isVisible = true;
@@ -608,7 +608,7 @@ export default class Wizard extends Webform {
             }
             return this.redraw().then(() => {
                 this.checkData(this.submission.data);
-                this.triggerCaptcha(this.currentPage.components);
+                this.triggerCaptcha(this.currentPage?.components);
                 const errors = this.submitted
                     ? this.validate(this.localData, { dirty: true })
                     : this.validateCurrentPage();
@@ -822,8 +822,7 @@ export default class Wizard extends Webform {
         return super.setForm(form, flags);
     }
     onSetForm(clonedForm, initialForm) {
-        this.component.components =
-            (this.parent ? initialForm.components : clonedForm.components) || [];
+        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];
         this.setComponentSchema();
     }
     setEditMode(submission) {
@@ -936,7 +935,7 @@ export default class Wizard extends Webform {
             this.setCustomValidity('');
             return true;
         }
-        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : this.currentPage.components;
+        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : this.currentPage?.components;
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {

package/lib/mjs/components/Components.js

@@ -66,7 +66,9 @@ export default class Components {
             comp = new Component(component, options, data);
         }
         if (comp.path) {
-            comp.componentsMap[comp.path] = comp;
+            comp.eachRootChildComponentsMap((map) => {
+                map[comp.path] = comp;
+            });
         }
         // Reset the componentMatches on the root element if any new component is created.
         let parent = comp.parent;

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -163,6 +163,14 @@ declare class Component extends Element {
      */
     info: any;
     get componentsMap(): object;
+    /**
+     * Walks this component's root chain, invoking `fn` with each ancestor root's
+     * `childComponentsMap`. Component registration is propagated up the wizard /
+     * nested-form chain at create time, so any code that mutates a registration
+     * (creation, removal, path-driven re-key) must update every map in the chain.
+     * @param {(map: object) => void} fn - Called once per root that exposes a `childComponentsMap`.
+     */
+    eachRootChildComponentsMap(fn: (map: object) => void): void;
     /**
      * Returns if the parent should conditionally clear.
      *

package/lib/mjs/components/_classes/component/Component.js

@@ -426,6 +426,24 @@ export default class Component extends Element {
     get componentsMap() {
         return this.root?.childComponentsMap || {};
     }
+    /**
+     * Walks this component's root chain, invoking `fn` with each ancestor root's
+     * `childComponentsMap`. Component registration is propagated up the wizard /
+     * nested-form chain at create time, so any code that mutates a registration
+     * (creation, removal, path-driven re-key) must update every map in the chain.
+     * @param {(map: object) => void} fn - Called once per root that exposes a `childComponentsMap`.
+     */
+    eachRootChildComponentsMap(fn) {
+        let currentRoot = this.root;
+        let prevRootId = null;
+        while (currentRoot && currentRoot.id !== prevRootId) {
+            if (currentRoot.childComponentsMap) {
+                fn(currentRoot.childComponentsMap);
+            }
+            prevRootId = currentRoot.id;
+            currentRoot = currentRoot.root;
+        }
+    }
     /**
      * Returns if the parent should conditionally clear.
      *
@@ -2266,29 +2284,23 @@ export default class Component extends Element {
      * @returns {void}
      */
     setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
-        this.clearErrorClasses();
-        elements.forEach((element) => {
-            this.setElementInvalid(this.performInputMapping(element), hasErrors);
+        elements.forEach((el) => {
+            this.setElementInvalid(this.performInputMapping(el), hasErrors);
         });
         this.setInputWidgetErrorClasses(elements, hasErrors);
         // do not set error classes for hidden components
         if (!this.visible) {
+            this.clearErrorClasses(element);
             return;
         }
-        if (hasErrors) {
-            // Add error classes
-            elements.forEach((input) => {
-                this.setElementInvalid(this.performInputMapping(input), true);
-            });
-            if (dirty && this.options.highlightErrors) {
-                this.addClass(element, this.options.componentErrorClass);
-            }
-            else {
-                this.addClass(element, 'has-error');
-            }
-        }
-        if (hasMessages) {
-            this.addClass(element, 'has-message');
+        const wantHighlight = hasErrors && !!dirty && !!this.options.highlightErrors;
+        const wantHasError = hasErrors && !wantHighlight;
+        this.toggleClass(element, this.options.componentErrorClass, wantHighlight);
+        this.toggleClass(element, 'has-error', wantHasError);
+        this.toggleClass(element, 'has-message', hasMessages);
+        // Preserve previous clearErrorClasses() behavior: drop the 'alert alert-danger' pair if left over.
+        if (element?.classList?.contains('alert-danger')) {
+            this.removeClass(element, 'alert alert-danger');
         }
     }
     /**
@@ -3182,7 +3194,7 @@ export default class Component extends Element {
         if (flags.silentCheck) {
             return [];
         }
-        let isDirty = flags.dirty === false ? false : this.dirty || flags.dirty;
+        let isDirty = flags.dirty || this.dirty;
         if (this.options.alwaysDirty) {
             isDirty = true;
         }

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -556,12 +556,11 @@ export default class NestedComponent extends Field {
         components = components || this.components;
         component.destroy(all);
         _.remove(components, { id: component.id });
-        if (this.componentsMap[component.path]) {
-            delete this.componentsMap[component.path];
-        }
-        if (this.root?.componentsMap[component.path]) {
-            delete this.root?.componentsMap[component.path];
-        }
+        component.eachRootChildComponentsMap((map) => {
+            if (map[component.path]) {
+                delete map[component.path];
+            }
+        });
     }
     /**
      * Removes a component provided the API key of that component.

package/lib/mjs/components/datagrid/DataGrid.js

@@ -450,8 +450,16 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     updateComponentsRowIndex(components, rowIndex) {
         components.forEach((component, colIndex) => {
-            if (this.componentsMap[component.paths.dataPath]) {
-                delete this.componentsMap[component.paths.dataPath];
+            // The rowIndex setter cascades into descendants and regenerates their
+            // paths, but does not re-key them in componentsMap. Collect the slot
+            // and every descendant up front so we can re-key them after paths
+            // regenerate. Required for nested-form / sub-wizard scenarios where
+            // the outer wizard validates against its own componentsMap copy.
+            const entries = [{ instance: component, oldPath: component.paths.dataPath }];
+            if (typeof component.everyComponent === 'function') {
+                component.everyComponent((descendant) => {
+                    entries.push({ instance: descendant, oldPath: descendant.paths.dataPath });
+                });
             }
             if (component.options?.name) {
                 const newName = `[${this.key}][${rowIndex}]`;
@@ -459,7 +467,14 @@ export default class DataGridComponent extends NestedArrayComponent {
             }
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
-            this.componentsMap[component.paths.dataPath] = component;
+            entries.forEach(({ instance, oldPath }) => {
+                instance.eachRootChildComponentsMap((map) => {
+                    if (map[oldPath] === instance) {
+                        delete map[oldPath];
+                    }
+                    map[instance.paths.dataPath] = instance;
+                });
+            });
         });
     }
     updateRowsComponents(rowIndex) {
@@ -530,8 +545,9 @@ export default class DataGridComponent extends NestedArrayComponent {
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
-                if (changed.component.type === 'form') {
-                    const formComp = getComponent(this.component.components, changed.component.key);
+                const changedComponent = changed.component;
+                if (changedComponent?.type === 'form' && changedComponent?.key) {
+                    const formComp = getComponent(this.component.components, changedComponent.key);
                     _.set(formComp, 'components', changed.component.components);
                 }
                 // If we're in a nested form we need to ensure our changes are triggered upstream

package/lib/mjs/components/editgrid/EditGrid.js

@@ -859,7 +859,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         if (this.component.rowDrafts) {
             editRow.components.forEach((comp) => comp.setPristine(this.pristine));
         }
-        this.checkValidity(null, true);
+        this.checkValidity(null, !this.component.rowDrafts || this.root?.submitted);
         this.redraw();
         if (editRow.alerts) {
             editRow.alerts = false;

package/lib/mjs/components/file/File.js

@@ -941,16 +941,17 @@ export default class FileComponent extends Field {
             : false;
     }
     async uploadFile(fileToSync) {
-        return await this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
+        const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
         // Progress callback
         this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
-            this.emit('fileUploadingStart');
+            this.emit('fileUploadingStart', filePromise);
         }, 
         // Abort upload callback
         (abort) => this.abortUploads.push({
             id: fileToSync.id,
             abort,
         }), this.getMultipartOptions(fileToSync));
+        return await filePromise;
     }
     async upload() {
         if (!this.filesToSync.filesToUpload.length) {
@@ -970,7 +971,7 @@ export default class FileComponent extends Field {
                 fileToSync.message = this.t('Succefully uploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
-                this.emit('fileUploadingEnd');
+                this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -981,8 +982,8 @@ export default class FileComponent extends Field {
                         : response.type === 'abort'
                             ? this.t('Request was aborted')
                             : response.toString();
-                this.emit('fileUploadingEnd');
-                this.emit('fileUploadError', {
+                this.emit('fileUploadingEnd', Promise.reject(response));
+                this.emit(_.get(response, 'type') === 'abort' ? 'fileUploadCanceled' : 'fileUploadError', {
                     fileToSync,
                     response,
                 });

package/lib/mjs/components/form/Form.d.ts

@@ -42,6 +42,7 @@ export default class FormComponent extends Component {
     everyComponent(...args: any[]): any;
     setSubFormDisabled(subForm: any): void;
     updateSubWizards(subForm: any): void;
+    updateTopLevelComponentsMap(): void;
     setComponentsMap(): void;
     /**
      * Create a subform instance.

package/lib/mjs/components/form/Form.js

@@ -393,13 +393,22 @@ export default class FormComponent extends Component {
             this.emit('subWizardsUpdated', subForm);
         }
     }
+    updateTopLevelComponentsMap() {
+        let prevRootId = null;
+        let currentRoot = this.root;
+        const subFormComponentMap = this.subForm.componentsMap;
+        // update components map for all top forms
+        while (currentRoot && prevRootId !== currentRoot.id) {
+            _.assign(currentRoot.componentsMap, subFormComponentMap);
+            prevRootId = currentRoot.id;
+            currentRoot = currentRoot.root;
+        }
+    }
     setComponentsMap() {
         if (!this.subForm) {
             return;
         }
-        const componentsMap = this.componentsMap;
-        const formComponentsMap = this.subForm.componentsMap;
-        _.assign(componentsMap, formComponentsMap);
+        this.updateTopLevelComponentsMap();
     }
     /**
      * Create a subform instance.
@@ -428,7 +437,7 @@ export default class FormComponent extends Component {
                 this.subForm.currentForm = this;
                 this.subForm.parentVisible = this.visible;
                 this.setComponentsMap();
-                this.component.components = this.subForm._form?.components;
+                this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.component.display = this.subForm._form?.display;
                 this.subForm.on('change', () => {
                     if (this.subForm && !this.shouldConditionallyClear()) {
@@ -759,7 +768,9 @@ export default class FormComponent extends Component {
             }
             this.updateSubFormVisibility();
             this.clearOnHide();
-            isNestedWizard ? this.rebuild() : this.redraw();
+            if (!isNestedWizard) {
+                this.redraw();
+            }
         }
         if (!value && isNestedWizard) {
             this.root?.redraw();

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.3.3"
+    "version": "5.3.5"
     
 }

package/lib/mjs/utils/formUtils.d.ts

@@ -26,8 +26,8 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined) => Promise<void>;
-export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined) => void;
+export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined, localRoot?: import("@formio/core").LocalRoot | undefined) => Promise<void>;
+export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined, localRoot?: import("@formio/core").LocalRoot | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: any;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/lib/mjs/utils/index.d.ts

@@ -37,8 +37,8 @@ declare const FormioUtils: {
     getComponentFromPath: typeof import("@formio/core/lib/utils/formUtil").getComponentFromPath;
     getComponentValue: typeof import("@formio/core/lib/utils/formUtil").getComponentValue;
     findComponents: typeof import("@formio/core/lib/utils/formUtil").findComponents;
-    eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined) => Promise<void>;
-    eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined) => void;
+    eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined, localRoot?: import("@formio/core").LocalRoot | undefined) => Promise<void>;
+    eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined, localRoot?: import("@formio/core").LocalRoot | undefined) => void;
     getComponentKey: typeof import("@formio/core/lib/utils/formUtil").getComponentKey;
     getContextualRowPath: any;
     getContextualRowData: typeof import("@formio/core/lib/utils/formUtil").getContextualRowData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.3.3",
+  "version": "5.3.5",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -89,7 +89,7 @@
     "uuid": "^9.0.0",
     "vanilla-picker": "^2.12.3",
     "@formio/bootstrap": "^3.2.2",
-    "@formio/core": "^2.6.3"
+    "@formio/core": "^2.6.5"
   },
   "devDependencies": {
     "@types/node": "^22.15.19",