@formio/js 5.1.0-rc.1 → 5.1.0-rc.11

package/lib/mjs/components/_classes/field/Field.js

@@ -6,7 +6,7 @@ import Component from '../component/Component';
 export default class Field extends Component {
     /**
      * @param {object} element - The component to create.
-     * @returns {Field} - The created field.
+     * @returns {string} - The rendered HTML string of a component
      */
     render(element) {
         if (this.noField) {

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

@@ -146,7 +146,7 @@ export default class NestedComponent extends Field {
      */
     addComponent(component: import('@formio/core').Component, data?: object, before?: HTMLElement, noAdd?: boolean | undefined): any;
     beforeFocus(): void;
-    render(children: any): Field;
+    render(children: any): string;
     renderComponents(components: any): any;
     attach(element: any): Promise<[void, void]>;
     /**

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

@@ -81,17 +81,26 @@ export default class NestedComponent extends Field {
         const visibilityChanged = this._visible !== value;
         this._visible = value;
         const isVisible = this.visible;
+        const isConditionallyHidden = this.checkConditionallyHidden();
         const forceShow = this.shouldForceShow();
         const forceHide = this.shouldForceHide();
-        this.components.forEach(component => {
+        this.components.forEach((component) => {
             // Set the parent visibility first since we may have nested components within nested components
             // and they need to be able to determine their visibility based on the parent visibility.
             component.parentVisible = isVisible;
-            const conditionallyVisible = component.conditionallyVisible();
-            if (forceShow || conditionallyVisible) {
+            component._parentConditionallyHidden = isConditionallyHidden;
+            let visible;
+            if (component.hasCondition()) {
+                component._conditionallyHidden = component.checkConditionallyHidden() || component._parentConditionallyHidden;
+                visible = !component.conditionallyHidden;
+            }
+            else {
+                visible = !component.component.hidden;
+            }
+            if (forceShow || visible) {
                 component.visible = true;
             }
-            else if (forceHide || !isVisible || !conditionallyVisible) {
+            else if (forceHide || !isVisible || !visible) {
                 component.visible = false;
             }
             // If hiding a nested component, clear all errors below.
@@ -100,7 +109,6 @@ export default class NestedComponent extends Field {
             }
         });
         if (visibilityChanged) {
-            this.clearOnHide();
             this.redraw();
         }
     }
@@ -365,6 +373,7 @@ export default class NestedComponent extends Field {
         data = data || this.data;
         options.parent = this;
         options.parentVisible = this.visible;
+        options.parentConditionallyHidden = this.conditionallyHidden;
         options.root = options?.root || this.root || this;
         options.localRoot = this.localRoot;
         options.skipInit = true;
@@ -623,7 +632,7 @@ export default class NestedComponent extends Field {
     clearOnHide(show) {
         super.clearOnHide(show);
         if (this.component.clearOnHide) {
-            if (this.allowData && !this.hasValue() && !(this.options.server && !this.visible)) {
+            if (this.allowData && !this.hasValue() && !this.conditionallyHidden) {
                 this.dataValue = this.defaultValue;
             }
             if (this.hasValue()) {
@@ -652,7 +661,7 @@ export default class NestedComponent extends Field {
     }
     calculateValue(data, flags, row) {
         // Do not iterate into children and calculateValues if this nested component is conditionally hidden.
-        if (!this.conditionallyVisible()) {
+        if (this.conditionallyHidden) {
             return false;
         }
         return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));

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

@@ -3,6 +3,7 @@ export default class NestedDataComponent extends NestedComponent {
     hasChanged(newValue: any, oldValue: any): boolean;
     get allowData(): boolean;
     get emptyValue(): {};
+    get shouldAddDefaultValue(): boolean;
     componentContext(): any;
     getValueAsString(value: any, options: any): string;
     getDataValueAsTable(value: any, options: any): string;

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

@@ -22,6 +22,9 @@ export default class NestedDataComponent extends NestedComponent {
     get emptyValue() {
         return {};
     }
+    get shouldAddDefaultValue() {
+        return !this.options.noDefaults || !this.options.server;
+    }
     componentContext() {
         return this.dataValue;
     }

package/lib/mjs/components/address/Address.d.ts

@@ -60,7 +60,7 @@ export default class AddressComponent extends ContainerComponent {
     renderElement(value: any): any;
     renderRow(value: any, index: any): any;
     renderGrid(): any;
-    render(): Field;
+    render(): string;
     onSelectAddress(address: any, element: any, index: any): void;
     addRow(): void;
     attach(element: any): Promise<void>;
@@ -71,4 +71,3 @@ export default class AddressComponent extends ContainerComponent {
     getValueAsString(value: any, options: any): any;
 }
 import ContainerComponent from '../container/Container';
-import Field from '../_classes/field/Field';

package/lib/mjs/components/address/Address.js

@@ -214,7 +214,7 @@ export default class AddressComponent extends ContainerComponent {
         super.dataValue = value;
     }
     get dataValue() {
-        const resultValue = _.get(this._data, this.component.path);
+        const resultValue = _.get(this._data, this.path);
         if (!_.isArray(resultValue) && this.component.multiple) {
             return [resultValue];
         }

package/lib/mjs/components/address/fixtures/comp5.d.ts

@@ -0,0 +1,46 @@
+declare namespace _default {
+    let type: string;
+    let display: string;
+    let title: string;
+    let name: string;
+    let path: string;
+    let components: ({
+        label: string;
+        tableView: boolean;
+        multiple: boolean;
+        provider: string;
+        validateWhenHidden: boolean;
+        key: string;
+        providerOptions: {
+            params: {
+                autocompleteOptions: {};
+            };
+        };
+        type: string;
+        input: boolean;
+        components: {
+            label: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            customConditional: string;
+        }[];
+        defaultValue: {}[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        multiple?: undefined;
+        provider?: undefined;
+        validateWhenHidden?: undefined;
+        providerOptions?: undefined;
+        components?: undefined;
+        defaultValue?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/address/fixtures/comp5.js

@@ -0,0 +1,85 @@
+export default {
+    type: 'form',
+    display: 'form',
+    title: 'FIO-9527',
+    name: 'fio9527',
+    path: 'fio9527',
+    components: [
+        {
+            label: 'Address',
+            tableView: false,
+            multiple: true,
+            provider: 'nominatim',
+            validateWhenHidden: false,
+            key: 'address',
+            providerOptions: {
+                params: {
+                    autocompleteOptions: {}
+                }
+            },
+            type: 'address',
+            input: true,
+            components: [
+                {
+                    label: 'Address 1',
+                    tableView: false,
+                    key: 'address1',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+                },
+                {
+                    label: 'Address 2',
+                    tableView: false,
+                    key: 'address2',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+                },
+                {
+                    label: 'City',
+                    tableView: false,
+                    key: 'city',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+                },
+                {
+                    label: 'State',
+                    tableView: false,
+                    key: 'state',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+                },
+                {
+                    label: 'Country',
+                    tableView: false,
+                    key: 'country',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+                },
+                {
+                    label: 'Zip Code',
+                    tableView: false,
+                    key: 'zip',
+                    type: 'textfield',
+                    input: true,
+                    customConditional: "show = _.get(instance, 'parent.manualMode', false);"
+                }
+            ],
+            defaultValue: [
+                {}
+            ]
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ]
+};

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

@@ -2,4 +2,5 @@ import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4 };
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };

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

@@ -2,4 +2,5 @@ import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4 };
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };

package/lib/mjs/components/button/Button.d.ts

@@ -21,7 +21,7 @@ export default class ButtonComponent extends Field {
     get clicked(): any;
     get defaultValue(): boolean;
     get oauthConfig(): any;
-    render(): Field;
+    render(): string;
     attachButton(): void;
     hasError: boolean | undefined;
     isDisabledOnInvalid: any;

package/lib/mjs/components/checkbox/Checkbox.d.ts

@@ -39,7 +39,7 @@ export default class CheckBoxComponent extends Field {
     get labelInfo(): {
         hidden: boolean;
     };
-    render(): Field;
+    render(): string;
     attach(element: any): Promise<void>;
     input: any;
     detach(element: any): void;

package/lib/mjs/components/columns/Columns.d.ts

@@ -14,7 +14,7 @@ export default class ColumnsComponent extends NestedComponent {
     get columnKey(): string;
     columns: any[] | undefined;
     labelIsHidden(): boolean;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     justifyColumn(items: any, index: any): boolean;
     justify(): any;
     get gridSize(): number;

package/lib/mjs/components/datagrid/DataGrid.d.ts

@@ -54,7 +54,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     hasTopSubmit(): any;
     hasBottomSubmit(): any;
     get canAddColumn(): boolean;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     getRows(): {}[];
     getColumns(): any[];
     hasHeader(): any;

package/lib/mjs/components/datagrid/DataGrid.js

@@ -393,7 +393,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             row
         });
         this.checkConditions();
-        this.triggerChange();
+        this.triggerChange({ modified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });
@@ -472,6 +472,9 @@ export default class DataGridComponent extends NestedArrayComponent {
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
+            options.onChange = (flags, changed, modified) => {
+                this.triggerChange({ modified });
+            };
             let columnComponent;
             if (this.builderMode) {
                 col.id = col.id + rowIndex;

package/lib/mjs/components/datamap/DataMap.js

@@ -69,7 +69,7 @@ export default class DataMapComponent extends DataGridComponent {
     }
     get dataValue() {
         if (!this.key ||
-            (!this.visible && this.component.clearOnHide)) {
+            (this.conditionallyHidden && this.component.clearOnHide)) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {

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

@@ -85,7 +85,7 @@ export default class DayComponent extends Field {
     }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
-    render(): Field;
+    render(): string;
     renderField(name: any): any;
     attach(element: any): Promise<void>;
     set disabled(disabled: any);

package/lib/mjs/components/day/Day.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
 import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
+import { getDayFormat } from '@formio/core';
 export default class DayComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -474,24 +475,7 @@ export default class DayComponent extends Field {
      * @returns {string} - the format for the value string.
      */
     get format() {
-        let format = '';
-        if (this.component.dayFirst && this.showDay) {
-            format += 'D/';
-        }
-        if (this.showMonth) {
-            format += 'M/';
-        }
-        if (!this.component.dayFirst && this.showDay) {
-            format += 'D/';
-        }
-        if (this.showYear) {
-            format += 'YYYY';
-            return format;
-        }
-        else {
-            // Trim off the "/" from the end of the format string.
-            return format.length ? format.substring(0, format.length - 1) : format;
-        }
+        return getDayFormat(this.component);
     }
     /**
      * Return the date for this component.

package/lib/mjs/components/editgrid/EditGrid.js

@@ -1132,7 +1132,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent && !this.options.server) {
+        if (this.parent) {
             this.parent.checkComponentConditions();
         }
         this.dataValue = value;
@@ -1165,10 +1165,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        // do not call checkData with server option, it is called when change is triggered in updateOnChange
-        if (!this.options.server) {
-            this.checkData();
-        }
+        this.checkData();
         this.changeState(changed, flags);
         return changed;
     }

package/lib/mjs/components/file/File.d.ts

@@ -45,7 +45,7 @@ export default class FileComponent extends Field {
         type: number;
         actions: number;
     };
-    render(): Field;
+    render(): string;
     getVideoStream(constraints: any): any;
     stopVideoStream(videoStream: any): void;
     getFrame(videoPlayer: any): Promise<any>;

package/lib/mjs/components/form/Form.d.ts

@@ -32,6 +32,7 @@ export default class FormComponent extends Component {
     attach(element: any): Promise<void>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
+    get subFormData(): any;
     subFormReady: Promise<any> | null | undefined;
     /**
      * Pass everyComponent to subform.

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

@@ -138,6 +138,8 @@ export default class FormComponent extends Component {
         options.events = this.createEmitter();
         // Make sure to not show the submit button in wizards in the nested forms.
         _.set(options, 'buttonSettings.showSubmit', false);
+        // Set the parent option to the subform so those references are stable when the subform is created
+        options.parent = this;
         if (!this.options) {
             return options;
         }
@@ -327,6 +329,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);
@@ -389,12 +394,11 @@ export default class FormComponent extends Component {
             return (new Form(form, this.getSubOptions())).ready.then((instance) => {
                 this.subForm = instance;
                 this.subForm.currentForm = this;
+                this.subForm.parentVisible = this.visible;
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 _.assign(componentsMap, formComponentsMap);
                 this.component.components = this.subForm.components.map((comp) => comp.component);
-                this.subForm.parent = this;
-                this.subForm.parentVisible = this.visible;
                 this.subForm.on('change', () => {
                     if (this.subForm) {
                         this.dataValue = this.subForm.getValue();
@@ -421,10 +425,11 @@ export default class FormComponent extends Component {
         return this.subFormReady;
     }
     hideSubmitButton(component) {
-        const isSubmitButton = (component.type === 'button') &&
-            ((component.action === 'submit') || !component.action);
+        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);
         if (isSubmitButton) {
             component.hidden = true;
+            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data
+            component.customConditional = 'show = false';
         }
     }
     /**
@@ -433,7 +438,7 @@ export default class FormComponent extends Component {
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
     loadSubForm(fromAttach) {
-        if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
+        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -475,14 +480,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);
                 }
             });
         }
@@ -490,7 +495,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);
     }
@@ -505,7 +510,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.isHidden();
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
     }
     /**
      * Returns the data for the subform.
@@ -575,11 +580,21 @@ export default class FormComponent extends Component {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        return this.submitSubForm(false)
-            .then(() => {
-            return this.dataValue;
-        })
-            .then(() => super.beforeSubmit());
+        if (this.isSubFormLazyLoad() && !this.subFormLoading) {
+            return this.createSubForm(true)
+                .then(this.submitSubForm(false))
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
+        else {
+            return this.submitSubForm(false)
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
     }
     isSubFormLazyLoad() {
         return this.root?._form?.display === 'wizard' && this.component.lazyLoad;

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

@@ -51,9 +51,21 @@ export default class HTMLComponent extends Component {
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);
-        if (!this.builderMode && this.component.refreshOnChange && this.element &&
-            !_.isUndefined(changed) && ((_.isBoolean(changed) && changed) || !_.isEmpty(changed)) &&
-            this.conditionallyVisible(this.data, this.row)) {
+        let visible;
+        if (this.hasCondition()) {
+            this._conditionallyHidden = this.checkConditionallyHidden();
+            visible = !this.conditionallyHidden;
+        }
+        else {
+            visible = !this.component.hidden;
+        }
+        const shouldSetContent = !this.builderMode
+            && this.component.refreshOnChange
+            && this.element
+            && !_.isUndefined(changed)
+            && ((_.isBoolean(changed) && changed) || !_.isEmpty(changed))
+            && visible;
+        if (shouldSetContent) {
             this.setContent(this.element, this.renderContent());
         }
     }

package/lib/mjs/components/radio/Radio.d.ts

@@ -28,7 +28,7 @@ export default class RadioComponent extends ListComponent {
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
     beforeSubmit(): Promise<any>;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
     validateValueProperty(): boolean;

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

@@ -112,7 +112,7 @@ export default class SelectComponent extends ListComponent {
     activate(): void;
     setLoadingItem(addToCurrentList?: boolean): void;
     get active(): boolean | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     wrapElement(element: any): any;
     choicesOptions(): any;
     attach(element: any): Promise<void> | undefined;

package/lib/mjs/components/survey/Survey.d.ts

@@ -14,7 +14,7 @@ export default class SurveyComponent extends Field {
         operators: string[];
     };
     static savedValueTypes(schema: any): string[];
-    render(): Field;
+    render(): string;
     attach(element: any): Promise<void>;
     setValue(value: any, flags?: {}): boolean;
     get emptyValue(): {};

package/lib/mjs/components/table/Table.d.ts

@@ -19,6 +19,6 @@ export default class TableComponent extends NestedComponent {
     get colWidth(): string;
     noField: boolean;
     table: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/tabs/Tabs.d.ts

@@ -16,7 +16,7 @@ export default class TabsComponent extends NestedComponent {
     currentTab: number;
     noField: boolean;
     tabs: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     detach(all: any): void;
     /**
      * Set the current tab.

package/lib/mjs/formio.embed.d.ts

@@ -1 +1 @@
-export {};
+export { Formio } from "./InlineEmbed";

package/lib/mjs/formio.embed.js

@@ -1,2 +1,3 @@
 import { embed } from './InlineEmbed';
 embed();
+export { Formio } from './InlineEmbed';

package/lib/mjs/providers/address/GoogleAddressProvider.d.ts

@@ -82,6 +82,11 @@ export class GoogleAddressProvider extends AddressProvider {
     search(): Promise<void>;
     makeRequest(): Promise<void>;
     getDisplayValue(address: any): any;
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options?: ProviderOptions): void;
 }
 export type AutocompleteOptions = {
     /**