@formio/js 5.1.0-rc.3 → 5.1.0-rc.30

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

@@ -341,18 +341,11 @@ class Component extends Element_1.default {
         this._path = '';
         // Needs for Nextgen Rules Engine
         this.resetCaches();
-        /**
-         * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
-         * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
-         * conditionallyHidden separately from "regular" visibility.
-         */
-        this._parentConditionallyHidden = this.options.hasOwnProperty('parentConditionallyHidden') ? this.options.parentConditionallyHidden : false;
-        this._conditionallyHidden = this.checkConditionallyHidden(null, data) || this._parentConditionallyHidden;
         /**
          * Determines if this component is visible, or not.
          */
         this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
-        this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);
+        this._visible = this._parentVisible && (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         this._parentDisabled = false;
         /**
          * The reference attribute name for this component
@@ -421,7 +414,7 @@ class Component extends Element_1.default {
             if (this.allowData && this.key) {
                 this.options.name += `[${this.key}]`;
                 // If component is visible or not set to clear on hide, set the default value.
-                if (!(this.conditionallyHidden && this.component.clearOnHide)) {
+                if (!this.shouldConditionallyClear()) {
                     if (!this.hasValue()) {
                         if (this.shouldAddDefaultValue) {
                             this.dataValue = this.defaultValue;
@@ -452,6 +445,26 @@ class Component extends Element_1.default {
         var _a;
         return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};
     }
+    parentShouldConditionallyClear() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.shouldConditionallyClear(true)) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
+    parentConditionallyHidden() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.conditionallyHidden(true)) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
     get data() {
         return this._data;
     }
@@ -492,8 +505,7 @@ class Component extends Element_1.default {
     init() {
         var _a;
         this.disabled = this.shouldDisabled;
-        this._conditionallyHidden = this.checkConditionallyHidden();
-        this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
+        this._visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         if ((_a = this.component.addons) === null || _a === void 0 ? void 0 : _a.length) {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
@@ -655,20 +667,54 @@ class Component extends Element_1.default {
         }
         return this._visible && this._parentVisible;
     }
-    get conditionallyHidden() {
-        return this._conditionallyHidden || this._parentConditionallyHidden;
+    get logicallyHidden() {
+        if (this._logicallyHidden && !this.component.hidden) {
+            this._logicallyHidden = false;
+        }
+        return this._logicallyHidden;
     }
-    /**
-     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
-     * @param {object} data - The data object to evaluate the condition against.
-     * @param {object} row - The row object to evaluate the condition against.
-     * @returns {boolean} - Whether the component is conditionally hidden.
-     */
-    checkConditionallyHidden(data = null, row = null) {
-        if (!this.hasCondition()) {
+    shouldConditionallyClear(skipParent = false) {
+        // Skip if this component has clearOnHide set to false.
+        if (this.component.clearOnHide === false) {
+            return false;
+        }
+        // If the component is logically hidden, then it is conditionally hidden and should clear.
+        if (this.logicallyHidden) {
+            return true;
+        }
+        // If we have a condition and it is not conditionally visible, the it should conditionally clear.
+        if (this.hasCondition() && !this.conditionallyVisible()) {
+            return true;
+        }
+        if (skipParent) {
+            // Stop recurrsion for the parent checks.
+            return false;
+        }
+        // If this component has a set value, then it should ONLY clear if a parent is hidden
+        // and has the clearOnHide set to true.
+        if (this.hasSetValue) {
+            return this.parentShouldConditionallyClear();
+        }
+        // Clear the value if the parent is conditionally hidden.
+        return this.parentConditionallyHidden();
+    }
+    conditionallyHidden(skipParent = false) {
+        if (this.logicallyHidden) {
+            return true;
+        }
+        if (!this.hasCondition() && !skipParent) {
+            return this.parentConditionallyHidden();
+        }
+        // Return if we are not conditionally visible (conditionallyHidden)
+        if (!this.conditionallyVisible()) {
+            return true;
+        }
+        if (skipParent) {
+            // Stop recurrsion for the parent checks.
             return false;
         }
-        return !this.conditionallyVisible(data, row);
+        // Check the parent.
+        return this.parentConditionallyHidden();
     }
     get currentForm() {
         return this._currentForm;
@@ -1094,7 +1140,7 @@ class Component extends Element_1.default {
     /**
      * Renders a modal preview template and returns the markup as a string
      * @param {object|null|undefined} ctx - The rendering context
-     * @return {string} - The modal preview markup
+     * @returns {string} - The modal preview markup
      */
     renderModalPreview(ctx) {
         return this.renderTemplate('modalPreview', ctx || {});
@@ -1163,7 +1209,7 @@ class Component extends Element_1.default {
      * Creates the tooltip instance using tippy.js and returns it
      * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
      * @param {object|null|undefined} settings - tippy.js options
-     * @return {import('tippy.js').Tippy} - tippy.js instance
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl, settings = {}) {
         const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
@@ -1286,7 +1332,7 @@ class Component extends Element_1.default {
     detach() {
         // First iterate through each ref and delete the component so there are no dangling component references.
         lodash_1.default.each(this.refs, (ref) => {
-            if (typeof ref === NodeList) {
+            if (ref instanceof NodeList) {
                 ref.forEach((elem) => {
                     delete elem.component;
                 });
@@ -1838,7 +1884,7 @@ class Component extends Element_1.default {
     rebuild() {
         this.destroy();
         this.init();
-        this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
+        this.visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
         return this.redraw();
     }
     /**
@@ -1936,17 +1982,12 @@ class Component extends Element_1.default {
         if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {
             this.redraw();
         }
-        // Check advanced conditions (and cache the result)
-        const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
-        if (isConditionallyHidden !== this._conditionallyHidden) {
-            this._conditionallyHidden = isConditionallyHidden;
-            this.clearOnHide();
-        }
         // Check visibility
-        const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
+        const visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         if (this.visible !== visible) {
             this.visible = visible;
         }
+        this.clearComponentOnHide();
         return visible;
     }
     /**
@@ -2055,9 +2096,9 @@ class Component extends Element_1.default {
                     if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {
                         // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state
                         // separately from the component's hidden property, and technically this Advanced Logic conditionally hides
-                        // a component, we need to set _conditionallyHidden to the new value
+                        // a component, we need to set a temporary variable to the new value
                         if (property === 'hidden') {
-                            this._conditionallyHidden = newComponent.hidden;
+                            this._logicallyHidden = newComponent.hidden;
                         }
                         changed = true;
                     }
@@ -2072,7 +2113,7 @@ class Component extends Element_1.default {
                         component: newComponent,
                         result,
                     });
-                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
+                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2105,7 +2146,7 @@ class Component extends Element_1.default {
                         component: newComponent,
                         result,
                     }, 'value');
-                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
+                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2206,17 +2247,12 @@ class Component extends Element_1.default {
         element.setAttribute('aria-invalid', invalid ? 'true' : 'false');
     }
     /**
-     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.
+     * Clear any conditionally hidden components for this component only.
      */
-    clearOnHide() {
+    clearComponentOnHide() {
         // clearOnHide defaults to true for old forms (without the value set) so only trigger if the value is false.
-        if (
-        // if change happens inside EditGrid's row, it doesn't trigger change on the root level, so rootPristine will be true
-        (!this.rootPristine || this.options.server || (0, utils_1.isInsideScopingComponent)(this)) &&
-            this.component.clearOnHide !== false &&
-            !this.options.readOnly &&
-            !this.options.showHiddenFields) {
-            if (this.conditionallyHidden) {
+        if (this.component.clearOnHide !== false && !this.options.readOnly && !this.options.showHiddenFields) {
+            if (this.shouldConditionallyClear()) {
                 this.deleteValue();
             }
             else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2227,6 +2263,12 @@ class Component extends Element_1.default {
             }
         }
     }
+    /**
+     * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.
+     */
+    clearOnHide() {
+        this.clearComponentOnHide();
+    }
     /**
      * Triggers a debounced onChange event for the root component (usually Webform).
      * @param {...any} args - The arguments to pass to the onChange event.
@@ -2465,27 +2507,17 @@ class Component extends Element_1.default {
      * @returns {*} - The value for this component.
      */
     get dataValue() {
-        if (!this.key ||
-            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
-            return this.emptyValue;
-        }
-        if (!this.hasValue() && this.shouldAddDefaultValue) {
-            const empty = this.component.multiple ? [] : this.emptyValue;
-            if (!this.rootPristine) {
-                this.dataValue = empty;
-            }
-            return empty;
+        if (!this.key) {
+            return this.component.multiple ? [] : this.emptyValue;
         }
-        return lodash_1.default.get(this._data, this.key);
+        return lodash_1.default.get(this._data, this.key, this.component.multiple ? [] : this.emptyValue);
     }
     /**
      * Sets the static value of this component.
      * @param {*} value - The value to set for this component.
      */
     set dataValue(value) {
-        if (!this.allowData ||
-            !this.key ||
-            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
+        if (!this.allowData || !this.key) {
             return;
         }
         if ((value !== null) && (value !== undefined)) {
@@ -2528,13 +2560,30 @@ class Component extends Element_1.default {
     }
     getCustomDefaultValue(defaultValue) {
         if (this.component.customDefaultValue && !this.options.preview) {
-            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');
+            defaultValue = this.evaluate(this.component.customDefaultValue, { value: this.dataValue }, 'value');
         }
         return defaultValue;
     }
+    /**
+     * Returns if a component has a default value set.
+     * @returns {boolean} - TRUE if a default value is set.
+     */
+    get hasDefaultValue() {
+        return this.component.customDefaultValue || (this.component.hasOwnProperty('defaultValue') &&
+            (this.component.defaultValue !== null) &&
+            (this.component.defaultValue !== undefined));
+    }
+    /**
+     * Determine if we should add a default value for this component.
+     * @returns {boolean} - TRUE if a default value should be set
+     */
     get shouldAddDefaultValue() {
-        return !this.options.noDefaults || (this.component.defaultValue && !this.isEmpty(this.component.defaultValue)) || this.component.customDefaultValue;
+        return this.pristine && this.allowData && (this.hasDefaultValue || !this.options.noDefaults);
     }
+    /**
+     * Get the default value of this component.
+     * @returns {*} - The default value for this component.
+     */
     get defaultValue() {
         let defaultValue = this.emptyValue;
         if (this.component.defaultValue) {
@@ -2805,10 +2854,8 @@ class Component extends Element_1.default {
         }
         // If no calculated value or
         // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
-        const { clearOnHide } = this.component;
-        const shouldBeCleared = this.conditionallyHidden && clearOnHide;
         const allowOverride = lodash_1.default.get(this.component, 'allowCalculateOverride', false);
-        if (shouldBeCleared) {
+        if (this.shouldConditionallyClear()) {
             // remove calculated value so that the value is recalculated once component becomes visible
             if (this.hasOwnProperty('calculatedValue') && allowOverride) {
                 lodash_1.default.unset(this, 'calculatedValue');
@@ -2929,10 +2976,12 @@ class Component extends Element_1.default {
      * @param {boolean} dirty - If the component is dirty.
      * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.
      * @param {*} row - Contextual row data for this component.
+     * @param {*} options - Additional options for validation.
      * @returns {string} - The message to show when the component is invalid.
      */
-    invalidMessage(data, dirty, ignoreCondition, row) {
+    invalidMessage(data, dirty, ignoreCondition, row, options = {}) {
         var _a;
+        const { local } = options;
         if (!row) {
             row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);
         }
@@ -2952,6 +3001,7 @@ class Component extends Element_1.default {
             component: this.component,
             data,
             row,
+            local,
             path: this.path || this.component.key,
             parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
             paths: this.paths,
@@ -3128,6 +3178,14 @@ class Component extends Element_1.default {
         data = data || this.rootValue;
         flags = flags || {};
         row = row || this.data;
+        // Some components (for legacy reasons) have calls to "checkData" in inappropriate places such
+        // as setValue. Historically, this was bypassed by a series of cached states around the data model
+        // which caused its own problems. We need to ensure that premium and custom components do not fall into
+        // an infinite loop by only checking this component once.
+        if (this.checkingData) {
+            return;
+        }
+        this.checkingData = true;
         // Needs for Nextgen Rules Engine
         this.resetCaches();
         // Do not trigger refresh if change was triggered on blur event since components with Refresh on Blur have their own listeners
@@ -3141,6 +3199,8 @@ class Component extends Element_1.default {
         if (this.id !== flags.triggeredComponentId) {
             this.calculateComponentValue(data, flags, row);
         }
+        // We are done checking data.
+        this.checkingData = false;
     }
     checkModal(errors = [], dirty = false) {
         const messages = errors.filter(error => !error.fromServer);
@@ -3456,7 +3516,7 @@ class Component extends Element_1.default {
                         // If component definition changed, replace it.
                         if (!lodash_1.default.isEqual(this.component, newComponent)) {
                             this.component = newComponent;
-                            const visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
+                            const visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {

package/lib/cjs/components/_classes/field/Field.d.ts

@@ -1,9 +1,9 @@
 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: object): Field;
+    render(element: object): string;
     /**
     /* Saves current caret position to restore it after the component is redrawn
      * @param {HTMLElement} element - The element to save the caret position for.

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

@@ -11,7 +11,7 @@ const Component_1 = __importDefault(require("../component/Component"));
 class Field extends Component_1.default {
     /**
      * @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/cjs/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]>;
     /**
@@ -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.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

@@ -6,7 +6,6 @@ export default class NestedDataComponent extends NestedComponent {
     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

@@ -26,6 +26,9 @@ class NestedDataComponent extends NestedComponent_1.default {
     get emptyValue() {
         return {};
     }
+    get shouldAddDefaultValue() {
+        return !this.options.noDefaults || !this.options.server;
+    }
     componentContext() {
         return this.dataValue;
     }
@@ -85,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;
@@ -60,7 +69,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 +80,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/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);
@@ -218,7 +230,7 @@ class AddressComponent extends Container_1.default {
         super.dataValue = value;
     }
     get dataValue() {
-        const resultValue = lodash_1.default.get(this._data, this.component.path);
+        const resultValue = lodash_1.default.get(this._data, this.path);
         if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {
             return [resultValue];
         }
@@ -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);
             }
         }