@formio/js 5.1.0-rc.9 → 5.1.0

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

@@ -114,6 +114,10 @@ class FormComponent extends Component_1.default {
     get emptyValue() {
         return { data: {} };
     }
+    // In order for the subform values to set properly, we must always say that nested forms have a default value.
+    get hasDefaultValue() {
+        return true;
+    }
     get ready() {
         return this.subFormReady || Promise.resolve();
     }
@@ -332,6 +336,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);
@@ -376,10 +384,11 @@ class FormComponent extends Component_1.default {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach) {
-        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {
+    createSubForm(fromAttach, beforeSubmit) {
+        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {
             if (!form) {
                 return;
             }
@@ -436,11 +445,13 @@ class FormComponent extends Component_1.default {
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach) {
+    loadSubForm(fromAttach, beforeSubmit) {
         var _a, _b, _c, _d, _e;
-        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
+        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
+        if (this.builderMode || (this.conditionallyHidden() && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -482,14 +493,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);
                 }
             });
         }
@@ -497,7 +508,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);
     }
@@ -512,7 +523,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.conditionallyHidden;
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.shouldConditionallyClear();
     }
     /**
      * Returns the data for the subform.
@@ -583,19 +594,17 @@ class FormComponent extends Component_1.default {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        if (this.isSubFormLazyLoad() && !this.subFormLoading) {
-            return this.createSubForm(true)
-                .then(this.submitSubForm(false))
-                .then(() => {
-                return this.dataValue;
-            })
+        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data
+        const loadHiddenForm = !this.component.clearOnHide;
+        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading && !this.subForm) {
+            return this.createSubForm(true, true)
+                .then(() => this.submitSubForm(false))
+                .then(() => this.dataValue)
                 .then(() => super.beforeSubmit());
         }
         else {
             return this.submitSubForm(false)
-                .then(() => {
-                return this.dataValue;
-            })
+                .then(() => this.dataValue)
                 .then(() => super.beforeSubmit());
         }
     }
@@ -660,7 +669,7 @@ class FormComponent extends Component_1.default {
      * Sets the subform value
      * @param {object|null|undefined} submission - The submission to set.
      * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubFormValue(submission, flags) {
         this.subForm.setValue(submission, flags);

package/lib/cjs/components/form/editForm/Form.edit.data.js

@@ -11,7 +11,7 @@ exports.default = [
     {
         weight: 140,
         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.',

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

@@ -58,8 +58,7 @@ class HTMLComponent extends Component_1.default {
         super.checkRefreshOn(changed);
         let visible;
         if (this.hasCondition()) {
-            this._conditionallyHidden = this.checkConditionallyHidden();
-            visible = !this.conditionallyHidden;
+            visible = !this.conditionallyHidden();
         }
         else {
             visible = !this.component.hidden;

package/lib/cjs/components/radio/Radio.js

@@ -355,7 +355,7 @@ class RadioComponent extends ListComponent_1.default {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
+                const checked = (value === undefined || value === null) ? false : (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);

package/lib/cjs/components/select/editForm/Select.edit.data.d.ts

@@ -172,6 +172,7 @@ declare const _default: ({
     key: string;
     tooltip: string;
     weight: number;
+    defaultValue: boolean;
     conditional: {
         json: {
             and: ({
@@ -192,7 +193,6 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
     reorder?: undefined;
     components?: undefined;

package/lib/cjs/components/select/editForm/Select.edit.data.js

@@ -119,6 +119,7 @@ exports.default = [
         key: 'lazyLoad',
         tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\'s will only fire when the control is activated.',
         weight: 11,
+        defaultValue: true,
         conditional: {
             json: {
                 and: [
@@ -208,7 +209,7 @@ exports.default = [
         label: 'Value Property',
         key: 'valueProperty',
         skipMerge: true,
-        clearOnHide: true,
+        clearOnHide: false,
         tooltip: 'The field to use as the value.',
         weight: 11,
         refreshOn: 'data.resource',

package/lib/cjs/components/selectboxes/SelectBoxes.js

@@ -64,6 +64,9 @@ class SelectBoxesComponent extends Radio_1.default {
         info.attr.class = 'form-check-input';
         return info;
     }
+    get hasDefaultValue() {
+        return true;
+    }
     get emptyValue() {
         return this.component.values.reduce((prev, value) => {
             if (value.value) {

package/lib/cjs/components/tabs/Tabs.js

@@ -143,6 +143,7 @@ class TabsComponent extends NestedComponent_1.default {
             this.addClass(this.refs[this.tabLinkKey][index], 'active');
             this.addClass(this.refs[this.tabLinkKey][index], 'formio-tab-link-active');
         }
+        this.setValue(this.data);
         this.triggerChange();
     }
     beforeFocus(component) {

package/lib/cjs/components/textfield/TextField.js

@@ -102,6 +102,9 @@ class TextFieldComponent extends Input_1.default {
         if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {
             this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,
                 displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });
+            // update originalComponent to include widget settings after component initialization 
+            // originalComponent is used to restore the component (and widget) after evaluating field logic 
+            this.originalComponent = FormioUtils.fastCloneDeep(this.component);
         }
     }
     attach(element) {

package/lib/cjs/components/unknown/Unknown.form.d.ts

@@ -1,5 +1,6 @@
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
 export default function _default(): object;

package/lib/cjs/components/unknown/Unknown.form.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Unknown_edit_display_1 = __importDefault(require("./editForm/Unknown.edit.display"));
 /**
  * Unknown Component schema.
+ * @param {...any} extend
  * @returns {object} - The Unknown Component edit form.
  */
 function default_1() {

package/lib/cjs/utils/formUtils.d.ts

@@ -26,8 +26,8 @@ export const getBestMatch: typeof Utils.getBestMatch;
 export const getComponentFromPath: typeof Utils.getComponentFromPath;
 export const getComponentValue: typeof Utils.getComponentValue;
 export const findComponents: typeof Utils.findComponents;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => void;
+export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => Promise<void>;
+export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;

package/lib/cjs/utils/utils.d.ts

@@ -208,9 +208,10 @@ export function loadZones(url: string, timezone: string): Promise<any> | any;
  * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
+ * @param {object} options - The options object
  * @returns {Date} - The moment date object.
  */
-export function momentDate(value: string | Date, format: string, timezone: string): Date;
+export function momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
 /**
  * Format a date provided a value, format, and timezone object.
  * @param {string} timezonesUrl - The URL to load the timezone data from.
@@ -477,14 +478,6 @@ export function getDataParentComponent(componentInstance: Component): Component
  * @returns {boolean} - TRUE if the value is a promise; FALSE otherwise
  */
 export function isPromise(value: any): boolean;
-/**
- * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its
- * changes by itself, e.g. EditGrid)
- * @param {Component} componentInstance - The component to check for the scoping parent.
- * @param {boolean} firstPass - Whether it is the first pass of the function
- * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise
- */
-export function isInsideScopingComponent(componentInstance: Component, firstPass?: boolean): boolean | any;
 /**
  * Returns all the focusable elements within the provided dom element.
  * @param {HTMLElement} element - The element to get the focusable elements from.

package/lib/cjs/utils/utils.js

@@ -19,7 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
+exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const json_logic_js_1 = __importDefault(require("json-logic-js"));
@@ -687,9 +687,10 @@ exports.loadZones = loadZones;
  * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
+ * @param {object} options - The options object
  * @returns {Date} - The moment date object.
  */
-function momentDate(value, format, timezone) {
+function momentDate(value, format, timezone, options) {
     const momentDate = (0, moment_timezone_1.default)(value);
     if (!timezone) {
         return momentDate;
@@ -697,7 +698,7 @@ function momentDate(value, format, timezone) {
     if (timezone === 'UTC') {
         timezone = 'Etc/UTC';
     }
-    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && moment_timezone_1.default.zonesLoaded) {
+    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {
         return momentDate.tz(timezone);
     }
     return momentDate;
@@ -1592,27 +1593,6 @@ function isPromise(value) {
         && Object.prototype.toString.call(value) === '[object Promise]';
 }
 exports.isPromise = isPromise;
-/**
- * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its
- * changes by itself, e.g. EditGrid)
- * @param {Component} componentInstance - The component to check for the scoping parent.
- * @param {boolean} firstPass - Whether it is the first pass of the function
- * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise
- */
-function isInsideScopingComponent(componentInstance, firstPass = true) {
-    if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {
-        return true;
-    }
-    const dataParent = getDataParentComponent(componentInstance);
-    if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {
-        return true;
-    }
-    else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {
-        return isInsideScopingComponent(dataParent.parent, false);
-    }
-    return false;
-}
-exports.isInsideScopingComponent = isInsideScopingComponent;
 /**
  * Returns all the focusable elements within the provided dom element.
  * @param {HTMLElement} element - The element to get the focusable elements from.

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.1.0-rc.9';
+    static version = '5.1.0';
     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 = '5.1.0-rc.9';
+FormioCore.version = '5.1.0';
 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/PDFBuilder.js

@@ -294,7 +294,7 @@ export default class PDFBuilder extends WebformBuilder {
                     height: schema.height,
                     width: schema.width
                 };
-                if (!this.options.noNewEdit && !component.component.noNewEdit) {
+                if (!this.options.noNewEdit && !component.component.noNewEdit && this.hasEditTabs(component.type)) {
                     this.editComponent(component.component, this.getParentContainer(component), isNew);
                 }
                 this.emit('updateComponent', component.component);
@@ -318,7 +318,7 @@ export default class PDFBuilder extends WebformBuilder {
         });
         this.webform.on('iframe-componentClick', schema => {
             const component = this.webform.getComponentById(schema.id);
-            if (component) {
+            if (component && this.hasEditTabs(component.type)) {
                 this.editComponent(component.component, this.getParentContainer(component));
             }
         }, true);

package/lib/mjs/Webform.d.ts

@@ -334,7 +334,7 @@ declare class Webform extends NestedDataComponent {
      * Sets the submission value
      * @param {object|null|undefined} submission - The submission to set.
      * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubmission(submission: object | null | undefined, flags?: object | null | undefined): void;
     /**
@@ -452,7 +452,7 @@ declare class Webform extends NestedDataComponent {
      */
     submit(before?: boolean, options?: any): Promise<any>;
     submitUrl(URL: any, headers: any): void;
-    triggerCaptcha(): void;
+    triggerCaptcha(components?: null): void;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/mjs/Webform.js

@@ -705,7 +705,7 @@ export default class Webform extends NestedDataComponent {
      * Sets the submission value
      * @param {object|null|undefined} submission - The submission to set.
      * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
-     * @return {void}
+     * @returns {void}
      */
     onSetSubmission(submission, flags = {}) {
         this.submissionSet = true;
@@ -1528,17 +1528,20 @@ export default class Webform extends NestedDataComponent {
             return console.warn("You should add a URL to this button.");
         }
     }
-    triggerCaptcha() {
+    triggerCaptcha(components = null) {
         if (!this || !this.components) {
             return;
         }
         const captchaComponent = [];
-        this.eachComponent((component) => {
+        eachComponent(components || this.components, (component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }
-        });
+        }, true);
         if (captchaComponent.length > 0) {
+            if (captchaComponent[0].component.provider === 'google' && components) {
+                return;
+            }
             captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
         }
     }

package/lib/mjs/WebformBuilder.d.ts

@@ -123,6 +123,7 @@ export default class WebformBuilder extends Component {
     addBuilderGroup(name: any, group: any): void;
     updateBuilderGroup(name: any, group: any): void;
     generateKey(info: any): any;
+    hasEditTabs(type: any): boolean;
 }
 import Component from './components/_classes/component/Component';
 import Webform from './Webform';

package/lib/mjs/WebformBuilder.js

@@ -115,7 +115,9 @@ export default class WebformBuilder extends Component {
                 html,
                 disableBuilderActions: self?.component?.disableBuilderActions,
                 childComponent: component,
-                design: self?.options?.design
+                design: self?.options?.design,
+                editJson: self?.options?.editJson,
+                editComponent: this.hasEditTabs(component.type)
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -852,7 +854,11 @@ export default class WebformBuilder extends Component {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
+        if (isNew
+            && !this.options.noNewEdit
+            && !info.noNewEdit
+            && this.hasEditTabs(info.type)
+            && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.
@@ -1630,4 +1636,13 @@ export default class WebformBuilder extends Component {
             info.placeholder ||
             info.type);
     }
+    hasEditTabs(type) {
+        // If the component type does not exist then it has no edit tabs
+        if (!Components.components[type]) {
+            return false;
+        }
+        const editTabs = getComponent(Components.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;
+        const hiddenEditTabs = _.filter(_.get(this.options, `editForm.${type}`, []), 'ignore');
+        return _.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;
+    }
 }

package/lib/mjs/Wizard.d.ts

@@ -106,6 +106,7 @@ declare class Wizard extends Webform {
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
     focusOnComponent(key: any): void | Promise<void>;
+    triggerButtonCaptcha(page: any): void;
 }
 declare namespace Wizard {
     let setBaseUrl: any;

package/lib/mjs/Wizard.js

@@ -594,6 +594,7 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
+                this.triggerCaptcha(this.currentPage.components);
                 const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
                 if (this.alert) {
                     this.showErrors(errors, true, true);
@@ -659,6 +660,7 @@ export default class Wizard extends Webform {
     beforeSubmit() {
         const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
+            this.triggerButtonCaptcha(page);
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
@@ -717,7 +719,10 @@ export default class Wizard extends Webform {
     validateCurrentPage(flags = {}) {
         const components = this.currentPage?.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
+        if (this.currentPage?.parent) {
+            return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
+        }
+        return this.currentPage?.validateComponents(components, this.root ? this.root.data : this.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -929,6 +934,22 @@ export default class Wizard extends Webform {
         }
         return super.focusOnComponent(key);
     }
+    triggerButtonCaptcha(page) {
+        if (!page.components) {
+            return;
+        }
+        let captchaComponent;
+        page.eachComponent((component) => {
+            if (/^(re)?captcha$/.test(component.component.type) &&
+                component.component.eventType === 'buttonClick' &&
+                component.component.buttonKey === 'submit') {
+                captchaComponent = component;
+            }
+        });
+        if (captchaComponent) {
+            captchaComponent.verify(`submitClick`);
+        }
+    }
 }
 Wizard.setBaseUrl = Formio.setBaseUrl;
 Wizard.setApiUrl = Formio.setApiUrl;

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

@@ -119,13 +119,6 @@ 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.
      */
@@ -170,6 +163,8 @@ declare class Component extends Element {
      */
     info: any;
     get componentsMap(): object;
+    parentShouldConditionallyClear(): boolean;
+    parentConditionallyHidden(): boolean;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -231,14 +226,10 @@ 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;
+    get logicallyHidden(): any;
+    _logicallyHidden: any;
+    shouldConditionallyClear(skipParent?: boolean): boolean;
+    conditionallyHidden(skipParent?: boolean): boolean;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;
@@ -378,7 +369,7 @@ declare class Component extends Element {
     /**
      * Renders a modal preview template and returns the markup as a string
      * @param {object|null|undefined} ctx - The rendering context
-     * @return {string} - The modal preview markup
+     * @returns {string} - The modal preview markup
      */
     renderModalPreview(ctx: object | null | undefined): string;
     /**
@@ -404,7 +395,7 @@ declare class Component extends Element {
      * Creates the tooltip instance using tippy.js and returns it
      * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
      * @param {object|null|undefined} settings - tippy.js options
-     * @return {import('tippy.js').Tippy} - tippy.js instance
+     * @returns {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     /**
@@ -789,6 +780,10 @@ declare class Component extends Element {
      * @returns {void}
      */
     setElementInvalid(element: HTMLElement, invalid: boolean): void;
+    /**
+     * Clear any conditionally hidden components for this component only.
+     */
+    clearComponentOnHide(): void;
     /**
      * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.
      */
@@ -892,7 +887,20 @@ declare class Component extends Element {
      */
     deleteValue(): void;
     getCustomDefaultValue(defaultValue: any): any;
-    get shouldAddDefaultValue(): any;
+    /**
+     * Returns if a component has a default value set.
+     * @returns {boolean} - TRUE if a default value is set.
+     */
+    get hasDefaultValue(): boolean;
+    /**
+     * Determine if we should add a default value for this component.
+     * @returns {boolean} - TRUE if a default value should be set
+     */
+    get shouldAddDefaultValue(): boolean;
+    /**
+     * Get the default value of this component.
+     * @returns {*} - The default value for this component.
+     */
     get defaultValue(): any;
     /**
      * Get the input value of this component.
@@ -1002,9 +1010,10 @@ declare class Component extends Element {
      * @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: any, dirty: boolean, ignoreCondition: boolean, row: any): string;
+    invalidMessage(data: any, dirty: boolean, ignoreCondition: boolean, row: any, options?: any): string;
     /**
      * Returns if the component is valid or not.
      * @param {*} data - The data to check if the component is valid.
@@ -1066,6 +1075,7 @@ declare class Component extends Element {
      * @returns {void|boolean} - TRUE if no check should be performed on the component.
      */
     checkData(data?: any, flags?: any, row?: any): void | boolean;
+    checkingData: boolean | undefined;
     checkModal(errors?: any[], dirty?: boolean): void;
     get validationValue(): any;
     isEmpty(value?: any): any;