@formio/js 5.0.0-dev.5813.012c686 → 5.0.0-dev.5815.e20a0d6

package/lib/cjs/utils/utils.js

@@ -178,6 +178,11 @@ exports.checkCalculated = checkCalculated;
  * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.
  * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.
  */
+/**
+ *
+ * @param conditionPaths
+ * @param data
+ */
 function getConditionalPathsRecursive(conditionPaths, data) {
     let currentGlobalIndex = 0;
     const conditionalPathsArray = [];
@@ -216,6 +221,14 @@ function getConditionalPathsRecursive(conditionPaths, data) {
     getConditionalPaths(data);
     return conditionalPathsArray;
 }
+/**
+ *
+ * @param component
+ * @param condition
+ * @param row
+ * @param data
+ * @param instance
+ */
 function checkSimpleConditional(component, condition, row, data, instance) {
     if (condition.when) {
         const value = getComponentActualValue(condition.when, data, row);

package/lib/mjs/Wizard.js

@@ -705,7 +705,7 @@ export default class Wizard extends Webform {
         }
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
-            this.scrollIntoView(this.element);
+            this.scrollIntoView(this.element, true);
             return Promise.reject(this.showErrors(errors, true));
         }
     }

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -1075,7 +1075,7 @@ declare class Component extends Element {
      */
     elementInfo(): any;
     autofocus(): void;
-    scrollIntoView(element?: any): void;
+    scrollIntoView(element: any, verticalOnly: any): void;
     focus(index: any): void;
     /**
      * Get `Formio` instance for working with files

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

@@ -3415,12 +3415,12 @@ export default class Component extends Element {
             this.on('render', () => this.focus(), true);
         }
     }
-    scrollIntoView(element = this.element) {
+    scrollIntoView(element = this.element, verticalOnly) {
         if (!element) {
             return;
         }
         const { left, top } = element.getBoundingClientRect();
-        window.scrollTo(left + window.scrollX, top + window.scrollY);
+        window.scrollTo(verticalOnly ? window.scrollX : left + window.scrollX, top + window.scrollY);
     }
     focus(index) {
         if ('beforeFocus' in this.parent) {

package/lib/mjs/components/select/Select.d.ts

@@ -136,6 +136,7 @@ export default class SelectComponent extends ListComponent {
     normalizeSingleValue(value: any): any;
     setMetadata(value: any): any;
     updateValue(value: any, flags: any): boolean;
+    undoValueTyping(value: any): any;
     setValue(value: any, flags?: {}): boolean;
     lazyLoadInit: boolean | undefined;
     isInitApiCallNeeded(hasValue: any): any;

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

@@ -237,10 +237,9 @@ export default class SelectComponent extends ListComponent {
     }
     selectValueAndLabel(data) {
         const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
-        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
         return {
             value,
-            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
         };
     }
     itemTemplate(data, value) {
@@ -257,8 +256,7 @@ 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) => this.normalizeSingleValue(value) === val) : (this.dataValue === value)) {
+        if (this.component.multiple && _.isArray(this.dataValue) ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val) : (this.dataValue === this.normalizeSingleValue(value))) {
             const selectData = this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
@@ -1288,6 +1286,23 @@ export default class SelectComponent extends ListComponent {
         }
         return changed;
     }
+    undoValueTyping(value) {
+        let untypedValue = value;
+        if (this.component.multiple && Array.isArray(value)) {
+            untypedValue = value.map(v => {
+                if (typeof v === 'boolean' || typeof v === 'number') {
+                    return v.toString();
+                }
+                return v;
+            });
+        }
+        else {
+            if (typeof value === 'boolean' || typeof value === 'number') {
+                untypedValue = value.toString();
+            }
+        }
+        return untypedValue;
+    }
     setValue(value, flags = {}) {
         const previousValue = this.dataValue;
         const changed = this.updateValue(value, flags);
@@ -1298,19 +1313,7 @@ export default class SelectComponent extends ListComponent {
         const hasPreviousValue = !this.isEmpty(previousValue);
         const hasValue = !this.isEmpty(value);
         // Undo typing when searching to set the value.
-        if (this.component.multiple && Array.isArray(value)) {
-            value = value.map(value => {
-                if (typeof value === 'boolean' || typeof value === 'number') {
-                    return value.toString();
-                }
-                return value;
-            });
-        }
-        else {
-            if (typeof value === 'boolean' || typeof value === 'number') {
-                value = value.toString();
-            }
-        }
+        value = this.undoValueTyping(value);
         if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {
             this.itemsLoaded.then(() => {
                 this.redraw();
@@ -1508,9 +1511,9 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
-        if (options.modalPreview && this.selectData) {
-            const { label } = this.selectValueAndLabel(value);
-            return label;
+        if (options.modalPreview) {
+            const template = this.itemTemplate(value, value);
+            return template;
         }
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {

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;

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

@@ -27,16 +27,20 @@ const setSelectData = (context) => {
     // Wait before downloadedResources will be set
     setTimeout(() => {
         const { instance, data } = context;
-        const selectDataComponent = instance?.root.getComponent('selectData');
+        const selectDataComponent = instance?.root?.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() || !instance.downloadedResources?.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);
 };
 export default [
@@ -678,10 +682,25 @@ export 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/mjs/utils/utils.d.ts

@@ -56,6 +56,14 @@ export function isMongoId(text: string): boolean;
  * @param {*} rowData - The contextual row data for the component.
  */
 export function checkCalculated(component: import('@formio/core').Component, submission: import('@formio/core').Submission, rowData: any): void;
+/**
+ *
+ * @param component
+ * @param condition
+ * @param row
+ * @param data
+ * @param instance
+ */
 export function checkSimpleConditional(component: any, condition: any, row: any, data: any, instance: any): boolean;
 /**
  * Returns a components normalized value.

package/lib/mjs/utils/utils.js

@@ -144,6 +144,11 @@ export function checkCalculated(component, submission, rowData) {
  * @param {import('../../src/components/_classes/component/Component').Component} instance - The instance of the component.
  * @returns {boolean} - TRUE if the condition is true; FALSE otherwise.
  */
+/**
+ *
+ * @param conditionPaths
+ * @param data
+ */
 function getConditionalPathsRecursive(conditionPaths, data) {
     let currentGlobalIndex = 0;
     const conditionalPathsArray = [];
@@ -182,6 +187,14 @@ function getConditionalPathsRecursive(conditionPaths, data) {
     getConditionalPaths(data);
     return conditionalPathsArray;
 }
+/**
+ *
+ * @param component
+ * @param condition
+ * @param row
+ * @param data
+ * @param instance
+ */
 export function checkSimpleConditional(component, condition, row, data, instance) {
     if (condition.when) {
         const value = getComponentActualValue(condition.when, data, row);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5813.012c686",
+  "version": "5.0.0-dev.5815.e20a0d6",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -56,9 +56,10 @@
     "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: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"
+    "test": "nyc --reporter=lcov --reporter=text --reporter=text-summary mocha test/unit/*.unit.js",
+    "test:updateRenders": "npm run lib && cross-env TZ=UTC node --require jsdom-global/register test/updateRenders.js",
+    "test:e2e": "NODE_OPTIONS=\"--max-old-space-size=4096\" karma start --verbose --single-run",
+    "show-coverage": "open coverage/lcov-report/index.html"
   },
   "repository": {
     "type": "git",
@@ -155,6 +156,7 @@
     "mocha": "^10.3.0",
     "mock-local-storage": "^1.1.24",
     "natives": "^1.1.6",
+    "nyc": "^17.0.0",
     "power-assert": "^1.6.1",
     "pre-commit": "^1.2.2",
     "pretty": "^2.0.0",
@@ -174,5 +176,19 @@
     "webpack-cli": "^5.1.1",
     "webpack-node-externals": "^3.0.0",
     "webpack-stream": "^7.0.0"
+  },
+  "nyc": {
+    "check-coverage": true,
+    "statements": 63,
+    "branches": 63,
+    "functions": 61,
+    "lines": 64,
+    "include": [
+      "src/**/*.js"
+    ],
+    "exclude": [
+      "src/**/fixtures"
+    ],
+    "all": true
   }
 }

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
-        }
-    ],
-};