@formio/js 5.0.0-rc.47 → 5.0.0-rc.49

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

@@ -275,14 +275,14 @@ declare class Component extends Element {
     getFormattedAttribute(attr: any): any;
     getFormattedTooltip(tooltipValue: any): any;
     isHtmlRenderMode(): boolean;
-    renderTemplate(name: any, data: {} | undefined, modeOption: any): any;
+    renderTemplate(name: any, data?: {}, modeOption?: string): any;
     /**
      * Sanitize an html string.
      *
      * @param string
      * @returns {*}
      */
-    sanitize(dirty: any, forceSanitize: any, options: any): any;
+    sanitize(dirty: any, forceSanitize?: boolean, options?: {}): any;
     /**
      * Render a template string into html.
      *
@@ -761,7 +761,7 @@ declare class Component extends Element {
      * @param {*} silentCheck
      * @returns
      */
-    checkValidity(data: any, dirty: any, row: any, silentCheck: any, errors?: any[]): boolean;
+    checkValidity(data?: any, dirty?: any, row?: any, silentCheck?: any, errors?: any[]): boolean;
     checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any, errors?: any[]): boolean;
     /**
      * Check the conditions, calculations, and validity of a single component and triggers an update if
@@ -828,7 +828,7 @@ declare class Component extends Element {
     };
     autofocus(): void;
     scrollIntoView(element?: any): void;
-    focus(index: any): void;
+    focus(index?: number): void;
     /**
      * Get `Formio` instance for working with files
      */

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

