@formio/js 5.1.0-rc.9 → 5.1.0

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

@@ -109,6 +109,10 @@ export default class FormComponent extends Component {
     get emptyValue() {
         return { data: {} };
     }
+    // In order for the subform values to set properly, we must always say that nested forms have a default value.
+    get hasDefaultValue() {
+        return true;
+    }
     get ready() {
         return this.subFormReady || Promise.resolve();
     }
@@ -329,6 +333,9 @@ export default class FormComponent extends Component {
             && _.isNumber(this.formObj._vid)
             && this.formObj._vid !== this.subFormRevision;
     }
+    get subFormData() {
+        return this.dataValue?.data || {};
+    }
     destroy(all = false) {
         if (this.subForm) {
             this.subForm.destroy(all);
@@ -372,10 +379,11 @@ export default class FormComponent extends Component {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach) {
-        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {
+    createSubForm(fromAttach, beforeSubmit) {
+        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {
             if (!form) {
                 return;
             }
@@ -432,10 +440,12 @@ export default class FormComponent extends Component {
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach) {
-        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
+    loadSubForm(fromAttach, beforeSubmit) {
+        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
+        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -477,14 +487,14 @@ export default class FormComponent extends Component {
             return visible;
         }
         if (this.subForm) {
-            return this.subForm.checkConditions(data, flags, row);
+            return this.subForm.checkConditions(this.subFormData, flags);
         }
         // There are few cases when subForm is not loaded when a change is triggered,
         // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode
         else if (this.subFormReady) {
             this.subFormReady.then(() => {
                 if (this.subForm) {
-                    return this.subForm.checkConditions(data, flags, row);
+                    return this.subForm.checkConditions(this.subFormData, flags);
                 }
             });
         }
@@ -492,7 +502,7 @@ export default class FormComponent extends Component {
     }
     calculateValue(data, flags, row) {
         if (this.subForm) {
-            return this.subForm.calculateValue(data, flags, row);
+            return this.subForm.calculateValue(this.subFormData, flags);
         }
         return super.calculateValue(data, flags, row);
     }
@@ -507,7 +517,7 @@ 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.conditionallyHidden;
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
     }
     /**
      * Returns the data for the subform.
@@ -577,19 +587,17 @@ export default class FormComponent extends Component {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        if (this.isSubFormLazyLoad() && !this.subFormLoading) {
-            return this.createSubForm(true)
-                .then(this.submitSubForm(false))
-                .then(() => {
-                return this.dataValue;
-            })
+        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data
+        const loadHiddenForm = !this.component.clearOnHide;
+        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {
+            return this.createSubForm(true, true)
+                .then(() => this.submitSubForm(false))
+                .then(() => this.dataValue)
                 .then(() => super.beforeSubmit());
         }
         else {
             return this.submitSubForm(false)
-                .then(() => {
-                return this.dataValue;
-            })
+                .then(() => this.dataValue)
                 .then(() => super.beforeSubmit());
         }
     }
@@ -651,7 +659,7 @@ export default class FormComponent extends Component {
      * Sets the subform value
      * @param {object|null|undefined} submission - The submission to set.
      * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);

package/lib/mjs/components/form/editForm/Form.edit.data.js

@@ -6,7 +6,7 @@ export default [
     {
         weight: 140,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
         tooltip: 'When a field is hidden, clear the value.',

package/lib/mjs/components/html/HTML.js

@@ -53,8 +53,7 @@ export default class HTMLComponent extends Component {
         super.checkRefreshOn(changed);
         let visible;
         if (this.hasCondition()) {
-            this._conditionallyHidden = this.checkConditionallyHidden();
-            visible = !this.conditionallyHidden;
+            visible = !this.conditionallyHidden();
         }
         else {
             visible = !this.component.hidden;

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

@@ -355,7 +355,7 @@ export default class RadioComponent extends ListComponent {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
+                const checked = (value === undefined || value === null) ? false : (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -172,6 +172,7 @@ declare const _default: ({
     key: string;
     tooltip: string;
     weight: number;
+    defaultValue: boolean;
     conditional: {
         json: {
             and: ({
@@ -192,7 +193,6 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
     components?: undefined;

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -113,6 +113,7 @@ export default [
         key: 'lazyLoad',
         tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\'s will only fire when the control is activated.',
         weight: 11,
+        defaultValue: true,
         conditional: {
             json: {
                 and: [
@@ -202,7 +203,7 @@ export default [
         label: 'Value Property',
         key: 'valueProperty',
         skipMerge: true,
-        clearOnHide: true,
+        clearOnHide: false,
         tooltip: 'The field to use as the value.',
         weight: 11,
         refreshOn: 'data.resource',

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

@@ -66,6 +66,9 @@ export default class SelectBoxesComponent extends RadioComponent {
         info.attr.class = 'form-check-input';
         return info;
     }
+    get hasDefaultValue() {
+        return true;
+    }
     get emptyValue() {
         return this.component.values.reduce((prev, value) => {
             if (value.value) {

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

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

package/lib/mjs/components/textfield/TextField.js

@@ -86,6 +86,9 @@ export default class TextFieldComponent extends Input {
                 locale: this.component.widget.locale || this.options.language,
                 saveAs: 'text'
             };
+            // update originalComponent to include widget settings after component initialization 
+            // originalComponent is used to restore the component (and widget) after evaluating field logic 
+            this.originalComponent = FormioUtils.fastCloneDeep(this.component);
         }
     }
     attach(element) {

package/lib/mjs/components/unknown/Unknown.form.d.ts

@@ -1,5 +1,6 @@
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
 export default function _default(): object;

package/lib/mjs/components/unknown/Unknown.form.js

@@ -1,6 +1,7 @@
 import UnknownEditDisplay from './editForm/Unknown.edit.display';
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
 export default function () {

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

@@ -26,8 +26,8 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => 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) => 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) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

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

@@ -208,9 +208,10 @@ export function loadZones(url: string, timezone: string): Promise<any> | any;
  * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
+ * @param {object} options - The options object
  * @returns {Date} - The moment date object.
  */
-export function momentDate(value: string | Date, format: string, timezone: string): Date;
+export function momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
 /**
  * Format a date provided a value, format, and timezone object.
  * @param {string} timezonesUrl - The URL to load the timezone data from.
@@ -477,14 +478,6 @@ export function getDataParentComponent(componentInstance: Component): Component
  * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise
  */
 export function isPromise(value: any): boolean;
-/**
- * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its
- * changes by itself, e.g. EditGrid)
- * @param {Component} componentInstance - The component to check for the scoping parent.
- * @param {boolean} firstPass - Whether it is the first pass of the function
- * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise
- */
-export function isInsideScopingComponent(componentInstance: Component, firstPass?: boolean): boolean | any;
 /**
  * Returns all the focusable elements within the provided dom element.
  * @param {HTMLElement} element - The element to get the focusable elements from.

package/lib/mjs/utils/utils.js

@@ -632,9 +632,10 @@ export function loadZones(url, timezone) {
  * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
+ * @param {object} options - The options object
  * @returns {Date} - The moment date object.
  */
-export function momentDate(value, format, timezone) {
+export function momentDate(value, format, timezone, options) {
     const momentDate = moment(value);
     if (!timezone) {
         return momentDate;
@@ -642,7 +643,7 @@ export function momentDate(value, format, timezone) {
     if (timezone === 'UTC') {
         timezone = 'Etc/UTC';
     }
-    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && moment.zonesLoaded) {
+    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (moment.zonesLoaded || options?.email)) {
         return momentDate.tz(timezone);
     }
     return momentDate;
@@ -1501,26 +1502,6 @@ export function isPromise(value) {
         && typeof value.then === 'function'
         && Object.prototype.toString.call(value) === '[object Promise]';
 }
-/**
- * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its
- * changes by itself, e.g. EditGrid)
- * @param {Component} componentInstance - The component to check for the scoping parent.
- * @param {boolean} firstPass - Whether it is the first pass of the function
- * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise
- */
-export function isInsideScopingComponent(componentInstance, firstPass = true) {
-    if (!firstPass && componentInstance?.hasScopedChildren) {
-        return true;
-    }
-    const dataParent = getDataParentComponent(componentInstance);
-    if (dataParent?.hasScopedChildren) {
-        return true;
-    }
-    else if (dataParent?.parent) {
-        return isInsideScopingComponent(dataParent.parent, false);
-    }
-    return false;
-}
 /**
  * Returns all the focusable elements within the provided dom element.
  * @param {HTMLElement} element - The element to get the focusable elements from.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-rc.9",
+  "version": "5.1.0",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -56,7 +56,7 @@
     "dopublish": "npm run build && npm run tag && npm publish",
     "lint": "eslint ./src --fix",
     "serve": "jekyll serve --config _config.yml,_config.dev.yml",
-    "test": "mocha 'src/**/*.unit.js'",
+    "test": "mocha 'test/unit/*.unit.js'",
     "test:updateRenders": "npm run lib && TZ=UTC node --require jsdom-global/register test/updateRenders.js",
     "test:e2e": "NODE_OPTIONS=\"--max-old-space-size=4096\" karma start --verbose --single-run"
   },
@@ -79,9 +79,9 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "3.1.0-rc.1",
+    "@formio/bootstrap": "3.1.0",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.4.0-rc.6",
+    "@formio/core": "2.4.0",
     "@formio/text-mask-addons": "^3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
@@ -93,7 +93,7 @@
     "core-js": "^3.37.1",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
-    "dompurify": "^3.1.3",
+    "dompurify": "^3.2.4",
     "downloadjs": "^1.4.7",
     "dragula": "^3.7.3",
     "eventemitter3": "^5.0.1",

package/lib/cjs/components/_classes/component/fixtures/comp1.d.ts

@@ -1,33 +0,0 @@
-declare namespace _default {
-    export let tags: never[];
-    export let type: string;
-    export namespace conditional {
-        let eq: string;
-        let when: null;
-        let show: string;
-    }
-    export namespace validate {
-        let customPrivate: boolean;
-        let custom: string;
-        let pattern: string;
-        let maxLength: number;
-        let minLength: number;
-        let required: boolean;
-    }
-    export let persistent: boolean;
-    export let unique: boolean;
-    let _protected: boolean;
-    export { _protected as protected };
-    export let defaultValue: string;
-    export let multiple: boolean;
-    export let suffix: string;
-    export let prefix: string;
-    export let placeholder: string;
-    export let key: string;
-    export let label: string;
-    export let inputMask: string;
-    export let inputType: string;
-    export let tableView: boolean;
-    export let input: boolean;
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp1.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    'tags': [],
-    'type': 'textfield',
-    'conditional': {
-        'eq': '',
-        'when': null,
-        'show': ''
-    },
-    'validate': {
-        'customPrivate': false,
-        'custom': '',
-        'pattern': '',
-        'maxLength': 0,
-        'minLength': 0,
-        'required': false
-    },
-    'persistent': true,
-    'unique': false,
-    'protected': false,
-    'defaultValue': '',
-    'multiple': false,
-    'suffix': '',
-    'prefix': '',
-    'placeholder': '',
-    'key': 'firstName',
-    'label': 'First Name',
-    'inputMask': '',
-    'inputType': 'text',
-    'tableView': true,
-    'input': true
-};

package/lib/cjs/components/_classes/component/fixtures/comp2.d.ts

@@ -1,33 +0,0 @@
-declare namespace _default {
-    export let tags: never[];
-    export let type: string;
-    export namespace conditional {
-        let eq: string;
-        let when: null;
-        let show: string;
-    }
-    export namespace validate {
-        let customPrivate: boolean;
-        let custom: string;
-        let pattern: string;
-        let maxLength: number;
-        let minLength: number;
-        let required: boolean;
-    }
-    export let persistent: boolean;
-    export let unique: boolean;
-    let _protected: boolean;
-    export { _protected as protected };
-    export let defaultValue: string;
-    export let multiple: boolean;
-    export let suffix: string;
-    export let prefix: string;
-    export let placeholder: string;
-    export let key: string;
-    export let label: string;
-    export let inputMask: string;
-    export let inputType: string;
-    export let tableView: boolean;
-    export let input: boolean;
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp2.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    'tags': [],
-    'type': 'textfield',
-    'conditional': {
-        'eq': '',
-        'when': null,
-        'show': ''
-    },
-    'validate': {
-        'customPrivate': false,
-        'custom': '',
-        'pattern': '',
-        'maxLength': 0,
-        'minLength': 0,
-        'required': false
-    },
-    'persistent': true,
-    'unique': false,
-    'protected': false,
-    'defaultValue': '',
-    'multiple': true,
-    'suffix': '',
-    'prefix': '',
-    'placeholder': '',
-    'key': 'names',
-    'label': 'Names',
-    'inputMask': '',
-    'inputType': 'text',
-    'tableView': true,
-    'input': true
-};

package/lib/cjs/components/_classes/component/fixtures/comp3.d.ts

@@ -1,14 +0,0 @@
-declare namespace _default {
-    let label: string;
-    let tableView: boolean;
-    let modalEdit: boolean;
-    let multiple: boolean;
-    namespace validate {
-        let multiple_1: boolean;
-        export { multiple_1 as multiple };
-    }
-    let key: string;
-    let type: string;
-    let input: boolean;
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp3.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    label: 'Text Field',
-    tableView: true,
-    modalEdit: true,
-    multiple: true,
-    validate: {
-        multiple: true
-    },
-    key: 'textField',
-    type: 'textfield',
-    input: true
-};

package/lib/cjs/components/_classes/component/fixtures/comp4.d.ts

@@ -1,17 +0,0 @@
-declare namespace _default {
-    let _id: string;
-    let label: string;
-    let tableView: boolean;
-    let modalEdit: boolean;
-    namespace validate {
-        let required: boolean;
-    }
-    let key: string;
-    let type: string;
-    let input: boolean;
-    let title: string;
-    let display: string;
-    let name: string;
-    let path: string;
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp4.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    _id: '611389eae1215a4dadc1099d',
-    label: 'Text Field',
-    tableView: true,
-    modalEdit: true,
-    validate: {
-        required: true
-    },
-    key: 'textField',
-    type: 'textfield',
-    input: true,
-    title: 'FIO-3631',
-    display: 'form',
-    name: 'fio3631',
-    path: 'fio3631',
-};

package/lib/cjs/components/_classes/component/fixtures/comp5.d.ts

@@ -1,26 +0,0 @@
-declare namespace _default {
-    let type: string;
-    let display: string;
-    let components: ({
-        label: string;
-        description: string;
-        tooltip: string;
-        applyMaskOn: string;
-        tableView: boolean;
-        key: string;
-        type: string;
-        input: boolean;
-        disableOnInvalid?: undefined;
-    } | {
-        type: string;
-        label: string;
-        key: string;
-        disableOnInvalid: boolean;
-        input: boolean;
-        tableView: boolean;
-        description?: undefined;
-        tooltip?: undefined;
-        applyMaskOn?: undefined;
-    })[];
-}
-export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp5.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    type: 'form',
-    display: 'form',
-    components: [
-        {
-            label: 'Text Field',
-            description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
-            tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
-            applyMaskOn: 'change',
-            tableView: true,
-            key: 'textField',
-            type: 'textfield',
-            input: true
-        },
-        {
-            type: 'button',
-            label: 'Submit',
-            key: 'submit',
-            disableOnInvalid: true,
-            input: true,
-            tableView: false
-        }
-    ],
-};