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

package/lib/cjs/widgets/CalendarWidget.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Formio_1 = require("../Formio");
-const InputWidget_1 = __importDefault(require("./InputWidget"));
-const utils_1 = require("../utils/utils");
 const moment_1 = __importDefault(require("moment"));
 const lodash_1 = __importDefault(require("lodash"));
+const Formio_1 = require("../Formio");
+const InputWidget_1 = __importDefault(require("./InputWidget"));
+const utils_1 = require("../utils");
 const DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';
 const ISO_8601_FORMAT = 'yyyy-MM-ddTHH:mm:ssZ';
 const isIEBrowser = (0, utils_1.getBrowserInfo)().ie;
@@ -51,29 +51,6 @@ class CalendarWidget extends InputWidget_1.default {
         else if (this.settings.time_24hr) {
             this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');
         }
-        this.zoneLoading = false;
-        this.timezonesUrl = `${Formio_1.Formio.cdn['moment-timezone']}/data/packed/latest.json`;
-    }
-    /**
-     * Load the timezones.
-     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
-     */
-    loadZones() {
-        const timezone = this.timezone;
-        if (this.zoneLoading) {
-            return true;
-        }
-        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {
-            this.zoneLoading = true;
-            (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {
-                this.zoneLoading = false;
-                this.emit('redraw');
-            });
-            // Return zones are loading.
-            return true;
-        }
-        // Zones are already loaded.
-        return false;
     }
     attach(input) {
         var _a;
@@ -85,7 +62,7 @@ class CalendarWidget extends InputWidget_1.default {
         };
         this.closedOn = 0;
         this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;
-        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(this.valueFormat);
+        this.valueMomentFormat = (0, utils_1.convertFormatToDayjs)(this.valueFormat);
         const isReadOnly = this.settings.readOnly;
         this.settings.minDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.minDate);
         this.settings.maxDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.maxDate);
@@ -249,9 +226,9 @@ class CalendarWidget extends InputWidget_1.default {
      */
     getDateValue(date, format, useTimezone) {
         if (useTimezone) {
-            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));
+            return (0, utils_1.dayjsDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToDayjs)(format));
         }
-        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));
+        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToDayjs)(format));
     }
     /**
      * Return the value of the selected date.
@@ -283,18 +260,15 @@ class CalendarWidget extends InputWidget_1.default {
     setValue(value) {
         const saveAsText = (this.settings.saveAs === 'text');
         if (!this.calendar) {
-            value = value ? (0, utils_1.formatDate)(this.timezonesUrl, value, (0, utils_1.convertFormatToMoment)(this.settings.format), this.timezone, (0, utils_1.convertFormatToMoment)(this.valueMomentFormat)) : value;
+            value = value ? (0, utils_1.formatDate)(value, (0, utils_1.convertFormatToDayjs)(this.settings.format), this.timezone, (0, utils_1.convertFormatToDayjs)(this.valueMomentFormat)) : value;
             return super.setValue(value);
         }
         // If the component is a textfield that does not have timezone information included in the string value then skip
         // the timezone offset
-        if (this.component.type === 'textfield' && !(0, utils_1.hasEncodedTimezone)(value)) {
-            this.settings.skipOffset = true;
-        }
-        const zonesLoading = this.loadZones();
+        this.settings.skipOffset = this.component.type === 'textfield' && !(0, utils_1.hasEncodedTimezone)(value);
         if (value) {
-            if (!saveAsText && this.settings.readOnly && !zonesLoading) {
-                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);
+            if (!saveAsText && this.settings.readOnly) {
+                this.calendar.setDate((0, utils_1.dayjsDate)(value, this.valueFormat, this.timezone).format(), false);
             }
             else if (this.isValueISO8601(value)) {
                 this.calendar.setDate(value, false);
@@ -307,13 +281,13 @@ class CalendarWidget extends InputWidget_1.default {
             this.calendar.clear(false);
         }
     }
-    getValueAsString(value, format) {
+    getValueAsString(value, format = '') {
         const inputFormat = format || this.dateFormat;
         const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;
         if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {
-            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));
+            return (0, moment_1.default)(value, (0, utils_1.convertFormatToDayjs)(valueFormat)).format((0, utils_1.convertFormatToDayjs)(valueFormat));
         }
-        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));
+        return (0, utils_1.formatDate)(value, inputFormat, this.timezone, (0, utils_1.convertFormatToDayjs)(valueFormat));
     }
     setErrorClasses(hasErrors) {
         if (!this.input) {
@@ -406,7 +380,7 @@ class CalendarWidget extends InputWidget_1.default {
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {
                 const inputValue = this.calendar.input.value;
-                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;
+                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToDayjs)(this.valueFormat)).toDate() : inputValue;
                 this.calendar.setDate(dateValue, true, this.settings.altFormat);
             }
             else if (!this.calendar.input.value && this.calendar.config.noCalendar) {
@@ -458,14 +432,14 @@ class CalendarWidget extends InputWidget_1.default {
         return (date, format) => {
             // Only format this if this is the altFormat and the form is readOnly.
             if (this.settings.readOnly && (format === this.settings.altFormat)) {
-                if (!this.settings.enableTime || this.loadZones() || this.settings.skipOffset) {
+                if (!this.settings.enableTime || this.settings.skipOffset) {
                     return Flatpickr.formatDate(date, format);
                 }
                 const currentValue = new Date(this.getValue());
                 if (currentValue.toString() === date.toString()) {
-                    return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
+                    return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
                 }
-                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
+                return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
             }
             return Flatpickr.formatDate(date, format);
         };

package/lib/mjs/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/mjs/Element.js

@@ -1,10 +1,11 @@
-import EventEmitter from './EventEmitter';
-import { Formio } from './Formio';
-import * as FormioUtils from './utils/utils';
-import { I18n } from './utils/i18n';
 import _ from 'lodash';
 import moment from 'moment';
 import maskInput from '@formio/vanilla-text-mask';
+import EventEmitter from './EventEmitter';
+import { Formio } from './Formio';
+import FormioUtils from './utils';
+import { I18n } from '@formio/core';
+import enTranslation from './translations/en';
 /**
  * The root component for all elements within the Form.io renderer.
  */