@@ -822,7 +822,7 @@ export default class Component extends Element {
     isHtmlRenderMode() {
         return this.options.renderMode === 'html';
     }
-    renderTemplate(name, data = {}, modeOption) {
+    renderTemplate(name, data = {}, modeOption = '') {
         // Need to make this fall back to form if renderMode is not found similar to how we search templates.
         const mode = modeOption || this.options.renderMode || 'form';
         data.component = this.component;
@@ -866,7 +866,7 @@ export default class Component extends Element {
      * @param string
      * @returns {*}
      */
-    sanitize(dirty, forceSanitize, options) {
+    sanitize(dirty, forceSanitize = false, options = {}) {
         if (!this.shouldSanitizeValue && !forceSanitize) {
             return dirty;
         }
@@ -2750,7 +2750,7 @@ export default class Component extends Element {
      * @param {*} silentCheck
      * @returns
      */
-    checkValidity(data, dirty, row, silentCheck, errors = []) {
+    checkValidity(data = null, dirty = false, row = null, silentCheck = false, errors = []) {
         data = data || this.rootValue;
         row = row || this.data;
         console.log('Deprecation warning:  Component.checkValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
@@ -3155,14 +3155,12 @@ export default class Component extends Element {
         const { left, top } = element.getBoundingClientRect();
         window.scrollTo(left + window.scrollX, top + window.scrollY);
     }
-    focus(index) {
+    focus(index = (this.refs.input.length - 1)) {
         if ('beforeFocus' in this.parent) {
             this.parent.beforeFocus(this);
         }
         if (this.refs.input?.length) {
-            const focusingInput = typeof index === 'number' && this.refs.input[index]
-                ? this.refs.input[index]
-                : this.refs.input[this.refs.input.length - 1];
+            const focusingInput = this.refs.input[index];
             if (this.component.widget?.type === 'calendar') {
                 const sibling = focusingInput.nextSibling;
                 if (sibling) {

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -17,7 +17,7 @@ export default class NestedComponent extends Field {
      *
      * @param {function} fn - Called for every component.
      */
-    everyComponent(fn: Function, options: any): void;
+    everyComponent(fn: Function, options?: {}): void;
     hasComponent(component: any): boolean;
     flattenComponents(): {};
     /**
@@ -43,7 +43,7 @@ export default class NestedComponent extends Field {
      * @param {function} fn - Called with the component once it is retrieved.
      * @return {Object} - The component retrieved.
      */
-    getComponentById(id: string, fn: Function): Object;
+    getComponentById(id: string, fn?: Function): Object;
     /**
      * Create a new component and add it to the components array.
      *
@@ -70,7 +70,7 @@ export default class NestedComponent extends Field {
      * @param {HTMLElement} before - A DOM element to insert this element before.
      * @return {Component} - The created component instance.
      */
-    addComponent(component: Object, data: Object, before: HTMLElement, noAdd: any): Component;
+    addComponent(component: Object, data?: Object, before?: HTMLElement, noAdd?: boolean): Component;
     beforeFocus(): void;
     renderComponents(components: any): any;
     attach(element: any): Promise<[void, void]>;
@@ -90,7 +90,7 @@ export default class NestedComponent extends Field {
      * @param {function} fn - Called once the component is removed.
      * @return {null}
      */
-    removeComponentByKey(key: string, fn: Function): null;
+    removeComponentByKey(key: string, fn?: Function): null;
     /**
      * Removes a component provided the Id of the component.
      *
@@ -98,7 +98,7 @@ export default class NestedComponent extends Field {
      * @param {function} fn - Called when the component is removed.
      * @return {null}
      */
-    removeComponentById(id: string, fn: Function): null;
+    removeComponentById(id: string, fn?: Function): null;
     updateValue(value: any, flags?: {}): any;
     shouldSkipValidation(data: any, row: any, flags: any): boolean;
     checkData(data: any, flags: any, row: any, components: any): true | undefined;
@@ -136,7 +136,6 @@ export default class NestedComponent extends Field {
      */
     validate(data: any, flags?: any): any;
     checkComponentValidity(data: any, dirty: any, row: any, flags?: {}, allErrors?: any[]): boolean;
-    checkValidity(data: any, dirty: any, row: any, silentCheck: any, childErrors?: any[]): boolean;
     checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<any>;
     setPristine(pristine: any): void;
     get isPristine(): any;
@@ -149,4 +148,3 @@ export default class NestedComponent extends Field {
     get lazyLoad(): any;
 }
 import Field from '../field/Field';
-import Component from '../component/Component';

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -3,7 +3,6 @@ import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
 import { getArrayFromComponentPath, getStringFromComponentPath, getRandomComponentId } from '../../../utils/utils';
-import Component from '../component/Component';
 import { process as processAsync, processSync } from '@formio/core/process';
 export default class NestedComponent extends Field {
     static schema(...extend) {
@@ -138,7 +137,7 @@ export default class NestedComponent extends Field {
      *
      * @param {function} fn - Called for every component.
      */
-    everyComponent(fn, options) {
+    everyComponent(fn, options = {}) {
         const components = this.getComponents();
         _.each(components, (component, index) => {
             if (fn(component, components, index) === false) {
@@ -240,7 +239,7 @@ export default class NestedComponent extends Field {
      * @param {function} fn - Called with the component once it is retrieved.
      * @return {Object} - The component retrieved.
      */
-    getComponentById(id, fn) {
+    getComponentById(id, fn = null) {
         let comp = null;
         this.everyComponent((component, components) => {
             if (component.id === id) {
@@ -343,7 +342,7 @@ export default class NestedComponent extends Field {
      * @param {HTMLElement} before - A DOM element to insert this element before.
      * @return {Component} - The created component instance.
      */
-    addComponent(component, data, before, noAdd) {
+    addComponent(component, data = null, before = null, noAdd = false) {
         data = data || this.data;
         this.components = this.components || [];
         component = this.hook('addComponent', component, data, before, noAdd);
@@ -452,7 +451,7 @@ export default class NestedComponent extends Field {
      * @param {function} fn - Called once the component is removed.
      * @return {null}
      */
-    removeComponentByKey(key, fn) {
+    removeComponentByKey(key, fn = null) {
         const comp = this.getComponent(key, (component, components) => {
             this.removeComponent(component, components);
             if (fn) {
@@ -473,7 +472,7 @@ export default class NestedComponent extends Field {
      * @param {function} fn - Called when the component is removed.
      * @return {null}
      */
-    removeComponentById(id, fn) {
+    removeComponentById(id, fn = null) {
         const comp = this.getComponentById(id, (component, components) => {
             this.removeComponent(component, components);
             if (fn) {

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -11,7 +11,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
     processRow(method: any, data: any, opts: any, row: any, components: any, silentCheck: any): any;
     hasAddButton(): any;
     getComponent(path: any, fn: any, originalPath: any): any;
-    everyComponent(fn: any, rowIndex: any, options: any): void;
+    everyComponent(fn: any, rowIndex: any, options?: {}): void;
     getComponents(rowIndex: any): any;
 }
 import NestedDataComponent from '../nesteddata/NestedDataComponent';

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -125,7 +125,7 @@ export default class NestedArrayComponent extends NestedDataComponent {
         }
         return result;
     }
-    everyComponent(fn, rowIndex, options) {
+    everyComponent(fn, rowIndex, options = {}) {
         if (_.isObject(rowIndex)) {
             options = rowIndex;
             rowIndex = null;

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.d.ts

@@ -5,7 +5,7 @@ export default class NestedDataComponent extends NestedComponent {
     get emptyValue(): {};
     getValueAsString(value: any, options: any): string;
     getDataValueAsTable(value: any, options: any): string;
-    everyComponent(fn: any, options: any): void;
+    everyComponent(fn: any, options?: {}): void;
     updateValue(value: any, flags?: {}): boolean;
     setValue(value: any, flags?: {}): boolean;
 }

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -87,7 +87,7 @@ export default class NestedDataComponent extends NestedComponent {
     `);
         return result;
     }
-    everyComponent(fn, options) {
+    everyComponent(fn, options = {}) {
         if (options?.email) {
             if (options.fromRoot) {
                 delete options.fromRoot;

package/lib/mjs/components/day/Day.d.ts

@@ -157,6 +157,7 @@ export default class DayComponent extends Field {
      * @return {null}
      */
     getValueAsString(value: any): null;
+    focus(field: any): void;
     isPartialDay(value: any): boolean;
     getValidationFormat(): "DD-MM-YYYY" | "MM-DD-YYYY";
 }

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

@@ -86,8 +86,8 @@ export default class HTMLComponent extends Component {
     attach(element) {
         this.loadRefs(element, { html: 'single' });
         this.dataReady.then(() => {
-            if (this.element) {
-                this.setContent(this.elemet, this.content);
+            if (this.refs.html) {
+                this.setContent(this.refs.html, this.content);
             }
         });
         return super.attach(element);

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

@@ -59,6 +59,7 @@ export default class SelectComponent extends ListComponent {
     get itemsFromUrl(): boolean;
     get isInfiniteScrollProvided(): boolean;
     get shouldInitialLoad(): any;
+    get selectMetadata(): any;
     isEntireObjectDisplay(): boolean;
     selectValueAndLabel(data: any): {
         value: any;
@@ -119,7 +120,9 @@ export default class SelectComponent extends ListComponent {
      * @param {Array} items
      */
     addCurrentChoices(values: any, items: any[], keyValue: any): any;
-    normalizeSingleValue(value: any, retainObject: any): any;
+    normalizeSingleValue(value: any): any;
+    setMetadata(value: any): any;
+    updateValue(value: any, flags: any): boolean;
     setValue(value: any, flags?: {}): boolean;
     lazyLoadInit: boolean | undefined;
     isInitApiCallNeeded(hasValue: any): any;

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

@@ -215,8 +215,11 @@ export default class SelectComponent extends ListComponent {
         }
         return super.shouldLoad;
     }
+    get selectMetadata() {
+        return super.selectData;
+    }
     get selectData() {
-        return this.component.selectData || super.selectData;
+        return this.selectMetadata || this.component.selectData;
     }
     isEntireObjectDisplay() {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
@@ -1163,7 +1166,7 @@ export default class SelectComponent extends ListComponent {
         this.triggerUpdate();
         return done;
     }
-    normalizeSingleValue(value, retainObject) {
+    normalizeSingleValue(value) {
         if (_.isNil(value)) {
             return;
         }
@@ -1172,33 +1175,6 @@ export default class SelectComponent extends ListComponent {
         if (valueIsObject && Object.keys(value).length === 0) {
             return value;
         }
-        // Check to see if we need to save off the template data into our metadata.
-        if (retainObject) {
-            const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
-            const shouldSaveData = !valueIsObject || this.component.reference;
-            if (templateValue && shouldSaveData && (this.templateData && this.templateData[templateValue]) && this.root?.submission) {
-                const submission = this.root.submission;
-                if (!submission.metadata) {
-                    submission.metadata = {};
-                }
-                if (!submission.metadata.selectData) {
-                    submission.metadata.selectData = {};
-                }
-                let templateData = this.templateData[templateValue];
-                if (this.component.multiple) {
-                    templateData = {};
-                    const dataValue = this.dataValue;
-                    if (dataValue && _.isArray(dataValue) && dataValue.length) {
-                        dataValue.forEach((dataValueItem) => {
-                            const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;
-                            templateData[dataValueItemValue] = this.templateData[dataValueItemValue];
-                        });
-                    }
-                    templateData[value] = this.templateData[value];
-                }
-                _.set(submission.metadata.selectData, this.path, templateData);
-            }
-        }
         const dataType = this.component.dataType || 'auto';
         const normalize = {
             value,
@@ -1251,16 +1227,63 @@ export default class SelectComponent extends ListComponent {
      */
     normalizeValue(value) {
         if (this.component.multiple && Array.isArray(value)) {
-            return value.map((singleValue) => this.normalizeSingleValue(singleValue, true));
+            return value.map((singleValue) => this.normalizeSingleValue(singleValue));
+        }
+        return super.normalizeValue(this.normalizeSingleValue(value));
+    }
+    setMetadata(value) {
+        if (_.isNil(value)) {
+            return;
+        }
+        const valueIsObject = _.isObject(value);
+        //check if value equals to default emptyValue
+        if (valueIsObject && Object.keys(value).length === 0) {
+            return value;
+        }
+        // Check to see if we need to save off the template data into our metadata.
+        const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
+        const shouldSaveData = !valueIsObject || this.component.reference;
+        if (templateValue && shouldSaveData && this.templateData && this.templateData[templateValue] && this.root?.submission) {
+            const submission = this.root.submission;
+            if (!submission.metadata) {
+                submission.metadata = {};
+            }
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            let templateData = this.templateData[templateValue];
+            if (this.component.multiple) {
+                templateData = {};
+                const dataValue = this.dataValue;
+                if (dataValue && _.isArray(dataValue) && dataValue.length) {
+                    dataValue.forEach((dataValueItem) => {
+                        const dataValueItemValue = this.component.reference ? dataValueItem._id.toString() : dataValueItem;
+                        templateData[dataValueItemValue] = this.templateData[dataValueItemValue];
+                    });
+                }
+                templateData[value] = this.templateData[value];
+            }
+            _.set(submission.metadata.selectData, this.path, templateData);
         }
-        return super.normalizeValue(this.normalizeSingleValue(value, true));
+    }
+    updateValue(value, flags) {
+        const changed = super.updateValue(value, flags);
+        if (changed || !this.selectMetadata) {
+            if (this.component.multiple && Array.isArray(this.dataValue)) {
+                this.dataValue.forEach(singleValue => this.setMetadata(singleValue));
+            }
+            else {
+                this.setMetadata(this.dataValue);
+            }
+        }
+        return changed;
     }
     setValue(value, flags = {}) {
         const previousValue = this.dataValue;
+        const changed = this.updateValue(value, flags);
         if (this.component.widget === 'html5' && (_.isEqual(value, previousValue) || _.isEqual(previousValue, {}) && _.isEqual(flags, {})) && !flags.fromSubmission) {
             return false;
         }
-        const changed = this.updateValue(value, flags);
         value = this.dataValue;
         const hasPreviousValue = !this.isEmpty(previousValue);
         const hasValue = !this.isEmpty(value);
@@ -1375,7 +1398,7 @@ export default class SelectComponent extends ListComponent {
         if (values) {
             if (_.isObject(value)) {
                 const compareComplexValues = (optionValue) => {
-                    const normalizedOptionValue = this.normalizeSingleValue(optionValue, true);
+                    const normalizedOptionValue = this.normalizeSingleValue(optionValue);
                     if (!_.isObject(normalizedOptionValue)) {
                         return false;
                     }

package/lib/mjs/components/select/fixtures/comp22.d.ts

@@ -0,0 +1,51 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        dataSrc: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string;
+        selectValues: string;
+        disableLimit: boolean;
+        noRefreshOnScroll: boolean;
+        selectData: {
+            label: string;
+        };
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        valueProperty?: undefined;
+        validateWhenHidden?: undefined;
+        defaultValue?: undefined;
+        selectValues?: undefined;
+        disableLimit?: undefined;
+        noRefreshOnScroll?: undefined;
+        selectData?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/select/fixtures/comp22.js

@@ -0,0 +1,41 @@
+export default {
+    title: 'FIO-8091',
+    name: 'fio8091',
+    path: 'fio8091',
+    type: 'form',
+    display: 'form',
+    components: [{
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'url',
+            data: {
+                url: 'https://fake_url.com',
+                headers: [
+                    {
+                        key: '',
+                        value: ''
+                    },
+                ],
+            },
+            valueProperty: 'value',
+            validateWhenHidden: false,
+            key: 'select',
+            type: 'select',
+            input: true,
+            defaultValue: 'value1',
+            selectValues: 'data',
+            disableLimit: false,
+            noRefreshOnScroll: false,
+            selectData: {
+                label: 'Label 1'
+            },
+        }, {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        }],
+};

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

@@ -18,5 +18,6 @@ import comp18 from './comp18';
 import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21 };
+import comp22 from './comp22';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
 export { multiSelect, multiSelectOptions } from "./comp3";

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

@@ -19,4 +19,5 @@ import comp18 from './comp18';
 import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21 };
+import comp22 from './comp22';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.47",
+  "version": "5.0.0-rc.49",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -77,7 +77,7 @@
   "dependencies": {
     "@formio/bootstrap": "^3.0.0-rc.24",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "^2.1.0-dev.tt.3",
+    "@formio/core": "^2.1.0-dev.tt.4",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",