@formio/js 5.1.0-dev.6156.9cd5779 → 5.1.0-dev.6159.811e953

package/lib/cjs/WebformBuilder.js

@@ -1129,11 +1129,14 @@ class WebformBuilder extends Component_1.default {
         const repeatablePaths = [];
         const keys = new Map();
         (0, utils_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);
+            const isLayout = (0, utils_1.componentInfo)(comp).layout;
+            if (!isLayout) {
+                if (keys.has(paths.dataPath)) {
+                    repeatablePaths.push(paths.dataPath);
+                }
+                else {
+                    keys.set(paths.dataPath, true);
+                }
             }
         }, true);
         return repeatablePaths;
@@ -1141,12 +1144,22 @@ class WebformBuilder extends Component_1.default {
     highlightInvalidComponents() {
         const repeatablePaths = this.findRepeatablePaths();
         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)) {
                 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/cjs/components/_classes/nested/NestedComponent.js

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

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

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

package/lib/cjs/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/cjs/components/radio/Radio.js

@@ -153,6 +153,12 @@ class RadioComponent extends ListComponent_1.default {
             this.dataReady.then(() => res(true));
         });
     }
+    convertValues(values) {
+        if (this.options.renderMode === 'html' && this.type === 'radio') {
+            return values.map(x => (Object.assign(Object.assign({}, x), { value: this.convertByDataType(x.value) })));
+        }
+        return values;
+    }
     render() {
         if (!this.optionsLoaded) {
             return super.render(this.renderTemplate('loader'));
@@ -160,7 +166,7 @@ class RadioComponent extends ListComponent_1.default {
         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 @@ class RadioComponent extends ListComponent_1.default {
      * @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,14 +444,18 @@ class RadioComponent extends ListComponent_1.default {
                 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 = {};
             }
-            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);
+            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[valueConverted]);
         }
-        return super.normalizeValue(value);
+        return super.normalizeValue(valueConverted);
     }
 }
 exports.default = RadioComponent;

package/lib/cjs/components/select/Select.d.ts

@@ -89,6 +89,7 @@ export default class SelectComponent extends ListComponent {
     disableInfiniteScroll(): void;
     set serverCount(value: any);
     get serverCount(): any;
+    shouldResetChoicesItems(items: any): boolean;
     setItems(items: any, fromSearch: any): void;
     selectItems: any;
     set downloadedResources(value: any);

package/lib/cjs/components/select/Select.js

@@ -355,6 +355,18 @@ class SelectComponent extends ListComponent_1.default {
         this.downloadedResources.serverCount = this.downloadedResources.length;
         this.serverCount = this.downloadedResources.length;
     }
+    shouldResetChoicesItems(items) {
+        if (this.choices._store.choices.length !== items.length) {
+            return true;
+        }
+        for (let item of items) {
+            const choicesItem = this.choices._store.choices.find((i) => i.label === item.label);
+            if (!choicesItem) {
+                return true;
+            }
+        }
+        return false;
+    }
     /* eslint-disable max-statements */
     setItems(items, fromSearch) {
         var _a, _b;
@@ -441,7 +453,7 @@ class SelectComponent extends ListComponent_1.default {
             this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, lodash_1.default.get(item, this.component.idPath, String(index)));
         });
         if (this.choices) {
-            this.choices.setChoices(this.selectOptions, 'value', 'label', true);
+            this.choices.setChoices(this.selectOptions, 'value', 'label', true, true, !fromSearch && this.shouldResetChoicesItems(this.selectOptions));
         }
         else if (this.loading) {
             // Re-attach select input.
@@ -903,8 +915,9 @@ class SelectComponent extends ListComponent_1.default {
             });
         }
         // Add value options.
+        const value = this.undoValueTyping(this.dataValue);
         this.addValueOptions();
