@formio/js 5.0.2-rc.3 → 5.1.0-dev.5936.fa0f253

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

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -189,6 +198,7 @@ class Component extends Element_1.default {
             properties: {},
             allowMultipleMasks: false,
             addons: [],
+            serverOverride: {},
         }, ...sources);
     }
     /**
@@ -234,6 +244,7 @@ class Component extends Element_1.default {
      */
     /* eslint-disable max-statements */
     constructor(component, options, data) {
+        var _a, _b, _c, _d;
         super(Object.assign({
             renderMode: 'form',
             attachMode: 'full',
@@ -249,6 +260,10 @@ class Component extends Element_1.default {
          * @private
          */
         this._hasCondition = null;
+        /**
+         * The row index for this component.
+         */
+        this._rowIndex = undefined;
         /**
          * References to dom elements
          */
@@ -259,11 +274,6 @@ class Component extends Element_1.default {
             this.options.components[component.type]) {
             lodash_1.default.merge(component, this.options.components[component.type]);
         }
-        /**
-         * The data path to this specific component instance.
-         * @type {string}
-         */
-        this.path = (component === null || component === void 0 ? void 0 : component.key) || '';
         /**
          * An array of all the children components errors.
          */
@@ -332,6 +342,11 @@ class Component extends Element_1.default {
          * @type {Component}
          */
         this.parent = this.options.parent;
+        /**
+         * The component paths for this component.
+         * @type {import('@formio/core').ComponentPaths} - The component paths.
+         */
+        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));
         this.options.name = this.options.name || 'data';
         this._path = '';
         // Needs for Nextgen Rules Engine
@@ -340,7 +355,7 @@ class Component extends Element_1.default {
          * Determines if this component is visible, or not.
          */
         this._parentVisible = this.options.hasOwnProperty('parentVisible') ? this.options.parentVisible : true;
-        this._visible = this._parentVisible && this.conditionallyVisible(null, data);
+        this._visible = this._parentVisible && (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         this._parentDisabled = false;
         /**
          * The reference attribute name for this component
@@ -409,7 +424,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.visible || !this.component.clearOnHide) {
+                if (!this.shouldConditionallyClear()) {
                     if (!this.hasValue()) {
                         if (this.shouldAddDefaultValue) {
                             this.dataValue = this.defaultValue;
@@ -432,18 +447,56 @@ class Component extends Element_1.default {
         // Allow anyone to hook into the component creation.
         this.hook('component');
         if (!this.options.skipInit) {
+            if (typeof this.beforeInit === 'function') {
+                this.beforeInit();
+            }
             this.init();
         }
     }
     /* eslint-enable max-statements */
     get componentsMap() {
         var _a;
-        if ((_a = this.localRoot) === null || _a === void 0 ? void 0 : _a.childComponentsMap) {
-            return this.localRoot.childComponentsMap;
+        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.childComponentsMap) || {};
+    }
+    /**
+     * Returns if the parent should conditionally clear.
+     *
+     * @returns {boolean} - If the parent should conditionally clear.
+     */
+    parentShouldConditionallyClear() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if ((currentParent.allowData && currentParent._conditionallyClear) ||
+                (!currentParent.allowData && currentParent._conditionallyHidden)) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
+    parentConditionallyHidden() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent._conditionallyHidden) {
+                return true;
+            }
+            currentParent = currentParent.parent;
+        }
+        return false;
+    }
+    /**
+     * Returns true if any of the parents default their component "hidden" property to true.
+     * @returns {boolean} - If any parent defaults the hidden property to true.
+     */
+    anyParentDefaultsHidden() {
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.component.hidden) {
+                return true;
+            }
+            currentParent = currentParent.parent;
         }
-        const localMap = {};
-        localMap[this.path] = this;
-        return localMap;
+        return false;
     }
     get data() {
         return this._data;
@@ -485,11 +538,28 @@ class Component extends Element_1.default {
     init() {
         var _a;
         this.disabled = this.shouldDisabled;
-        this._visible = this.conditionallyVisible(null, null);
+        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));
         }
     }
+    /**
+     * Get Row Index.
+     * @returns {number} - The row index.
+     */
+    get rowIndex() {
+        return this._rowIndex;
+    }
+    /**
+     * Set Row Index to row and update each component.
+     * @param {number} value - The row index.
+     * @returns {void}
+     */
+    set rowIndex(value) {
+        var _a, _b;
+        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));
+        this._rowIndex = value;
+    }
     afterComponentAssign() {
         //implement in extended classes
     }
@@ -511,7 +581,10 @@ class Component extends Element_1.default {
                 this.addons.push(addon);
             }
             else {
-                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);
+                console.warn(this.t('addonSupportTypeError', {
+                    type: this.component.type,
+                    label: name.label
+                }));
             }
         }
         return addon;