@@ -38,7 +39,7 @@ export default class Element {
         if (this.options?.language) {
             this.options.i18n.language = this.options.language;
         }
-        this.options.i18next = this.i18next = this.options.i18next || I18n.init(this.options.i18n);
+        this.options.i18next = this.i18next = this.options.i18next || I18n.init({ en: enTranslation, ...this.options.i18n });
         /**
          * An instance of the EventEmitter class to handle the emitting and registration of events.
          * @type {EventEmitter}
@@ -385,11 +386,12 @@ 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, ...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.
@@ -523,9 +525,9 @@ export default class Element {
         if (this.component.filter === string && !this.options.building) {
             const evalContext = this.evalContext(data);
             evalContext.data = _.mapValues(evalContext.data, (val) => _.isString(val) ? encodeURIComponent(val) : val);
-            return FormioUtils.interpolate(string, evalContext, options);
+            return FormioUtils.Evaluator.interpolate(string, evalContext, options);
         }
-        return FormioUtils.interpolate(string, this.evalContext(data), options);
+        return FormioUtils.Evaluator.interpolate(string, this.evalContext(data), options);
     }
     /**
      * Performs an evaluation using the evaluation context of this component.

package/lib/mjs/EventEmitter.js

@@ -1,5 +1,5 @@
 import { EventEmitter as EventEmitter3 } from 'eventemitter3';
-import * as utils from './utils/utils';
+import { observeOverload } from './utils';
 export default class EventEmitter extends EventEmitter3 {
     constructor(conf = {}) {
         const { loadLimit = 1000, eventsSafeInterval = 300 } = conf;
@@ -7,7 +7,7 @@ export default class EventEmitter extends EventEmitter3 {
         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 = observeOverload(overloadHandler, {
             limit: loadLimit,
             delay: eventsSafeInterval
         });

package/lib/mjs/Form.js

@@ -2,7 +2,7 @@ import Element from './Element';
 import { Formio } from './Formio';
 import Displays from './displays';
 import templates from './templates';
-import * as FormioUtils from './utils/utils';
+import FormioUtils from './utils';
 export default class Form extends Element {
     /**
      * Represents a JSON value.

package/lib/mjs/PDF.js

@@ -1,6 +1,6 @@
 import { Formio } from './Formio';
 import Webform from './Webform';
-import { fastCloneDeep, eachComponent } from './utils/utils';
+import { fastCloneDeep, eachComponent } from './utils';
 export default class PDF extends Webform {
     constructor(element, options) {
         options.display = 'pdf';

package/lib/mjs/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/mjs/PDFBuilder.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import { Formio } from './Formio';
 import WebformBuilder from './WebformBuilder';
-import { fastCloneDeep, getElementRect, getBrowserInfo } from './utils/utils';
-import { eachComponent } from './utils/formUtils';
+import { fastCloneDeep, getElementRect, getBrowserInfo, eachComponent } from './utils';
 import BuilderUtils from './utils/builder';
 import PDF from './PDF';
 export default class PDFBuilder extends WebformBuilder {
@@ -445,21 +444,21 @@ export default class PDFBuilder extends WebformBuilder {
         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 (!_.isEqual(this.repeatablePaths, repeatablePaths)) {
-            eachComponent(this.webform.getComponents(), (comp, path) => {
-                if (this.repeatablePaths.includes(path)) {
+        if (!_.isEqual(this.repeatablePathsComps, repeatablePathsComps)) {
+            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;
         }
-        eachComponent(this.webform.getComponents(), (comp, path) => {
-            if (this.repeatablePaths.includes(path)) {
+        eachComponent(this.webform.getComponents(), (comp) => {
+            if (this.repeatablePathsComps.includes(comp)) {
                 this.webform.postMessage({
                     name: 'showBuilderErrors',
                     data: {

package/lib/mjs/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/mjs/Webform.js

@@ -1,13 +1,12 @@
 import _ from 'lodash';
-import moment from 'moment';
 import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
-import i18nDefaults from './i18n';
+import enTranslation from './translations/en';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
-import { eachComponent } from './utils/formUtils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, eachComponent } from './utils';
+import dayjs from "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;
@@ -95,7 +94,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.
@@ -342,7 +341,7 @@ export default class Webform extends NestedDataComponent {
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
-            var translations = _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang);
+            var translations = _.assign(fastCloneDeep(enTranslation), lang);
             this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
@@ -1317,13 +1316,14 @@ export default class Webform extends NestedDataComponent {
         submission.metadata = submission.metadata || {};
         _.defaults(submission.metadata, {
             timezone: _.get(this, '_submission.metadata.timezone', currentTimezone()),
-            offset: parseInt(_.get(this, '_submission.metadata.offset', moment().utcOffset()), 10),
+            offset: parseInt(_.get(this, '_submission.metadata.offset', dayjs().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) {

package/lib/mjs/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/mjs/WebformBuilder.js

@@ -3,8 +3,7 @@ import Component from './components/_classes/component/Component';
 import tippy from 'tippy.js';
 import Components from './components/Components';
 import { Formio } from './Formio';
-import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath } from './utils/utils';
-import { eachComponent, getComponent } from './utils/formUtils';
+import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath, eachComponent, getComponent, componentInfo } from './utils';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
 import autoScroll from 'dom-autoscroller';
@@ -1109,28 +1108,52 @@ export default class WebformBuilder extends Component {
         // Called when we update a component.
         this.emit('updateComponent', component);
     }
-    findRepeatablePaths() {
-        const repeatablePaths = [];
+    findComponentsWithRepeatablePaths() {
+        const repeatablePaths = {};
         const keys = new Map();
         eachComponent(this.form.components, (comp, path, components, parent, paths) => {
-            if (keys.has(paths.dataPath)) {
-                repeatablePaths.push(paths.dataPath);
-            }
-            else {
-                keys.set(paths.dataPath, true);
+            const isRadioCheckbox = comp.type === 'checkbox' && comp.inputType === 'radio';
+            const isLayout = componentInfo(comp).layout;
+            if (!isLayout) {
+                if (keys.has(paths.dataPath)) {
+                    const onlyRadioCheckboxes = repeatablePaths[paths.dataPath]?.onlyRadioCheckboxes === false ? false : isRadioCheckbox;
+                    repeatablePaths[paths.dataPath] = {
+                        comps: [...(repeatablePaths[paths.dataPath]?.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);
     }

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils/utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard-based forms.
@@ -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/WizardBuilder.js

@@ -2,7 +2,7 @@ import WebformBuilder from './WebformBuilder';
 import Webform from './Webform';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
-import { fastCloneDeep } from './utils/utils';
+import { fastCloneDeep } from './utils';
 export default class WizardBuilder extends WebformBuilder {
     constructor() {
         let element, options;

package/lib/mjs/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;