-        this.setChoicesValue(this.dataValue);
+        this.setChoicesValue(value);
         if (this.isSelectResource && this.refs.addResource) {
             this.addEventListener(this.refs.addResource, 'click', (event) => {
                 event.preventDefault();
@@ -1283,6 +1296,9 @@ class SelectComponent extends ListComponent_1.default {
             this.lazyLoadInit = true;
             const searchProperty = this.component.searchField || this.component.valueProperty;
             this.triggerUpdate(lodash_1.default.get(value.data || value, searchProperty, value), true);
+            this.itemsLoaded.then(() => {
+                this.setChoicesValue(value, hasPreviousValue, flags);
+            });
             return changed;
         }
         // Add the value options.

package/lib/cjs/components/selectboxes/SelectBoxes.d.ts

@@ -8,6 +8,12 @@ export default class SelectBoxesComponent extends RadioComponent {
      * @returns {boolean} - If the value is empty.
      */
     isEmpty(value?: any): boolean;
+    /**
+     * Normalize values coming into updateValue.
+     * @param {any} value - The value to normalize.
+     * @returns {*} - The normalized value
+     */
+    normalizeValue(value: any): any;
     setInputsDisabled(value: any, onlyUnchecked: any): void;
     checkComponentValidity(data: any, dirty: any, rowData: any, options: any, errors?: any[]): boolean;
 }

package/lib/cjs/translations/en.d.ts

@@ -70,6 +70,7 @@ declare const _default: {
     reCaptchaTokenValidationError: string;
     reCaptchaTokenNotSpecifiedError: string;
     apiKey: string;
+    apiKeyNotValid: string;
     typeRemaining: string;
     typeCount: string;
     requiredDayField: string;

package/lib/cjs/translations/en.js

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 const bootstrap_1 = __importDefault(require("@formio/bootstrap"));
-exports.default = Object.assign(Object.assign({}, (((_a = bootstrap_1.default === null || bootstrap_1.default === void 0 ? void 0 : bootstrap_1.default.translations) === null || _a === void 0 ? void 0 : _a.en) || {})), { unsavedRowsError: 'Please save all rows before proceeding.', invalidRowsError: 'Please correct invalid rows before proceeding.', invalidRowError: 'Invalid row. Please correct it or delete.', invalidOption: '{{field}} is an invalid value.', invalidDay: '{{field}} is not a valid day.', complete: 'Submission Complete', error: 'Please fix the following errors before submitting.', errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.', errorsListNavigationMessage: 'Click to navigate to the field with following error.', submitError: 'Please check the form and correct all errors before submitting.', required: '{{field}} is required', unique: '{{field}} must be unique', array: '{{field}} must be an array', array_nonempty: '{{field}} must be a non-empty array', nonarray: '{{field}} must not be an array', select: '{{field}} contains an invalid selection', pattern: '{{field}} does not match the pattern {{pattern}}', minLength: '{{field}} must have at least {{length}} characters.', maxLength: '{{field}} must have no more than {{length}} characters.', minWords: '{{field}} must have at least {{length}} words.', maxWords: '{{field}} must have no more than {{length}} words.', min: '{{field}} cannot be less than {{min}}.', max: '{{field}} cannot be greater than {{max}}.', maxDate: '{{field}} should not contain date after {{maxDate}}', minDate: '{{field}} should not contain date before {{minDate}}', maxYear: '{{field}} should not contain year greater than {{maxYear}}', minYear: '{{field}} should not contain year less than {{minYear}}', minSelectedCount: 'You must select at least {{minCount}} items', maxSelectedCount: 'You may only select up to {{maxCount}} items', invalid_email: '{{field}} must be a valid email.', invalid_url: '{{field}} must be a valid url.', invalid_regex: '{{field}} does not match the pattern {{regex}}.', invalid_date: '{{field}} is not a valid date.', invalid_day: '{{field}} is not a valid day.', invalidValueProperty: 'Invalid Value Property', mask: '{{field}} does not match the mask.', valueIsNotAvailable: '{{ field }} is an invalid value.', stripe: '{{stripe}}', month: 'Month', day: 'Day', year: 'Year', january: 'January', february: 'February', march: 'March', april: 'April', may: 'May', june: 'June', july: 'July', august: 'August', september: 'September', october: 'October', november: 'November', december: 'December', next: 'Next', previous: 'Previous', cancel: 'Cancel', submit: 'Submit Form', confirmCancel: 'Are you sure you want to cancel?', saveDraftInstanceError: 'Cannot save draft because there is no formio instance.', saveDraftAuthError: 'Cannot save draft unless a user is authenticated.', restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.', saveDraftError: 'Unable to save draft.', restoreDraftError: 'Unable to restore draft.', time: 'Invalid time', cancelButtonAriaLabel: 'Cancel button. Click to reset the form', previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab', nextButtonAriaLabel: 'Next button. Click to go to the next tab', submitButtonAriaLabel: 'Submit Form button. Click to submit the form', reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error', reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission', apiKey: 'API Key is not unique: {{key}}', typeRemaining: '{{ remaining }} {{ type }} remaining.', typeCount: '{{ count }} {{ type }}', requiredDayField: '{{ field }} is required', requiredDayEmpty: '{{ field }} is required', requiredMonthField: '{{ field }} is required', requiredYearField: '{{ field }} is required', formNotReady: 'Form not ready. Use form.ready promise', noFormElement: 'No DOM element for form.', notUniqueKey: 'API Key is not unique', newFormSchema: 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.', missingUrl: 'Missing URL argument', urlNotAttachedToBtn: 'You should add a URL to this button.', loadingProjectSettingsError: 'Could not load project settings', sessionStorageSupportError: 'Session storage is not supported in this browser.', builderUniqueError: `You cannot add more than one {{componentKeyOrTitle}} component to one page.`, pageNotFound: 'Page not found', noDragInfoError: 'There is no Drag Info available for either dragged or sibling element', addonSupportTypeError: 'Addon {{label}} does not support component of type {{type}}', setPathError: 'Should not be setting the path of a component.', calculatedPathDeprecation: 'component.calculatedPath was deprecated, use component.path instead.', unknownTemplate: 'Unknown template: {{name}}', unknownComponent: 'Unknown component: {{type}}', renderTemplateFunctionDeprecation: `Form.io 'render' template function is deprecated.
+exports.default = Object.assign(Object.assign({}, (((_a = bootstrap_1.default === null || bootstrap_1.default === void 0 ? void 0 : bootstrap_1.default.translations) === null || _a === void 0 ? void 0 : _a.en) || {})), { unsavedRowsError: 'Please save all rows before proceeding.', invalidRowsError: 'Please correct invalid rows before proceeding.', invalidRowError: 'Invalid row. Please correct it or delete.', invalidOption: '{{field}} is an invalid value.', invalidDay: '{{field}} is not a valid day.', complete: 'Submission Complete', error: 'Please fix the following errors before submitting.', errorListHotkey: 'Press Ctrl + Alt + X to go back to the error list.', errorsListNavigationMessage: 'Click to navigate to the field with following error.', submitError: 'Please check the form and correct all errors before submitting.', required: '{{field}} is required', unique: '{{field}} must be unique', array: '{{field}} must be an array', array_nonempty: '{{field}} must be a non-empty array', nonarray: '{{field}} must not be an array', select: '{{field}} contains an invalid selection', pattern: '{{field}} does not match the pattern {{pattern}}', minLength: '{{field}} must have at least {{length}} characters.', maxLength: '{{field}} must have no more than {{length}} characters.', minWords: '{{field}} must have at least {{length}} words.', maxWords: '{{field}} must have no more than {{length}} words.', min: '{{field}} cannot be less than {{min}}.', max: '{{field}} cannot be greater than {{max}}.', maxDate: '{{field}} should not contain date after {{maxDate}}', minDate: '{{field}} should not contain date before {{minDate}}', maxYear: '{{field}} should not contain year greater than {{maxYear}}', minYear: '{{field}} should not contain year less than {{minYear}}', minSelectedCount: 'You must select at least {{minCount}} items', maxSelectedCount: 'You may only select up to {{maxCount}} items', invalid_email: '{{field}} must be a valid email.', invalid_url: '{{field}} must be a valid url.', invalid_regex: '{{field}} does not match the pattern {{regex}}.', invalid_date: '{{field}} is not a valid date.', invalid_day: '{{field}} is not a valid day.', invalidValueProperty: 'Invalid Value Property', mask: '{{field}} does not match the mask.', valueIsNotAvailable: '{{ field }} is an invalid value.', stripe: '{{stripe}}', month: 'Month', day: 'Day', year: 'Year', january: 'January', february: 'February', march: 'March', april: 'April', may: 'May', june: 'June', july: 'July', august: 'August', september: 'September', october: 'October', november: 'November', december: 'December', next: 'Next', previous: 'Previous', cancel: 'Cancel', submit: 'Submit Form', confirmCancel: 'Are you sure you want to cancel?', saveDraftInstanceError: 'Cannot save draft because there is no formio instance.', saveDraftAuthError: 'Cannot save draft unless a user is authenticated.', restoreDraftInstanceError: 'Cannot restore draft because there is no formio instance.', saveDraftError: 'Unable to save draft.', restoreDraftError: 'Unable to restore draft.', time: 'Invalid time', cancelButtonAriaLabel: 'Cancel button. Click to reset the form', previousButtonAriaLabel: 'Previous button. Click to go back to the previous tab', nextButtonAriaLabel: 'Next button. Click to go to the next tab', submitButtonAriaLabel: 'Submit Form button. Click to submit the form', reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error', reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission', apiKey: 'API Key is not unique: {{key}}', apiKeyNotValid: 'API Key is not valid: {{key}}', typeRemaining: '{{ remaining }} {{ type }} remaining.', typeCount: '{{ count }} {{ type }}', requiredDayField: '{{ field }} is required', requiredDayEmpty: '{{ field }} is required', requiredMonthField: '{{ field }} is required', requiredYearField: '{{ field }} is required', formNotReady: 'Form not ready. Use form.ready promise', noFormElement: 'No DOM element for form.', notUniqueKey: 'API Key is not unique', newFormSchema: 'Form schema is for a newer version, please upgrade your renderer. Some functionality may not work.', missingUrl: 'Missing URL argument', urlNotAttachedToBtn: 'You should add a URL to this button.', loadingProjectSettingsError: 'Could not load project settings', sessionStorageSupportError: 'Session storage is not supported in this browser.', builderUniqueError: `You cannot add more than one {{componentKeyOrTitle}} component to one page.`, pageNotFound: 'Page not found', noDragInfoError: 'There is no Drag Info available for either dragged or sibling element', addonSupportTypeError: 'Addon {{label}} does not support component of type {{type}}', setPathError: 'Should not be setting the path of a component.', calculatedPathDeprecation: 'component.calculatedPath was deprecated, use component.path instead.', unknownTemplate: 'Unknown template: {{name}}', unknownComponent: 'Unknown component: {{type}}', renderTemplateFunctionDeprecation: `Form.io 'render' template function is deprecated.
     If you need to render template (template A) inside of another template (template B),
     pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`, whenReadyDeprecation: 'The whenReady() method has been deprecated. Please use the dataReady property instead.', loadResourcesError: 'Unable to load resources for {{componentKey}}', noSelectDataConfiguration: 'Select component {{componentKey}} does not have data configuration.', indexedDBSupportError: "Your browser doesn't support current version of indexedDB", caretPositionSavingError: 'An error occurred while trying to save caret position', iteratableRowsError: 'Getter #iteratableRows() is not implemented', checkRowDeprecation: 'Deprecation Warning: checkRow method has been replaced with processRow', noOAuthBtn: 'You must add the OAuth button to a form for it to function properly', noOAuthConfiguration: 'OAuth not configured. You must configure oauth for your project before it will work.', oAuthErrorsTitle: 'The Following Error Has Occured', noOAuthFormUrl: 'You must attach a Form API url to your form in order to use OAuth buttons.', oAuthStateError: 'OAuth state does not match. Please try logging in again.', componentInvalidRowValidation: 'Invalid row validation for {{componentKey}}', videoPlayerNotFound: 'Video player not found in template.', synchronizationFailed: 'Synchronization is failed', fileWithDuplicatedNameInProgress: 'File with the same name is already being uploaded', fileWithDuplicatedNameLoaded: 'File with the same name is already uploaded', nestedForm: 'Nested form', noDataProvided: 'No data provided', subformSubmissionLoadingError: 'Unable to load subform submission {{submissionId}}:', noDelimiterSet: 'In order for thousands separator to work properly, you must set the delimiter to true in the component json', noSiteKey: 'There is no Site Key specified in settings in form JSON', failedToNormalize: 'Failed to normalize value', failedToCompareItems: 'Error while comparing items', editorFocusError: 'An editor did not initialize properly when trying to focus:', quillImageUploadFailed: 'Quill image upload failed', noFilesSelected: 'No files selected', needConfigurationForQuill: 'The WYSIWYG settings are configured for CKEditor. For this renderer, you will need to use configurations for the Quill Editor. See https://quilljs.com/docs/configuration for more information.', waitPdfConverting: 'Converting PDF. Please wait.', uploading: 'Uploading', pasteBelow: 'Paste below', copy: 'Copy', move: 'Move', edit: 'Edit', editJson: 'Edit JSON', remove: 'Remove', clickToSetValue: 'Click to set value', words: 'words', characters: 'characters', addAnother: 'Add Another', yes: 'Yes', no: 'No', wantToClearData: 'Do you want to clear data?', yesDelete: 'Yes, delete it', waitFileProcessing: 'Processing file. Please wait...', wrongFileType: 'File is the wrong type; it must be {{ pattern }}', fileTooSmall: 'File is too small; it must be at least {{ size }}', fileTooBig: 'File is too big; it must be at most {{ size }}', noFileService: 'File Service not provided.', fileProcessingFailed: 'File processing has been failed.', readyForUpload: 'Ready to be uploaded into storage', readyForRemovingFromStorage: 'Ready to be removed from storage', preparingFileToRemove: 'Preparing file to remove', succefullyRemoved: 'Succefully removed', succefullyUploaded: 'Succefully uploaded', maxSelectItems: 'You may only select up to {{maxCount}} items', minSelectItems: 'You must select at least {{minCount}} items', clickToSign: 'Click to Sign', surveyQuestion: 'Question', surveyQuestionValue: 'Value', success: 'Success', noResultsFound: 'No results found', noChoices: 'No choices to choose from', typeToSearch: 'Type to search', loading: 'Loading' });

package/lib/cjs/utils/utils.js

@@ -209,13 +209,20 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             return true;
         }
         const conditionsResult = lodash_1.default.map(conditions, (cond) => {
-            var _a, _b;
             const { value: comparedValue, operator, component: conditionComponentPath } = cond;
             if (!conditionComponentPath) {
                 return true;
             }
             const splittedConditionPath = conditionComponentPath.split('.');
-            const conditionalPaths = ((_a = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _a === void 0 ? void 0 : _a.type) === 'datagrid' || ((_b = instance === null || instance === void 0 ? void 0 : instance.parent) === null || _b === void 0 ? void 0 : _b.type) === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);
+            const checkParentTypeInTree = (instance, componentType) => {
+                if (!(instance === null || instance === void 0 ? void 0 : instance.parent)) {
+                    return false;
+                }
+                return (instance === null || instance === void 0 ? void 0 : instance.parent.type) === componentType || checkParentTypeInTree(instance.parent, componentType);
+            };
+            const conditionalPaths = checkParentTypeInTree(instance, 'datagrid') || checkParentTypeInTree(instance, 'editgrid')
+                ? []
+                : getConditionalPathsRecursive(splittedConditionPath, data);
             if (conditionalPaths.length > 0) {
                 return conditionalPaths.map((path) => {
                     const value = getComponentActualValue(path, data, row);
@@ -334,7 +341,7 @@ function getRow(component, row, instance, conditional) {
     }
     const dataParent = getDataParentComponent(instance);
     if (dataParent) {
-        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;
+        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath;
         const isTriggerCondtionComponentPath = condition.when || !condition.conditions
             ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)
             : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });

package/lib/mjs/WebformBuilder.js

@@ -3,7 +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, eachComponent, getComponent, } from './utils';
+import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath, eachComponent, getComponent, componentInfo } from './utils';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
 import autoScroll from 'dom-autoscroller';
@@ -1112,11 +1112,14 @@ export default class WebformBuilder extends Component {
         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 isLayout = componentInfo(comp).layout;
+            if (!isLayout) {
+                if (keys.has(paths.dataPath)) {
+                    repeatablePaths.push(paths.dataPath);
+                }
+                else {
+                    keys.set(paths.dataPath, true);
+                }
             }
         }, true);
         return repeatablePaths;
@@ -1124,12 +1127,22 @@ export default class WebformBuilder extends Component {
     highlightInvalidComponents() {
         const repeatablePaths = this.findRepeatablePaths();
         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)) {
                 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/components/_classes/nested/NestedComponent.js

@@ -659,7 +659,7 @@ export default class NestedComponent extends Field {
     }
     validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
-        if (this.root.hasSubWizards && 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/datamap/DataMap.js

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

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

@@ -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);
     }
 }

package/lib/mjs/components/select/Select.d.ts

@@ -89,6 +89,7 @@ export default class SelectComponent extends ListComponent {
     disableInfiniteScroll(): void;
     set serverCount(value: any);
     get serverCount(): any;
+    shouldResetChoicesItems(items: any): boolean;
     setItems(items: any, fromSearch: any): void;
     selectItems: any;
     set downloadedResources(value: any);

package/lib/mjs/components/select/Select.js

@@ -359,6 +359,18 @@ export default class SelectComponent extends ListComponent {
         this.downloadedResources.serverCount = this.downloadedResources.length;
         this.serverCount = this.downloadedResources.length;
     }
+    shouldResetChoicesItems(items) {
+        if (this.choices._store.choices.length !== items.length) {
+            return true;
+        }
+        for (let item of items) {
+            const choicesItem = this.choices._store.choices.find((i) => i.label === item.label);
+            if (!choicesItem) {
+                return true;
+            }
+        }
+        return false;
+    }
     /* eslint-disable max-statements */
     setItems(items, fromSearch) {
         this.selectItems = items;
@@ -444,7 +456,7 @@ export default class SelectComponent extends ListComponent {
             this.addOption(itemValueAndLabel.value, itemValueAndLabel.label, {}, _.get(item, this.component.idPath, String(index)));
         });
         if (this.choices) {
-            this.choices.setChoices(this.selectOptions, 'value', 'label', true);
+            this.choices.setChoices(this.selectOptions, 'value', 'label', true, true, !fromSearch && this.shouldResetChoicesItems(this.selectOptions));
         }
         else if (this.loading) {
             // Re-attach select input.
@@ -935,8 +947,9 @@ export default class SelectComponent extends ListComponent {
             });
         }
         // Add value options.
+        const value = this.undoValueTyping(this.dataValue);
         this.addValueOptions();
-        this.setChoicesValue(this.dataValue);
+        this.setChoicesValue(value);
         if (this.isSelectResource && this.refs.addResource) {
             this.addEventListener(this.refs.addResource, 'click', (event) => {
                 event.preventDefault();
@@ -1312,6 +1325,9 @@ export default class SelectComponent extends ListComponent {
             this.lazyLoadInit = true;
             const searchProperty = this.component.searchField || this.component.valueProperty;
             this.triggerUpdate(_.get(value.data || value, searchProperty, value), true);
+            this.itemsLoaded.then(() => {
+                this.setChoicesValue(value, hasPreviousValue, flags);
+            });
             return changed;
         }
         // Add the value options.

package/lib/mjs/components/selectboxes/SelectBoxes.d.ts

@@ -8,6 +8,12 @@ export default class SelectBoxesComponent extends RadioComponent {
      * @returns {boolean} - If the value is empty.
      */
     isEmpty(value?: any): boolean;
+    /**
+     * Normalize values coming into updateValue.
+     * @param {any} value - The value to normalize.
+     * @returns {*} - The normalized value
+     */
+    normalizeValue(value: any): any;
     setInputsDisabled(value: any, onlyUnchecked: any): void;
     checkComponentValidity(data: any, dirty: any, rowData: any, options: any, errors?: any[]): boolean;
 }

package/lib/mjs/translations/en.d.ts

@@ -70,6 +70,7 @@ declare const _default: {
     reCaptchaTokenValidationError: string;
     reCaptchaTokenNotSpecifiedError: string;
     apiKey: string;
+    apiKeyNotValid: string;
     typeRemaining: string;
     typeCount: string;
     requiredDayField: string;

package/lib/mjs/translations/en.js

@@ -72,6 +72,7 @@ export default {
     reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',
     reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
     apiKey: 'API Key is not unique: {{key}}',
+    apiKeyNotValid: 'API Key is not valid: {{key}}',
     typeRemaining: '{{ remaining }} {{ type }} remaining.',
     typeCount: '{{ count }} {{ type }}',
     requiredDayField: '{{ field }} is required',

package/lib/mjs/utils/utils.js

@@ -199,7 +199,15 @@ export function checkSimpleConditional(component, condition, row, data, instance
                 return true;
             }
             const splittedConditionPath = conditionComponentPath.split('.');
-            const conditionalPaths = instance?.parent?.type === 'datagrid' || instance?.parent?.type === 'editgrid' ? [] : getConditionalPathsRecursive(splittedConditionPath, data);
+            const checkParentTypeInTree = (instance, componentType) => {
+                if (!instance?.parent) {
+                    return false;
+                }
+                return instance?.parent.type === componentType || checkParentTypeInTree(instance.parent, componentType);
+            };
+            const conditionalPaths = checkParentTypeInTree(instance, 'datagrid') || checkParentTypeInTree(instance, 'editgrid')
+                ? []
+                : getConditionalPathsRecursive(splittedConditionPath, data);
             if (conditionalPaths.length > 0) {
                 return conditionalPaths.map((path) => {
                     const value = getComponentActualValue(path, data, row);
@@ -313,7 +321,7 @@ function getRow(component, row, instance, conditional) {
     }
     const dataParent = getDataParentComponent(instance);
     if (dataParent) {
-        const parentPath = dataParent.paths?.localDataPath;
+        const parentPath = dataParent.paths?.localPath;
         const isTriggerCondtionComponentPath = condition.when || !condition.conditions
             ? condition.when?.startsWith(dataParent.paths?.localPath)
             : _.some(condition.conditions, cond => cond.component.startsWith(dataParent.paths?.localPath));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.1.0-dev.6156.9cd5779",
+  "version": "5.1.0-dev.6159.811e953",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -81,7 +81,7 @@
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
     "@formio/bootstrap": "v3.0.0-dev.121.085d187",
-    "@formio/core": "2.4.0-dev.245.326cac7",
+    "@formio/core": "v2.4.0-dev.255.7fab6ff",
     "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",