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

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/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/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.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;
         }
@@ -389,12 +391,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 +422,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 +435,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 &&
@@ -505,7 +507,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 +577,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 = {
     /**

package/lib/mjs/providers/address/GoogleAddressProvider.js

@@ -2,6 +2,9 @@
 import { Formio } from '../../Formio';
 import _ from 'lodash';
 import { AddressProvider } from './AddressProvider';
+const GOOGLE_MAPS_BASE_URL = 'https://maps.googleapis.com';
+const GOOGLE_MAPS_JS_URL = `${GOOGLE_MAPS_BASE_URL}/maps/api/js`;
+const GOOGLE_MAPS_JS_WITH_PARAMS_URL = `${GOOGLE_MAPS_JS_URL}?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback`;
 /**
  * @typedef {object} AutocompleteOptions
  * @property {string[]} fields - The fields to include in the autocomplete response.
@@ -48,10 +51,11 @@ export class GoogleAddressProvider extends AddressProvider {
     constructor(options = {}) {
         super(options);
         this.setAutocompleteOptions();
-        let src = 'https://maps.googleapis.com/maps/api/js?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback';
+        let src = GOOGLE_MAPS_JS_WITH_PARAMS_URL;
         if (options.params?.key) {
             src += `&key=${options.params.key}`;
         }
+        this.tryRemoveLibrary(options);
         Formio.requireLibrary(this.getLibraryName(), 'google.maps.places', src);
     }
     /**
@@ -178,4 +182,21 @@ export class GoogleAddressProvider extends AddressProvider {
             : this.alternativeDisplayValueProperty;
         return _.get(address, displayedProperty, '');
     }
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options = {}) {
+        if (!Formio.libraries[this.getLibraryName()]) {
+            return;
+        }
+        const existingScript = document.querySelector(`script[src^="${GOOGLE_MAPS_JS_URL}"]`);
+        if (existingScript && options.params?.key && !existingScript.attributes.src.value.endsWith(options.params.key)) {
+            const googleMapsScripts = document.querySelectorAll(`script[src^="${GOOGLE_MAPS_BASE_URL}"]`) ?? [];
+            googleMapsScripts.forEach(script => script.parentNode.removeChild(script));
+            delete Formio.libraries[this.getLibraryName()];
+            delete global?.google?.maps;
+            delete global[`${this.getLibraryName()}Callback`];
+        }
+    }
 }

package/lib/mjs/translations/en.js

@@ -24,8 +24,8 @@ export default {
     maxWords: '{{field}} must have no more than {{length}} words.',
     min: '{{field}} cannot be less than {{min}}.',
     max: '{{field}} cannot be greater than {{max}}.',
-    maxDate: '{{field}} should not contain date after {{- maxDate}}',
-    minDate: '{{field}} should not contain date before {{- minDate}}',
+    maxDate: '{{field}} should not contain date after {{maxDate}}',
+    minDate: '{{field}} should not contain date before {{minDate}}',
     maxYear: '{{field}} should not contain year greater than {{maxYear}}',
     minYear: '{{field}} should not contain year less than {{minYear}}',
     minSelectedCount: 'You must select at least {{minCount}} items',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-rc.1",
+  "version": "5.1.0-rc.10",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -41,7 +41,7 @@
     "build": "yarn doc && yarn lib && yarn dist",
     "doc": "typedoc",
     "dist": "gulp clean:dist && webpack --config webpack.config.js && webpack --config webpack.prod.js && gulp build",
-    "lib": "gulp clean:lib && tsc --project tsconfig.cjs.json && tsc --project tsconfig.mjs.json && yarn lib:package",
+    "lib": "gulp clean:lib && tsc --project tsconfig.cjs.json && tsc --project tsconfig.mjs.json && yarn lib:package  && gulp version",
     "lib:package": "node ./libpackage.js",
     "version": "node -e 'console.log(require(`./package.json`).version)'",
     "build-app": "yarn build-app:create-app && yarn build-app:jekyll && yarn build-app:remove-app",
@@ -81,7 +81,7 @@
   "dependencies": {
     "@formio/bootstrap": "3.1.0-rc.1",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.4.0-rc.1",
+    "@formio/core": "2.4.0-rc.7",
     "@formio/text-mask-addons": "^3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",