@formio/js 5.1.0-dev.6109.79f22ad → 5.1.0-dev.6112.06b0f26

package/lib/cjs/Element.d.ts

@@ -170,10 +170,11 @@ export default class Element {
     /**
      * Translate a text using the i18n system.
      * @param {string|Array<string>} text - The i18n identifier.
+     * @param {any} data - contextual data object containing data, component, row, etc.
      * @param {...any} args - The arguments to pass to the i18n translation.
      * @returns {string} - The translated text.
      */
-    t(text: string | Array<string>, ...args: any[]): string;
+    t(text: string | Array<string>, data: any, ...args: any[]): string;
     /**
      * Alias to create a text node.
      * @param {string} text - The text to create.

package/lib/cjs/Element.js

@@ -1,38 +1,16 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const EventEmitter_1 = __importDefault(require("./EventEmitter"));
-const Formio_1 = require("./Formio");
-const FormioUtils = __importStar(require("./utils/utils"));
-const i18n_1 = require("./utils/i18n");
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const vanilla_text_mask_1 = __importDefault(require("@formio/vanilla-text-mask"));
+const EventEmitter_1 = __importDefault(require("./EventEmitter"));
+const Formio_1 = require("./Formio");
+const utils_1 = __importDefault(require("./utils"));
+const core_1 = require("@formio/core");
+const en_1 = __importDefault(require("./translations/en"));
 /**
  * The root component for all elements within the Form.io renderer.
  */
@@ -56,7 +34,7 @@ class Element {
          * can also be provided from the component.id value passed into the constructor.
          * @type {string}
          */
-        this.id = FormioUtils.getRandomComponentId();
+        this.id = utils_1.default.getRandomComponentId();
         /**
          * An array of event handlers so that the destry command can deregister them.
          * @type {Array}
@@ -67,7 +45,7 @@ class Element {
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.language) {
             this.options.i18n.language = this.options.language;
         }
-        this.options.i18next = this.i18next = this.options.i18next || i18n_1.I18n.init(this.options.i18n);
+        this.options.i18next = this.i18next = this.options.i18next || core_1.I18n.init(Object.assign({ en: en_1.default }, this.options.i18n));
         /**
          * An instance of the EventEmitter class to handle the emitting and registration of events.
          * @type {EventEmitter}
@@ -385,7 +363,7 @@ class Element {
      */
     setInputMask(input, inputMask, usePlaceholder) {
         if (input && inputMask) {
-            const mask = FormioUtils.getInputMask(inputMask, this.placeholderChar);
+            const mask = utils_1.default.getInputMask(inputMask, this.placeholderChar);
             this.defaultMask = mask;
             try {
                 //destroy previous mask
@@ -415,11 +393,12 @@ class Element {
     /**
      * Translate a text using the i18n system.
      * @param {string|Array<string>} text - The i18n identifier.
+     * @param {any} data - contextual data object containing data, component, row, etc.
      * @param {...any} args - The arguments to pass to the i18n translation.
      * @returns {string} - The translated text.
      */
-    t(text, ...args) {
-        return this.i18next ? this.i18next.t(text, ...args) : text;
+    t(text, data, ...args) {
+        return this.i18next ? this.i18next.t(text, data, ...args) : text;
     }
     /**
      * Alias to create a text node.
@@ -522,8 +501,8 @@ class Element {
         var _a;
         return Object.assign({
             _: lodash_1.default,
-            utils: FormioUtils,
-            util: FormioUtils,
+            utils: utils_1.default,
+            util: utils_1.default,
             user: Formio_1.Formio.getUser(),
             moment: moment_1.default,
             instance: this,
@@ -548,15 +527,15 @@ class Element {
      */
     interpolate(string, data, options = {}) {
         if (typeof string !== 'function' && (this.component.content || this.component.html)
-            && !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
-            string = FormioUtils.translateHTMLTemplate(String(string), (value) => this.t(value));
+            && !utils_1.default.Evaluator.templateSettings.interpolate.test(string)) {
+            string = utils_1.default.translateHTMLTemplate(String(string), (value) => this.t(value));
         }
         if (this.component.filter === string && !this.options.building) {
             const evalContext = this.evalContext(data);
             evalContext.data = lodash_1.default.mapValues(evalContext.data, (val) => lodash_1.default.isString(val) ? encodeURIComponent(val) : val);
-            return FormioUtils.interpolate(string, evalContext, options);
+            return utils_1.default.Evaluator.interpolate(string, evalContext, options);
         }
-        return FormioUtils.interpolate(string, this.evalContext(data), options);
+        return utils_1.default.Evaluator.interpolate(string, this.evalContext(data), options);
     }
     /**
      * Performs an evaluation using the evaluation context of this component.
@@ -568,7 +547,7 @@ class Element {
      * @returns {*} - The result of the evaluation.
      */
     evaluate(func, args, ret, interpolate, options = {}) {
-        return FormioUtils.evaluate(func, this.evalContext(args), ret, interpolate, options);
+        return utils_1.default.evaluate(func, this.evalContext(args), ret, interpolate, options);
     }
     /**
      * Allow for options to hook into the functionality of this renderer.

package/lib/cjs/EventEmitter.js

@@ -1,30 +1,7 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const eventemitter3_1 = require("eventemitter3");
-const utils = __importStar(require("./utils/utils"));
+const utils_1 = require("./utils");
 class EventEmitter extends eventemitter3_1.EventEmitter {
     constructor(conf = {}) {
         const { loadLimit = 1000, eventsSafeInterval = 300 } = conf;
@@ -38,7 +15,7 @@ class EventEmitter extends eventemitter3_1.EventEmitter {
         const overloadHandler = () => {
             console.warn(`There were more than ${loadLimit} events emitted in ${eventsSafeInterval} ms. It might be caused by events' infinite loop`, this.id);
         };
-        const dispatch = utils.observeOverload(overloadHandler, {
+        const dispatch = (0, utils_1.observeOverload)(overloadHandler, {
             limit: loadLimit,
             delay: eventsSafeInterval
         });

package/lib/cjs/Form.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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,7 +7,7 @@ const Element_1 = __importDefault(require("./Element"));
 const Formio_1 = require("./Formio");
 const displays_1 = __importDefault(require("./displays"));
 const templates_1 = __importDefault(require("./templates"));
-const FormioUtils = __importStar(require("./utils/utils"));
+const utils_1 = __importDefault(require("./utils"));
 class Form extends Element_1.default {
     constructor(elementOrForm, formOrOptions, options = {}) {
         let element, form, formOptions;
@@ -324,7 +301,7 @@ class Form extends Element_1.default {
         if (this.options.sanitize === false && !forceSanitize) {
             return dirty;
         }
-        return FormioUtils.sanitize(dirty, this.options);
+        return utils_1.default.sanitize(dirty, this.options);
     }
     setContent(element, content, forceSanitize) {
         if (element instanceof HTMLElement) {

package/lib/cjs/PDF.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Formio_1 = require("./Formio");
 const Webform_1 = __importDefault(require("./Webform"));
-const utils_1 = require("./utils/utils");
+const utils_1 = require("./utils");
 class PDF extends Webform_1.default {
     constructor(element, options) {
         options.display = 'pdf';

package/lib/cjs/PDFBuilder.d.ts

@@ -51,5 +51,6 @@ export default class PDFBuilder extends WebformBuilder {
     onDropzoneDrop(e: any): boolean;
     dropEvent: any;
     onDragEnd(e: any): void;
+    repeatablePathsComps: any[] | undefined;
 }
 import WebformBuilder from './WebformBuilder';

package/lib/cjs/PDFBuilder.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Formio_1 = require("./Formio");
 const WebformBuilder_1 = __importDefault(require("./WebformBuilder"));
-const utils_1 = require("./utils/utils");
-const formUtils_1 = require("./utils/formUtils");
+const utils_1 = require("./utils");
 const builder_1 = __importDefault(require("./utils/builder"));
 const PDF_1 = __importDefault(require("./PDF"));
 class PDFBuilder extends WebformBuilder_1.default {
@@ -272,7 +271,7 @@ class PDFBuilder extends WebformBuilder_1.default {
     getParentContainer(component) {
         let container = [];
         let originalComponent = null;
-        (0, formUtils_1.eachComponent)(this.webform._form.components, (comp, path, components) => {
+        (0, utils_1.eachComponent)(this.webform._form.components, (comp, path, components) => {
             if (comp.id === component.component.id) {
                 container = components;
                 originalComponent = comp;
@@ -452,21 +451,21 @@ class PDFBuilder extends WebformBuilder_1.default {
         e.target.style.cursor = 'default';
     }
     highlightInvalidComponents() {
-        const repeatablePaths = this.findRepeatablePaths();
+        const repeatablePathsComps = this.findComponentsWithRepeatablePaths();
         // update elements which path was duplicated if any pathes have been changed
-        if (!lodash_1.default.isEqual(this.repeatablePaths, repeatablePaths)) {
-            (0, formUtils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {
-                if (this.repeatablePaths.includes(path)) {
+        if (!lodash_1.default.isEqual(this.repeatablePathsComps, repeatablePathsComps)) {
+            (0, utils_1.eachComponent)(this.webform.getComponents(), (comp) => {
+                if (this.repeatablePathsComps.includes(comp.component)) {
                     this.webform.postMessage({ name: 'updateElement', data: comp.component });
                 }
             });
-            this.repeatablePaths = repeatablePaths;
+            this.repeatablePathsComps = repeatablePathsComps;
         }
-        if (!repeatablePaths.length) {
+        if (!repeatablePathsComps.length) {
             return;
         }
-        (0, formUtils_1.eachComponent)(this.webform.getComponents(), (comp, path) => {
-            if (this.repeatablePaths.includes(path)) {
+        (0, utils_1.eachComponent)(this.webform.getComponents(), (comp) => {
+            if (this.repeatablePathsComps.includes(comp)) {
                 this.webform.postMessage({
                     name: 'showBuilderErrors',
                     data: {

package/lib/cjs/Webform.d.ts

@@ -45,7 +45,7 @@
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -586,7 +586,7 @@ export type FormOptions = {
     /**
      * - The translation file for this rendering.
      */
-    i18n?: {
+    enTranslation?: {
         [key: string]: string;
     } | undefined;
     /**

package/lib/cjs/Webform.js

@@ -4,15 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const moment_1 = __importDefault(require("moment"));
 const compare_versions_1 = require("compare-versions");
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
-const i18n_1 = __importDefault(require("./i18n"));
+const en_1 = __importDefault(require("./translations/en"));
 const Formio_1 = require("./Formio");
 const Components_1 = __importDefault(require("./components/Components"));
 const NestedDataComponent_1 = __importDefault(require("./components/_classes/nesteddata/NestedDataComponent"));
-const utils_1 = require("./utils/utils");
-const formUtils_1 = require("./utils/formUtils");
+const utils_1 = require("./utils");
+const dayjs_1 = __importDefault(require("dayjs"));
 // We need this here because dragula pulls in CustomEvent class that requires global to exist.
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
@@ -100,7 +99,7 @@ function getOptions(options) {
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -370,7 +369,7 @@ class Webform extends NestedDataComponent_1.default {
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
-            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);
+            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(en_1.default), lang);
             this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
@@ -992,7 +991,7 @@ class Webform extends NestedDataComponent_1.default {
     }
     hasRequiredFields() {
         let result = false;
-        (0, formUtils_1.eachComponent)(this.form.components, (component) => {
+        (0, utils_1.eachComponent)(this.form.components, (component) => {
             if (component.validate.required) {
                 result = true;
                 return true;
@@ -1314,13 +1313,14 @@ class Webform extends NestedDataComponent_1.default {
         submission.metadata = submission.metadata || {};
         lodash_1.default.defaults(submission.metadata, {
             timezone: lodash_1.default.get(this, '_submission.metadata.timezone', (0, utils_1.currentTimezone)()),
-            offset: parseInt(lodash_1.default.get(this, '_submission.metadata.offset', (0, moment_1.default)().utcOffset()), 10),
+            offset: parseInt(lodash_1.default.get(this, '_submission.metadata.offset', (0, dayjs_1.default)().utcOffset()), 10),
             origin: document.location.origin,
             referrer: document.referrer,
             browserName: navigator.appName,
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.language,
         });
     }
     submitForm(options = {}, local = false) {
@@ -1538,7 +1538,7 @@ class Webform extends NestedDataComponent_1.default {
             return;
         }
         const captchaComponent = [];
-        (0, formUtils_1.eachComponent)(components || this.components, (component) => {
+        (0, utils_1.eachComponent)(components || this.components, (component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }

package/lib/cjs/WebformBuilder.d.ts

@@ -78,7 +78,7 @@ export default class WebformBuilder extends Component {
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
     originalDefaultValue: any;
-    findRepeatablePaths(): any[];
+    findComponentsWithRepeatablePaths(): any[];
     highlightInvalidComponents(): void;
     /**
      * Called when a new component is saved.

package/lib/cjs/WebformBuilder.js

@@ -8,8 +8,7 @@ const Component_1 = __importDefault(require("./components/_classes/component/Com
 const tippy_js_1 = __importDefault(require("tippy.js"));
 const Components_1 = __importDefault(require("./components/Components"));
 const Formio_1 = require("./Formio");
-const utils_1 = require("./utils/utils");
-const formUtils_1 = require("./utils/formUtils");
+const utils_1 = require("./utils");
 const builder_1 = __importDefault(require("./utils/builder"));
 const lodash_1 = __importDefault(require("lodash"));
 const dom_autoscroller_1 = __importDefault(require("dom-autoscroller"));
@@ -284,7 +283,7 @@ class WebformBuilder extends Component_1.default {
                 componentOrder: [],
                 default: index === 0,
             };
-            (0, formUtils_1.eachComponent)(resource.components, (component) => {
+            (0, utils_1.eachComponent)(resource.components, (component) => {
                 if (component.type === 'button')
                     return;
                 if (this.options &&
@@ -450,7 +449,7 @@ class WebformBuilder extends Component_1.default {
             return [...componentSchema.components, componentSchema];
         }
         // Get the namespace component so we have the original object.
-        const namespaceComponent = (0, formUtils_1.getComponent)(this.form.components, namespaceKey, true);
+        const namespaceComponent = (0, utils_1.getComponent)(this.form.components, namespaceKey, true);
         return namespaceComponent ? namespaceComponent.components : comp.components;
     }
     recurseNamespace(component) {
@@ -812,7 +811,7 @@ class WebformBuilder extends Component_1.default {
         const draggableComponent = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};
         if (draggableComponent.disableSiblings || draggableComponent.uniqueComponent) {
             let isCompAlreadyExists = false;
-            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {
+            (0, utils_1.eachComponent)(this.webform.components, (component) => {
                 if ((draggableComponent.disableSiblings && component.type === draggableComponent.schema.type) ||
                     (draggableComponent.uniqueComponent && component.component.key === draggableComponent.schema.key)) {
                     isCompAlreadyExists = true;
@@ -947,7 +946,7 @@ class WebformBuilder extends Component_1.default {
         //populate isEnabled for captcha form settings
         let isCaptchaEnabled = false;
         if (this.form.components) {
-            (0, formUtils_1.eachComponent)(form.components, component => {
+            (0, utils_1.eachComponent)(form.components, component => {
                 if (isCaptchaEnabled) {
                     return;
                 }
@@ -1042,7 +1041,7 @@ class WebformBuilder extends Component_1.default {
             }
         }
         // Change the "default value" field to be reflective of this component.
-        const defaultValueComponent = (0, formUtils_1.getComponent)(this.editForm.components, 'defaultValue', true);
+        const defaultValueComponent = (0, utils_1.getComponent)(this.editForm.components, 'defaultValue', true);
         if (defaultValueComponent && component.type !== 'hidden') {
             const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')
                 || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));
@@ -1074,7 +1073,7 @@ class WebformBuilder extends Component_1.default {
                     if (!this.originalDefaultValue) {
                         this.originalDefaultValue = (0, utils_1.fastCloneDeep)(defaultValueComponent.component);
                     }
-                    (0, formUtils_1.eachComponent)(defaultValueComponent.component.components, (comp => {
+                    (0, utils_1.eachComponent)(defaultValueComponent.component.components, (comp => {
                         var _a;
                         if ((_a = comp.validate) === null || _a === void 0 ? void 0 : _a.required) {
                             comp.validate.required = false;
@@ -1126,28 +1125,53 @@ class WebformBuilder extends Component_1.default {
         // Called when we update a component.
         this.emit('updateComponent', component);
     }
-    findRepeatablePaths() {
-        const repeatablePaths = [];
+    findComponentsWithRepeatablePaths() {
+        const repeatablePaths = {};
         const keys = new Map();
-        (0, formUtils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
-            if (keys.has(paths.dataPath)) {
-                repeatablePaths.push(paths.dataPath);
-            }
-            else {
-                keys.set(paths.dataPath, true);
+        (0, utils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
+            var _a, _b;
+            const isRadioCheckbox = comp.type === 'checkbox' && comp.inputType === 'radio';
+            const isLayout = (0, utils_1.componentInfo)(comp).layout;
+            if (!isLayout) {
+                if (keys.has(paths.dataPath)) {
+                    const onlyRadioCheckboxes = ((_a = repeatablePaths[paths.dataPath]) === null || _a === void 0 ? void 0 : _a.onlyRadioCheckboxes) === false ? false : isRadioCheckbox;
+                    repeatablePaths[paths.dataPath] = {
+                        comps: [...(((_b = repeatablePaths[paths.dataPath]) === null || _b === void 0 ? void 0 : _b.comps) || []), keys.get(paths.dataPath), comp],
+                        onlyRadioCheckboxes,
+                    };
+                }
+                else {
+                    keys.set(paths.dataPath, comp);
+                }
             }
         }, true);
-        return repeatablePaths;
+        const componentsWithRepeatablePaths = [];
+        Object.keys(repeatablePaths).forEach((path) => {
+            const { comps, onlyRadioCheckboxes } = repeatablePaths[path];
+            if (!onlyRadioCheckboxes) {
+                componentsWithRepeatablePaths.push(...comps);
+            }
+        });
+        return componentsWithRepeatablePaths;
     }
     highlightInvalidComponents() {
-        const repeatablePaths = this.findRepeatablePaths();
+        const repeatablePathsComps = this.findComponentsWithRepeatablePaths();
         let hasInvalidComponents = false;
+        // Matches anything expect letters and  '_' at the beginning of the key and anything except of letters, numbers,
+        // '-', '.' and '_' in the rest of the key
+        const badCharacters = /^[^A-Za-z_]+|[^A-Za-z0-9\-._]+/g;
         this.webform.everyComponent((comp) => {
-            const path = comp.path;
-            if (repeatablePaths.includes(path)) {
+            if (repeatablePathsComps.includes(comp.component)) {
                 comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
+            else if (comp.key.replace(badCharacters, '') === '') {
+                comp.setCustomValidity(this.t('apiKeyNotValid', { key: comp.key }));
+                hasInvalidComponents = true;
+            }
+            else {
+                comp.setCustomValidity();
+            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }
@@ -1641,7 +1665,7 @@ class WebformBuilder extends Component_1.default {
         if (!Components_1.default.components[type === 'custom' ? 'unknown' : type]) {
             return false;
         }
-        const editTabs = (0, formUtils_1.getComponent)(Components_1.default.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;
+        const editTabs = (0, utils_1.getComponent)(Components_1.default.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;
         const hiddenEditTabs = lodash_1.default.filter(lodash_1.default.get(this.options, `editForm.${type}`, []), 'ignore');
         return lodash_1.default.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;
     }

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

@@ -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) {
@@ -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.