@formio/js 5.1.0-dev.6039.a838d78 → 5.1.0-dev.6042.18ef5d3

package/lib/cjs/components/_classes/component/editForm/Component.edit.data.js

@@ -81,6 +81,25 @@ exports.default = [
                     }
                 ]
             },
+            {
+                name: 'hide',
+                trigger: {
+                    type: 'javascript',
+                    javascript: 'result = instance.root.options.editJson === false;'
+                },
+                actions: [
+                    {
+                        name: 'hide',
+                        type: 'property',
+                        property: {
+                            label: 'Hidden',
+                            value: 'hidden',
+                            type: 'boolean'
+                        },
+                        state: true
+                    }
+                ]
+            },
             {
                 name: 'disabledToolTip',
                 trigger: {

package/lib/cjs/components/_classes/component/editForm/utils.js

@@ -11,7 +11,7 @@ const EditFormUtils = {
     },
     unifyComponents(objValue, srcValue) {
         if (objValue.key && srcValue.key) {
-            if (objValue.skipMerge || srcValue.skipMerge) {
+            if ((objValue.skipMerge || srcValue.skipMerge) && !objValue.ignore) {
                 return false;
             }
             if (objValue.key === srcValue.key) {

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -29,9 +29,9 @@ class ListComponent extends Field_1.default {
     get dataReady() {
         // If the root submission has been set, and we are still not attached, then assume
         // that our data is ready.
-        if (this.root &&
+        if ((this.root &&
             this.root.submissionSet &&
-            !this.attached) {
+            !this.attached) || !this.visible) {
             return Promise.resolve();
         }
         return this.itemsLoaded;

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

@@ -181,7 +181,6 @@ export default class NestedComponent extends Field {
     checkData(data: any, flags: any, row: any, components: any): true | undefined;
     checkConditions(data: any, flags: any, row: any): boolean;
     clearOnHide(show: any): void;
-    restoreComponentsContext(): void;
     /**
      * Allow components to hook into the next page trigger to perform their own logic.
      * @param {Function} next - The callback to continue to the next page.

package/lib/cjs/components/_classes/nested/NestedComponent.form.js

@@ -11,6 +11,19 @@ const Components_1 = __importDefault(require("../../Components"));
  */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([
+        {
+            key: 'display',
+            components: [
+                {
+                    key: 'labelWidth',
+                    ignore: true
+                },
+                {
+                    key: 'labelMargin',
+                    ignore: true
+                }
+            ]
+        },
         {
             key: 'data',
             ignore: true

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

@@ -85,18 +85,15 @@ class NestedComponent extends Field_1.default {
         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) => {
             // 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;
-            component._parentConditionallyHidden = isConditionallyHidden;
             let visible;
             if (component.hasCondition()) {
-                component._conditionallyHidden = component.checkConditionallyHidden() || component._parentConditionallyHidden;
-                visible = !component.conditionallyHidden;
+                visible = !component.conditionallyHidden();
             }
             else {
                 visible = !component.component.hidden;
@@ -377,7 +374,6 @@ class NestedComponent extends Field_1.default {
         data = data || this.data;
         options.parent = this;
         options.parentVisible = this.visible;
-        options.parentConditionallyHidden = this.conditionallyHidden;
         options.root = (options === null || options === void 0 ? void 0 : options.root) || this.root || this;
         options.localRoot = this.localRoot;
         options.skipInit = true;
@@ -635,19 +631,8 @@ class NestedComponent extends Field_1.default {
     }
     clearOnHide(show) {
         super.clearOnHide(show);
-        if (this.component.clearOnHide) {
-            if (this.allowData && !this.hasValue() && !this.conditionallyHidden) {
-                this.dataValue = this.defaultValue;
-            }
-            if (this.hasValue()) {
-                this.restoreComponentsContext();
-            }
-        }
         this.getComponents().forEach(component => component.clearOnHide(show));
     }
-    restoreComponentsContext() {
-        this.getComponents().forEach((component) => component.data = this.dataValue);
-    }
     /**
      * Allow components to hook into the next page trigger to perform their own logic.
      * @param {Function} next - The callback to continue to the next page.
@@ -665,7 +650,7 @@ class NestedComponent extends Field_1.default {
     }
     calculateValue(data, flags, row) {
         // Do not iterate into children and calculateValues if this nested component is conditionally hidden.
-        if (this.conditionallyHidden) {
+        if (this.conditionallyHidden()) {
             return false;
         }
         return this.getComponents().reduce((changed, comp) => comp.calculateValue(data, flags, row) || changed, super.calculateValue(data, flags, row));
@@ -836,7 +821,7 @@ class NestedComponent extends Field_1.default {
         else if (value && component.hasValue(value)) {
             return component.setValue(lodash_1.default.get(value, component.key), flags);
         }
-        else if ((!this.rootPristine || component.visible) && component.shouldAddDefaultValue) {
+        else if ((!this.rootPristine || component.visible) && (flags.resetValue || component.shouldAddDefaultValue)) {
             flags.noValidate = !flags.dirty;
             flags.resetValue = true;
             return component.setValue(component.defaultValue, flags);
@@ -846,6 +831,13 @@ class NestedComponent extends Field_1.default {
         if (!value) {
             return false;
         }
+        // If the value is equal to the empty value, then this means we need to reset the values.
+        if (lodash_1.default.isEqual(value, this.emptyValue)) {
+            // TO-DO: For a future major release, we need to investigate removing the need for the
+            // "resetValue" flag. This seems like a hack that is no longer necessary and the renderer
+            // may behave more deterministically without it.
+            flags.resetValue = true;
+        }
         return this.getComponents().reduce((changed, component) => {
             return this.setNestedValue(component, value, flags, changed) || changed;
         }, false);

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

@@ -3,11 +3,9 @@ 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;
-    everyComponent(fn: any, options?: {}): void;
     /**
      * Get the value of this component.
      * @returns {any} - Return the value of this component.

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

@@ -88,17 +88,6 @@ class NestedDataComponent extends NestedComponent_1.default {
     `);
         return result;
     }
-    everyComponent(fn, options = {}) {
-        if (options === null || options === void 0 ? void 0 : options.email) {
-            if (options.fromRoot) {
-                delete options.fromRoot;
-            }
-            else {
-                return;
-            }
-        }
-        return super.everyComponent(fn, options);
-    }
     /**
      * Get the value of this component.
      * @returns {any} - Return the value of this component.

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

@@ -36,12 +36,21 @@ export default class AddressComponent extends ContainerComponent {
     get autocompleteMode(): boolean;
     get manualMode(): boolean;
     get manualModeEnabled(): boolean;
+    restoreComponentsContext(): void;
     get isMultiple(): boolean;
     set address(value: any);
     get address(): any;
     isValueInLegacyFormat(value: any): any;
     normalizeValue(value: any): any;
     get modeSwitcher(): any;
+    get providerOptions(): {
+        params: any;
+        url: any;
+        queryProperty: any;
+        responseProperty: any;
+        displayValueProperty: any;
+        autocompleteOptions: any;
+    };
     get removeValueIcon(): any;
     get searchInput(): any;
     get addRowButton(): any;

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

@@ -26,7 +26,6 @@ class AddressComponent extends Container_1.default {
             key: 'address',
             switchToManualModeLabel: 'Can\'t find address? Switch to manual mode.',
             provider: '',
-            providerOptions: {},
             manualModeViewString: '',
             hideLabel: false,
             disableClearIcon: false,
@@ -116,20 +115,33 @@ class AddressComponent extends Container_1.default {
             NestedComponent_1.default.prototype.addComponents.call(this, this.manualMode ? this.address : {});
         }
         Field_1.default.prototype.init.call(this);
+        // Added for backwards compatibility
+        if (this.component.providerOptions) {
+            const { params, url, queryProperty, responseProperty, displayValueProperty } = this.component.providerOptions;
+            const key = params === null || params === void 0 ? void 0 : params.key;
+            const autocompleteOptions = params === null || params === void 0 ? void 0 : params.autocompleteOptions;
+            delete this.component.providerOptions;
+            this.component.url = url;
+            this.component.queryProperty = queryProperty;
+            this.component.responseProperty = responseProperty;
+            this.component.displayValueProperty = displayValueProperty;
+            this.component.apiKey = key;
+            this.component.autocompleteOptions = autocompleteOptions;
+        }
+        let provider = this.component.provider;
+        const providerOptions = this.providerOptions;
+        const map = this.component.map;
         if (!this.builderMode) {
-            if (this.component.provider) {
-                const { provider, providerOptions, } = this.component;
+            if (provider) {
                 if (lodash_1.default.get(providerOptions, 'params.subscriptionKey')) {
                     lodash_1.default.set(providerOptions, "params['subscription-key']", lodash_1.default.get(providerOptions, 'params.subscriptionKey'));
                     lodash_1.default.unset(providerOptions, 'params.subscriptionKey');
                 }
                 this.provider = this.initializeProvider(provider, providerOptions);
             }
-            else if (this.component.map) {
+            else if (map) {
                 // Fallback to legacy version where Google Maps was the only provider.
-                this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;
-                this.component.providerOptions = this.component.providerOptions || {};
-                const { map, provider, providerOptions, } = this.component;
+                provider = this.component.provider = GoogleAddressProvider_1.GoogleAddressProvider.name;
                 const { key, region, } = map;
                 if (key) {
                     lodash_1.default.set(providerOptions, 'params.key', key);
@@ -262,6 +274,16 @@ class AddressComponent extends Container_1.default {
             ? (this.refs[AddressComponent.modeSwitcherRef] || null)
             : null;
     }
+    get providerOptions() {
+        return {
+            params: Object.assign({ subscriptionKey: this.component.subscriptionKey, key: this.component.apiKey }, this.component.params),
+            url: this.component.url,
+            queryProperty: this.component.queryProperty,
+            responseProperty: this.component.responseProperty,
+            displayValueProperty: this.component.displayValueProperty,
+            autocompleteOptions: this.component.autocompleteOptions
+        };
+    }
     get removeValueIcon() {
         return this.refs
             ? (this.refs[AddressComponent.removeValueIconRef] || null)
@@ -375,7 +397,8 @@ class AddressComponent extends Container_1.default {
         const result = ((this.builderMode || this.manualMode) ? super.attach : Field_1.default.prototype.attach).call(this, element);
         if (!this.builderMode) {
             if (!this.provider && this.component.provider) {
-                const { provider, providerOptions, } = this.component;
+                const provider = this.component.provider;
+                const providerOptions = this.providerOptions;
                 this.provider = this.initializeProvider(provider, providerOptions);
             }
         }

package/lib/cjs/components/address/editForm/Address.edit.display.d.ts

@@ -8,6 +8,7 @@ declare const _default: ({
     customConditional: ({ data }: {
         data: any;
     }) => boolean;
+    defaultValue?: undefined;
     placeholder?: undefined;
     validate?: undefined;
 } | {
@@ -15,6 +16,7 @@ declare const _default: ({
     type: string;
     input: boolean;
     key: string;
+    defaultValue: string;
     label: string;
     placeholder: string;
     tooltip: string;
@@ -32,6 +34,7 @@ declare const _default: ({
     label: string;
     tooltip: string;
     customConditional?: undefined;
+    defaultValue?: undefined;
     placeholder?: undefined;
     validate?: undefined;
 } | {
@@ -45,6 +48,7 @@ declare const _default: ({
     customConditional: ({ data }: {
         data: any;
     }) => any;
+    defaultValue?: undefined;
     validate?: undefined;
 })[];
 export default _default;

package/lib/cjs/components/address/editForm/Address.edit.display.js

@@ -15,6 +15,7 @@ exports.default = [
         type: 'textfield',
         input: true,
         key: 'switchToManualModeLabel',
+        defaultValue: 'Can\'t find address? Switch to manual mode.',
         label: 'Switch To Manual Mode Label',
         placeholder: 'Switch To Manual Mode Label',
         tooltip: 'The label for the checkbox used to switch to manual mode.',

package/lib/cjs/components/address/editForm/Address.edit.provider.js

@@ -31,7 +31,7 @@ exports.default = [
     {
         type: 'textfield',
         input: true,
-        key: "providerOptions.params.subscriptionKey",
+        key: "subscriptionKey",
         label: 'Subscription Key',
         placeholder: 'Enter Subscription Key',
         weight: 10,
@@ -46,7 +46,7 @@ exports.default = [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.url',
+        key: 'url',
         label: 'Url',
         placeholder: 'Enter Url',
         weight: 10,
@@ -61,7 +61,7 @@ exports.default = [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.queryProperty',
+        key: 'queryProperty',
         label: 'Query Property',
         defaultValue: 'query',
         placeholder: 'Enter Query Property',
@@ -74,7 +74,7 @@ exports.default = [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.responseProperty',
+        key: 'responseProperty',
         label: 'Response Property',
         placeholder: 'Enter Response Property',
         weight: 30,
@@ -86,7 +86,7 @@ exports.default = [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.displayValueProperty',
+        key: 'displayValueProperty',
         label: 'Display Value Property',
         placeholder: 'Display Value Property',
         weight: 40,
@@ -98,7 +98,7 @@ exports.default = [
     {
         type: 'textarea',
         input: true,
-        key: 'providerOptions.params',
+        key: 'params',
         label: 'Params',
         placeholder: '{ ... }',
         weight: 50,
@@ -113,7 +113,7 @@ exports.default = [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.params.key',
+        key: 'apiKey',
         label: 'API Key',
         placeholder: 'Enter API Key',
         weight: 10,
@@ -128,7 +128,7 @@ exports.default = [
     {
         type: 'textarea',
         input: true,
-        key: 'providerOptions.params.autocompleteOptions',
+        key: 'autocompleteOptions',
         label: 'Provider options',
         placeholder: 'Enter provider options as JSON object',
         defaultValue: {},

package/lib/cjs/components/content/editForm/Content.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/cjs/components/currency/editForm/Currency.edit.display.js

@@ -9,6 +9,18 @@ exports.default = [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true

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

@@ -613,9 +613,6 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         this.updateOnChange(flags, changed);
         return changed;
     }
-    restoreComponentsContext() {
-        this.rows.forEach((row, index) => lodash_1.default.forIn(row, (component) => component.data = this.dataValue[index]));
-    }
     toggleGroup(element, index) {
         element.classList.toggle('collapsed');
         lodash_1.default.each(this.refs.chunks[index], row => {

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

@@ -73,14 +73,10 @@ class DataMapComponent extends DataGrid_1.default {
         return {};
     }
     get dataValue() {
-        if (!this.key ||
-            (this.conditionallyHidden && this.component.clearOnHide)) {
+        if (!this.key) {
             return this.emptyValue;
         }
-        if (!this.hasValue() && this.shouldAddDefaultValue) {
-            this.dataValue = this.emptyValue;
-        }
-        return lodash_1.default.get(this.data, this.key);
+        return lodash_1.default.get(this.data, this.key, this.emptyValue);
     }
     set dataValue(value) {
         super.dataValue = value;

package/lib/cjs/components/datetime/editForm/DateTime.edit.validation.d.ts

@@ -6,36 +6,87 @@ declare const _default: ({
     persistent: boolean;
     weight: number;
     tooltip: string;
+    applyMaskOn?: undefined;
+    logic?: undefined;
     skipMerge?: undefined;
-    customConditional?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
-    key: string;
-    label: string;
     skipMerge: boolean;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): boolean;
     persistent?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    tableView: boolean;
+    validateWhenHidden: boolean;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
     enableTime: boolean;
-    key: string;
     skipMerge: boolean;
-    label: string;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): any;
     persistent?: undefined;
 })[];
 export default _default;