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

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

@@ -238,10 +238,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) {
@@ -258,7 +257,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) => 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 +1287,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 +1314,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 +1512,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) => {
@@ -1527,11 +1531,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;

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/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/mjs/components/select/fixtures/comp4.js

@@ -19,6 +19,10 @@ export default {
             }, {
                 'label': 'test',
                 'value': 'test'
+            },
+            {
+                'label': '1',
+                'value': [1, 2, 3]
             }],
         'resource': '',
         'json': '',

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

@@ -145,6 +145,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 = [];
@@ -183,6 +188,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-rc.80",
+  "version": "5.0.0-rc.82",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -81,7 +81,7 @@
   "dependencies": {
     "@formio/bootstrap": "3.0.0-rc.37",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.2.3-rc.2",
+    "@formio/core": "2.3.0-rc.3",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",