@formio/js 5.3.3 → 5.3.5

package/dist/formio.utils.min.js.LICENSE.txt

@@ -18,9 +18,9 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
+/*! @license DOMPurify 3.4.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.0/LICENSE */
 
-/*! formiojs v5.3.3 | https://unpkg.com/formiojs@5.3.3/LICENSE.txt */
+/*! formiojs v5.3.5 | https://unpkg.com/formiojs@5.3.5/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 

package/lib/cjs/Element.d.ts

@@ -210,6 +210,17 @@ export default class Element {
      * @returns {this} - The instance of the element.
      */
     removeClass(element: HTMLElement, className: string): this;
+    /**
+     * Idempotently add or remove a class on a DOM element based on a boolean.
+     * Skips the mutation when the element is already in the desired state, so
+     * callers can safely invoke it on every change without triggering redundant
+     * CSS transitions or attribute writes.
+     * @param {HTMLElement} element - The DOM element to toggle the class on.
+     * @param {string} className - The class name to add or remove.
+     * @param {boolean} want - TRUE to ensure the class is present, FALSE to ensure it is absent.
+     * @returns {this} - The instance of the element.
+     */
+    toggleClass(element: HTMLElement, className: string, want: boolean): this;
     /**
      * Empty's an HTML DOM element.
      * @param {HTMLElement} element - The element you wish to empty.

package/lib/cjs/Element.js

@@ -487,6 +487,30 @@ class Element {
         }
         return this;
     }
+    /**
+     * Idempotently add or remove a class on a DOM element based on a boolean.
+     * Skips the mutation when the element is already in the desired state, so
+     * callers can safely invoke it on every change without triggering redundant
+     * CSS transitions or attribute writes.
+     * @param {HTMLElement} element - The DOM element to toggle the class on.
+     * @param {string} className - The class name to add or remove.
+     * @param {boolean} want - TRUE to ensure the class is present, FALSE to ensure it is absent.
+     * @returns {this} - The instance of the element.
+     */
+    toggleClass(element, className, want) {
+        var _a;
+        if (!element || !className || !(element instanceof HTMLElement)) {
+            return this;
+        }
+        const has = !!((_a = element.classList) === null || _a === void 0 ? void 0 : _a.contains(className));
+        if (want && !has) {
+            this.addClass(element, className);
+        }
+        else if (!want && has) {
+            this.removeClass(element, className);
+        }
+        return this;
+    }
     /**
      * Empty's an HTML DOM element.
      * @param {HTMLElement} element - The element you wish to empty.

package/lib/cjs/Embed.js

@@ -481,7 +481,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.3.3';
+Formio.version = '5.3.5';
 // Create a report.
 Formio.Report = {
     create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/cjs/Formio.js

@@ -11,7 +11,7 @@ const CDN_1 = __importDefault(require("./CDN"));
 const providers_1 = __importDefault(require("./providers"));
 sdk_1.Formio.cdn = new CDN_1.default();
 sdk_1.Formio.Providers = providers_1.default;
-sdk_1.Formio.version = '5.3.3';
+sdk_1.Formio.version = '5.3.5';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/cjs/Webform.js

@@ -1030,7 +1030,7 @@ class Webform extends NestedDataComponent_1.default {
      * @returns {void|Array} - The errors that were set.
      */
     showErrors(errors, triggerEvent) {
-        var _a;
+        var _a, _b;
         this.loading = false;
         if (!Array.isArray(errors)) {
             errors = [
@@ -1103,7 +1103,10 @@ class Webform extends NestedDataComponent_1.default {
             });
         }
         const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
-        (_a = this.root) === null || _a === void 0 ? void 0 : _a.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 || !((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {
+            (_b = this.root) === null || _b === void 0 ? void 0 : _b.setAlert('danger', errorsList);
+        }
         if (triggerEvent) {
             this.emit('error', errors);
         }
@@ -1202,7 +1205,7 @@ class Webform extends NestedDataComponent_1.default {
      * @param {any} changes - The changes that have occured in the form.
      */
     onChange(flags, changed, modified, changes) {
-        var _a;
+        var _a, _b;
         flags = flags || {};
         let isChangeEventEmitted = false;
         if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {
@@ -1222,7 +1225,7 @@ class Webform extends NestedDataComponent_1.default {
             flags.fromIframe ||
             (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
         const errors = shouldValidate
-            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))
+            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change', dirty: (_b = flags.dirty) !== null && _b !== void 0 ? _b : this.submitted }))
             : [];
         value.isValid = (errors || []).filter((err) => !err.fromServer).length === 0;
         this.loading = false;

package/lib/cjs/Wizard.js

@@ -188,6 +188,7 @@ class Wizard extends Webform_1.default {
         return this.renderTemplate(headerType, ctx);
     }
     render() {
+        var _a;
         const ctx = this.renderContext;
         if (this.component.id) {
             ctx.panels.forEach((panel) => {
@@ -206,7 +207,7 @@ class Wizard extends Webform_1.default {
             wizardHeaderLocation,
             wizardNav, components: this.renderComponents([
                 ...this.prefixComps,
-                ...this.currentPage.components,
+                ...((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components) || [],
                 ...this.suffixComps,
             ]) }), this.builderMode ? 'builder' : 'form');
     }
@@ -250,7 +251,7 @@ class Wizard extends Webform_1.default {
      * @returns {Promise} A promise that resolves when all components have been successfully attached.
      */
     attach(element) {
-        var _a;
+        var _a, _b;
         this.setElement(element);
         this.loadRefs(element, {
             [this.wizardKey]: 'single',
@@ -268,7 +269,7 @@ class Wizard extends Webform_1.default {
         this.hook('attachWebform', element, this);
         const promises = this.attachComponents(this.refs[this.wizardKey], [
             ...this.prefixComps,
-            ...this.currentPage.components,
+            ...((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.components) || [],
             ...this.suffixComps,
         ]);
         this.attachNav();
@@ -296,7 +297,8 @@ class Wizard extends Webform_1.default {
     isBreadcrumbClickable() {
         let currentPage = null;
         this.pages.map((page) => {
-            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {
+            var _a;
+            if (lodash_1.default.isEqual((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.component, page.component)) {
                 currentPage = page;
             }
         });
@@ -311,11 +313,12 @@ class Wizard extends Webform_1.default {
     isAllowPrevious() {
         let currentPage = null;
         this.pages.map((page) => {
-            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {
+            var _a;
+            if (lodash_1.default.isEqual((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.component, page.component)) {
                 currentPage = page;
             }
         });
-        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);
+        return lodash_1.default.get(currentPage === null || currentPage === void 0 ? void 0 : currentPage.component, 'allowPrevious', this.options.allowPrevious);
     }
     /**
      * Handles navigate on 'Enter' key event in a wizard form.
@@ -544,7 +547,7 @@ class Wizard extends Webform_1.default {
                     const forceShow = this.shouldForceShow(item);
                     const forceHide = this.shouldForceHide(item);
                     let isVisible = !page
-                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden
+                        ? ((0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden)
                         : page.visible;
                     if (forceShow) {
                         isVisible = true;
@@ -615,8 +618,9 @@ class Wizard extends Webform_1.default {
                 this._seenPages = this._seenPages.concat(parentNum);
             }
             return this.redraw().then(() => {
+                var _a;
                 this.checkData(this.submission.data);
-                this.triggerCaptcha(this.currentPage.components);
+                this.triggerCaptcha((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components);
                 const errors = this.submitted
                     ? this.validate(this.localData, { dirty: true })
                     : this.validateCurrentPage();
@@ -833,8 +837,7 @@ class Wizard extends Webform_1.default {
         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) {
@@ -944,11 +947,12 @@ class Wizard extends Webform_1.default {
         return super.rebuild().then(setCurrentPage);
     }
     checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {
+        var _a;
         if (!this.checkCondition(row, data)) {
             this.setCustomValidity('');
             return true;
         }
-        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : this.currentPage.components;
+        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components;
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {

package/lib/cjs/components/Components.js

@@ -69,7 +69,9 @@ class Components {
             comp = new Component_1.default(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/cjs/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/cjs/components/_classes/component/Component.js

@@ -430,6 +430,24 @@ class Component extends Element_1.default {
         var _a;
         return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.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.
      *
@@ -2272,29 +2290,24 @@ class Component extends Element_1.default {
      * @returns {void}
      */
     setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
-        this.clearErrorClasses();
-        elements.forEach((element) => {
-            this.setElementInvalid(this.performInputMapping(element), hasErrors);
+        var _a;
+        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 ((_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains('alert-danger')) {
+            this.removeClass(element, 'alert alert-danger');
         }
     }
     /**
@@ -3189,7 +3202,7 @@ class Component extends Element_1.default {
         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/cjs/components/_classes/nested/NestedComponent.js

@@ -557,16 +557,14 @@ class NestedComponent extends Field_1.default {
      * @param {boolean} [all] - If set to TRUE will cascade remove all components.
      */
     removeComponent(component, components, all = false) {
-        var _a, _b;
         components = components || this.components;
         component.destroy(all);
         lodash_1.default.remove(components, { id: component.id });
-        if (this.componentsMap[component.path]) {
-            delete this.componentsMap[component.path];
-        }
-        if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.componentsMap[component.path]) {
-            (_b = this.root) === null || _b === void 0 ? true : delete _b.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/cjs/components/datagrid/DataGrid.js

@@ -456,8 +456,16 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     updateComponentsRowIndex(components, rowIndex) {
         components.forEach((component, colIndex) => {
             var _a;
-            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 ((_a = component.options) === null || _a === void 0 ? void 0 : _a.name) {
                 const newName = `[${this.key}][${rowIndex}]`;
@@ -465,7 +473,14 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             }
             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) {
@@ -537,8 +552,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             options.rowIndex = rowIndex;
             options.onChange = (flags, changed, modified) => {
                 var _a, _b, _c, _d, _e;
-                if (changed.component.type === 'form') {
-                    const formComp = (0, utils_1.getComponent)(this.component.components, changed.component.key);
+                const changedComponent = changed.component;
+                if ((changedComponent === null || changedComponent === void 0 ? void 0 : changedComponent.type) === 'form' && (changedComponent === null || changedComponent === void 0 ? void 0 : changedComponent.key)) {
+                    const formComp = (0, utils_1.getComponent)(this.component.components, changedComponent.key);
                     lodash_1.default.set(formComp, 'components', changed.component.components);
                 }
                 // If we're in a nested form we need to ensure our changes are triggered upstream

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

@@ -814,7 +814,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         }
     }
     saveRow(rowIndex, modified) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const editRow = this.editRows[rowIndex];
         if (this.options.readOnly) {
             return;
@@ -869,7 +869,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         if (this.component.rowDrafts) {
             editRow.components.forEach((comp) => comp.setPristine(this.pristine));
         }
-        this.checkValidity(null, true);
+        this.checkValidity(null, !this.component.rowDrafts || ((_d = this.root) === null || _d === void 0 ? void 0 : _d.submitted));
         this.redraw();
         if (editRow.alerts) {
             editRow.alerts = false;

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

@@ -946,16 +946,17 @@ class FileComponent extends Field_1.default {
     }
     uploadFile(fileToSync) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield 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 yield filePromise;
         });
     }
     upload() {
@@ -977,7 +978,7 @@ class FileComponent extends Field_1.default {
                     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';
@@ -988,8 +989,8 @@ class FileComponent extends Field_1.default {
                             : response.type === 'abort'
                                 ? this.t('Request was aborted')
                                 : response.toString();
-                    this.emit('fileUploadingEnd');
-                    this.emit('fileUploadError', {
+                    this.emit('fileUploadingEnd', Promise.reject(response));
+                    this.emit(lodash_1.default.get(response, 'type') === 'abort' ? 'fileUploadCanceled' : 'fileUploadError', {
                         fileToSync,
                         response,
                     });

package/lib/cjs/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/cjs/components/form/Form.js

@@ -400,13 +400,22 @@ class FormComponent extends Component_1.default {
             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) {
+            lodash_1.default.assign(currentRoot.componentsMap, subFormComponentMap);
+            prevRootId = currentRoot.id;
+            currentRoot = currentRoot.root;
+        }
+    }
     setComponentsMap() {
         if (!this.subForm) {
             return;
         }
-        const componentsMap = this.componentsMap;
-        const formComponentsMap = this.subForm.componentsMap;
-        lodash_1.default.assign(componentsMap, formComponentsMap);
+        this.updateTopLevelComponentsMap();
     }
     /**
      * Create a subform instance.
@@ -431,13 +440,13 @@ class FormComponent extends Component_1.default {
             // Render the form.
             return new Form_1.default(form, this.getSubOptions()).ready
                 .then((instance) => {
-                var _a, _b;
+                var _a;
                 this.subForm = instance;
                 this.subForm.currentForm = this;
                 this.subForm.parentVisible = this.visible;
                 this.setComponentsMap();
-                this.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;
-                this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;
+                this.component.components = this.subForm.components.map((comp) => comp.component);
+                this.component.display = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.display;
                 this.subForm.on('change', () => {
                     var _a;
                     if (this.subForm && !this.shouldConditionallyClear()) {
@@ -775,7 +784,9 @@ class FormComponent extends Component_1.default {
             }
             this.updateSubFormVisibility();
             this.clearOnHide();
-            isNestedWizard ? this.rebuild() : this.redraw();
+            if (!isNestedWizard) {
+                this.redraw();
+            }
         }
         if (!value && isNestedWizard) {
             (_a = this.root) === null || _a === void 0 ? void 0 : _a.redraw();

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.3.3"
+    "version": "5.3.5"
 }

package/lib/cjs/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/cjs/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/lib/mjs/Element.d.ts

@@ -210,6 +210,17 @@ export default class Element {
      * @returns {this} - The instance of the element.
      */
     removeClass(element: HTMLElement, className: string): this;
+    /**
+     * Idempotently add or remove a class on a DOM element based on a boolean.
+     * Skips the mutation when the element is already in the desired state, so
+     * callers can safely invoke it on every change without triggering redundant
+     * CSS transitions or attribute writes.
+     * @param {HTMLElement} element - The DOM element to toggle the class on.
+     * @param {string} className - The class name to add or remove.
+     * @param {boolean} want - TRUE to ensure the class is present, FALSE to ensure it is absent.
+     * @returns {this} - The instance of the element.
+     */
+    toggleClass(element: HTMLElement, className: string, want: boolean): this;
     /**
      * Empty's an HTML DOM element.
      * @param {HTMLElement} element - The element you wish to empty.

package/lib/mjs/Element.js

@@ -477,6 +477,29 @@ export default class Element {
         }
         return this;
     }
+    /**
+     * Idempotently add or remove a class on a DOM element based on a boolean.
+     * Skips the mutation when the element is already in the desired state, so
+     * callers can safely invoke it on every change without triggering redundant
+     * CSS transitions or attribute writes.
+     * @param {HTMLElement} element - The DOM element to toggle the class on.
+     * @param {string} className - The class name to add or remove.
+     * @param {boolean} want - TRUE to ensure the class is present, FALSE to ensure it is absent.
+     * @returns {this} - The instance of the element.
+     */
+    toggleClass(element, className, want) {
+        if (!element || !className || !(element instanceof HTMLElement)) {
+            return this;
+        }
+        const has = !!element.classList?.contains(className);
+        if (want && !has) {
+            this.addClass(element, className);
+        }
+        else if (!want && has) {
+            this.removeClass(element, className);
+        }
+        return this;
+    }
     /**
      * Empty's an HTML DOM element.
      * @param {HTMLElement} element - The element you wish to empty.

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.3.3';
+    static version = '5.3.5';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {

package/lib/mjs/Formio.js

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = '5.3.3';
+FormioCore.version = '5.3.5';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';