@@ -559,6 +632,12 @@ class Component extends Element_1.default {
     get key() {
         return lodash_1.default.get(this.component, 'key', '');
     }
+    get path() {
+        return this.paths.dataPath;
+    }
+    set path(path) {
+        throw new Error(this.t('setPathError'));
+    }
     set parentVisible(value) {
         this._parentVisible = value;
     }
@@ -604,7 +683,6 @@ class Component extends Element_1.default {
                 return;
             }
             this._visible = value;
-            this.clearOnHide();
             this.redraw();
         }
     }
@@ -625,6 +703,65 @@ class Component extends Element_1.default {
         }
         return this._visible && this._parentVisible;
     }
+    get logicallyHidden() {
+        if (this._logicallyHidden && !this.component.hidden) {
+            this._logicallyHidden = false;
+        }
+        return this._logicallyHidden;
+    }
+    /**
+     * Determines if the component should clear its value when the root form is pristine.
+     * @returns {boolean} - If the component should clear its value when the root form is pristine.
+     */
+    shouldConditionallyClearOnPristine() {
+        // If the form is pristine, we should NOT clear the value of a conditionally hidden child component
+        // of a layout component that defaults to hidden using the "hidden" component property.
+        return !this.anyParentDefaultsHidden();
+    }
+    /**
+     * Returns if the component should clear its value when conditionally hidden.
+     * @returns {boolean} - If the component should clear its value when conditionally hidden.
+     */
+    shouldConditionallyClear() {
+        // Skip if this component has clearOnHide set to false.
+        if (this.component.clearOnHide === false) {
+            this._conditionallyClear = false;
+            return this._conditionallyClear;
+        }
+        // If the component is logically hidden, then it is conditionally hidden and should clear.
+        if (this.logicallyHidden) {
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
+        }
+        // If we have a condition and it is not conditionally visible, the it should conditionally clear.
+        if (this.hasCondition() &&
+            !this.conditionallyVisible() &&
+            (!this.rootPristine || this.shouldConditionallyClearOnPristine())) {
+            this._conditionallyClear = true;
+            return this._conditionallyClear;
+        }
+        this._conditionallyClear = this.hasSetValue ? false : this.parentShouldConditionallyClear();
+        return this._conditionallyClear;
+    }
+    /**
+     * Returns if the component is conditionally hidden.
+     * @returns {boolean} - If the component is conditionally hidden.
+     */
+    conditionallyHidden() {
+        // If it is logically hidden, then it is conditionally hidden.
+        if (this.logicallyHidden) {
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
+        }
+        // If it has a condition, and is not conditionally visible, then it is conditionally hidden.
+        if (this.hasCondition() && !this.conditionallyVisible()) {
+            this._conditionallyHidden = true;
+            return this._conditionallyHidden;
+        }
+        // It is conditionally hidden if its parent is conditionally hidden.
+        this._conditionallyHidden = this.parentConditionallyHidden();
+        return this._conditionallyHidden;
+    }
     get currentForm() {
         return this._currentForm;
     }
