@formio/js 5.1.0-dev.6113.1a173e6 → 5.1.0-dev.6115.a496b38

package/lib/cjs/Wizard.d.ts

@@ -6,7 +6,6 @@ declare class Wizard extends Webform {
     originalComponents: any[];
     page: number;
     currentPanel: any;
-    currentPanels: any[] | null;
     currentNextPage: number;
     _seenPages: number[];
     subWizards: any[];
@@ -17,7 +16,7 @@ declare class Wizard extends Webform {
     originalOptions: any;
     isLastPage(): any;
     getPages(args?: {}): any[];
-    get hasExtraPages(): boolean;
+    get hasSubWizards(): boolean;
     get localData(): any;
     get wizardKey(): string;
     set wizard(form: object);

package/lib/cjs/Wizard.js

@@ -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) {
@@ -873,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();
@@ -881,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.

package/lib/cjs/components/_classes/input/Input.js

@@ -118,7 +118,7 @@ class Input extends Multivalue_1.default {
         }
         const info = this.inputInfo;
         info.attr = info.attr || {};
-        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(this.isMultipleMasksField ? value.value : value)))
+        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value)))
             .replace(/"/g, '"');
         const valueMask = this.component.inputMask;
         const displayMask = this.component.displayMask;

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -664,7 +664,7 @@ class NestedComponent extends Field_1.default {
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         var _a;
         const { dirty } = flags;
-        if (this.root.hasExtraPages && this.page !== this.root.page) {
+        if (this.root.hasSubWizards && this.page !== this.root.page) {
             instance = ((_a = this.componentsMap) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(paths.dataPath))
                 ? this.componentsMap[paths.dataPath]
                 : this.getComponent(paths.dataPath);

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

@@ -278,6 +278,9 @@ class FormComponent extends Component_1.default {
             if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {
                 this.createSubForm(true);
             }
+            if (!this.subFormReady) {
+                return Promise.resolve();
+            }
             return this.subFormReady.then(() => {
                 this.empty(element);
                 if (this.options.builder) {
@@ -408,13 +411,15 @@ class FormComponent extends Component_1.default {
             }
             // Render the form.
             return (new Form_1.default(form, this.getSubOptions())).ready.then((instance) => {
+                var _a, _b;
                 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.component.components = (_a = this.subForm._form) === null || _a === void 0 ? void 0 : _a.components;
+                this.component.display = (_b = this.subForm._form) === null || _b === void 0 ? void 0 : _b.display;
                 this.subForm.on('change', () => {
                     if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
@@ -699,6 +704,13 @@ class FormComponent extends Component_1.default {
         }
         return errors;
     }
+    conditionallyHidden() {
+        const conditionallyHidden = super.conditionallyHidden();
+        if (this.subForm) {
+            this.subForm._conditionallyHidden = conditionallyHidden;
+        }
+        return conditionallyHidden;
+    }
     updateSubFormVisibility() {
         if (this.subForm) {
             this.subForm.parentVisible = this.visible;

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

@@ -130,12 +130,7 @@ class TextFieldComponent extends Input_1.default {
         // If no value is provided, then set the defaultValue.
         if (!value.value) {
             const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;
-            if (Array.isArray(defaultValue)) {
-                value.value = lodash_1.default.isObject(defaultValue[0]) ? defaultValue[0].value : defaultValue;
-            }
-            else {
-                value.value = lodash_1.default.isObject(defaultValue) ? defaultValue.value : defaultValue;
-            }
+            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
         }
         return value;
     }

package/lib/mjs/Wizard.d.ts

@@ -6,7 +6,6 @@ declare class Wizard extends Webform {
     originalComponents: any[];
     page: number;
     currentPanel: any;
-    currentPanels: any[] | null;
     currentNextPage: number;
     _seenPages: number[];
     subWizards: any[];
@@ -17,7 +16,7 @@ declare class Wizard extends Webform {
     originalOptions: any;
     isLastPage(): any;
     getPages(args?: {}): any[];
-    get hasExtraPages(): boolean;
+    get hasSubWizards(): boolean;
     get localData(): any;
     get wizardKey(): string;
     set wizard(form: object);

package/lib/mjs/Wizard.js

@@ -29,7 +29,6 @@ export default class Wizard extends Webform {
         this.originalComponents = [];
         this.page = 0;
         this.currentPanel = null;
-        this.currentPanels = null;
         this.currentNextPage = 0;
         this._seenPages = [0];
         this.subWizards = [];
@@ -48,12 +47,12 @@ export default class Wizard extends Webform {
     }
     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 ? _.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
-    get hasExtraPages() {
+    get hasSubWizards() {
         return !_.isEmpty(this.subWizards);
     }
     get data() {
@@ -177,9 +176,9 @@ export default class Wizard extends Webform {
     }
     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);
                 }
@@ -580,7 +579,7 @@ export default class Wizard extends Webform {
             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?.id !== pageFromComponents.id) {
@@ -869,23 +868,18 @@ export default class Wizard extends Webform {
             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 (this.currentPanel?.key && this.currentPanels?.length) {
-                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
-            }
+        const panelsUpdated = !_.isEqual(newPanels, currentPanels);
+        if (this.currentPanel?.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 (!_.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
+        if (panelsUpdated || (flags && flags.fromSubmission)) {
             this.redrawHeader();
         }
         // If the next page changes, then make sure to redraw navigation.

package/lib/mjs/components/_classes/input/Input.js

@@ -113,7 +113,7 @@ export default class Input extends Multivalue {
         }
         const info = this.inputInfo;
         info.attr = info.attr || {};
-        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(this.isMultipleMasksField ? value.value : value)))
+        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(value)))
             .replace(/"/g, '"');
         const valueMask = this.component.inputMask;
         const displayMask = this.component.displayMask;

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -659,7 +659,7 @@ export default class NestedComponent extends Field {
     }
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
-        if (this.root.hasExtraPages && this.page !== this.root.page) {
+        if (this.root.hasSubWizards && this.page !== this.root.page) {
             instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
                 ? this.componentsMap[paths.dataPath]
                 : this.getComponent(paths.dataPath);

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

@@ -274,6 +274,9 @@ export default class FormComponent extends Component {
             if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {
                 this.createSubForm(true);
             }
+            if (!this.subFormReady) {
+                return Promise.resolve();
+            }
             return this.subFormReady.then(() => {
                 this.empty(element);
                 if (this.options.builder) {
@@ -408,7 +411,8 @@ export default class FormComponent extends Component {
                 const componentsMap = this.componentsMap;
                 const formComponentsMap = this.subForm.componentsMap;
                 _.assign(componentsMap, formComponentsMap);
-                this.component.components = this.subForm.components.map((comp) => comp.component);
+                this.component.components = this.subForm._form?.components;
+                this.component.display = this.subForm._form?.display;
                 this.subForm.on('change', () => {
                     if (this.subForm && !this.shouldConditionallyClear()) {
                         this.dataValue = this.subForm.getValue();
@@ -688,6 +692,13 @@ export default class FormComponent extends Component {
         }
         return errors;
     }
+    conditionallyHidden() {
+        const conditionallyHidden = super.conditionallyHidden();
+        if (this.subForm) {
+            this.subForm._conditionallyHidden = conditionallyHidden;
+        }
+        return conditionallyHidden;
+    }
     updateSubFormVisibility() {
         if (this.subForm) {
             this.subForm.parentVisible = this.visible;

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

@@ -114,12 +114,7 @@ export default class TextFieldComponent extends Input {
         // If no value is provided, then set the defaultValue.
         if (!value.value) {
             const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;
-            if (Array.isArray(defaultValue)) {
-                value.value = _.isObject(defaultValue[0]) ? defaultValue[0].value : defaultValue;
-            }
-            else {
-                value.value = _.isObject(defaultValue) ? defaultValue.value : defaultValue;
-            }
+            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
         }
         return value;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6113.1a173e6",
+  "version": "5.1.0-dev.6115.a496b38",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {