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

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

@@ -5,8 +5,8 @@ import _ from 'lodash';
 import isMobile from 'ismobilejs';
 import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
-import * as FormioUtils from '../../../utils/utils';
-import { fastCloneDeep, boolValue, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils/utils';
+import FormioUtils from '../../../utils';
+import { fastCloneDeep, boolValue, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -424,7 +424,6 @@ export default class Component extends Element {
     }
     /**
      * Returns if the parent should conditionally clear.
-     *
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear() {
@@ -2365,12 +2364,14 @@ export default class Component extends Element {
             ckeditor: {
                 image: {
                     toolbar: [
+                        'toggleImageCaption',
                         'imageTextAlternative',
                         '|',
-                        'imageStyle:full',
-                        'imageStyle:alignLeft',
-                        'imageStyle:alignCenter',
-                        'imageStyle:alignRight'
+                        'imageStyle:inline',
+                        'imageStyle:wrapText',
+                        'imageStyle:breakText',
+                        '|',
+                        'resizeImage'
                     ],
                     styles: [
                         'full',
@@ -2392,7 +2393,10 @@ export default class Component extends Element {
         if (this.component.isUploadEnabled) {
             settings.extraPlugins.push(getFormioUploadAdapterPlugin(this.fileService, this));
         }
-        return Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', _.get(this.options, 'editors.ckeditor.src', `${Formio.cdn.ckeditor}/ckeditor.js`), true)
+        Formio.requireLibrary(`ckeditor-css`, isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', [
+            { type: 'styles', src: `${Formio.cdn.ckeditor}/ckeditor.css` }
+        ], true);
+        return Formio.requireLibrary('ckeditor', isIEBrowser ? 'CKEDITOR' : 'ClassicEditor', _.get(this.options, 'editors.ckeditor.src', `${Formio.cdn.ckeditor}/ckeditor.umd.js`), true)
             .then(() => {
             if (!element.parentNode) {
                 return Promise.reject();
@@ -2578,6 +2582,15 @@ export default class Component extends Element {
             noUpdateEvent: true,
             noDefault: true
         });
+        if (FormioUtils.isLayoutComponent(this.component) && this.component.clearOnHide === true && !this.hasValue()) {
+            FormioUtils.eachComponent(this.components, (component) => {
+                component.setValue(null, {
+                    noUpdateEvent: true,
+                    noDefault: true
+                });
+                component.unset();
+            });
+        }
         this.unset();
     }
     getCustomDefaultValue(defaultValue) {
@@ -2683,13 +2696,16 @@ export default class Component extends Element {
         }
         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();
@@ -3196,6 +3212,9 @@ export default class Component extends Element {
         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
@@ -3210,9 +3229,6 @@ export default class Component extends Element {
         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);

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

@@ -1,5 +1,5 @@
 import EditFormUtils from './utils';
-import { getContextComponents } from '../../../../utils/utils';
+import { getContextComponents } from '../../../../utils';
 /* eslint-disable quotes, max-len */
 export default [
     {

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

@@ -1,5 +1,5 @@
 import EditFormUtils from './utils';
-import { getContextComponents } from '../../../../utils/utils';
+import { getContextComponents } from '../../../../utils';
 /* eslint-disable quotes, max-len */
 export default [
     {

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

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { fastCloneDeep } from '../../../utils/utils';
+import { fastCloneDeep } from '../../../utils';
 export default class ComponentModal {
     static render(component, data, topLevel) {
         const children = component.renderTemplate('component', data, topLevel);

package/lib/mjs/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/mjs/components/_classes/input/Input.js

@@ -1,5 +1,5 @@
 import Multivalue from '../multivalue/Multivalue';
-import { convertStringToHTMLElement } from '../../../utils/utils';
+import { convertStringToHTMLElement } from '../../../utils';
 import Widgets from '../../../widgets';
 import _ from 'lodash';
 export default class Input extends Multivalue {
@@ -113,7 +113,7 @@ export default class Input extends Multivalue {
         }
         const info = this.inputInfo;
         info.attr = info.attr || {};
-        info.attr.value = this.getValueAsString(this.formatValue(this.parseValue(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;
@@ -158,7 +158,7 @@ export default class Input extends Multivalue {
             }));
         }
     }
-    updateValueAt(value, flags, index) {
+    updateValueAt(value, flags, index = 0) {
         flags = flags || {};
         if (_.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {

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

@@ -1,7 +1,7 @@
 import Field from '../field/Field';
 import { Formio } from '../../../Formio';
 import _ from 'lodash';
-import { getItemTemplateKeys } from '../../../utils/utils';
+import { getItemTemplateKeys } from '../../../utils';
 export default class ListComponent extends Field {
     static schema(...extend) {
         return Field.schema({

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

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
 '';
-import { getComponentPaths, getRandomComponentId, componentMatches, getBestMatch, getStringFromComponentPath } from '../../../utils/utils';
+import FormioUtils from '../../../utils';
 import { process as processAsync, processSync } from '@formio/core/process';
 /**
  * NestedComponent class.
@@ -204,7 +204,7 @@ export default class NestedComponent extends Field {
      */
     set rowIndex(value) {
         this._rowIndex = value;
-        this.paths = getComponentPaths(this.component, this.parent?.component, {
+        this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
             ...(this.parent?.paths || {}),
             ...{ dataIndex: value }
         });
@@ -308,7 +308,7 @@ export default class NestedComponent extends Field {
      * @returns {any} - The component that is located.
      */
     getComponent(path) {
-        path = getStringFromComponentPath(path);
+        path = FormioUtils.getStringFromComponentPath(path);
         const matches = {
             path: undefined,
             fullPath: undefined,
@@ -320,7 +320,7 @@ export default class NestedComponent extends Field {
         };
         this.everyComponent((component) => {
             // All searches are relative to this component so replace this path from the child paths.
-            componentMatches(component.component, {
+            FormioUtils.componentMatches(component.component, {
                 path: component.paths?.path?.replace(new RegExp(`^${this.paths?.path}\\.?`), ''),
                 fullPath: component.paths?.fullPath?.replace(new RegExp(`^${this.paths?.fullPath}\\.?`), ''),
                 localPath: component.paths?.localPath?.replace(new RegExp(`^${this.paths?.localPath}\\.?`), ''),
@@ -332,7 +332,7 @@ export default class NestedComponent extends Field {
                 return match;
             });
         });
-        return getBestMatch(matches)?.instance;
+        return FormioUtils.getBestMatch(matches)?.instance;
     }
     /**
      * Return a component provided the Id of the component.
@@ -374,7 +374,7 @@ export default class NestedComponent extends Field {
         options.localRoot = this.localRoot;
         options.skipInit = true;
         if (!(options.display === 'pdf' && this.builderMode)) {
-            component.id = getRandomComponentId();
+            component.id = FormioUtils.getRandomComponentId();
         }
         const comp = Components.create(component, options, data, true);
         comp.init();
@@ -659,7 +659,7 @@ export default class NestedComponent extends Field {
     }
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
-        if (this.root.hasExtraPages && this.page !== this.root.page) {
+        if (this.root && this.root.hasSubWizards && this.page !== this.root.page) {
             instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
                 ? this.componentsMap[paths.dataPath]
                 : this.getComponent(paths.dataPath);

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -2,7 +2,7 @@
 import _ from 'lodash';
 import { Utils } from '@formio/core/utils';
 const { getComponentPaths } = Utils;
-import { componentValueTypes, isLayoutComponent } from '../../../utils/utils';
+import { componentValueTypes, isLayoutComponent } from '../../../utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {

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

@@ -2,7 +2,7 @@
 import Component from '../component/Component';
 import NestedComponent from '../nested/NestedComponent';
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../../utils';
 export default class NestedDataComponent extends NestedComponent {
     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/mjs/components/address/Address.js

@@ -5,7 +5,7 @@ import { GoogleAddressProvider } from '../../providers/address/GoogleAddressProv
 import Field from '../_classes/field/Field';
 import NestedComponent from '../_classes/nested/NestedComponent';
 import ContainerComponent from '../container/Container';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 export const AddressComponentMode = {
     Autocomplete: 'autocomplete',
     Manual: 'manual',

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

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { getStringFromComponentPath } from '../../utils/utils';
+import { getStringFromComponentPath } from '../../utils';
 export default class Alert {
     constructor(container, component) {
         this.container = container;

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Field from '../_classes/field/Field';
 import Input from '../_classes/input/Input';
-import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes } from '../../utils';
 export default class ButtonComponent extends Field {
     static schema(...extend) {
         return Input.schema({

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

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils';
 import Field from '../_classes/field/Field';
 export default class CheckBoxComponent extends Field {
     static schema(...extend) {

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

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes, getFocusableElements } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, getFocusableElements } from '../../utils';
 import Component from '../_classes/component/Component';
 import Field from '../_classes/field/Field';
 import NestedDataComponent from '../_classes/nesteddata/NestedDataComponent';

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

@@ -1,7 +1,7 @@
 import { createNumberMask } from '@formio/text-mask-addons';
 import { maskInput } from '@formio/vanilla-text-mask';
 import _ from 'lodash';
-import { getCurrencyAffixes } from '../../utils/utils';
+import { getCurrencyAffixes } from '../../utils';
 import NumberComponent from '../number/Number';
 export default class CurrencyComponent extends NumberComponent {
     static schema(...extend) {

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

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
-import { fastCloneDeep, getFocusableElements, getComponent } from '../../utils/utils';
+import { fastCloneDeep, getFocusableElements, getComponent } from '../../utils';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({

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

@@ -223,6 +223,9 @@ export default class DataMapComponent extends DataGridComponent {
         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) => {
@@ -238,7 +241,9 @@ export default class DataMapComponent extends DataGridComponent {
         valueComponent.key = key;
         const componentOptions = this.options;
         componentOptions.row = options.row;
-        components[this.valueKey] = this.createComponent(valueComponent, componentOptions, this.dataValue);
+        const componentOptionsCloned = _.clone(componentOptions);
+        componentOptionsCloned.onChange = options.onChange;
+        components[this.valueKey] = this.createComponent(valueComponent, componentOptionsCloned, this.dataValue);
         return components;
     }
     get canAddColumn() {
@@ -261,7 +266,7 @@ export default class DataMapComponent extends DataGridComponent {
         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);

package/lib/mjs/components/datetime/DateTime.d.ts

@@ -17,7 +17,7 @@ export default class DateTimeComponent extends Input {
     };
     static savedValueTypes(schema: any): string[];
     get emptyValue(): string;
-    get momentFormat(): string;
+    get dayjsFormat(): string;
     createWrapper(): boolean;
     checkValidity(data: any, dirty: any, rowData: any): boolean;
     getValueAsString(value: any, options: any): any;

package/lib/mjs/components/datetime/DateTime.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import FormioUtils from '../../utils';
-import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils/utils';
+import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils';
 import Input from '../_classes/input/Input';
 export default class DateTimeComponent extends Input {
     static schema(...extend) {
@@ -147,8 +147,8 @@ export default class DateTimeComponent extends Input {
     get emptyValue() {
         return '';
     }
-    get momentFormat() {
-        return FormioUtils.convertFormatToMoment(this.component.format);
+    get dayjsFormat() {
+        return FormioUtils.convertFormatToDayjs(this.component.format);
     }
     isEmpty(value = this.dataValue) {
         if (value && (value.toString() === 'Invalid Date')) {
@@ -157,12 +157,14 @@ export default class DateTimeComponent extends Input {
         return super.isEmpty(value);
     }
     formatValue(input) {
-        const result = moment.utc(input).toISOString();
-        return result === 'Invalid date' ? input : result;
+        if (dayjs(input).isValid()) {
+            return dayjs.utc(input).toISOString();
+        }
+        return input;
     }
     isEqual(valueA, valueB = this.dataValue) {
         return (this.isEmpty(valueA) && this.isEmpty(valueB))
-            || moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat);
+            || dayjs.utc(valueA).format(this.dayjsFormat) === dayjs.utc(valueB).format(this.dayjsFormat);
     }
     createWrapper() {
         return false;
@@ -178,18 +180,18 @@ export default class DateTimeComponent extends Input {
         return super.checkValidity(data, dirty, rowData);
     }
     getValueAsString(value, options) {
-        let format = FormioUtils.convertFormatToMoment(this.component.format);
-        format += format.match(/z$/) ? '' : ' z';
+        let format = FormioUtils.convertFormatToDayjs(this.component.format);
         const timezone = this.timezone;
         if (value && !this.attached && timezone) {
+            format += format.match(/z$/) ? '' : ' z';
             if (Array.isArray(value) && this.component.multiple) {
-                return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format))).join(', ');
+                return value.map(item => _.trim(FormioUtils.dayjsDate(item, format, timezone, options).format(format))).join(', ');
             }
-            return _.trim(FormioUtils.momentDate(value, format, timezone, options).format(format));
+            return _.trim(FormioUtils.dayjsDate(value, format, timezone, options).format(format));
         }
         if (Array.isArray(value) && this.component.multiple) {
-            return value.map(item => _.trim(moment(item).format(format))).join(', ');
+            return value.map(item => _.trim(dayjs(item).format(format))).join(', ');
         }
-        return (value ? _.trim(moment(value).format(format)) : value) || '';
+        return (value ? _.trim(dayjs(value).format(format)) : value) || '';
     }
 }

package/lib/mjs/components/day/Day.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
-import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils';
 import { getDayFormat } from '@formio/core';
 export default class DayComponent extends Field {
     static schema(...extend) {
@@ -53,7 +53,7 @@ export default class DayComponent extends Field {
     // Empty value used before 9.3.x
     static oldEmptyValue = '00/00/0000';
     constructor(component, options, data) {
-        if (!options.inFormBuilder && !options.building) {
+        if (options && !options.inFormBuilder && !options.building) {
             if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
                 component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
             }

package/lib/mjs/components/editgrid/EditGrid.js

@@ -4,7 +4,7 @@ import { editgrid as templates } from '@formio/bootstrap/components';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import Component from '../_classes/component/Component';
 import Alert from '../alert/Alert';
-import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent } from '../../utils/utils';
+import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent } from '../../utils';
 const EditRowState = {
     New: 'new',
     Editing: 'editing',

package/lib/mjs/components/editgrid/editForm/EditGrid.edit.display.js

@@ -33,7 +33,7 @@ export default [
         weight: 1002,
         input: false,
         customConditional() {
-            return !Evaluator.noeval;
+            return !Evaluator.noeval || !Evaluator.protectedEval;
         },
     },
     {

package/lib/mjs/components/fieldset/Fieldset.js

@@ -7,6 +7,7 @@ export default class FieldsetComponent extends NestedComponent {
             type: 'fieldset',
             legend: '',
             components: [],
+            clearOnHide: false,
             input: false,
             persistent: false
         }, ...extend);

package/lib/mjs/components/file/File.js

@@ -1,5 +1,5 @@
 import Field from '../_classes/field/Field';
-import { componentValueTypes, getComponentSavedTypes, uniqueName } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, uniqueName } from '../../utils';
 import download from 'downloadjs';
 import _ from 'lodash';
 import fileProcessor from '../../providers/processor/fileProcessor';

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

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

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

@@ -30,9 +30,10 @@ export default [
         tooltip: 'if it is checked, the subform is loaded after navigation to the page with this component within the wizard.',
         input: true,
         customConditional({ instance, data }) {
-            const formInfo = instance.root?.getComponent('form')?.defaultDownloadedResources.find(res => res._id === data.form);
+            const formComp = instance.root?.getComponent('form');
+            const formInfo = formComp?.defaultDownloadedResources.find(res => res._id === data.form);
             const displayMode = 'wizard';
-            return instance.options?.editForm?.display === displayMode && formInfo && formInfo.display !== displayMode;
+            return instance.options?.editForm?.display === displayMode && ((data.form && !formInfo) || (formInfo && formInfo.display !== displayMode));
         },
     },
     {

package/lib/mjs/components/number/Number.js

@@ -2,7 +2,7 @@ import { createNumberMask } from '@formio/text-mask-addons';
 import { conformToMask, maskInput } from '@formio/vanilla-text-mask';
 import _ from 'lodash';
 import Input from '../_classes/input/Input';
-import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes } from '../../utils/';
 export default class NumberComponent extends Input {
     static schema(...extend) {
         return Input.schema({

package/lib/mjs/components/panel/Panel.js

@@ -1,5 +1,5 @@
 import NestedComponent from '../_classes/nested/NestedComponent';
-import { isChildOf } from '../../utils/utils';
+import { isChildOf } from '../../utils';
 export default class PanelComponent extends NestedComponent {
     static schema(...extend) {
         return NestedComponent.schema({

package/lib/mjs/components/radio/Radio.d.ts

@@ -28,6 +28,7 @@ export default class RadioComponent extends ListComponent {
     optionsLoaded: boolean | undefined;
     loadedOptions: any[] | undefined;
     beforeSubmit(): Promise<any>;
+    convertValues(values: any): any;
     render(): string;
     attach(element: any): Promise<void>;
     detach(element: any): void;
@@ -41,5 +42,12 @@ export default class RadioComponent extends ListComponent {
     setSelectedClasses(): void;
     updateValue(value: any, flags: any): boolean;
     currentValue: any;
+    /**
+     * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+     * @param {*} value - The value to normalize
+     * @returns {*} - Returns the normalized value
+     */
+    convertByDataType(value: any): any;
+    normalizeValue(value: any): any;
 }
 import ListComponent from '../_classes/list/ListComponent';

package/lib/mjs/components/radio/Radio.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
 import { Formio } from '../../Formio';
-import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({
@@ -153,6 +153,12 @@ export default class RadioComponent extends ListComponent {
             this.dataReady.then(() => res(true));
         });
     }
+    convertValues(values) {
+        if (this.options.renderMode === 'html' && this.type === 'radio') {
+            return values.map(x => ({ ...x, value: this.convertByDataType(x.value) }));
+        }
+        return values;
+    }
     render() {
         if (!this.optionsLoaded) {
             return super.render(this.renderTemplate('loader'));
@@ -160,7 +166,7 @@ export default class RadioComponent extends ListComponent {
         return super.render(this.renderTemplate('radio', {
             input: this.inputInfo,
             inline: this.component.inline,
-            values: this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions,
+            values: this.component.dataSrc === 'values' ? this.convertValues(this.component.values) : this.loadedOptions,
             value: this.dataValue,
             row: this.row,
         }));
@@ -406,7 +412,7 @@ export default class RadioComponent extends ListComponent {
      * @param {*} value - The value to normalize
      * @returns {*} - Returns the normalized value
      */
-    normalizeValue(value) {
+    convertByDataType(value) {
         const dataType = this.component.dataType || 'auto';
         if (value === this.emptyValue) {
             return value;
@@ -438,13 +444,17 @@ export default class RadioComponent extends ListComponent {
                 value = !(!value || value.toString() === 'false');
                 break;
         }
-        if (this.isSelectURL && this.templateData && this.templateData[value]) {
+        return value;
+    }
+    normalizeValue(value) {
+        const valueConverted = this.convertByDataType(value);
+        if (this.isSelectURL && this.templateData && this.templateData[valueConverted]) {
             const submission = this.root.submission;
             if (!submission.metadata.selectData) {
                 submission.metadata.selectData = {};
             }
-            _.set(submission.metadata.selectData, this.path, this.templateData[value]);
+            _.set(submission.metadata.selectData, this.path, this.templateData[valueConverted]);
         }
-        return super.normalizeValue(value);
+        return super.normalizeValue(valueConverted);
     }
 }