@@ -638,7 +775,7 @@ class Component extends Element_1.default {
         return this.options.attachMode === 'builder';
     }
     get calculatedPath() {
-        console.error('component.calculatedPath was deprecated, use component.path instead.');
+        console.error(this.t('calculatedPathDeprecation'));
         return this.path;
     }
     get labelPosition() {
@@ -804,7 +941,7 @@ class Component extends Element_1.default {
         const name = names[names.length - 1];
         const templatesByName = Templates_1.default.defaultTemplates[name];
         if (!templatesByName) {
-            return { template: `Unknown template: ${name}` };
+            return { template: this.t('unknownTemplate', { name }) };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
@@ -861,9 +998,7 @@ class Component extends Element_1.default {
         data.disabled = this.disabled;
         data.builder = this.builderMode;
         data.render = (...args) => {
-            console.warn(`Form.io 'render' template function is deprecated.
-      If you need to render template (template A) inside of another template (template B),
-      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);
+            console.warn(this.t('renderTemplateFunctionDeprecation'));
             return this.renderTemplate(...args);
         };
         data.label = data.labelInfo || this.labelInfo;
@@ -1046,6 +1181,14 @@ class Component extends Element_1.default {
     setOpenModalElement(template = null) {
         this.componentModal.setOpenModalElement(template || this.getModalPreviewTemplate());
     }
+    /**
+     * Renders a modal preview template and returns the markup as a string
+     * @param {object|null|undefined} ctx - The rendering context
+     * @returns {string} - The modal preview markup
+     */
+    renderModalPreview(ctx) {
+        return this.renderTemplate('modalPreview', ctx || {});
+    }
     /**
      * Returns the modal preview template.
      * @returns {string} - The modal preview template.
@@ -1057,8 +1200,8 @@ class Component extends Element_1.default {
         if (this.hasInput && ((_a = this.component.validate) === null || _a === void 0 ? void 0 : _a.required) && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
-        return this.renderTemplate('modalPreview', {
-            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
+        return this.renderModalPreview({
+            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),
             messages: '',
             labelInfo: modalLabel,
         });
@@ -1083,7 +1226,7 @@ class Component extends Element_1.default {
      * @param {boolean} topLevel - If this is the topmost component that is being rendered.
      * @returns {string} - The rendered HTML string of a component.
      */
-    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {
+    render(children = this.t('unknownComponent', { type: this.component.type }), topLevel = false) {
         const isVisible = this.visible;
         this.rendered = true;
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {
@@ -1106,6 +1249,19 @@ class Component extends Element_1.default {
             }, topLevel);
         }
     }
+    /**
+     * 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
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
+     */
+    createTooltip(tooltipEl, settings = {}) {
+        const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
+        const tooltipDataTitle = tooltipEl.getAttribute('data-title');
+        const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
+            .replace(/(?:\r\n|\r|\n)/g, '<br />');
+        return (0, tippy_js_1.default)(tooltipEl, Object.assign(Object.assign({ allowHTML: true, trigger: 'mouseenter click focus', placement: 'right', zIndex: 10000, interactive: true }, settings), { content: this.t(this.sanitize(tooltipText), { _userInput: true }) }));
+    }
     /**
      * Attaches all the tooltips provided the refs object.
      * @param {object} toolTipsRefs - The refs for the tooltips within your template.
@@ -1114,18 +1270,7 @@ class Component extends Element_1.default {
     attachTooltips(toolTipsRefs) {
         toolTipsRefs === null || toolTipsRefs === void 0 ? void 0 : toolTipsRefs.forEach((tooltip, index) => {
             if (tooltip) {
-                const tooltipAttribute = tooltip.getAttribute('data-tooltip');
-                const tooltipDataTitle = tooltip.getAttribute('data-title');
-                const tooltipText = this.interpolate(tooltipDataTitle || tooltipAttribute)
-                    .replace(/(?:\r\n|\r|\n)/g, '<br />');
-                this.tooltips[index] = (0, tippy_js_1.default)(tooltip, {
-                    allowHTML: true,
-                    trigger: 'mouseenter click focus',
-                    placement: 'right',
-                    zIndex: 10000,
-                    interactive: true,
-                    content: this.t(this.sanitize(tooltipText), { _userInput: true }),
-                });
+                this.tooltips[index] = this.createTooltip(tooltip);
             }
         });
     }
@@ -1231,7 +1376,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;
                 });
@@ -1255,6 +1400,7 @@ class Component extends Element_1.default {
      * @returns {void}
      */
     checkRefresh(refreshData, changed, flags) {
+        var _a, _b;
         const changePath = lodash_1.default.get(changed, 'instance.path', false);
         // Don't let components change themselves.
         if (changePath && this.path === changePath) {
@@ -1263,7 +1409,7 @@ class Component extends Element_1.default {
         if (refreshData === 'data') {
             this.refresh(this.data, changed, flags);
         }
-        else if ((changePath && (0, utils_1.getComponentPath)(changed.instance) === refreshData) && changed && changed.instance &&
+        else if ((changePath && (((_b = (_a = changed.instance) === null || _a === void 0 ? void 0 : _a.paths) === null || _b === void 0 ? void 0 : _b.localPath) === refreshData)) && changed && changed.instance &&
             // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
             // in fields inside EditGrids could alter their state from other rows (which is bad).
             this.inContext(changed.instance)) {
@@ -1782,7 +1928,7 @@ class Component extends Element_1.default {
     rebuild() {
         this.destroy();
         this.init();
-        this.visible = this.conditionallyVisible(null, null);
+        this.visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
         return this.redraw();
     }
     /**
@@ -1849,8 +1995,8 @@ class Component extends Element_1.default {
     conditionallyVisible(data, row) {
         data = data || this.rootValue;
         row = row || this.data;
-        if (this.builderMode || this.previewMode || !this.hasCondition()) {
-            return !this.component.hidden;
+        if (this.builderMode || this.previewMode) {
+            return true;
         }
         data = data || (this.root ? this.root.data : {});
         return this.checkCondition(row, data);
@@ -1880,11 +2026,12 @@ class Component extends Element_1.default {
         if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {
             this.redraw();
         }
-        // Check advanced conditions
-        const visible = this.conditionallyVisible(data, row);
+        // Check visibility
+        const visible = (this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden);
         if (this.visible !== visible) {
             this.visible = visible;
         }
+        this.clearComponentOnHide();
         return visible;
     }
     /**
@@ -1991,6 +2138,12 @@ class Component extends Element_1.default {
                     FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
                     const property = action.property.value;
                     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 a temporary variable to the new value
+                        if (property === 'hidden') {
+                            this._logicallyHidden = newComponent.hidden;
+                        }
                         changed = true;
                     }
                     break;
@@ -2004,7 +2157,7 @@ class Component extends Element_1.default {
                         component: newComponent,
                         result,
                     });
-                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2037,7 +2190,7 @@ class Component extends Element_1.default {
                         component: newComponent,
                         result,
                     }, 'value');
-                    if (!lodash_1.default.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!lodash_1.default.isEqual(oldValue, newValue) && !this.shouldConditionallyClear()) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2138,17 +2291,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.visible) {
+        if (this.component.clearOnHide !== false && !this.options.readOnly && !this.options.showHiddenFields) {
+            if (this.shouldConditionallyClear()) {
                 this.deleteValue();
             }
             else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2159,6 +2307,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.
@@ -2364,6 +2518,15 @@ class Component extends Element_1.default {
             return editor;
         });
     }
+    getDragula() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => {
+                return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {
+                    return ready.then(resolve);
+                });
+            });
+        });
+    }
     get tree() {
         return this.component.tree || false;
     }
@@ -2397,27 +2560,17 @@ class Component extends Element_1.default {
      * @returns {*} - The value for this component.
      */
     get dataValue() {
-        if (!this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
-            return this.emptyValue;
+        if (!this.key) {
+            return this.component.multiple ? [] : this.emptyValue;
         }
-        if (!this.hasValue() && this.shouldAddDefaultValue) {
-            const empty = this.component.multiple ? [] : this.emptyValue;
-            if (!this.rootPristine) {
-                this.dataValue = empty;
-            }
-            return empty;
-        }
-        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.visible && this.component.clearOnHide && !this.rootPristine)) {
+        if (!this.allowData || !this.key) {
             return;
         }
         if ((value !== null) && (value !== undefined)) {
@@ -2460,13 +2613,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) {
@@ -2488,7 +2658,7 @@ class Component extends Element_1.default {
             }
             return value;
         };
-        if (this.defaultMask) {
+        if (Array.isArray(this.defaultMask) ? this.defaultMask.length > 0 : this.defaultMask) {
             if (Array.isArray(defaultValue)) {
                 defaultValue = defaultValue.map(checkMask);
             }
@@ -2737,10 +2907,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.visible && 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');
@@ -2861,9 +3029,15 @@ 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);
+        }
         if (!ignoreCondition && !this.checkCondition(row, data)) {
             return '';
         }
@@ -2880,7 +3054,10 @@ 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,
             scope: validationScope,
             instance: this,
             processors: [
@@ -2934,7 +3111,7 @@ class Component extends Element_1.default {
         if (flags.silentCheck) {
             return [];
         }
-        let isDirty = this.dirty || flags.dirty;
+        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
         if (this.options.alwaysDirty) {
             isDirty = true;
         }
@@ -2949,6 +3126,7 @@ class Component extends Element_1.default {
      * @returns {Array<any>} - An array of errors if the component is invalid.
      */
     validateComponent(data = null, row = null, flags = {}) {
+        var _a;
         data = data || this.rootValue;
         row = row || this.data;
         const { async = false } = flags;
@@ -2959,7 +3137,10 @@ class Component extends Element_1.default {
             component: this.component,
             data,
             row,
+            local: !!flags.local,
             value: this.validationValue,
+            parent: (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component,
+            paths: this.paths,
             path: this.path || this.component.key,
             instance: this,
             form: this.root ? this.root._form : {},
@@ -3050,6 +3231,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
@@ -3063,6 +3252,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);
@@ -3247,7 +3438,7 @@ class Component extends Element_1.default {
     }
     // Maintain reverse compatibility.
     whenReady() {
-        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');
+        console.warn(this.t('whenReadyDeprecation'));
         return this.dataReady;
     }
     get dataReady() {
@@ -3378,10 +3569,14 @@ 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.conditionallyVisible(null, null);
+                            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) {
+                                // If the logic is triggered by an event and the action sets the hidden state then the original
+                                // component definition must be changed so that the components hidden state does not get flipped back by
+                                // the fieldLogic function
+                                this.originalComponent.hidden = !visible;
                                 this.visible = visible;
                             }
                             if (this.disabled !== disabled) {