@formio/js 5.2.3 → 5.2.4

package/lib/cjs/components/table/Table.js

@@ -118,6 +118,7 @@ class TableComponent extends NestedComponent_1.default {
         lodash_1.default.each(this.component.rows, (row, rowIndex) => {
             this.table[rowIndex] = [];
             lodash_1.default.each(row, (column, colIndex) => {
+                var _a;
                 this.table[rowIndex][colIndex] = [];
                 if (this.component.cloneRows) {
                     if (column.components.length) {
@@ -125,7 +126,7 @@ class TableComponent extends NestedComponent_1.default {
                     }
                     else if (lastNonEmptyRow[colIndex]) {
                         column.components = lodash_1.default.cloneDeep(lastNonEmptyRow[colIndex].components);
-                        builder_1.default.uniquify(this.root._form.components, column);
+                        builder_1.default.uniquify((_a = this.root) === null || _a === void 0 ? void 0 : _a._form.components, column);
                     }
                 }
                 lodash_1.default.each(column.components, (comp) => {

package/lib/cjs/components/tabs/Tabs.js

@@ -115,6 +115,7 @@ class TabsComponent extends NestedComponent_1.default {
      * @param {number} index - The index of the tab to set.
      */
     setTab(index) {
+        var _a;
         if (!this.tabs || !this.tabs[index] || !this.refs[this.tabKey] || !this.refs[this.tabKey][index]) {
             return;
         }
@@ -144,7 +145,7 @@ class TabsComponent extends NestedComponent_1.default {
             this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
         }
         this.setValue(this.data);
-        this.triggerChange();
+        (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     beforeFocus(component) {
         if ('beforeFocus' in this.parent) {

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.2.3"
+    "version": "5.2.4"
 }

package/lib/mjs/Element.js

@@ -122,7 +122,7 @@ export default class Element {
             return;
         }
         const type = `${this.options.namespace}.${event}`;
-        this.events.listeners(type).forEach((listener) => {
+        this.events?.listeners(type).forEach((listener) => {
             // Ensure the listener is for this element
             if (!listener || listener.id !== this.id) {
                 return;
@@ -131,7 +131,7 @@ export default class Element {
             if (cb && cb !== listener) {
                 return;
             }
-            this.events.off(type, listener);
+            this.events?.off(type, listener);
         });
     }
     /**
@@ -366,7 +366,7 @@ export default class Element {
                     inputElement: input,
                     mask,
                     placeholderChar: this.placeholderChar,
-                    shadowRoot: this.root ? this.root.shadowRoot : null
+                    shadowRoot: this.root ? this.root?.shadowRoot : null,
                 });
             }
             catch (e) {

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.2.3';
+    static version = '5.2.4';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {
@@ -351,7 +351,7 @@ export class Formio {
         if (loader) {
             wrapper.removeChild(loader);
         }
-        Formio.FormioClass.events.emit(readyEvent, instance);
+        Formio.FormioClass.events?.emit(readyEvent, instance);
         if (Formio.config.after) {
             Formio.debug('Calling ready callback');
             Formio.config.after(instance, Formio.config);

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.2.3';
+FormioCore.version = '5.2.4';
 CDN.defaultCDN = FormioCore.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 FormioCore.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

package/lib/mjs/Webform.js

@@ -718,7 +718,7 @@ export default class Webform extends NestedDataComponent {
      */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
-        this.triggerChange(flags);
+        this.triggerChange?.(flags);
         this.emit('beforeSetSubmission', submission);
         this.setValue(submission, flags);
     }
@@ -1171,7 +1171,7 @@ export default class Webform extends NestedDataComponent {
             });
         }
         const errorsList = this.renderTemplate("errorsList", { errors: displayedErrors });
-        this.root.setAlert("danger", errorsList);
+        this.root?.setAlert("danger", errorsList);
         if (triggerEvent) {
             this.emit("error", errors);
         }

package/lib/mjs/WebformBuilder.js

@@ -301,7 +301,7 @@ export default class WebformBuilder extends Component {
             }, true);
             this.groups.resource.subgroups.push(subgroup);
         });
-        this.triggerRedraw();
+        this.triggerRedraw?.();
     }
     attachTooltip(component, title) {
         return tippy(component, {
@@ -636,7 +636,7 @@ export default class WebformBuilder extends Component {
         });
         this.updateDragAndDrop();
         if (searchValue === '') {
-            this.triggerRedraw();
+            this.triggerRedraw?.();
         }
     }
     orderComponents(groupInfo, foundComponents) {
@@ -1659,7 +1659,7 @@ export default class WebformBuilder extends Component {
         if (!this.groups[name]) {
             this.groups[name] = group;
             this.groupOrder.push(name);
-            this.triggerRedraw();
+            this.triggerRedraw?.();
         }
         else {
             this.updateBuilderGroup(name, group);
@@ -1668,7 +1668,7 @@ export default class WebformBuilder extends Component {
     updateBuilderGroup(name, group) {
         if (this.groups[name]) {
             this.groups[name] = group;
-            this.triggerRedraw();
+            this.triggerRedraw?.();
         }
     }
     generateKey(info) {

package/lib/mjs/Wizard.js

@@ -718,7 +718,7 @@ export default class Wizard extends Webform {
         const components = this.currentPage?.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
         if (this.currentPage?.parent) {
-            return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
+            return this.currentPage?.parent.validateComponents(components, this.root?.data, flags);
         }
         return this.currentPage?.validateComponents(components, this.root ? this.root.data : this.data, flags);
     }

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

@@ -1297,7 +1297,7 @@ export default class Component extends Element {
         const isFocused = this.root?.focusedComponent?.path === this.path;
         if (isFocused) {
             this.loadRefs(this.element, { input: 'multiple' });
-            this.focus(this.root.currentSelection?.index);
+            this.focus(this.root?.currentSelection?.index);
             this.restoreCaretPosition();
         }
     }
@@ -1315,7 +1315,7 @@ export default class Component extends Element {
         if (!shortcut) {
             shortcut = this.component.shortcut;
         }
-        this.root.addShortcut(element, shortcut);
+        this.root?.addShortcut(element, shortcut);
     }
     /**
      * Removes a keyboard shortcut from this component.
@@ -1331,7 +1331,7 @@ export default class Component extends Element {
         if (!shortcut) {
             shortcut = this.component.shortcut;
         }
-        this.root.removeShortcut(element, shortcut);
+        this.root?.removeShortcut(element, shortcut);
     }
     /**
      * Remove all event handlers.
@@ -1420,7 +1420,7 @@ export default class Component extends Element {
             if (this.component.clearOnRefresh) {
                 this.setValue(null);
             }
-            this.triggerRedraw();
+            this.triggerRedraw?.();
         }
     }
     /**
@@ -2551,7 +2551,7 @@ export default class Component extends Element {
             if (_.isArray(dataValue) && dataValue.hasOwnProperty(index)) {
                 dataValue.splice(index, 1);
                 this.dataValue = dataValue;
-                this.triggerChange(flags);
+                this.triggerChange?.(flags);
             }
         }
     }
@@ -2837,7 +2837,7 @@ export default class Component extends Element {
                 // Reset the errors when a submission has been made and allow it to revalidate.
                 this._errors = [];
             }
-            this.triggerChange(flags);
+            this.triggerChange?.(flags);
             return true;
         }
         return false;
@@ -2937,7 +2937,7 @@ export default class Component extends Element {
         }
         this.calculatedValue = fastCloneDeep(calculatedValue);
         if (changed) {
-            if (!flags.noPristineChangeOnModified && this.root.initialized) {
+            if (!flags.noPristineChangeOnModified && this.root?.initialized) {
                 this.pristine = false;
             }
             flags.triggeredComponentId = this.id;
@@ -3260,7 +3260,7 @@ export default class Component extends Element {
     }
     addFocusBlurEvents(element) {
         this.addEventListener(element, 'focus', () => {
-            if (this.root.focusedComponent !== this) {
+            if (this.root && this.root.focusedComponent !== this) {
                 if (this.root.pendingBlur) {
                     this.root.pendingBlur();
                 }
@@ -3276,7 +3276,7 @@ export default class Component extends Element {
             this.root.pendingBlur = FormioUtils.delay(() => {
                 this.emit('blur', this);
                 if (this.component.validateOn === 'blur') {
-                    this.root.triggerChange({ fromBlur: true }, {
+                    this.root.triggerChange?.({ fromBlur: true }, {
                         instance: this,
                         component: this.component,
                         value: this.dataValue,
@@ -3358,7 +3358,7 @@ export default class Component extends Element {
      * @returns {boolean|*} - TRUE if the value is hidden.
      */
     isValueHidden() {
-        if (this.component.protected && this.root.editing) {
+        if (this.component.protected && this.root?.editing) {
             return false;
         }
         if (!this.root || !this.root.hasOwnProperty('editing')) {

package/lib/mjs/components/address/Address.js

@@ -377,7 +377,7 @@ export default class AddressComponent extends ContainerComponent {
         else {
             this.address = address;
         }
-        this.triggerChange({
+        this.triggerChange?.({
             modified: true,
         });
         if (element) {
@@ -471,7 +471,7 @@ export default class AddressComponent extends ContainerComponent {
                     if (this.manualMode) {
                         this.restoreComponentsContext();
                     }
-                    this.triggerChange({
+                    this.triggerChange?.({
                         modified: true,
                     });
                 }
@@ -514,7 +514,7 @@ export default class AddressComponent extends ContainerComponent {
     }
     clearAddress(element, index) {
         if (!this.isEmpty()) {
-            this.triggerChange();
+            this.triggerChange?.();
         }
         if (this.address?.[index]) {
             this.address[index] = this.emptyValue;

package/lib/mjs/components/button/Button.js

@@ -205,7 +205,7 @@ export default class ButtonComponent extends Field {
             }
         }, true);
         if (this.component.saveOnEnter) {
-            this.root.addEventListener(this.root.element, 'keyup', (event) => {
+            this.root?.addEventListener(this.root.element, 'keyup', (event) => {
                 if (event.keyCode === 13) {
                     this.onClick.call(this, event);
                 }
@@ -288,7 +288,7 @@ export default class ButtonComponent extends Field {
                 break;
             case 'event':
                 this.emit(this.interpolate(this.component.event), this.data);
-                this.events.emit(this.interpolate(this.component.event), this.data);
+                this.events?.emit(this.interpolate(this.component.event), this.data);
                 this.emit('customEvent', {
                     type: this.interpolate(this.component.event),
                     component: this.component,
@@ -311,7 +311,7 @@ export default class ButtonComponent extends Field {
                     flattened,
                     components
                 });
-                this.triggerChange();
+                this.triggerChange?.();
                 break;
             }
             case 'url':
@@ -338,12 +338,12 @@ export default class ButtonComponent extends Field {
                 }
                 // Display Alert if OAuth config is missing
                 if (!this.oauthConfig) {
-                    this.root.setAlert('danger', 'OAuth not configured. You must configure oauth for your project before it will work.');
+                    this.root?.setAlert('danger', 'OAuth not configured. You must configure oauth for your project before it will work.');
                     break;
                 }
                 // Display Alert if oAuth has an error is missing
                 if (this.oauthConfig.error) {
-                    this.root.setAlert('danger', `The Following Error Has Occured ${this.oauthConfig.error}`);
+                    this.root?.setAlert('danger', `The Following Error Has Occured ${this.oauthConfig.error}`);
                     break;
                 }
                 this.openOauth(this.oauthConfig);
@@ -351,7 +351,7 @@ export default class ButtonComponent extends Field {
         }
     }
     openOauth(settings) {
-        if (!this.root.formio) {
+        if (!this.root?.formio) {
             console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
             return;
         }
@@ -395,45 +395,45 @@ export default class ButtonComponent extends Field {
                     }, {});
                     if (params.error) {
                         alert(params.error_description || params.error);
-                        this.root.setAlert('danger', params.error_description || params.error);
+                        this.root?.setAlert('danger', params.error_description || params.error);
                         return;
                     }
                     // TODO: check for error response here
                     if (settings.state !== params.state) {
-                        this.root.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
+                        this.root?.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
                         return;
                     }
                     // Depending on where the settings came from, submit to either the submission endpoint (old) or oauth endpoint (new).
                     let requestPromise = Promise.resolve();
-                    if (_.has(this, 'root.form.config.oauth') && this.root.form.config.oauth[this.component.oauthProvider]) {
+                    if (_.has(this, 'root.form.config.oauth') && this.root?.form.config.oauth[this.component.oauthProvider]) {
                         params.provider = settings.provider;
                         params.redirectURI = originalRedirectUri;
                         // Needs for the exclude oAuth Actions that not related to this button
                         params.triggeredBy = this.oauthComponentPath;
-                        requestPromise = this.root.formio.makeRequest('oauth', `${this.root.formio.projectUrl}/oauth2`, 'POST', params);
+                        requestPromise = this.root?.formio.makeRequest('oauth', `${this.root?.formio.projectUrl}/oauth2`, 'POST', params);
                     }
                     else {
                         const submission = { data: {}, oauth: {} };
                         submission.oauth[settings.provider] = params;
                         submission.oauth[settings.provider].redirectURI = originalRedirectUri;
                         if (settings.logoutURI) {
-                            this.root.formio.oauthLogoutURI(settings.logoutURI);
+                            this.root?.formio.oauthLogoutURI(settings.logoutURI);
                         }
                         // Needs for the exclude oAuth Actions that not related to this button
                         submission.oauth[settings.provider].triggeredBy = this.oauthComponentPath;
-                        requestPromise = this.root.formio.saveSubmission(submission);
+                        requestPromise = this.root?.formio.saveSubmission(submission);
                     }
                     requestPromise.then((result) => {
-                        this.root.onSubmit(result, true);
+                        this.root?.onSubmit(result, true);
                     })
                         .catch((err) => {
-                        this.root.onSubmissionError(err);
+                        this.root?.onSubmissionError(err);
                     });
                 }
             }
             catch (error) {
                 if (error.name !== 'SecurityError' && (error.name !== 'Error' || error.message !== 'Permission denied')) {
-                    this.root.setAlert('danger', error.message || error);
+                    this.root?.setAlert('danger', error.message || error);
                 }
             }
             if (!popup || popup.closed || popup.closed === undefined) {

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

@@ -393,7 +393,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             row
         });
         this.checkConditions();
-        this.triggerChange({ modified: true });
+        this.triggerChange?.({ modified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
@@ -478,11 +478,11 @@ export default class DataGridComponent extends NestedArrayComponent {
                     _.set(formComp, 'components', changed.component.components);
                 }
                 // If we're in a nested form we need to ensure our changes are triggered upstream
-                if (changed.instance.root?.id && (this.root?.id !== changed.instance.root.id)) {
-                    changed.instance.root.triggerChange(flags, changed, modified);
+                if (changed.instance.root?.id && this.root?.id !== changed.instance.root.id) {
+                    changed.instance.root.triggerChange?.(flags, changed, modified);
                 }
                 else {
-                    this.triggerChange({ modified });
+                    this.triggerChange?.({ modified });
                 }
             };
             let columnComponent;

package/lib/mjs/components/datamap/DataMap.js

@@ -261,7 +261,7 @@ export default class DataMapComponent extends DataGridComponent {
         const index = this.rows.length;
         this.rows[index] = this.createRowComponents(this.dataValue, index);
         this.redraw();
-        this.triggerChange();
+        this.triggerChange?.();
     }
     removeRow(index) {
         const keys = Object.keys(this.dataValue);
@@ -270,7 +270,7 @@ export default class DataMapComponent extends DataGridComponent {
         }
         this.rows.splice(index, 1);
         this.redraw();
-        this.triggerChange();
+        this.triggerChange?.();
     }
     setValue(value, flags = {}) {
         const changed = this.hasChanged(value, this.dataValue);

package/lib/mjs/components/day/Day.js

@@ -523,7 +523,7 @@ export default class DayComponent extends Field {
             if (!isModalEditClosed) {
                 this.dataValue = this.emptyValue;
                 if (this.options.building) {
-                    this.triggerChange();
+                    this.triggerChange?.();
                 }
             }
             return null;

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

@@ -596,7 +596,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             this.emptyRow = fastCloneDeep(editRow.data);
         }
         if (this.inlineEditMode) {
-            this.triggerChange();
+            this.triggerChange?.();
         }
         this.emit('editGridAddRow', {
             component: this.component,
@@ -827,7 +827,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             row: editRow.data,
             instance: this
         });
-        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });
+        this.triggerChange?.({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });
         if (this.component.rowDrafts) {
             editRow.components.forEach(comp => comp.setPristine(this.pristine));
         }
@@ -887,7 +887,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.openWhenEmpty();
         this.updateRowsComponents(rowIndex);
         this.updateValue();
-        this.triggerChange({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });
+        this.triggerChange?.({ modified, noPristineChangeOnModified: modified && this.component.rowDrafts, isolateRow: true });
         this.checkValidity(null, true);
         this.checkData();
         this.redraw();
@@ -919,7 +919,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             options.rowIndex = rowIndex;
             options.onChange = (flags = {}, changed, modified) => {
                 if (changed.instance.root?.id && (this.root?.id !== changed.instance.root.id)) {
-                    changed.instance.root.triggerChange(flags, changed, modified);
+                    changed.instance.root?.triggerChange?.(flags, changed, modified);
                 }
                 else if (!this.component.modal) {
                     this.triggerRootChange(flags, changed, modified);
@@ -1097,7 +1097,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         if (allRowErrors.length && this.root?.submitted && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);
-            this.root.showErrors([message]);
+            this.root?.showErrors([message]);
         }
         else {
             this._errors = this.setCustomValidity(message, dirty);

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

@@ -403,7 +403,7 @@ export default class FileComponent extends Field {
                 delete fileInfo.message;
                 this.filesToSync.filesToDelete.splice(index, 1);
                 this.dataValue.push(fileInfo);
-                this.triggerChange();
+                this.triggerChange?.();
                 this.redraw();
             });
         });
@@ -637,7 +637,7 @@ export default class FileComponent extends Field {
         };
     }
     async handleSubmissionRevisions(file) {
-        if (this.root.form.submissionRevisions !== 'true') {
+        if (this.root?.form.submissionRevisions !== 'true') {
             return '';
         }
         const bmf = new BMF();
@@ -719,7 +719,7 @@ export default class FileComponent extends Field {
         let groupKey = null;
         let groupPermissions = null;
         //Iterate through form components to find group resource if one exists
-        this.root.everyComponent((element) => {
+        this.root?.everyComponent((element) => {
             if (element.component?.submissionAccess || element.component?.defaultPermission) {
                 groupPermissions = !element.component.submissionAccess ? [
                     {
@@ -736,12 +736,12 @@ export default class FileComponent extends Field {
     }
     async triggerFileProcessor(file) {
         let processedFile = null;
-        if (this.root.options.fileProcessor) {
+        if (this.root?.options.fileProcessor) {
             try {
                 if (this.refs.fileProcessingLoader) {
                     this.refs.fileProcessingLoader.style.display = 'block';
                 }
-                const fileProcessorHandler = fileProcessor(this.fileService, this.root.options.fileProcessor);
+                const fileProcessorHandler = fileProcessor(this.fileService, this.root?.options.fileProcessor);
                 processedFile = await fileProcessorHandler(file, this.component.properties);
             }
             catch (err) {
@@ -977,7 +977,7 @@ export default class FileComponent extends Field {
                 .filter(file => file.fileToSync?.status === 'success')
                 .map(file => file.fileInfo);
             this.dataValue.push(...data);
-            this.triggerChange();
+            this.triggerChange?.();
             return Promise.resolve();
         }
         catch (err) {