@formio/js 5.1.0-dev.6109.79f22ad → 5.1.0-dev.6112.86987a5

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

@@ -165,7 +165,6 @@ declare class Component extends Element {
     get componentsMap(): object;
     /**
      * Returns if the parent should conditionally clear.
-     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;

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

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -42,8 +19,8 @@ const lodash_1 = __importDefault(require("lodash"));
 const ismobilejs_1 = __importDefault(require("ismobilejs"));
 const process_1 = require("@formio/core/process");
 const Formio_1 = require("../../../Formio");
-const FormioUtils = __importStar(require("../../../utils/utils"));
-const utils_1 = require("../../../utils/utils");
+const utils_1 = __importDefault(require("../../../utils"));
+const utils_2 = require("../../../utils");
 const Element_1 = __importDefault(require("../../../Element"));
 const ComponentModal_1 = __importDefault(require("../componentModal/ComponentModal"));
 const widgets_1 = __importDefault(require("../../../widgets"));
@@ -51,7 +28,7 @@ const addons_1 = __importDefault(require("../../../addons"));
 const uploadAdapter_1 = require("../../../providers/storage/uploadAdapter");
 const en_1 = __importDefault(require("../../../translations/en"));
 const Templates_1 = __importDefault(require("../../../templates/Templates"));
-const isIEBrowser = FormioUtils.getBrowserInfo().ie;
+const isIEBrowser = utils_1.default.getBrowserInfo().ie;
 /**
  * This is the Component class
  which all elements within the FormioForm derive from.
@@ -225,7 +202,7 @@ class Component extends Element_1.default {
      */
     static savedValueTypes(schema) {
         schema = schema || {};
-        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];
+        return utils_1.default.getComponentSavedTypes(schema) || [utils_1.default.componentValueTypes.any];
     }
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
@@ -292,7 +269,7 @@ class Component extends Element_1.default {
         this.component.id = this.id;
         this.afterComponentAssign();
         // Save off the original component to be used in logic.
-        this.originalComponent = (0, utils_1.fastCloneDeep)(this.component);
+        this.originalComponent = (0, utils_2.fastCloneDeep)(this.component);
         /**
          * If the component has been attached
          */
@@ -325,7 +302,7 @@ class Component extends Element_1.default {
          * Determines if this component is disabled, or not.
          * @type {boolean}
          */
-        this._disabled = (0, utils_1.boolValue)(this.component.disabled) ? this.component.disabled : false;
+        this._disabled = (0, utils_2.boolValue)(this.component.disabled) ? this.component.disabled : false;
         /**
          * Points to the root component, usually the FormComponent.
          * @type {Component}
@@ -346,7 +323,7 @@ class Component extends Element_1.default {
          * The component paths for this component.
          * @type {import('@formio/core').ComponentPaths} - The component paths.
          */
-        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));
+        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths), { dataIndex: this.options.rowIndex === undefined ? (_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.paths) === null || _d === void 0 ? void 0 : _d.dataIndex : this.options.rowIndex }));
         this.options.name = this.options.name || 'data';
         this._path = '';
         // Needs for Nextgen Rules Engine
