@formio/js 5.1.0-dev.6040.debc859 → 5.1.0-dev.6042.603237d

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

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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) {
@@ -42,8 +19,8 @@ const lodash_1 = __importDefault(require("lodash"));
 const ismobilejs_1 = __importDefault(require("ismobilejs"));
 const process_1 = require("@formio/core/process");
 const Formio_1 = require("../../../Formio");
-const FormioUtils = __importStar(require("../../../utils/utils"));
-const utils_1 = require("../../../utils/utils");
+const utils_1 = __importDefault(require("../../../utils"));
+const utils_2 = require("../../../utils");
 const Element_1 = __importDefault(require("../../../Element"));
 const ComponentModal_1 = __importDefault(require("../componentModal/ComponentModal"));
 const widgets_1 = __importDefault(require("../../../widgets"));
@@ -51,7 +28,7 @@ const addons_1 = __importDefault(require("../../../addons"));
 const uploadAdapter_1 = require("../../../providers/storage/uploadAdapter");
 const en_1 = __importDefault(require("../../../translations/en"));
 const Templates_1 = __importDefault(require("../../../templates/Templates"));
-const isIEBrowser = FormioUtils.getBrowserInfo().ie;
+const isIEBrowser = utils_1.default.getBrowserInfo().ie;
 /**
  * This is the Component class
  which all elements within the FormioForm derive from.
@@ -225,7 +202,7 @@ class Component extends Element_1.default {
      */
     static savedValueTypes(schema) {
         schema = schema || {};
-        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];
+        return utils_1.default.getComponentSavedTypes(schema) || [utils_1.default.componentValueTypes.any];
     }
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
@@ -292,7 +269,7 @@ class Component extends Element_1.default {
         this.component.id = this.id;
         this.afterComponentAssign();
         // Save off the original component to be used in logic.
-        this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);
+        this.originalComponent = (0, utils_2.fastCloneDeep)(this.component);
         /**
          * If the component has been attached
          */
