@formio/js 5.0.0-rc.80 → 5.0.0-rc.81

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

@@ -20,7 +20,7 @@
 
 /*! @license DOMPurify 3.1.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.1.6/LICENSE */
 
-/*! formiojs v5.0.0-rc.80 | https://unpkg.com/formiojs@5.0.0-rc.80/LICENSE.txt */
+/*! formiojs v5.0.0-rc.81 | https://unpkg.com/formiojs@5.0.0-rc.81/LICENSE.txt */
 
 /**
  * @license

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

@@ -2187,7 +2187,7 @@ class Component extends Element_1.default {
             this.addClass(this.getElement(), 'formio-modified');
         }
         // If we are supposed to validate on blur, then don't trigger validation yet.
-        if (this.component.validateOn === 'blur') {
+        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {
             flags.noValidate = true;
         }
         if (this.component.onChange) {

package/lib/cjs/components/_classes/multivalue/Multivalue.js

@@ -37,6 +37,9 @@ class Multivalue extends Field_1.default {
                 if (this.component.storeas === 'string') {
                     return super.normalizeValue(value.join(this.delimiter || ''), flags);
                 }
+                if (this.component.type === 'hidden' && value.length > 1) {
+                    return super.normalizeValue(value, flags);
+                }
                 return super.normalizeValue(value[0] || emptyValue, flags);
             }
             else {

package/lib/cjs/components/editgrid/fixtures/comp18.d.ts

@@ -0,0 +1,38 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: {
+        label: string;
+        tableView: boolean;
+        validateWhenHidden: boolean;
+        rowDrafts: boolean;
+        key: string;
+        validateOn: string;
+        type: string;
+        displayAsTable: boolean;
+        input: boolean;
+        components: {
+            label: string;
+            widget: string;
+            tableView: boolean;
+            data: {
+                values: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+            validate: {
+                required: boolean;
+            };
+            validateWhenHidden: boolean;
+            validateOn: string;
+            key: string;
+            type: string;
+            input: boolean;
+        }[];
+    }[];
+}
+export default _default;

package/lib/cjs/components/editgrid/fixtures/comp18.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    title: "validate_submit",
+    name: "validate_submit",
+    path: "validate_submit",
+    type: "form",
+    display: "form",
+    components: [
+        {
+            label: "Edit Grid",
+            tableView: false,
+            validateWhenHidden: false,
+            rowDrafts: false,
+            key: "editGrid",
+            validateOn: 'submit',
+            type: "editgrid",
+            displayAsTable: false,
+            input: true,
+            components: [
+                {
+                    label: "Select",
+                    widget: "choicesjs",
+                    tableView: true,
+                    data: {
+                        values: [
+                            {
+                                label: "one",
+                                value: "one",
+                            },
+                            {
+                                label: "two",
+                                value: "two",
+                            },
+                        ],
+                    },
+                    validate: {
+                        required: true,
+                    },
+                    validateWhenHidden: false,
+                    validateOn: 'submit',
+                    key: "select1",
+                    type: "select",
+                    input: true,
+                },
+                {
+                    label: "Select",
+                    widget: "choicesjs",
+                    tableView: true,
+                    data: {
+                        values: [
+                            {
+                                label: "three",
+                                value: "three",
+                            },
+                            {
+                                label: "four",
+                                value: "four",
+                            },
+                        ],
+                    },
+                    validate: {
+                        required: true,
+                    },
+                    validateWhenHidden: false,
+                    validateOn: 'submit',
+                    key: "select2",
+                    type: "select",
+                    input: true,
+                },
+            ],
+        },
+    ],
+};

package/lib/cjs/components/editgrid/fixtures/index.d.ts

@@ -1,6 +1,12 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
+import comp4 from './comp4';
+import comp5 from './comp5';
+import comp6 from './comp6';
+import comp7 from './comp7';
+import comp8 from './comp8';
+import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
 import comp12 from './comp12';
@@ -8,13 +14,8 @@ import comp13 from './comp13';
 import comp14 from './comp14';
 import comp15 from './comp15';
 import comp16 from './comp16';
-import comp4 from './comp4';
-import comp5 from './comp5';
-import comp6 from './comp6';
-import comp7 from './comp7';
-import comp8 from './comp8';
-import comp9 from './comp9';
+import comp18 from './comp18';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/cjs/components/editgrid/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.compTestEvents = exports.compWithCustomDefaultValue = exports.withOpenWhenEmptyAndConditions = exports.compOpenWhenEmpty = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -36,9 +36,15 @@ const comp15_1 = __importDefault(require("./comp15"));
 exports.comp15 = comp15_1.default;
 const comp16_1 = __importDefault(require("./comp16"));
 exports.comp16 = comp16_1.default;
+const comp17_1 = __importDefault(require("./comp17"));
+exports.comp17 = comp17_1.default;
+const comp18_1 = __importDefault(require("./comp18"));
+exports.comp18 = comp18_1.default;
 const comp_with_conditions_and_openWhenEmpty_1 = __importDefault(require("./comp-with-conditions-and-openWhenEmpty"));
 exports.withOpenWhenEmptyAndConditions = comp_with_conditions_and_openWhenEmpty_1.default;
 const comp_openWhenEmpty_1 = __importDefault(require("./comp-openWhenEmpty"));
 exports.compOpenWhenEmpty = comp_openWhenEmpty_1.default;
 const comp_with_custom_default_value_1 = __importDefault(require("./comp-with-custom-default-value"));
 exports.compWithCustomDefaultValue = comp_with_custom_default_value_1.default;
+const comp_test_events_1 = __importDefault(require("./comp-test-events"));
+exports.compTestEvents = comp_test_events_1.default;

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

@@ -258,7 +258,8 @@ class SelectComponent extends ListComponent_1.default {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {
+        if (this.component.multiple
+            && lodash_1.default.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === value)) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && (value === null || value === void 0 ? void 0 : value._id) ? value._id.toString() : value;
@@ -1500,11 +1501,7 @@ class SelectComponent extends ListComponent_1.default {
                 data = data.toString();
             }
             if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {
-                data = data.map(item => {
-                    if (this.isBooleanOrNumber(item)) {
-                        item = item.toString();
-                    }
-                });
+                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);
             }
             return data;
         };

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

@@ -1102,13 +1102,47 @@ declare const _default: ({
     conditional: {
         json: {
             and: ({
-                '!==': ({
+                var: string;
+                '==='?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
+            } | {
+                '===': (boolean | {
                     var: string;
-                } | null)[];
+                })[];
+                var?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
             } | {
                 '!==': (string | {
                     var: string;
                 })[];
+                var?: undefined;
+                '==='?: undefined;
+                or?: undefined;
+            } | {
+                or: ({
+                    '===': (string | {
+                        var: string;
+                    })[];
+                    and?: undefined;
+                } | {
+                    and: ({
+                        '===': (string | {
+                            var: string;
+                        })[];
+                        '!=='?: undefined;
+                    } | {
+                        '!==': (string | {
+                            var: string;
+                        })[];
+                        '==='?: undefined;
+                    })[];
+                    '==='?: undefined;
+                })[];
+                var?: undefined;
+                '==='?: undefined;
+                '!=='?: undefined;
             })[];
             '==='?: undefined;
             in?: undefined;

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

@@ -31,18 +31,22 @@ const calculateSelectData = (context) => {
 const setSelectData = (context) => {
     // Wait before downloadedResources will be set
     setTimeout(() => {
-        var _a;
+        var _a, _b;
         const { instance, data } = context;
-        const selectDataComponent = instance === null || instance === void 0 ? void 0 : instance.root.getComponent('selectData');
+        const selectDataComponent = (_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent('selectData');
+        // clear selectData if conditions are not met or clearing default value
+        if (selectDataComponent && (!selectDataComponent.visible || !data.defaultValue)) {
+            selectDataComponent.setValue(null, { resetValue: true });
+            return;
+        }
         // nothing can set if don't have downloaded resources
-        if (!selectDataComponent || !instance.getValue() || !((_a = instance.downloadedResources) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (!selectDataComponent || !instance.getValue() || !((_b = instance.downloadedResources) === null || _b === void 0 ? void 0 : _b.length)) {
             return;
         }
-        // if valueProperty is not provided, we have entire object
         const shouldCalculateUrlData = data.dataSrc === 'url' && data.data.url && data.valueProperty;
         const shouldCalculateResourceData = data.dataSrc === 'resource' && data.data.resource && data.valueProperty;
-        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : undefined;
-        selectDataComponent.setValue(newValue);
+        const newValue = shouldCalculateUrlData || shouldCalculateResourceData ? calculateSelectData(context) : null;
+        selectDataComponent.setValue(newValue, { resetValue: newValue === null });
     }, 0);
 };
 exports.default = [
@@ -684,10 +688,25 @@ exports.default = [
     {
         key: 'selectData',
         conditional: {
-            json: { 'and': [
-                    { '!==': [{ var: 'data.valueProperty' }, null] },
-                    { '!==': [{ var: 'data.valueProperty' }, ''] },
-                ] },
+            json: {
+                and: [
+                    { var: 'data.valueProperty' },
+                    { '===': [{ var: 'data.lazyLoad' }, true] },
+                    { '!==': [{ var: 'data.widget' }, 'html5'] },
+                    {
+                        or: [
+                            { '===': [{ var: 'data.dataSrc' }, 'url'] },
+                            {
+                                and: [
+                                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+                                    // 'data' means entire object from resource will be used
+                                    { '!==': [{ var: 'data.valueProperty' }, 'data'] },
+                                ],
+                            }
+                        ]
+                    }
+                ]
+            },
         },
     },
     {

package/lib/cjs/components/select/fixtures/comp4.d.ts

@@ -7,10 +7,13 @@ declare namespace _default {
     export let multiple: boolean;
     export let dataSrc: string;
     export namespace data {
-        let values: {
+        let values: ({
             label: string;
             value: string;
-        }[];
+        } | {
+            label: string;
+            value: number[];
+        })[];
         let resource: string;
         let json: string;
         let url: string;

package/lib/cjs/components/select/fixtures/comp4.js

@@ -21,6 +21,10 @@ exports.default = {
             }, {
                 'label': 'test',
                 'value': 'test'
+            },
+            {
+                'label': '1',
+                'value': [1, 2, 3]
             }],
         'resource': '',
         'json': '',

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

@@ -2151,7 +2151,7 @@ export default class Component extends Element {
             this.addClass(this.getElement(), 'formio-modified');
         }
         // If we are supposed to validate on blur, then don't trigger validation yet.
-        if (this.component.validateOn === 'blur') {
+        if (this.component.validateOn === 'blur' || this.component.validateOn === 'submit') {
             flags.noValidate = true;
         }
         if (this.component.onChange) {

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -32,6 +32,9 @@ export default class Multivalue extends Field {
                 if (this.component.storeas === 'string') {
                     return super.normalizeValue(value.join(this.delimiter || ''), flags);
                 }
+                if (this.component.type === 'hidden' && value.length > 1) {
+                    return super.normalizeValue(value, flags);
+                }
                 return super.normalizeValue(value[0] || emptyValue, flags);
             }
             else {

package/lib/mjs/components/editgrid/fixtures/comp18.d.ts

@@ -0,0 +1,38 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: {
+        label: string;
+        tableView: boolean;
+        validateWhenHidden: boolean;
+        rowDrafts: boolean;
+        key: string;
+        validateOn: string;
+        type: string;
+        displayAsTable: boolean;
+        input: boolean;
+        components: {
+            label: string;
+            widget: string;
+            tableView: boolean;
+            data: {
+                values: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+            validate: {
+                required: boolean;
+            };
+            validateWhenHidden: boolean;
+            validateOn: string;
+            key: string;
+            type: string;
+            input: boolean;
+        }[];
+    }[];
+}
+export default _default;

package/lib/mjs/components/editgrid/fixtures/comp18.js

@@ -0,0 +1,72 @@
+export default {
+    title: "validate_submit",
+    name: "validate_submit",
+    path: "validate_submit",
+    type: "form",
+    display: "form",
+    components: [
+        {
+            label: "Edit Grid",
+            tableView: false,
+            validateWhenHidden: false,
+            rowDrafts: false,
+            key: "editGrid",
+            validateOn: 'submit',
+            type: "editgrid",
+            displayAsTable: false,
+            input: true,
+            components: [
+                {
+                    label: "Select",
+                    widget: "choicesjs",
+                    tableView: true,
+                    data: {
+                        values: [
+                            {
+                                label: "one",
+                                value: "one",
+                            },
+                            {
+                                label: "two",
+                                value: "two",
+                            },
+                        ],
+                    },
+                    validate: {
+                        required: true,
+                    },
+                    validateWhenHidden: false,
+                    validateOn: 'submit',
+                    key: "select1",
+                    type: "select",
+                    input: true,
+                },
+                {
+                    label: "Select",
+                    widget: "choicesjs",
+                    tableView: true,
+                    data: {
+                        values: [
+                            {
+                                label: "three",
+                                value: "three",
+                            },
+                            {
+                                label: "four",
+                                value: "four",
+                            },
+                        ],
+                    },
+                    validate: {
+                        required: true,
+                    },
+                    validateWhenHidden: false,
+                    validateOn: 'submit',
+                    key: "select2",
+                    type: "select",
+                    input: true,
+                },
+            ],
+        },
+    ],
+};

package/lib/mjs/components/editgrid/fixtures/index.d.ts

@@ -1,6 +1,12 @@
 import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
+import comp4 from './comp4';
+import comp5 from './comp5';
+import comp6 from './comp6';
+import comp7 from './comp7';
+import comp8 from './comp8';
+import comp9 from './comp9';
 import comp10 from './comp10';
 import comp11 from './comp11';
 import comp12 from './comp12';
@@ -8,13 +14,8 @@ import comp13 from './comp13';
 import comp14 from './comp14';
 import comp15 from './comp15';
 import comp16 from './comp16';
-import comp4 from './comp4';
-import comp5 from './comp5';
-import comp6 from './comp6';
-import comp7 from './comp7';
-import comp8 from './comp8';
-import comp9 from './comp9';
+import comp18 from './comp18';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/mjs/components/editgrid/fixtures/index.js

@@ -14,7 +14,10 @@ import comp13 from './comp13';
 import comp14 from './comp14';
 import comp15 from './comp15';
 import comp16 from './comp16';
+import comp17 from './comp17';
+import comp18 from './comp18';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue };
+import compTestEvents from './comp-test-events';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

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

@@ -258,7 +258,8 @@ export default class SelectComponent extends ListComponent {
             const value = (typeof itemLabel === 'string') ? this.t(itemLabel, { _userInput: true }) : itemLabel;
             return this.sanitize(value, this.shouldSanitizeValue);
         }
-        if (this.component.multiple && _.isArray(this.dataValue) ? this.dataValue.find((val) => value === val) : (this.dataValue === value)) {
+        if (this.component.multiple
+            && _.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === value)) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
@@ -1527,11 +1528,7 @@ export default class SelectComponent extends ListComponent {
                 data = data.toString();
             }
             if (Array.isArray(data) && data.some(item => this.isBooleanOrNumber(item))) {
-                data = data.map(item => {
-                    if (this.isBooleanOrNumber(item)) {
-                        item = item.toString();
-                    }
-                });
+                data = data.map(item => this.isBooleanOrNumber(item) ? item.toString() : item);
             }
             return data;
         };

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

@@ -1102,13 +1102,47 @@ declare const _default: ({
     conditional: {
         json: {
             and: ({
-                '!==': ({
+                var: string;
+                '==='?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
+            } | {
+                '===': (boolean | {
                     var: string;
-                } | null)[];
+                })[];
+                var?: undefined;
+                '!=='?: undefined;
+                or?: undefined;
             } | {
                 '!==': (string | {
                     var: string;
                 })[];
+                var?: undefined;
+                '==='?: undefined;
+                or?: undefined;
+            } | {
+                or: ({
+                    '===': (string | {
+                        var: string;
+                    })[];
+                    and?: undefined;
+                } | {
+                    and: ({
+                        '===': (string | {
+                            var: string;
+                        })[];
+                        '!=='?: undefined;
+                    } | {
+                        '!==': (string | {
+                            var: string;
+                        })[];
+                        '==='?: undefined;
+                    })[];
+                    '==='?: undefined;
+                })[];
+                var?: undefined;
+                '==='?: undefined;
+                '!=='?: undefined;
             })[];
             '==='?: undefined;
             in?: undefined;