@formio/js 5.2.3 → 5.2.4

package/lib/mjs/components/file/editForm/File.edit.file.d.ts

@@ -17,6 +17,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -33,7 +34,6 @@ declare const _default: ({
                 var: string;
             })[];
             in?: undefined;
-            '!=='?: undefined;
             '=='?: undefined;
         };
     };
@@ -47,6 +47,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -81,7 +82,6 @@ declare const _default: ({
                 var: string;
             })[];
             in?: undefined;
-            '!=='?: undefined;
             '=='?: undefined;
         };
     };
@@ -94,6 +94,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -112,7 +113,6 @@ declare const _default: ({
                 var: string;
             })[];
             in?: undefined;
-            '!=='?: undefined;
             '=='?: undefined;
         };
     };
@@ -124,6 +124,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -141,7 +142,6 @@ declare const _default: ({
                 var: string;
             })[];
             '==='?: undefined;
-            '!=='?: undefined;
             '=='?: undefined;
         };
     };
@@ -154,6 +154,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -175,7 +176,6 @@ declare const _default: ({
                 var: string;
             })[];
             in?: undefined;
-            '!=='?: undefined;
             '=='?: undefined;
         };
     };
@@ -184,6 +184,7 @@ declare const _default: ({
     data?: undefined;
     tableView?: undefined;
     components?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -196,19 +197,35 @@ declare const _default: ({
     placeholder: string;
     tooltip: string;
     weight: number;
-    conditional: {
-        json: {
-            '!==': (string | {
-                var: string;
-            })[];
-            '==='?: undefined;
-            in?: undefined;
-            '=='?: undefined;
+    logic: {
+        name: string;
+        trigger: {
+            type: string;
+            simple: {
+                show: boolean;
+                conjunction: string;
+                conditions: {
+                    component: string;
+                    operator: string;
+                    value: string;
+                }[];
+            };
         };
-    };
+        actions: {
+            name: string;
+            type: string;
+            property: {
+                label: string;
+                value: string;
+                type: string;
+            };
+            text: string;
+        }[];
+    }[];
     valueProperty?: undefined;
     dataSrc?: undefined;
     data?: undefined;
+    conditional?: undefined;
     tableView?: undefined;
     components?: undefined;
     rows?: undefined;
@@ -235,6 +252,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -256,6 +274,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -273,7 +292,6 @@ declare const _default: ({
                 var: string;
             })[];
             in?: undefined;
-            '!=='?: undefined;
             '=='?: undefined;
         };
     };
@@ -286,6 +304,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -305,7 +324,6 @@ declare const _default: ({
             })[];
             '==='?: undefined;
             in?: undefined;
-            '!=='?: undefined;
         };
     };
     valueProperty?: undefined;
@@ -316,6 +334,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;
@@ -344,6 +363,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -366,6 +386,7 @@ declare const _default: ({
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
+    logic?: undefined;
     optionsLabelPosition?: undefined;
     inline?: undefined;
     defaultValue?: undefined;

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

@@ -147,8 +147,7 @@ export default [
                     }, 'url']
             }
         }
