@formio/js 5.0.0-dev.5620.dedc19b → 5.0.0-dev.5625.779293f

package/lib/cjs/components/select/fixtures/comp24.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    title: 'FIO-8234',
+    name: 'fio8234',
+    path: 'fio8234',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'resource',
+            data: {
+                resource: '665446284c9b0163c3e0c7e6',
+            },
+            template: '<span>{{ item.data.textField1 }}</span>',
+            validate: {
+                select: false,
+            },
+            key: 'select',
+            type: 'select',
+            searchField: 'data.textField2__regex',
+            input: true,
+            noRefreshOnScroll: false,
+            addResource: false,
+            reference: false,
+            valueProperty: 'data.textField2',
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

package/lib/cjs/components/select/fixtures/index.d.ts

@@ -20,5 +20,6 @@ import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
 import comp23 from './comp23';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };
+import comp24 from './comp24';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23, comp24 };
 export { multiSelect, multiSelectOptions } from "./comp3";

package/lib/cjs/components/select/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp23 = exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
+exports.comp24 = exports.comp23 = exports.comp22 = exports.comp21 = exports.comp20 = exports.comp19 = exports.comp18 = exports.comp17 = exports.comp16 = exports.comp15 = exports.comp14 = exports.comp13 = exports.comp12 = exports.comp11 = exports.comp10 = exports.comp9 = exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp2 = exports.comp1 = exports.multiSelectOptions = exports.multiSelect = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -51,3 +51,5 @@ const comp22_1 = __importDefault(require("./comp22"));
 exports.comp22 = comp22_1.default;
 const comp23_1 = __importDefault(require("./comp23"));
 exports.comp23 = comp23_1.default;
+const comp24_1 = __importDefault(require("./comp24"));
+exports.comp24 = comp24_1.default;

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

@@ -71,5 +71,6 @@ declare namespace _default {
     let submitButtonAriaLabel: string;
     let reCaptchaTokenValidationError: string;
     let reCaptchaTokenNotSpecifiedError: string;
+    let apiKey: string;
 }
 export default _default;

package/lib/cjs/translations/en.js

@@ -73,4 +73,5 @@ exports.default = {
     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}}'
 };

package/lib/cjs/utils/utils.d.ts

