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

package/lib/cjs/components/day/Day.d.ts

@@ -85,7 +85,7 @@ export default class DayComponent extends Field {
     }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
-    render(): Field;
+    render(): string;
     renderField(name: any): any;
     attach(element: any): Promise<void>;
     set disabled(disabled: any);

package/lib/cjs/components/day/Day.js

@@ -7,6 +7,7 @@ const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 const utils_1 = require("../../utils/utils");
+const core_1 = require("@formio/core");
 class DayComponent extends Field_1.default {
     static schema(...extend) {
         return Field_1.default.schema({
@@ -474,24 +475,7 @@ class DayComponent extends Field_1.default {
      * @returns {string} - the format for the value string.
      */
     get format() {
-        let format = '';
-        if (this.component.dayFirst && this.showDay) {
-            format += 'D/';
-        }
-        if (this.showMonth) {
-            format += 'M/';
-        }
-        if (!this.component.dayFirst && this.showDay) {
-            format += 'D/';
-        }
-        if (this.showYear) {
-            format += 'YYYY';
-            return format;
-        }
-        else {
-            // Trim off the "/" from the end of the format string.
-            return format.length ? format.substring(0, format.length - 1) : format;
-        }
+        return (0, core_1.getDayFormat)(this.component);
     }
     /**
      * Return the date for this component.

package/lib/cjs/components/editgrid/EditGrid.js

@@ -1141,7 +1141,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent && !this.options.server) {
+        if (this.parent) {
             this.parent.checkComponentConditions();
         }
         this.dataValue = value;
@@ -1174,10 +1174,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        // do not call checkData with server option, it is called when change is triggered in updateOnChange
-        if (!this.options.server) {
-            this.checkData();
-        }
+        this.checkData();
         this.changeState(changed, flags);
         return changed;
     }

package/lib/cjs/components/file/File.d.ts

@@ -45,7 +45,7 @@ export default class FileComponent extends Field {
         type: number;
         actions: number;
     };
-    render(): Field;
+    render(): string;
     getVideoStream(constraints: any): any;
     stopVideoStream(videoStream: any): void;
     getFrame(videoPlayer: any): Promise<any>;

package/lib/cjs/components/form/Form.d.ts

@@ -32,6 +32,7 @@ export default class FormComponent extends Component {
     attach(element: any): Promise<void>;
     get hasLoadedForm(): any;
     get isRevisionChanged(): any;
+    get subFormData(): any;
     subFormReady: Promise<any> | null | undefined;
     /**
      * Pass everyComponent to subform.

package/lib/cjs/components/form/Form.js

@@ -144,6 +144,8 @@ class FormComponent extends Component_1.default {
         options.events = this.createEmitter();
         // Make sure to not show the submit button in wizards in the nested forms.
         lodash_1.default.set(options, 'buttonSettings.showSubmit', false);
+        // Set the parent option to the subform so those references are stable when the subform is created
+        options.parent = this;
         if (!this.options) {
             return options;
         }
@@ -330,6 +332,10 @@ class FormComponent extends Component_1.default {
             && lodash_1.default.isNumber(this.formObj._vid)
             && this.formObj._vid !== this.subFormRevision;
     }
+    get subFormData() {
+        var _a;
+        return ((_a = this.dataValue) === null || _a === void 0 ? void 0 : _a.data) || {};
+    }
     destroy(all = false) {
         if (this.subForm) {
             this.subForm.destroy(all);
@@ -393,12 +399,11 @@ class FormComponent extends Component_1.default {
             return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {
                 this.subForm = instance;
                 this.subForm.currentForm = this;
+                this.subForm.parentVisible = this.visible;
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 lodash_1.default.assign(componentsMap, formComponentsMap);
                 this.component.components = this.subForm.components.map((comp) => comp.component);
-                this.subForm.parent = this;
-                this.subForm.parentVisible = this.visible;
                 this.subForm.on('change', () => {
                     if (this.subForm) {
                         this.dataValue = this.subForm.getValue();
@@ -425,10 +430,11 @@ class FormComponent extends Component_1.default {
         return this.subFormReady;
     }
     hideSubmitButton(component) {
-        const isSubmitButton = (component.type === 'button') &&
-            ((component.action === 'submit') || !component.action);
+        const isSubmitButton = component.type === 'button' && (component.action === 'submit' || !component.action);
         if (isSubmitButton) {
             component.hidden = true;
+            // clearOnHide no longer clears from the JSON `hidden` flag, so we make the button conditionally hidden to clear its data
+            component.customConditional = 'show = false';
         }
     }
     /**
@@ -438,7 +444,7 @@ class FormComponent extends Component_1.default {
      */
     loadSubForm(fromAttach) {
         var _a, _b, _c, _d, _e;
-        if (this.builderMode || this.isHidden() || (this.isSubFormLazyLoad() && !fromAttach)) {
+        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -480,14 +486,14 @@ class FormComponent extends Component_1.default {
             return visible;
         }
         if (this.subForm) {
-            return this.subForm.checkConditions(data, flags, row);
+            return this.subForm.checkConditions(this.subFormData, flags);
         }
         // There are few cases when subForm is not loaded when a change is triggered,
         // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode
         else if (this.subFormReady) {
             this.subFormReady.then(() => {
                 if (this.subForm) {
-                    return this.subForm.checkConditions(data, flags, row);
+                    return this.subForm.checkConditions(this.subFormData, flags);
                 }
             });
         }
@@ -495,7 +501,7 @@ class FormComponent extends Component_1.default {
     }
     calculateValue(data, flags, row) {
         if (this.subForm) {
-            return this.subForm.calculateValue(data, flags, row);
+            return this.subForm.calculateValue(this.subFormData, flags);
         }
         return super.calculateValue(data, flags, row);
     }
@@ -510,7 +516,7 @@ class FormComponent extends Component_1.default {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.isHidden();
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
     }
     /**
      * Returns the data for the subform.
@@ -581,11 +587,21 @@ class FormComponent extends Component_1.default {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        return this.submitSubForm(false)
-            .then(() => {
-            return this.dataValue;
-        })
-            .then(() => super.beforeSubmit());
+        if (this.isSubFormLazyLoad() && !this.subFormLoading) {
+            return this.createSubForm(true)
+                .then(this.submitSubForm(false))
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
+        else {
+            return this.submitSubForm(false)
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
     }
     isSubFormLazyLoad() {
         var _a, _b;

package/lib/cjs/components/html/HTML.js

@@ -56,9 +56,21 @@ class HTMLComponent extends Component_1.default {
     }
     checkRefreshOn(changed) {
         super.checkRefreshOn(changed);
-        if (!this.builderMode && this.component.refreshOnChange && this.element &&
-            !lodash_1.default.isUndefined(changed) && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed)) &&
-            this.conditionallyVisible(this.data, this.row)) {
+        let visible;
+        if (this.hasCondition()) {
+            this._conditionallyHidden = this.checkConditionallyHidden();
+            visible = !this.conditionallyHidden;
+        }
+        else {
+            visible = !this.component.hidden;
+        }
+        const shouldSetContent = !this.builderMode
+            && this.component.refreshOnChange
+            && this.element
+            && !lodash_1.default.isUndefined(changed)
+            && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed))
+            && visible;
+        if (shouldSetContent) {
             this.setContent(this.element, this.renderContent());
         }
     }

package/lib/cjs/components/radio/Radio.d.ts

@@ -28,7 +28,7 @@ export default class RadioComponent extends ListComponent {
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
     beforeSubmit(): Promise<any>;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
     validateValueProperty(): boolean;

package/lib/cjs/components/select/Select.d.ts

@@ -112,7 +112,7 @@ export default class SelectComponent extends ListComponent {
     activate(): void;
     setLoadingItem(addToCurrentList?: boolean): void;
     get active(): boolean | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     wrapElement(element: any): any;
     choicesOptions(): any;
     attach(element: any): Promise<void> | undefined;

package/lib/cjs/components/survey/Survey.d.ts

@@ -14,7 +14,7 @@ export default class SurveyComponent extends Field {
         operators: string[];
     };
     static savedValueTypes(schema: any): string[];
-    render(): Field;
+    render(): string;
     attach(element: any): Promise<void>;
     setValue(value: any, flags?: {}): boolean;
     get emptyValue(): {};

package/lib/cjs/components/table/Table.d.ts

@@ -19,6 +19,6 @@ export default class TableComponent extends NestedComponent {
     get colWidth(): string;
     noField: boolean;
     table: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/cjs/components/tabs/Tabs.d.ts

@@ -16,7 +16,7 @@ export default class TabsComponent extends NestedComponent {
     currentTab: number;
     noField: boolean;
     tabs: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     detach(all: any): void;
     /**
      * Set the current tab.

package/lib/cjs/formio.embed.d.ts

@@ -1 +1 @@
-export {};
+export { Formio } from "./InlineEmbed";

package/lib/cjs/formio.embed.js

@@ -1,4 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Formio = void 0;
 const InlineEmbed_1 = require("./InlineEmbed");
 (0, InlineEmbed_1.embed)();
+var InlineEmbed_2 = require("./InlineEmbed");
+Object.defineProperty(exports, "Formio", { enumerable: true, get: function () { return InlineEmbed_2.Formio; } });

package/lib/cjs/providers/address/GoogleAddressProvider.d.ts

@@ -82,6 +82,11 @@ export class GoogleAddressProvider extends AddressProvider {
     search(): Promise<void>;
     makeRequest(): Promise<void>;
     getDisplayValue(address: any): any;
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options?: ProviderOptions): void;
 }
 export type AutocompleteOptions = {
     /**

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

@@ -8,6 +8,9 @@ exports.GoogleAddressProvider = void 0;
 const Formio_1 = require("../../Formio");
 const lodash_1 = __importDefault(require("lodash"));
 const AddressProvider_1 = require("./AddressProvider");
+const GOOGLE_MAPS_BASE_URL = 'https://maps.googleapis.com';
+const GOOGLE_MAPS_JS_URL = `${GOOGLE_MAPS_BASE_URL}/maps/api/js`;
+const GOOGLE_MAPS_JS_WITH_PARAMS_URL = `${GOOGLE_MAPS_JS_URL}?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback`;
 /**
  * @typedef {object} AutocompleteOptions
  * @property {string[]} fields - The fields to include in the autocomplete response.
@@ -55,10 +58,11 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
         var _a;
         super(options);
         this.setAutocompleteOptions();
-        let src = 'https://maps.googleapis.com/maps/api/js?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback';
+        let src = GOOGLE_MAPS_JS_WITH_PARAMS_URL;
         if ((_a = options.params) === null || _a === void 0 ? void 0 : _a.key) {
             src += `&key=${options.params.key}`;
         }
+        this.tryRemoveLibrary(options);
         Formio_1.Formio.requireLibrary(this.getLibraryName(), 'google.maps.places', src);
     }
     /**
@@ -185,5 +189,23 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
             : this.alternativeDisplayValueProperty;
         return lodash_1.default.get(address, displayedProperty, '');
     }
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options = {}) {
+        var _a, _b, _c;
+        if (!Formio_1.Formio.libraries[this.getLibraryName()]) {
+            return;
+        }
+        const existingScript = document.querySelector(`script[src^="${GOOGLE_MAPS_JS_URL}"]`);
+        if (existingScript && ((_a = options.params) === null || _a === void 0 ? void 0 : _a.key) && !existingScript.attributes.src.value.endsWith(options.params.key)) {
+            const googleMapsScripts = (_b = document.querySelectorAll(`script[src^="${GOOGLE_MAPS_BASE_URL}"]`)) !== null && _b !== void 0 ? _b : [];
+            googleMapsScripts.forEach(script => script.parentNode.removeChild(script));
+            delete Formio_1.Formio.libraries[this.getLibraryName()];
+            (_c = global === null || global === void 0 ? void 0 : global.google) === null || _c === void 0 ? true : delete _c.maps;
+            delete global[`${this.getLibraryName()}Callback`];
+        }
+    }
 }
 exports.GoogleAddressProvider = GoogleAddressProvider;

package/lib/cjs/translations/en.js

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

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = 'FORMIO_VERSION';
+    static version = '5.1.0-rc.11';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {

package/lib/mjs/Formio.js

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = 'FORMIO_VERSION';
+FormioCore.version = '5.1.0-rc.11';
 CDN.defaultCDN = FormioCore.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 FormioCore.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

package/lib/mjs/Webform.d.ts

@@ -363,7 +363,7 @@ declare class Webform extends NestedDataComponent {
     executeFormController(): false | undefined;
     build(element: any): Promise<any>;
     getClassName(): string;
-    render(): import("./components/_classes/field/Field").default;
+    render(): string;
     redraw(): Promise<void> | Promise<boolean>;
     attach(element: any): Promise<boolean>;
     hasRequiredFields(): boolean;

package/lib/mjs/Wizard.js

@@ -657,7 +657,7 @@ export default class Wizard extends Webform {
         return this.page - 1;
     }
     beforeSubmit() {
-        const pages = this.getPages();
+        const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
             page.options.beforeSubmit = true;
             return page.beforeSubmit();

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -119,6 +119,13 @@ declare class Component extends Element {
      */
     paths: import('@formio/core').ComponentPaths;
     _path: string;
+    /**
+     * 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.
+     */
+    _parentConditionallyHidden: any;
+    _conditionallyHidden: any;
     /**
      * Determines if this component is visible, or not.
      */
@@ -224,6 +231,14 @@ declare class Component extends Element {
      * @returns {boolean} - Whether the component is visible or not.
      */
     get visible(): boolean;
+    get conditionallyHidden(): any;
+    /**
+     * 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?: object, row?: object): boolean;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;

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

@@ -315,11 +315,18 @@ export default class Component extends Element {
         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.conditionallyVisible(null, data);
+        this._visible = this._parentVisible && (this.hasCondition() ? !this._conditionallyHidden : !this.component.hidden);
         this._parentDisabled = false;
         /**
          * The reference attribute name for this component
@@ -388,7 +395,7 @@ export default class Component extends Element {
             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.conditionallyHidden && this.component.clearOnHide)) {
                     if (!this.hasValue()) {
                         if (this.shouldAddDefaultValue) {
                             this.dataValue = this.defaultValue;
@@ -457,7 +464,8 @@ export default class Component extends Element {
     }
     init() {
         this.disabled = this.shouldDisabled;
-        this._visible = this.conditionallyVisible(null, null);
+        this._conditionallyHidden = this.checkConditionallyHidden();
+        this._visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.component.addons?.length) {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
@@ -600,7 +608,6 @@ export default class Component extends Element {
                 return;
             }
             this._visible = value;
-            this.clearOnHide();
             this.redraw();
         }
     }
@@ -621,6 +628,21 @@ export default class Component extends Element {
         }
         return this._visible && this._parentVisible;
     }
+    get conditionallyHidden() {
+        return this._conditionallyHidden || this._parentConditionallyHidden;
+    }
+    /**
+     * 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()) {
+            return false;
+        }
+        return !this.conditionallyVisible(data, row);
+    }
     get currentForm() {
         return this._currentForm;
     }
@@ -1241,7 +1263,7 @@ export default class Component extends Element {
     detach() {
         // First iterate through each ref and delete the component so there are no dangling component references.
         _.each(this.refs, (ref) => {
-            if (typeof ref === NodeList) {
+            if (ref instanceof NodeList) {
                 ref.forEach((elem) => {
                     delete elem.component;
                 });
@@ -1791,7 +1813,7 @@ export default class Component extends Element {
     rebuild() {
         this.destroy();
         this.init();
-        this.visible = this.conditionallyVisible(null, null);
+        this.visible = this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden;
         return this.redraw();
     }
     /**
@@ -1858,8 +1880,8 @@ export default class Component extends Element {
     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);
@@ -1889,8 +1911,14 @@ export default class Component extends Element {
         if (!this.builderMode & !this.previewMode && this.fieldLogic(data, row)) {
             this.redraw();
         }
-        // Check advanced conditions
-        const visible = this.conditionallyVisible(data, row);
+        // 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);
         if (this.visible !== visible) {
             this.visible = visible;
         }
@@ -2000,6 +2028,12 @@ export default class Component extends Element {
                     FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
                     const property = action.property.value;
                     if (!_.isEqual(_.get(this.component, property), _.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
+                        if (property === 'hidden') {
+                            this._conditionallyHidden = newComponent.hidden;
+                        }
                         changed = true;
                     }
                     break;
@@ -2013,7 +2047,7 @@ export default class Component extends Element {
                         component: newComponent,
                         result,
                     });
-                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2046,7 +2080,7 @@ export default class Component extends Element {
                         component: newComponent,
                         result,
                     }, 'value');
-                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && !this.visible)) {
+                    if (!_.isEqual(oldValue, newValue) && !(this.component.clearOnHide && this.conditionallyHidden)) {
                         this.setValue(newValue);
                         if (this.viewOnly) {
                             this.dataValue = newValue;
@@ -2157,7 +2191,7 @@ export default class Component extends Element {
             this.component.clearOnHide !== false &&
             !this.options.readOnly &&
             !this.options.showHiddenFields) {
-            if (!this.visible) {
+            if (this.conditionallyHidden) {
                 this.deleteValue();
             }
             else if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2412,7 +2446,7 @@ export default class Component extends Element {
      */
     get dataValue() {
         if (!this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
+            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
             return this.emptyValue;
         }
         if (!this.hasValue() && this.shouldAddDefaultValue) {
@@ -2431,7 +2465,7 @@ export default class Component extends Element {
     set dataValue(value) {
         if (!this.allowData ||
             !this.key ||
-            (!this.visible && this.component.clearOnHide && !this.rootPristine)) {
+            (this.conditionallyHidden && this.component.clearOnHide && !this.rootPristine)) {
             return;
         }
         if ((value !== null) && (value !== undefined)) {
@@ -2751,7 +2785,7 @@ export default class Component extends Element {
         // 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 shouldBeCleared = this.conditionallyHidden && clearOnHide;
         const allowOverride = _.get(this.component, 'allowCalculateOverride', false);
         if (shouldBeCleared) {
             // remove calculated value so that the value is recalculated once component becomes visible
@@ -3396,7 +3430,7 @@ export default class Component extends Element {
                         // If component definition changed, replace it.
                         if (!_.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) {

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

@@ -128,10 +128,10 @@ export default [
     {
         weight: 700,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
-        tooltip: 'When a field is hidden, clear the value.',
+        tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',
         input: true
     },
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),

package/lib/mjs/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.