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

package/lib/cjs/Wizard.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Webform_1 = __importDefault(require("./Webform"));
 const Formio_1 = require("./Formio");
-const utils_1 = require("./utils/utils");
+const utils_1 = require("./utils");
 class Wizard extends Webform_1.default {
     /**
      * Constructor for wizard-based forms.
@@ -34,7 +34,6 @@ class Wizard extends Webform_1.default {
         this.originalComponents = [];
         this.page = 0;
         this.currentPanel = null;
-        this.currentPanels = null;
         this.currentNextPage = 0;
         this._seenPages = [0];
         this.subWizards = [];
@@ -53,12 +52,12 @@ class Wizard extends Webform_1.default {
     }
     getPages(args = {}) {
         const { all = false } = args;
-        const pages = this.hasExtraPages ? this.components : this.pages;
+        const pages = this.hasSubWizards ? this.components : this.pages;
         const filteredPages = pages
             .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
-    get hasExtraPages() {
+    get hasSubWizards() {
         return !lodash_1.default.isEmpty(this.subWizards);
     }
     get data() {
@@ -187,9 +186,9 @@ class Wizard extends Webform_1.default {
     }
     render() {
         const ctx = this.renderContext;
-        if (this.component.key) {
-            ctx.panels.map(panel => {
-                if (panel.key === this.component.key) {
+        if (this.component.id) {
+            ctx.panels.forEach(panel => {
+                if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
                 }
@@ -587,7 +586,7 @@ class Wizard extends Webform_1.default {
             this.pageFieldLogic(num);
             this.getNextPage();
             let parentNum = num;
-            if (this.hasExtraPages) {
+            if (this.hasSubWizards) {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {
@@ -602,7 +601,7 @@ class Wizard extends Webform_1.default {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
-                this.triggerCaptcha(this.currentPanel.components);
+                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);
@@ -670,6 +669,7 @@ class Wizard extends Webform_1.default {
     beforeSubmit() {
         const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
+            this.triggerButtonCaptcha(page);
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
@@ -726,10 +726,13 @@ class Wizard extends Webform_1.default {
         }
     }
     validateCurrentPage(flags = {}) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.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 (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);
+        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {
+            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);
+        }
+        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -869,7 +872,7 @@ class Wizard extends Webform_1.default {
         }
     }
     onChange(flags, changed, modified, changes) {
-        var _a, _b;
+        var _a;
         super.onChange(flags, changed, modified, changes);
         // The onChange loop doesn't need all components for wizards
         const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
@@ -877,23 +880,18 @@ class Wizard extends Webform_1.default {
             this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
-        let currentPanels;
-        let panels;
+        const currentPanels = this.pages;
+        // calling this.establishPages() updates/mutates this.pages to be the current pages
+        this.establishPages();
+        const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
-        if (this.hasExtraPages) {
-            currentPanels = this.pages.map(page => page.component.key);
-            this.establishPages();
-            panels = this.pages.map(page => page.component.key);
-        }
-        else {
-            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);
-            panels = this.establishPages().map(panel => panel.key);
-            this.currentPanels = panels;
-            if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
-            }
+        const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);
+        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
+            if (newIndex !== -1)
+                this.setPage(newIndex);
         }
-        if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
+        if (panelsUpdated || (flags && flags.fromSubmission)) {
             this.redrawHeader();
         }
         // If the next page changes, then make sure to redraw navigation.
@@ -942,6 +940,22 @@ class Wizard extends Webform_1.default {
         }
         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`);
+        }
+    }
 }
 exports.default = Wizard;
 Wizard.setBaseUrl = Formio_1.Formio.setBaseUrl;

package/lib/cjs/WizardBuilder.js

@@ -7,7 +7,7 @@ const WebformBuilder_1 = __importDefault(require("./WebformBuilder"));
 const Webform_1 = __importDefault(require("./Webform"));
 const builder_1 = __importDefault(require("./utils/builder"));
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("./utils/utils");
+const utils_1 = require("./utils");
 class WizardBuilder extends WebformBuilder_1.default {
     constructor() {
         let element, options;

package/lib/cjs/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,17 @@ declare class Component extends Element {
      */
     info: any;
     get componentsMap(): object;
+    /**
+     * Returns if the parent should conditionally clear.
+     * @returns {boolean} - If the parent should conditionally clear.
+     */
+    parentShouldConditionallyClear(): boolean;
+    parentConditionallyHidden(): boolean;
+    /**
+     * 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(): boolean;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -231,14 +235,25 @@ declare class Component extends Element {
      * @returns {boolean} - Whether the component is visible or not.
      */
     get visible(): boolean;
-    get conditionallyHidden(): any;
+    get logicallyHidden(): any;
+    _logicallyHidden: any;
+    /**
+     * Determines if the component should clear its value when the root form is pristine.
+     * @returns {boolean} - If the component should clear its value when the root form is pristine.
+     */
+    shouldConditionallyClearOnPristine(): boolean;
+    /**
+     * Returns if the component should clear its value when conditionally hidden.
+     * @returns {boolean} - If the component should clear its value when conditionally hidden.
+     */
+    shouldConditionallyClear(): boolean;
+    _conditionallyClear: boolean | undefined;
     /**
-     * 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.
+     * Returns if the component is conditionally hidden.
+     * @returns {boolean} - If the component is conditionally hidden.
      */
-    checkConditionallyHidden(data?: object, row?: object): boolean;
+    conditionallyHidden(): boolean;
+    _conditionallyHidden: boolean | undefined;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;
@@ -789,6 +804,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.
      */
@@ -893,7 +912,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.
@@ -1003,9 +1035,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.
@@ -1067,6 +1100,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;