@@ -460,7 +437,6 @@ class Component extends Element_1.default {
     }
     /**
      * Returns if the parent should conditionally clear.
-     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear() {
@@ -524,7 +500,7 @@ class Component extends Element_1.default {
         label.labelPosition = this.component.labelPosition;
         label.tooltipClass = `${this.iconClass('question-sign')} text-muted`;
         const isPDFReadOnlyMode = this.isPDFReadOnlyMode;
-        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {
+        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required) && !isPDFReadOnlyMode) {
             label.className += ' field-required';
         }
         if (label.hidden) {
@@ -557,7 +533,7 @@ class Component extends Element_1.default {
      */
     set rowIndex(value) {
         var _a, _b;
-        this.paths = FormioUtils.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));
+        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));
         this._rowIndex = value;
     }
     afterComponentAssign() {
@@ -877,7 +853,7 @@ class Component extends Element_1.default {
      * @returns {object} - The JSON schema for this component.
      */
     get schema() {
-        return (0, utils_1.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));
+        return (0, utils_2.fastCloneDeep)(this.getModifiedSchema(lodash_1.default.omit(this.component, 'id'), this.defaultSchema));
     }
     /**
      * Returns true if component is inside DataGrid
@@ -1029,7 +1005,7 @@ class Component extends Element_1.default {
         if (!this.shouldSanitizeValue && !forceSanitize) {
             return dirty;
         }
-        return FormioUtils.sanitize(dirty, {
+        return utils_1.default.sanitize(dirty, {
             sanitizeConfig: lodash_1.default.merge(((_a = this.options) === null || _a === void 0 ? void 0 : _a.sanitizeConfig) || {}, options || {}),
         });
     }
@@ -1148,7 +1124,7 @@ class Component extends Element_1.default {
             return submissionTimezone;
         }
         // Return current timezone if none are provided.
-        return (0, utils_1.currentTimezone)();
+        return (0, utils_2.currentTimezone)();
     }
     /**
      *
@@ -1453,7 +1429,7 @@ class Component extends Element_1.default {
         else {
             this.refreshOnChanged = true;
         }
-        this.refreshOnValue = (0, utils_1.fastCloneDeep)(value);
+        this.refreshOnValue = (0, utils_2.fastCloneDeep)(value);
         if (this.refreshOnChanged) {
             if (this.component.clearOnRefresh) {
                 this.setValue(null);
@@ -1695,7 +1671,7 @@ class Component extends Element_1.default {
         if (this.component.customClass) {
             className += this.component.customClass;
         }
-        if (this.hasInput && this.component.validate && (0, utils_1.boolValue)(this.component.validate.required)) {
+        if (this.hasInput && this.component.validate && (0, utils_2.boolValue)(this.component.validate.required)) {
             className += ' required';
         }
         if (this.labelIsHidden()) {
@@ -1983,7 +1959,7 @@ class Component extends Element_1.default {
         if (this._hasCondition !== null) {
             return this._hasCondition;
         }
-        this._hasCondition = FormioUtils.hasCondition(this.component);
+        this._hasCondition = utils_1.default.hasCondition(this.component);
         return this._hasCondition;
     }
     /**
@@ -2010,7 +1986,7 @@ class Component extends Element_1.default {
      * @returns {boolean} - True if the condition applies to this component.
      */
     checkCondition(row, data) {
-        return FormioUtils.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);
+        return utils_1.default.checkCondition(this.component, row || this.data, data || this.rootValue, this.root ? this.root._form : {}, this);
     }
     /**
      * Check for conditionals and hide/show the element based on those conditions.
@@ -2066,9 +2042,9 @@ class Component extends Element_1.default {
         if (logics.length === 0) {
             return;
         }
-        const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);
+        const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);
         let changed = logics.reduce((changed, logic) => {
-            const result = FormioUtils.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);
+            const result = utils_1.default.checkTrigger(newComponent, logic.trigger, row, data, this.root ? this.root._form : {}, this);
             return (result ? this.applyActions(newComponent, logic.actions, result, row, data) : false) || changed;
         }, false);
         // If component definition changed, replace and mark as changed.
@@ -2135,7 +2111,7 @@ class Component extends Element_1.default {
         return actions.reduce((changed, action) => {
             switch (action.type) {
                 case 'property': {
-                    FormioUtils.setActionProperty(newComponent, action, result, row, data, this);
+                    utils_1.default.setActionProperty(newComponent, action, result, row, data, this);
                     const property = action.property.value;
                     if (!lodash_1.default.isEqual(lodash_1.default.get(this.component, property), lodash_1.default.get(newComponent, property))) {
                         // Advanced Logic can modify the component's hidden property; because we track conditionally hidden state
@@ -2399,12 +2375,14 @@ class Component extends Element_1.default {
             ckeditor: {
                 image: {
                     toolbar: [
+                        'toggleImageCaption',
                         'imageTextAlternative',
                         '|',
-                        'imageStyle:full',
-                        'imageStyle:alignLeft',
-                        'imageStyle:alignCenter',
-                        'imageStyle:alignRight'
+                        'imageStyle:inline',
+                        'imageStyle:wrapText',
+                        'imageStyle:breakText',
+                        '|',
+                        'resizeImage'
                     ],
                     styles: [
                         'full',
@@ -2426,7 +2404,10 @@ class Component extends Element_1.default {
         if (this.component.isUploadEnabled) {
             settings.extraPlugins.push((0, uploadAdapter_1.getFormioUploadAdapterPlugin)(this.fileService, this));
         }
-        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.js`), true)
+        Formio_1.Formio.requireLibrary(`ckeditor-css`, isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', [
+            { type: 'styles', src: `${Formio_1.Formio.cdn.ckeditor}/ckeditor.css` }
+        ], true);
+        return Formio_1.Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', lodash_1.default.get(this.options, 'editors.ckeditor.src', `${Formio_1.Formio.cdn.ckeditor}/ckeditor.umd.js`), true)
             .then(() => {
             if (!element.parentNode) {
                 return Promise.reject();
@@ -2609,6 +2590,17 @@ class Component extends Element_1.default {
             noUpdateEvent: true,
             noDefault: true
         });
+        if (utils_1.default.isLayoutComponent(this.component) && this.component.clearOnHide === true && !this.hasValue()) {
+            utils_1.default.eachComponent(this.components, (component) => {
+                if (component.component.clearOnHide !== false) {
+                    component.setValue(null, {
+                        noUpdateEvent: true,
+                        noDefault: true
+                    });
+                    component.unset();
+                }
+            });
+        }
         this.unset();
     }
     getCustomDefaultValue(defaultValue) {
@@ -2648,7 +2640,7 @@ class Component extends Element_1.default {
                 if (this.component.type !== 'textfield') {
                     const placeholderChar = this.placeholderChar;
                     value = (0, vanilla_text_mask_1.conformToMask)(value, this.defaultMask, { placeholderChar }).conformedValue;
-                    if (!FormioUtils.matchInputMask(value, this.defaultMask)) {
+                    if (!utils_1.default.matchInputMask(value, this.defaultMask)) {
                         value = '';
                     }
                 }
@@ -2714,13 +2706,16 @@ class Component extends Element_1.default {
         }
         const isArray = Array.isArray(value);
         const valueInput = this.refs.fileLink || this.refs.input;
+        const isFilelink = !!this.refs.fileLink;
         if (isArray &&
             Array.isArray(this.defaultValue) &&
             this.refs.hasOwnProperty('input') &&
             valueInput &&
             (valueInput.length !== value.length) &&
             this.visible) {
-            this.redraw();
+            if (isFilelink || valueInput.length) {
+                this.redraw();
+            }
         }
         if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {
             this.redraw();
@@ -2966,7 +2961,7 @@ class Component extends Element_1.default {
             }
             if (fromSubmission) {
                 // If we set value from submission and it differs from calculated one, set the calculated value to prevent overriding dataValue in the next pass
-                this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);
+                this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);
                 return false;
             }
             // If this is the firstPass, and the dataValue is different than to the calculatedValue.
@@ -2975,7 +2970,7 @@ class Component extends Element_1.default {
                 return true;
             }
         }
-        this.calculatedValue = (0, utils_1.fastCloneDeep)(calculatedValue);
+        this.calculatedValue = (0, utils_2.fastCloneDeep)(calculatedValue);
         if (changed) {
             if (!flags.noPristineChangeOnModified && this.root.initialized) {
                 this.pristine = false;
@@ -3036,7 +3031,7 @@ class Component extends Element_1.default {
         var _a;
         const { local } = options;
         if (!row) {
-            row = (0, utils_1.getContextualRowData)(this.component, data, this.paths);
+            row = (0, utils_2.getContextualRowData)(this.component, data, this.paths);
         }
         if (!ignoreCondition && !this.checkCondition(row, data)) {
             return '';
@@ -3065,7 +3060,7 @@ class Component extends Element_1.default {
             ]
         });
         const errors = validationScope.errors;
-        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
+        const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));
         return lodash_1.default.map(interpolatedErrors, 'message').join('\n\n');
     }
     /**
@@ -3096,7 +3091,7 @@ class Component extends Element_1.default {
      */
     interpolateErrors(errors) {
         var _a;
-        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
+        const interpolatedErrors = utils_1.default.interpolateErrors(this.component, errors, this.t.bind(this));
         return ((_a = this.serverErrors) === null || _a === void 0 ? void 0 : _a.length) ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;
     }
     /**
@@ -3231,6 +3226,9 @@ class Component extends Element_1.default {
         data = data || this.rootValue;
         flags = flags || {};
         row = row || this.data;
+        if (flags.noCheck) {
+            return true;
+        }
         // Some components (for legacy reasons) have calls to "checkData" in inappropriate places such
         // as setValue. Historically, this was bypassed by a series of cached states around the data model
         // which caused its own problems. We need to ensure that premium and custom components do not fall into
@@ -3245,9 +3243,6 @@ class Component extends Element_1.default {
         if (!flags.fromBlur) {
             this.checkRefreshOn(flags.changes, flags);
         }
-        if (flags.noCheck) {
-            return true;
-        }
         this.checkComponentConditions(data, flags, row);
         if (this.id !== flags.triggeredComponentId) {
             this.calculateComponentValue(data, flags, row);
@@ -3316,7 +3311,7 @@ class Component extends Element_1.default {
             }
         });
         this.addEventListener(element, 'blur', () => {
-            this.root.pendingBlur = FormioUtils.delay(() => {
+            this.root.pendingBlur = utils_1.default.delay(() => {
                 this.emit('blur', this);
                 if (this.component.validateOn === 'blur') {
                     this.root.triggerChange({ fromBlur: true }, {
@@ -3564,7 +3559,7 @@ class Component extends Element_1.default {
             if (logic.trigger.type === 'event') {
                 const event = this.interpolate(logic.trigger.event);
                 this.on(event, (...args) => {
-                    const newComponent = (0, utils_1.fastCloneDeep)(this.originalComponent);
+                    const newComponent = (0, utils_2.fastCloneDeep)(this.originalComponent);
                     if (this.applyActions(newComponent, logic.actions, args)) {
                         // If component definition changed, replace it.
                         if (!lodash_1.default.isEqual(this.component, newComponent)) {
@@ -3699,7 +3694,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             }.bind(Component.externalLibraries[name]);
         }
         // See if the plugin already exists.
-        const plugin = (0, utils_1.getScriptPlugin)(property);
+        const plugin = (0, utils_2.getScriptPlugin)(property);
         if (plugin) {
             Component.externalLibraries[name].resolve(plugin);
         }
@@ -3742,7 +3737,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             // if no callback is provided, then check periodically for the script.
             if (polling) {
                 setTimeout(function checkLibrary() {
-                    const plugin = (0, utils_1.getScriptPlugin)(property);
+                    const plugin = (0, utils_2.getScriptPlugin)(property);
                     if (plugin) {
                         Component.externalLibraries[name].resolve(plugin);
                     }

package/lib/cjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = __importDefault(require("./utils"));
-const utils_2 = require("../../../../utils/utils");
+const utils_2 = require("../../../../utils");
 /* eslint-disable quotes, max-len */
 exports.default = [
     {

package/lib/cjs/components/_classes/component/editForm/Component.edit.logic.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = __importDefault(require("./utils"));
-const utils_2 = require("../../../../utils/utils");
+const utils_2 = require("../../../../utils");
 /* eslint-disable quotes, max-len */
 exports.default = [
     {

package/lib/cjs/components/_classes/componentModal/ComponentModal.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("../../../utils/utils");
+const utils_1 = require("../../../utils");
 class ComponentModal {
     static render(component, data, topLevel) {
         const children = component.renderTemplate('component', data, topLevel);

package/lib/cjs/components/_classes/input/Input.d.ts

@@ -25,7 +25,7 @@ export default class Input extends Multivalue {
     get suffix(): any;
     renderElement(value: any, index: any): any;
     setCounter(type: any, element: any, count: any, max: any): void;
-    updateValueAt(value: any, flags: any, index: any): void;
+    updateValueAt(value: any, flags: any, index?: number): void;
     getValueAt(index: any): any;
     updateValue(value: any, flags: any, index: any): boolean;
     parseValue(value: any): any;

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

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Multivalue_1 = __importDefault(require("../multivalue/Multivalue"));
-const utils_1 = require("../../../utils/utils");
+const utils_1 = require("../../../utils");
 const widgets_1 = __importDefault(require("../../../widgets"));
 const lodash_1 = __importDefault(require("lodash"));
 class Input extends Multivalue_1.default {
@@ -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(value)))
+        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(this.isMultipleMasksField ? value.value : value)))
             .replace(/"/g, '"');
         const valueMask = this.component.inputMask;
         const displayMask = this.component.displayMask;
@@ -163,7 +163,7 @@ class Input extends Multivalue_1.default {
             }));
         }
     }
-    updateValueAt(value, flags, index) {
+    updateValueAt(value, flags, index = 0) {
         flags = flags || {};
         if (lodash_1.default.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {

package/lib/cjs/components/_classes/list/ListComponent.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Field_1 = __importDefault(require("../field/Field"));
 const Formio_1 = require("../../../Formio");
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("../../../utils/utils");
+const utils_1 = require("../../../utils");
 class ListComponent extends Field_1.default {
     static schema(...extend) {
         return Field_1.default.schema({

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

@@ -7,7 +7,7 @@ const lodash_1 = __importDefault(require("lodash"));
 const Field_1 = __importDefault(require("../field/Field"));
 const Components_1 = __importDefault(require("../../Components"));
 '';
-const utils_1 = require("../../../utils/utils");
+const utils_1 = __importDefault(require("../../../utils"));
 const process_1 = require("@formio/core/process");
 /**
  * NestedComponent class.
@@ -209,7 +209,7 @@ class NestedComponent extends Field_1.default {
     set rowIndex(value) {
         var _a, _b;
         this._rowIndex = value;
-        this.paths = (0, utils_1.getComponentPaths)(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));
+        this.paths = utils_1.default.getComponentPaths(this.component, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component, Object.assign(Object.assign({}, (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.paths) || {})), { dataIndex: value }));
         this.eachComponent((component) => {
             component.rowIndex = value;
         });
@@ -311,7 +311,7 @@ class NestedComponent extends Field_1.default {
      */
     getComponent(path) {
         var _a;
-        path = (0, utils_1.getStringFromComponentPath)(path);
+        path = utils_1.default.getStringFromComponentPath(path);
         const matches = {
             path: undefined,
             fullPath: undefined,
@@ -324,7 +324,7 @@ class NestedComponent extends Field_1.default {
         this.everyComponent((component) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             // All searches are relative to this component so replace this path from the child paths.
-            (0, utils_1.componentMatches)(component.component, {
+            utils_1.default.componentMatches(component.component, {
                 path: (_b = (_a = component.paths) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.replace(new RegExp(`^${(_c = this.paths) === null || _c === void 0 ? void 0 : _c.path}\\.?`), ''),
                 fullPath: (_e = (_d = component.paths) === null || _d === void 0 ? void 0 : _d.fullPath) === null || _e === void 0 ? void 0 : _e.replace(new RegExp(`^${(_f = this.paths) === null || _f === void 0 ? void 0 : _f.fullPath}\\.?`), ''),
                 localPath: (_h = (_g = component.paths) === null || _g === void 0 ? void 0 : _g.localPath) === null || _h === void 0 ? void 0 : _h.replace(new RegExp(`^${(_j = this.paths) === null || _j === void 0 ? void 0 : _j.localPath}\\.?`), ''),
@@ -336,7 +336,7 @@ class NestedComponent extends Field_1.default {
                 return match;
             });
         });
-        return (_a = (0, utils_1.getBestMatch)(matches)) === null || _a === void 0 ? void 0 : _a.instance;
+        return (_a = utils_1.default.getBestMatch(matches)) === null || _a === void 0 ? void 0 : _a.instance;
     }
     /**
      * Return a component provided the Id of the component.
@@ -378,7 +378,7 @@ class NestedComponent extends Field_1.default {
         options.localRoot = this.localRoot;
         options.skipInit = true;
         if (!(options.display === 'pdf' && this.builderMode)) {
-            component.id = (0, utils_1.getRandomComponentId)();
+            component.id = utils_1.default.getRandomComponentId();
         }
         const comp = Components_1.default.create(component, options, data, true);
         comp.init();
@@ -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 && 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/_classes/nestedarray/NestedArrayComponent.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const utils_1 = require("@formio/core/utils");
 const { getComponentPaths } = utils_1.Utils;
-const utils_2 = require("../../../utils/utils");
+const utils_2 = require("../../../utils");
 const Component_1 = __importDefault(require("../component/Component"));
 const NestedDataComponent_1 = __importDefault(require("../nesteddata/NestedDataComponent"));
 class NestedArrayComponent extends NestedDataComponent_1.default {

package/lib/cjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("../component/Component"));
 const NestedComponent_1 = __importDefault(require("../nested/NestedComponent"));
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("../../../utils/utils");
+const utils_1 = require("../../../utils");
 class NestedDataComponent extends NestedComponent_1.default {
     hasChanged(newValue, oldValue) {
         // If we do not have a value and are getting set to anything other than undefined or null, then we changed.

package/lib/cjs/components/address/Address.js

@@ -11,7 +11,7 @@ const GoogleAddressProvider_1 = require("../../providers/address/GoogleAddressPr
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 const NestedComponent_1 = __importDefault(require("../_classes/nested/NestedComponent"));
 const Container_1 = __importDefault(require("../container/Container"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 exports.AddressComponentMode = {
     Autocomplete: 'autocomplete',
     Manual: 'manual',

package/lib/cjs/components/alert/Alert.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 class Alert {
     constructor(container, component) {
         this.container = container;

package/lib/cjs/components/button/Button.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 const Input_1 = __importDefault(require("../_classes/input/Input"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 class ButtonComponent extends Field_1.default {
     static schema(...extend) {
         return Input_1.default.schema({

package/lib/cjs/components/checkbox/Checkbox.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 class CheckBoxComponent extends Field_1.default {
     static schema(...extend) {

package/lib/cjs/components/container/Container.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const Component_1 = __importDefault(require("../_classes/component/Component"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 const NestedDataComponent_1 = __importDefault(require("../_classes/nesteddata/NestedDataComponent"));

package/lib/cjs/components/currency/Currency.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const text_mask_addons_1 = require("@formio/text-mask-addons");
 const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const Number_1 = __importDefault(require("../number/Number"));
 class CurrencyComponent extends Number_1.default {
     static schema(...extend) {

package/lib/cjs/components/datagrid/DataGrid.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const NestedArrayComponent_1 = __importDefault(require("../_classes/nestedarray/NestedArrayComponent"));
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 class DataGridComponent extends NestedArrayComponent_1.default {
     static schema(...extend) {
         return NestedArrayComponent_1.default.schema({

package/lib/cjs/components/datamap/DataMap.js

@@ -228,6 +228,9 @@ class DataMapComponent extends DataGrid_1.default {
         options.name += `[${rowIndex}]`;
         options.row = `${rowIndex}`;
         options.rowIndex = rowIndex;
+        options.onChange = (flags, changed, modified) => {
+            this.triggerChange({ modified });
+        };
         const components = {};
         components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });
         components['__key'].on('componentChange', (event) => {
@@ -243,7 +246,9 @@ class DataMapComponent extends DataGrid_1.default {
         valueComponent.key = key;
         const componentOptions = this.options;
         componentOptions.row = options.row;
-        components[this.valueKey] = this.createComponent(valueComponent, componentOptions, this.dataValue);
+        const componentOptionsCloned = lodash_1.default.clone(componentOptions);
+        componentOptionsCloned.onChange = options.onChange;
+        components[this.valueKey] = this.createComponent(valueComponent, componentOptionsCloned, this.dataValue);
         return components;
     }
     get canAddColumn() {
@@ -266,7 +271,7 @@ class DataMapComponent extends DataGrid_1.default {
         const index = this.rows.length;
         this.rows[index] = this.createRowComponents(this.dataValue, index);
         this.redraw();
-        this.triggerChange();
+        this.triggerChange({ modified: true });
     }
     removeRow(index) {
         const keys = Object.keys(this.dataValue);