@@ -107,6 +107,12 @@ export function checkCondition(component: any, row: any, data: any, form: any, i
  */
 export function checkTrigger(component: any, trigger: any, row: any, data: any, form: any, instance: any): mixed;
 export function setActionProperty(component: any, action: any, result: any, row: any, data: any, instance: any): any;
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+export function removeHTML(str: string): string;
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str

package/lib/cjs/utils/utils.js

@@ -30,8 +30,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = void 0;
+exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
+exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
@@ -448,6 +448,16 @@ function setActionProperty(component, action, result, row, data, instance) {
     return component;
 }
 exports.setActionProperty = setActionProperty;
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+function removeHTML(str) {
+    const doc = new window.DOMParser().parseFromString(str, 'text/html');
+    return (doc.body.textContent || '').trim();
+}
+exports.removeHTML = removeHTML;
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str
@@ -457,8 +467,9 @@ function unescapeHTML(str) {
     if (typeof window === 'undefined' || !('DOMParser' in window)) {
         return str;
     }
-    const doc = new window.DOMParser().parseFromString(str, 'text/html');
-    return doc.documentElement.textContent;
+    const elem = document.createElement('textarea');
+    elem.innerHTML = str;
+    return elem.value;
 }
 exports.unescapeHTML = unescapeHTML;
 /**

package/lib/mjs/Formio.js

@@ -107,4 +107,15 @@ FormioCore.createForm = FormioEmbed.createForm;
 FormioCore.submitDone = FormioEmbed.submitDone;
 FormioCore.addLibrary = FormioEmbed.addLibrary;
 FormioCore.addLoader = FormioEmbed.addLoader;
+FormioCore.addToGlobal = (global) => {
+    if (typeof global === 'object' && !global.Formio) {
+        global.Formio = FormioCore;
+    }
+};
+if (typeof global !== 'undefined') {
+    FormioCore.addToGlobal(global);
+}
+if (typeof window !== 'undefined') {
+    FormioCore.addToGlobal(window);
+}
 export { FormioCore as Formio };

package/lib/mjs/Webform.d.ts

@@ -471,7 +471,7 @@ declare class Webform extends NestedDataComponent {
      */
     submit(before: boolean, options?: {}): Promise<any>;
     submitUrl(URL: any, headers: any): void;
-    triggerRecaptcha(): void;
+    triggerCaptcha(): void;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/mjs/Webform.js

@@ -7,7 +7,7 @@ import i18nDefaults from './i18n';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
 import { eachComponent } from './utils/formUtils';
 // Initialize the available forms.
 Formio.forms = {};
@@ -657,7 +657,7 @@ export default class Webform extends NestedDataComponent {
         const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
             this.emit('formLoad', form);
-            this.triggerRecaptcha();
+            this.triggerCaptcha();
             // Make sure to trigger onChange after a render event occurs to speed up form rendering.
             setTimeout(() => {
                 this.onChange(flags);
@@ -791,7 +791,8 @@ export default class Webform extends NestedDataComponent {
         formio.loadSubmissions({
             params: {
                 state: 'draft',
-                owner: userId
+                owner: userId,
+                sort: '-created'
             }
         }).then(submissions => {
             if (submissions.length > 0 && !this.options.skipDraftRestore) {
@@ -834,7 +835,9 @@ export default class Webform extends NestedDataComponent {
             };
         }
         // Metadata needs to be available before setValue
-        this._submission.metadata = submission.metadata || {};
+        this._submission.metadata = submission.metadata
+            ? _.cloneDeep(submission.metadata)
+            : {};
         this.editing = !!submission._id;
         // Set the timezone in the options if available.
         if (!this.options.submissionTimezone &&
@@ -1489,16 +1492,18 @@ export default class Webform extends NestedDataComponent {
             return console.warn('You should add a URL to this button.');
         }
     }
-    triggerRecaptcha() {
+    triggerCaptcha() {
         if (!this || !this.components) {
             return;
         }
-        const recaptchaComponent = searchComponents(this.components, {
-            'component.type': 'recaptcha',
-            'component.eventType': 'formLoad'
+        const captchaComponent = [];
+        eachComponent(this.components, (component) => {
+            if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
+                captchaComponent.push(component);
+            }
         });
-        if (recaptchaComponent.length > 0) {
-            recaptchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+        if (captchaComponent.length > 0) {
+            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
         }
     }
     set nosubmit(value) {

package/lib/mjs/WebformBuilder.d.ts

@@ -72,7 +72,7 @@ export default class WebformBuilder extends Component {
     onDrop(element: any, target: any, source: any, sibling: any): any;
     setForm(form: any): any;
     keyboardActionsEnabled: any;
-    populateRecaptchaSettings(form: any): void;
+    populateCaptchaSettings(form: any): void;
     removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;

package/lib/mjs/WebformBuilder.js

@@ -472,7 +472,7 @@ export default class WebformBuilder extends Component {
     }
     attach(element) {
         this.on('change', (form) => {
-            this.populateRecaptchaSettings(form);
+            this.populateCaptchaSettings(form);
             this.webform.setAlert(false);
         });
         return super.attach(element).then(() => {
@@ -923,24 +923,24 @@ export default class WebformBuilder extends Component {
         }
         return Promise.resolve(form);
     }
-    populateRecaptchaSettings(form) {
-        //populate isEnabled for recaptcha form settings
-        let isRecaptchaEnabled = false;
+    populateCaptchaSettings(form) {
+        //populate isEnabled for captcha form settings
+        let isCaptchaEnabled = false;
         if (this.form.components) {
             eachComponent(form.components, component => {
-                if (isRecaptchaEnabled) {
+                if (isCaptchaEnabled) {
                     return;
                 }
-                if (component.type === 'recaptcha') {
-                    isRecaptchaEnabled = true;
+                if (component.type === 'captcha') {
+                    isCaptchaEnabled = true;
                     return false;
                 }
             });
-            if (isRecaptchaEnabled) {
-                _.set(form, 'settings.recaptcha.isEnabled', true);
+            if (isCaptchaEnabled) {
+                _.set(form, 'settings.captcha.isEnabled', true);
             }
-            else if (_.get(form, 'settings.recaptcha.isEnabled')) {
-                _.set(form, 'settings.recaptcha.isEnabled', false);
+            else if (_.get(form, 'settings.captcha.isEnabled')) {
+                _.set(form, 'settings.captcha.isEnabled', false);
             }
         }
     }
@@ -970,8 +970,14 @@ export default class WebformBuilder extends Component {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            if (component.input && componentInstance && componentInstance.parent) {
-                _.unset(componentInstance._data, componentInstance.key);
+            if (component.input && componentInstance && parent.formioComponent) {
+                const parentDefaultValue = _.get(parent.formioComponent, 'component.defaultValue', null);
+                if (Array.isArray(parentDefaultValue)) {
+                    parentDefaultValue.forEach(v => _.unset(v, componentInstance.key));
+                }
+                else if (typeof parentDefaultValue === 'object') {
+                    _.unset(parentDefaultValue, componentInstance.key);
+                }
             }
             const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {
@@ -1104,14 +1110,10 @@ export default class WebformBuilder extends Component {
         let hasInvalidComponents = false;
         this.webform.everyComponent((comp) => {
             const path = comp.path;
-            const errors = comp.visibleErrors || [];
             if (repeatablePaths.includes(path)) {
-                comp.setCustomValidity(`API Key is not unique: ${comp.key}`);
+                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
-            else if (errors.length && errors[0].message?.startsWith('API Key is not unique')) {
-                comp.setCustomValidity('');
-            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -492,10 +492,12 @@ declare class Component extends Element {
     /**
      * Add a new input error to this element.
      *
-     * @param message
-     * @param dirty
+     * @param {{level: string, message: string}[]} messages
      */
-    addMessages(messages: any): void;
+    addMessages(messages: {
+        level: string;
+        message: string;
+    }[]): void;
     setErrorClasses(elements: any, dirty: any, hasErrors: any, hasMessages: any, element?: any): void;
     setElementInvalid(element: any, invalid: any): void;
     clearOnHide(): void;

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

@@ -1795,8 +1795,7 @@ export default class Component extends Element {
     /**
      * Add a new input error to this element.
      *
-     * @param message
-     * @param dirty
+     * @param {{level: string, message: string}[]} messages
      */
     addMessages(messages) {
         if (!messages) {
@@ -1815,9 +1814,6 @@ export default class Component extends Element {
         messages = _.uniqBy(messages, message => message.message);
         if (this.refs.messageContainer) {
             this.setContent(this.refs.messageContainer, messages.map((message) => {
-                if (message.message && typeof message.message === 'string') {
-                    message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-                }
                 return this.renderTemplate('message', { ...message });
             }).join(''));
         }
@@ -2531,7 +2527,7 @@ export default class Component extends Element {
         }
         this.calculatedValue = fastCloneDeep(calculatedValue);
         if (changed) {
-            if (!flags.noPristineChangeOnModified) {
+            if (!flags.noPristineChangeOnModified && this.root.initialized) {
                 this.pristine = false;
             }
             flags.triggeredComponentId = this.id;

package/lib/mjs/components/button/Button.d.ts

@@ -40,6 +40,6 @@ export default class ButtonComponent extends Field {
     openOauth(settings: any): void;
     get oauthComponentPath(): any;
     focus(): void;
-    triggerReCaptcha(): void;
+    triggerCaptcha(): void;
 }
 import Field from '../_classes/field/Field';

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

@@ -262,7 +262,7 @@ export default class ButtonComponent extends Field {
         super.detach();
     }
     onClick(event) {
-        this.triggerReCaptcha();
+        this.triggerCaptcha();
         // Don't click if disabled or in builder mode.
         if (this.disabled || this.options.attachMode === 'builder') {
             return;
@@ -448,20 +448,20 @@ export default class ButtonComponent extends Field {
             this.refs.button.focus();
         }
     }
-    triggerReCaptcha() {
+    triggerCaptcha() {
         if (!this.root) {
             return;
         }
-        let recaptchaComponent;
+        let captchaComponent;
         this.root.everyComponent((component) => {
-            if (component.component.type === 'recaptcha' &&
+            if (/^(re)?captcha$/.test(component.component.type) &&
                 component.component.eventType === 'buttonClick' &&
                 component.component.buttonKey === this.component.key) {
-                recaptchaComponent = component;
+                captchaComponent = component;
             }
         });
-        if (recaptchaComponent) {
-            recaptchaComponent.verify(`${this.component.key}Click`);
+        if (captchaComponent) {
+            captchaComponent.verify(`${this.component.key}Click`);
         }
     }
 }

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

@@ -620,9 +620,10 @@ export default class FormComponent extends Component {
             && submission._id
             && this.subForm.formio
             && _.isEmpty(submission.data);
-        if (shouldLoadSubmissionById) {
+        const shouldLoadDraftById = this.options.saveDraft && _.isEmpty(submission.data) && _.get(this.subForm, 'submission._id');
+        if (shouldLoadSubmissionById || shouldLoadDraftById) {
             const formId = submission.form || this.formObj.form || this.component.form;
-            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
+            const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id || this.subForm.submission._id}`;
             const options = this.root.formio?.base && this.root.formio?.projectUrl
                 ? {
                     base: this.root.formio.base,

package/lib/mjs/components/recaptcha/ReCaptcha.d.ts

@@ -1,12 +1,5 @@
 export default class ReCaptchaComponent extends Component {
-    static get builderInfo(): {
-        title: string;
-        group: string;
-        icon: string;
-        documentation: string;
-        weight: number;
-        schema: any;
-    };
+    static get builderInfo(): {};
     static savedValueTypes(): never[];
     render(): any;
     recaptchaResult: any;

package/lib/mjs/components/recaptcha/ReCaptcha.form.d.ts

@@ -1,3 +1,3 @@
-export default function _default(): {
+export default function _default(...extend: any[]): {
     components: any;
 };

package/lib/mjs/components/recaptcha/ReCaptcha.form.js

@@ -1,6 +1,6 @@
 import Components from '../Components';
 import ReCaptchaEditDisplay from './editForm/ReCaptcha.edit.display';
-export default function () {
+export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
@@ -22,5 +22,5 @@ export default function () {
             key: 'logic',
             ignore: true
         },
-    ]);
+    ], ...extend);
 }

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -12,14 +12,7 @@ export default class ReCaptchaComponent extends Component {
         }, ...extend);
     }
     static get builderInfo() {
-        return {
-            title: 'reCAPTCHA',
-            group: 'premium',
-            icon: 'refresh',
-            documentation: '/userguide/form-building/premium-components#recaptcha',
-            weight: 40,
-            schema: ReCaptchaComponent.schema()
-        };
+        return {};
     }
     static savedValueTypes() {
         return [];

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.d.ts

@@ -1,4 +1,21 @@
 declare const _default: ({
+    key: string;
+    weight: number;
+    type: string;
+    tag: string;
+    className: string;
+    content: string;
+    label?: undefined;
+    tooltip?: undefined;
+    values?: undefined;
+    validate?: undefined;
+    input?: undefined;
+    dataSrc?: undefined;
+    valueProperty?: undefined;
+    customConditional?: undefined;
+    data?: undefined;
+    ignore?: undefined;
+} | {
     key: string;
     label: string;
     tooltip: string;
@@ -11,6 +28,9 @@ declare const _default: ({
         required: boolean;
     };
     weight: number;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     input?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -30,18 +50,24 @@ declare const _default: ({
     data: {
         custom(context: any): any[];
     };
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     values?: undefined;
     validate?: undefined;
     ignore?: undefined;
 } | {
     key: string;
     ignore: boolean;
+    weight?: undefined;
+    type?: undefined;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    type?: undefined;
     values?: undefined;
     validate?: undefined;
-    weight?: undefined;
     input?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -1,9 +1,17 @@
 import { getContextButtons } from '../../../utils/utils';
 export default [
+    {
+        key: 'recaptchaInfo',
+        weight: -10,
+        type: 'htmlelement',
+        tag: 'div',
+        className: 'alert alert-danger',
+        content: 'This component has been deprecated and will be removed. Use the CAPTCHA component instead.',
+    },
     {
         key: 'eventType',
         label: 'Type of event',
-        tooltip: 'Specify type of event that this reCAPTCHA would react to',
+        tooltip: 'Specify type of event that this CAPTCHA would react to. If Button Click is selected, then the CAPTCHA widget will be displayed and verification will occur after clicking on the button.',
         type: 'radio',
         values: [
             {
@@ -27,7 +35,7 @@ export default [
         key: 'buttonKey',
         dataSrc: 'custom',
         valueProperty: 'value',
-        tooltip: 'Specify key of button on this form that this reCAPTCHA should react to',
+        tooltip: 'Specify key of button on this form that this CAPTCHA should react to',
         weight: 660,
         customConditional(context) {
             return context.data.eventType === 'buttonClick';

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

@@ -3,7 +3,7 @@ import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -1551,7 +1551,7 @@ export default class SelectComponent extends ListComponent {
         const getTemplateValue = (v) => {
             const itemTemplate = this.itemTemplate(v);
             return options.csv && itemTemplate
-                ? unescapeHTML(itemTemplate)
+                ? removeHTML(itemTemplate)
                 : itemTemplate;
         };
         if (Array.isArray(value)) {

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -1,14 +1,28 @@
 import _ from 'lodash';
 import { eachComponent } from '../../../utils/utils';
-const calculateSelectData = (context) => {
+const calculateSingleSelectData = (context, defaultValue) => {
     const { instance, data } = context;
-    const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === instance.getValue());
+    const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === defaultValue);
     const options = { data: {}, noeval: true };
     instance.interpolate(data.template, {
         item: rawDefaultValue,
     }, options);
     return options.data.item;
 };
+const calculateSelectData = (context) => {
+    const { instance } = context;
+    const defaultValue = instance.getValue();
+    if (instance.component.multiple) {
+        const multiSelectData = {};
+        (defaultValue ?? []).forEach((defaultValueItem) => {
+            multiSelectData[defaultValueItem] = calculateSingleSelectData(context, defaultValueItem);
+        });
+        return multiSelectData;
+    }
+    else {
+        return calculateSingleSelectData(context, defaultValue);
+    }
+};
 const setSelectData = (context) => {
     // Wait before downloadedResources will be set
     setTimeout(() => {

package/lib/mjs/components/select/fixtures/comp22.js

@@ -6,7 +6,7 @@ export default {
     display: 'form',
     components: [{
             label: 'Select',
-            widget: 'choicesjs',
+            widget: 'html5',
             tableView: true,
             dataSrc: 'url',
             data: {