@@ -325,7 +302,7 @@ class Component extends Element_1.default {
          * Determines if this component is disabled, or not.
          * @type {boolean}
          */
-        this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;
+        this._disabled = (0, utils_2.boolValue)(this.component.disabled) ? this.component.disabled : false;
         /**
          * Points to the root component, usually the FormComponent.
          * @type {Component}
@@ -346,23 +323,16 @@ class Component extends Element_1.default {
          * 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.paths = utils_1.default.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
         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
@@ -431,7 +401,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;
@@ -465,6 +435,45 @@ class Component extends Element_1.default {
         var _a;
         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;
+        }
+        return false;
+    }
     get data() {
         return this._data;
     }
@@ -491,7 +500,7 @@ class Component extends Element_1.default {
         label.labelPosition = this.component.labelPosition;
         label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;
         const isPDFReadOnlyMode = this.isPDFReadOnlyMode;
-        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {
+        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {
             label.className += ' field-required';
         }
         if (label.hidden) {
@@ -505,8 +514,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));
         }
@@ -525,7 +533,7 @@ class Component extends Element_1.default {
      */
     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.paths = utils_1.default.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() {
@@ -671,20 +679,64 @@ 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.
+     * 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.
      */
-    checkConditionallyHidden(data = null, row = null) {
-        if (!this.hasCondition()) {
-            return false;
+    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;
         }
-        return !this.conditionallyVisible(data, row);
+        // 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;
@@ -801,7 +853,7 @@ class Component extends Element_1.default {
      * @returns {object} - The JSON schema for this component.
      */
     get schema() {
-        return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));
+        return (0, utils_2.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));
     }
     /**
      * Returns true if component is inside DataGrid
@@ -953,7 +1005,7 @@ class Component extends Element_1.default {
         if (!this.shouldSanitizeValue && !forceSanitize) {
             return dirty;
         }
-        return FormioUtils.sanitize(dirty, {
+        return utils_1.default.sanitize(dirty, {
             sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),
         });
     }
@@ -1072,7 +1124,7 @@ class Component extends Element_1.default {
             return submissionTimezone;
         }
         // Return current timezone if none are provided.
-        return (0, utils_1.currentTimezone)();
+        return (0, utils_2.currentTimezone)();
     }
     /**
      *
@@ -1377,7 +1429,7 @@ class Component extends Element_1.default {
         else {
             this.refreshOnChanged = true;
         }
-        this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);
+        this.refreshOnValue = (0, utils_2.fastCloneDeep)(value);
         if (this.refreshOnChanged) {
             if (this.component.clearOnRefresh) {
                 this.setValue(null);
@@ -1619,7 +1671,7 @@ class Component extends Element_1.default {
         if (this.component.customClass) {
             className += this.component.customClass;
         }
-        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {
+        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required)) {
             className += ' required';
         }
         if (this.labelIsHidden()) {
@@ -1852,7 +1904,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();
     }
     /**
@@ -1907,7 +1959,7 @@ class Component extends Element_1.default {
         if (this._hasCondition !== null) {
             return this._hasCondition;
         }
-        this._hasCondition = FormioUtils.hasCondition(this.component);
+        this._hasCondition = utils_1.default.hasCondition(this.component);
         return this._hasCondition;
     }
     /**
@@ -1934,7 +1986,7 @@ class Component extends Element_1.default {
      * @returns {boolean} - True if the condition applies to this component.
      */
     checkCondition(row, data) {
-        return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);
+        return utils_1.default.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);
     }
     /**
      * Check for conditionals and hide/show the element based on those conditions.
@@ -1950,23 +2002,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;
-        let shouldClear = false;
-        if (isConditionallyHidden !== this._conditionallyHidden) {
-            this._conditionallyHidden = isConditionallyHidden;
-            shouldClear = true;
-        }
         // 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;
         }
-        // Wait for visibility to update for nested components, so the component state is up-to-date when
-        // calling clearOnHide
-        if (shouldClear) {
-            this.clearOnHide();
-        }
+        this.clearComponentOnHide();
         return visible;
     }
     /**
@@ -2001,9 +2042,9 @@ class Component extends Element_1.default {
         if (logics.length === 0) {
             return;
         }
-        const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);
+        const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);
         let changed = logics.reduce((changed, logic) => {
-            const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);
+            const result = utils_1.default.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);
             return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;
         }, false);
         // If component definition changed, replace and mark as changed.
@@ -2070,14 +2111,14 @@ class Component extends Element_1.default {
         return actions.reduce((changed, action) => {
             switch (action.type) {
                 case 'property': {
-                    FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
+                    utils_1.default.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 _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;
                     }
@@ -2092,7 +2133,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;
@@ -2125,7 +2166,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;
@@ -2226,17 +2267,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) {
@@ -2247,6 +2283,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.
@@ -2494,27 +2536,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.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.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
+        if (!this.allowData || !this.key) {
             return;
         }
         if ((value !== null) && (value !== undefined)) {
@@ -2557,13 +2589,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) {
@@ -2575,7 +2624,7 @@ class Component extends Element_1.default {
                 if (this.component.type !== 'textfield') {
                     const placeholderChar = this.placeholderChar;
                     value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;
-                    if (!FormioUtils.matchInputMask(value, this.defaultMask)) {
+                    if (!utils_1.default.matchInputMask(value, this.defaultMask)) {
                         value = '';
                     }
                 }
@@ -2641,13 +2690,16 @@ class Component extends Element_1.default {
         }
         const isArray = Array.isArray(value);
         const valueInput = this.refs.fileLink || this.refs.input;
+        const isFilelink = !!this.refs.fileLink;
         if (isArray &&
             Array.isArray(this.defaultValue) &&
             this.refs.hasOwnProperty('input') &&
             valueInput &&
             (valueInput.length !== value.length) &&
             this.visible) {
-            this.redraw();
+            if (isFilelink || valueInput.length) {
+                this.redraw();
+            }
         }
         if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {
             this.redraw();
@@ -2834,10 +2886,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');
@@ -2895,7 +2945,7 @@ class Component extends Element_1.default {
             }
             if (fromSubmission) {
                 // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass
-                this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);
+                this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);
                 return false;
             }
             // If this is the firstPass, and the dataValue is different than to the calculatedValue.
@@ -2904,7 +2954,7 @@ class Component extends Element_1.default {
                 return true;
             }
         }
-        this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);
+        this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);
         if (changed) {
             if (!flags.noPristineChangeOnModified && this.root.initialized) {
                 this.pristine = false;
@@ -2958,12 +3008,14 @@ 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);
+            row = (0, utils_2.getContextualRowData)(this.component, data, this.paths);
         }
         if (!ignoreCondition && !this.checkCondition(row, data)) {
             return '';
@@ -2981,6 +3033,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,
@@ -2991,7 +3044,7 @@ class Component extends Element_1.default {
             ]
         });
         const errors = validationScope.errors;
-        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
+        const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));
         return lodash_1.default.map(interpolatedErrors, 'message').join('\n\n');
     }
     /**
@@ -3022,7 +3075,7 @@ class Component extends Element_1.default {
      */
     interpolateErrors(errors) {
         var _a;
-        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
+        const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));
         return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;
     }
     /**
@@ -3157,19 +3210,29 @@ class Component extends Element_1.default {
         data = data || this.rootValue;
         flags = flags || {};
         row = row || this.data;
+        if (flags.noCheck) {
+            return true;
+        }
+        // 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
         if (!flags.fromBlur) {
             this.checkRefreshOn(flags.changes, flags);
         }
-        if (flags.noCheck) {
-            return true;
-        }
         this.checkComponentConditions(data, flags, row);
         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);
@@ -3232,7 +3295,7 @@ class Component extends Element_1.default {
             }
         });
         this.addEventListener(element, 'blur', () => {
-            this.root.pendingBlur = FormioUtils.delay(() => {
+            this.root.pendingBlur = utils_1.default.delay(() => {
                 this.emit('blur', this);
                 if (this.component.validateOn === 'blur') {
                     this.root.triggerChange({ fromBlur: true }, {
@@ -3480,12 +3543,12 @@ class Component extends Element_1.default {
             if (logic.trigger.type === 'event') {
                 const event = this.interpolate(logic.trigger.event);
                 this.on(event, (...args) => {
-                    const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);
+                    const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);
                     if (this.applyActions(newComponent, logic.actions, args)) {
                         // 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) {
@@ -3615,7 +3678,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             }.bind(Component.externalLibraries[name]);
         }
         // See if the plugin already exists.
-        const plugin = (0, utils_1.getScriptPlugin)(property);
+        const plugin = (0, utils_2.getScriptPlugin)(property);
         if (plugin) {
             Component.externalLibraries[name].resolve(plugin);
         }
@@ -3658,7 +3721,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             // if no callback is provided, then check periodically for the script.
             if (polling) {
                 setTimeout(function checkLibrary() {
-                    const plugin = (0, utils_1.getScriptPlugin)(property);
+                    const plugin = (0, utils_2.getScriptPlugin)(property);
                     if (plugin) {
                         Component.externalLibraries[name].resolve(plugin);
                     }