-    },
-    {
+    }, {
         type: 'textfield',
         input: true,
         key: 'dir',
@@ -156,29 +155,83 @@ export default [
         placeholder: '(optional) Enter a directory for the files',
         tooltip: 'This will place all the files uploaded in this field in the directory',
         weight: 20,
-        conditional: {
-            json: {
-                '!==': [{
-                        var: 'data.storage'
-                    }, 'googledrive']
-            }
-        }
-    },
-    {
-        type: 'textfield',
-        input: true,
-        key: 'dir',
-        label: 'Folder ID',
-        placeholder: '(optional) Enter an ID of the folder for the files',
-        tooltip: 'This will place all the files uploaded in this field in the folder',
-        weight: 20,
-        conditional: {
-            json: {
-                '===': [{
-                        var: 'data.storage'
-                    }, 'googledrive']
-            }
-        }
+        logic: [
+            {
+                name: 'Change To File ID',
+                trigger: {
+                    type: 'simple',
+                    simple: {
+                        show: true,
+                        conjunction: 'all',
+                        conditions: [
+                            {
+                                component: 'storage',
+                                operator: 'isEqual',
+                                value: 'googledrive',
+                            },
+                        ],
+                    },
+                },
+                actions: [
+                    {
+                        name: 'Change placeholder',
+                        type: 'property',
+                        property: {
+                            label: 'Placeholder',
+                            value: 'placeholder',
+                            type: 'string',
+                        },
+                        text: '(optional) Enter an ID of the folder for the files',
+                    }, {
+                        name: 'Change label',
+                        type: 'property',
+                        property: {
+                            label: 'Label',
+                            value: 'label',
+                            type: 'string',
+                        },
+                        text: 'Folder ID',
+                    },
+                ],
+            }, {
+                name: 'Change to Directory',
+                trigger: {
+                    type: 'simple',
+                    simple: {
+                        show: true,
+                        conjunction: 'all',
+                        conditions: [
+                            {
+                                component: 'storage',
+                                operator: 'isNotEqual',
+                                value: 'googledrive',
+                            },
+                        ],
+                    },
+                },
+                actions: [
+                    {
+                        name: 'Change placeholder',
+                        type: 'property',
+                        property: {
+                            label: 'Placeholder',
+                            value: 'placeholder',
+                            type: 'string',
+                        },
+                        text: '(optional) Enter a directory for the files',
+                    }, {
+                        name: 'Change label',
+                        type: 'property',
+                        property: {
+                            label: 'Label',
+                            value: 'label',
+                            type: 'string',
+                        },
+                        text: 'Directory',
+                    },
+                ],
+            },
+        ],
     },
     {
         type: 'textfield',

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

@@ -298,7 +298,7 @@ export default class FormComponent extends Component {
                 };
                 if (this.subForm) {
                     if (this.isNestedWizard) {
-                        element = this.root.element;
+                        element = this.root?.element;
                     }
                     return this.subForm.attach(element).then(() => {
                         this.valueChanged = this.hasSetValue;
@@ -428,7 +428,7 @@ export default class FormComponent extends Component {
                 this.subForm.on('change', () => {
                     if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
-                        this.triggerChange({
+                        this.triggerChange?.({
                             noEmit: true
                         });
                     }
@@ -538,7 +538,10 @@ export default class FormComponent extends Component {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
+        return (this.subFormReady &&
+            (!this.component.hasOwnProperty('reference') || this.component.reference) &&
+            !this.shouldConditionallyClear() &&
+            !(this.component.hidden && this.component.clearOnHide));
     }
     /**
      * Returns the data for the subform.
@@ -746,7 +749,7 @@ export default class FormComponent extends Component {
             isNestedWizard ? this.rebuild() : this.redraw();
         }
         if (!value && isNestedWizard) {
-            this.root.redraw();
+            this.root?.redraw();
         }
     }
     get parentVisible() {

package/lib/mjs/components/radio/Radio.js

@@ -348,7 +348,7 @@ export default class RadioComponent extends ListComponent {
             }
         });
         if (this.isSelectURL) {
-            const submission = this.root.submission;
+            const submission = this.root?.submission;
             if (!submission.metadata) {
                 submission.metadata = {};
             }
@@ -395,7 +395,7 @@ export default class RadioComponent extends ListComponent {
         const shouldResetValue = flags && flags.modified && !flags.noUpdateEvent && this.previousValue === this.currentValue;
         if (shouldResetValue) {
             this.resetValue();
-            this.triggerChange(flags);
+            this.triggerChange?.(flags);
             this.setSelectedClasses();
         }
         this.previousValue = this.dataValue;
@@ -439,7 +439,7 @@ export default class RadioComponent extends ListComponent {
                 break;
         }
         if (this.isSelectURL && this.templateData && this.templateData[value]) {
-            const submission = this.root.submission;
+            const submission = this.root?.submission;
             if (!submission.metadata.selectData) {
                 submission.metadata.selectData = {};
             }

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -41,7 +41,7 @@ export default class ReCaptchaComponent extends Component {
             this.append(this.text(this.name));
         }
         else {
-            const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
+            const siteKey = _get(this.root?.form, 'settings.recaptcha.siteKey');
             if (siteKey) {
                 const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
                 this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
@@ -58,13 +58,13 @@ export default class ReCaptchaComponent extends Component {
         return true;
     }
     async verify(actionName) {
-        const siteKey = _get(this.root.form, 'settings.recaptcha.siteKey');
+        const siteKey = _get(this.root?.form, 'settings.recaptcha.siteKey');
         if (!siteKey) {
             console.warn('There is no Site Key specified in settings in form JSON');
             return;
         }
         if (!this.recaptchaApiReady) {
-            const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${_get(this.root.form, 'settings.recaptcha.siteKey')}`;
+            const recaptchaApiScriptUrl = `https://www.google.com/recaptcha/api.js?render=${_get(this.root?.form, 'settings.recaptcha.siteKey')}`;
             this.recaptchaApiReady = Formio.requireLibrary('googleRecaptcha', 'grecaptcha', recaptchaApiScriptUrl, true);
         }
         try {

package/lib/mjs/components/select/Select.js

@@ -226,7 +226,14 @@ export default class SelectComponent extends ListComponent {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }
     selectValueAndLabel(data) {
-        const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+        let value;
+        // If the select is a resource reference, use the actual object value
+        if (this.component.reference && this.isSelectResource) {
+            value = this.getOptionValue(data);
+        }
+        else {
+            value = this.getOptionValue(this.isEntireObjectDisplay() && !this.itemValue(data) ? data : this.itemValue(data));
+        }
         return {
             value,
             label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
@@ -265,6 +272,10 @@ export default class SelectComponent extends ListComponent {
                 else {
                     data = selectData;
                 }
+                // use template data for reference fields to make sure the data is updated
+                if (this.component.reference && this.templateData[templateValue]) {
+                    data = this.templateData[templateValue];
+                }
             }
         }
         if (typeof data === 'string' || typeof data === 'number') {

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -135,8 +135,10 @@ export default class SelectBoxesComponent extends RadioComponent {
             });
         }
         const checkedValues = _.keys(_.pickBy(value, (val) => val));
-        if (this.isSelectURL && this.templateData && _.every(checkedValues, (val) => this.templateData[val])) {
-            const submission = this.root.submission;
+        if (this.isSelectURL &&
+            this.templateData &&
+            _.every(checkedValues, (val) => this.templateData[val])) {
+            const submission = this.root?.submission;
             if (!submission.metadata.selectData) {
                 submission.metadata.selectData = {};
             }

package/lib/mjs/components/signature/Signature.js

@@ -89,7 +89,7 @@ export default class SignatureComponent extends Input {
                 this.signaturePad.clear();
             }
             else if (changed) {
-                this.triggerChange();
+                this.triggerChange?.();
             }
         }
         if (this.signaturePad && this.dataValue && this.signaturePad.isEmpty()) {

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

@@ -120,7 +120,7 @@ export default class TableComponent extends NestedComponent {
                     }
                     else if (lastNonEmptyRow[colIndex]) {
                         column.components = _.cloneDeep(lastNonEmptyRow[colIndex].components);
-                        BuilderUtils.uniquify(this.root._form.components, column);
+                        BuilderUtils.uniquify(this.root?._form.components, column);
                     }
                 }
                 _.each(column.components, (comp) => {

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

@@ -139,7 +139,7 @@ export default class TabsComponent extends NestedComponent {
             this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
         }
         this.setValue(this.data);
-        this.triggerChange();
+        this.triggerChange?.();
     }
     beforeFocus(component) {
         if ('beforeFocus' in this.parent) {

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.2.3"
+    "version": "5.2.4"
     
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.2.3",
+  "version": "5.2.4",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -92,7 +92,7 @@
     "uuid": "^9.0.0",
     "vanilla-picker": "^2.12.3",
     "@formio/bootstrap": "^3.1.3",
-    "@formio/core": "^2.5.2"
+    "@formio/core": "^2.5.3"
   },
   "devDependencies": {
     "@types/node": "^22.15.19",