@formio/js 5.4.0-api98.1 → 5.4.0

package/lib/cjs/utils/utils.js

@@ -206,6 +206,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             return true;
         }
         const conditionsResult = lodash_1.default.map(conditions, (cond) => {
+            var _a;
             const { value: comparedValue, operator, component: conditionComponentPath } = cond;
             if (!conditionComponentPath) {
                 return true;
@@ -232,6 +233,16 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             }
             else {
                 const value = getComponentActualValue(conditionComponentPath, data, row);
+                // When inside a DataGrid/EditGrid, construct a row-indexed path so that
+                // operators like isEmpty can look up the correct row's component instance.
+                let operatorPath = conditionComponentPath;
+                const dataParent = getDataParentComponent(instance);
+                if (dataParent && !lodash_1.default.isNil(instance === null || instance === void 0 ? void 0 : instance.rowIndex)) {
+                    const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath;
+                    if (parentPath && conditionComponentPath.startsWith(`${parentPath}.`)) {
+                        operatorPath = conditionComponentPath.replace(`${parentPath}.`, `${parentPath}[${instance.rowIndex}].`);
+                    }
+                }
                 const СonditionOperator = conditionOperators_1.default[operator];
                 return СonditionOperator
                     ? new СonditionOperator().getResult({
@@ -239,7 +250,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
                         comparedValue,
                         instance,
                         component,
-                        path: conditionComponentPath,
+                        path: operatorPath,
                     })
                     : true;
             }
@@ -292,7 +303,11 @@ exports.getComponentActualValue = getComponentActualValue;
  */
 function checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {
     if (typeof custom === 'string') {
-        custom = `var ${variable} = true; ${custom}; return ${variable};`;
+        custom = `
+      var ${variable} = true; 
+      ${custom}; 
+      return ${variable};
+    `;
     }
     const value = instance && instance.evaluate
         ? instance.evaluate(custom, { row, data, form })
@@ -640,14 +655,16 @@ exports.shouldLoadZones = shouldLoadZones;
  * @param {string} timezone - The timezone to load.
  * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
  */
-function loadZones(url, timezone) {
-    if (timezone && !shouldLoadZones(timezone)) {
-        // Return non-resolving promise.
-        return new Promise(lodash_1.default.noop);
+function loadZones(url, _timezone) {
+    if (moment_timezone_1.default.zonesLoaded) {
+        return Promise.resolve();
     }
     if (moment_timezone_1.default.zonesPromise) {
         return moment_timezone_1.default.zonesPromise;
     }
+    // Always load the full packed dataset once. The previous optimization skipped fetch when the
+    // display timezone matched the runtime zone, but moment-timezone still needs `tz.load()` for
+    // `.tz(ianaName)` and `z` formatting to work; otherwise conversions silently match server local time.
     return (moment_timezone_1.default.zonesPromise = fetch(url).then((resp) => resp.json().then((zones) => {
         moment_timezone_1.default.tz.load(zones);
         moment_timezone_1.default.zonesLoaded = true;

package/lib/cjs/widgets/CalendarWidget.js

@@ -61,7 +61,7 @@ class CalendarWidget extends InputWidget_1.default {
         if (this.zoneLoading) {
             return true;
         }
-        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {
+        if (!(0, utils_1.zonesLoaded)()) {
             this.zoneLoading = true;
             (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {
                 this.zoneLoading = false;

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.4.0-api98.1';
+    static version = '5.4.0';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {
@@ -340,6 +340,24 @@ export class Formio {
             };
         });
         const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
+        const hasQuillComponent = (components = []) => {
+            if (!Array.isArray(components)) {
+                return false;
+            }
+            return components.some((component) => {
+                if (!component || typeof component !== 'object') {
+                    return false;
+                }
+                const isQuillTextarea = component.type === 'textarea' &&
+                    component.wysiwyg === true &&
+                    component.editor === 'quill';
+                return (isQuillTextarea ||
+                    hasQuillComponent(component.components) ||
+                    hasQuillComponent(component.columns?.flatMap((column) => column.components || [])) ||
+                    hasQuillComponent(component.rows?.flatMap((row) => row.flatMap((cell) => cell.components || []))));
+            });
+        };
+        const disableShadowForQuill = hasQuillComponent(Formio.config.form?.components);
         // Create a new wrapper and add the element inside of a new wrapper.
         let wrapper = Formio.createElement('div', {
             id: `${id}-wrapper`,
@@ -348,6 +366,7 @@ export class Formio {
         // If we include the libraries, then we will attempt to run this in shadow dom.
         const useShadowDom = Formio.config.includeLibs &&
             !Formio.config.noshadow &&
+            !disableShadowForQuill &&
             typeof wrapper.attachShadow === 'function';
         if (useShadowDom) {
             wrapper = wrapper.attachShadow({
@@ -356,7 +375,7 @@ export class Formio {
             options.shadowRoot = wrapper;
             // Due to an issue with quill not loading styles in the shadowdom, we need to add quill styles and js to the shadowdom
             const quill = {
-                js: `${Formio.cdn.quill}/quill.min.js`,
+                js: `${Formio.cdn.quill}/quill.js`,
                 css: `${Formio.cdn.quill}/quill.snow.css`
             };
             await Formio.addLibrary(wrapper, quill, 'quill');

package/lib/mjs/Form.d.ts

@@ -238,7 +238,7 @@ export type FormOptions = {
     /**
      * - The render mode for this form.
      */
-    renderMode?: "builder" | "form" | "html" | "flat" | "pdf" | undefined;
+    renderMode?: "form" | "builder" | "html" | "flat" | "pdf" | undefined;
     /**
      * - Highlight any errors on the form.
      */

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.4.0-api98.1';
+FormioCore.version = '5.4.0';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/mjs/PDFBuilder.js

@@ -227,7 +227,12 @@ export default class PDFBuilder extends WebformBuilder {
                 nonFillableConversionUsed: autoConversionComponentsAssigned && result.data.formfields.nonFillableConversionUsed,
             });
             this.emit('pdfUploaded', result.data);
-            this.redraw();
+            if (autoConversionComponentsAssigned) {
+                this.rebuild();
+            }
+            else {
+                this.redraw();
+            }
         })
             .catch((err) => this.setUploadError(err));
     }

package/lib/mjs/Webform.d.ts

@@ -259,7 +259,6 @@ declare class Webform extends NestedDataComponent {
      * @returns {Promise} - The promise that is triggered when the submission is set.
      */
     setSubmission(submission: any, flags?: any): Promise<any>;
-    _submission: any;
     handleDraftError(errName: any, errDetails: any, restoreDraft: any): void;
     saveDraft(): void;
     /**
@@ -270,6 +269,7 @@ declare class Webform extends NestedDataComponent {
     get schema(): any;
     mergeData(_this: any, _that: any): void;
     editing: boolean | undefined;
+    _submission: any;
     /**
      * Build the form.
      * @returns {Promise} - The promise that is triggered when the form is built.

package/lib/mjs/Webform.js

@@ -658,8 +658,6 @@ export default class Webform extends NestedDataComponent {
                     ...resolveFlags,
                 };
             }
-            this._submission = {};
-            this._data = {};
             this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err))
@@ -1098,7 +1096,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);
         }
@@ -1220,6 +1221,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;
@@ -1289,6 +1291,7 @@ export default class Webform extends NestedDataComponent {
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.i18next?.originalLanguage || this.options.language || this.i18next?.language,
         });
     }
     submitForm(options = {}, local = false) {

package/lib/mjs/WebformBuilder.js

@@ -364,11 +364,14 @@ export default class WebformBuilder extends Component {
             this.attachTooltip(component.refs.editComponent, this.t('Edit'));
             component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, {
                 inDataGrid: component.isInDataGrid,
+                editComponentPath: component.path,
             }));
         }
         if (component.refs.editJson) {
             this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));
-            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));
+            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component, {
+                editComponentPath: component.path,
+            }));
         }
         if (component.refs.removeComponent) {
             this.attachTooltip(component.refs.removeComponent, this.t('Remove'));
@@ -1081,6 +1084,14 @@ export default class WebformBuilder extends Component {
             _.get(this.webform, 'form.globalSettings.sanitizeConfig');
         // Update the preview.
         if (this.preview) {
+            if (changed?.instance?.key === 'allowMultipleMasks' && changed?.value === false) {
+                const changedComp = this.preview?.getComponent(component.key);
+                if (changedComp) {
+                    const emptyValue = changedComp.emptyValue;
+                    changedComp.dataValue = emptyValue;
+                    component.defaultValue = emptyValue;
+                }
+            }
             this.preview.form = {
                 components: [
                     _.omit({ ...component }, [
@@ -1396,6 +1407,7 @@ export default class WebformBuilder extends Component {
         // Pass along the form being edited.
         editFormOptions.editForm = this.form;
         editFormOptions.editComponent = component;
+        editFormOptions.editComponentPath = flags.editComponentPath;
         editFormOptions.flags = flags;
         this.hook('editComponentParentInstance', editFormOptions, parent);
         this.editForm = new Webform({

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();
@@ -833,8 +833,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) {
@@ -947,7 +946,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.d.ts

@@ -2,6 +2,7 @@ export default class Components {
     static _editFormUtils: {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
+        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;
@@ -86,6 +87,7 @@ export default class Components {
     static set EditFormUtils(value: {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
+        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;
@@ -169,6 +171,7 @@ export default class Components {
     static get EditFormUtils(): {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
+        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;

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.
      *