@formio/js 5.0.0-rc.57 → 5.0.0-rc.59

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

@@ -6,7 +6,7 @@ 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, getComponentPath, isInsideScopingComponent, currentTimezone } from '../../../utils/utils';
+import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone, getScriptPlugin } from '../../../utils/utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -3463,7 +3463,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             }.bind(Component.externalLibraries[name]);
         }
         // See if the plugin already exists.
-        const plugin = _.get(window, property);
+        const plugin = getScriptPlugin(property);
         if (plugin) {
             Component.externalLibraries[name].resolve(plugin);
         }
@@ -3506,7 +3506,7 @@ Component.requireLibrary = function (name, property, src, polling) {
             // if no callback is provided, then check periodically for the script.
             if (polling) {
                 setTimeout(function checkLibrary() {
-                    const plugin = _.get(window, property);
+                    const plugin = getScriptPlugin(property);
                     if (plugin) {
                         Component.externalLibraries[name].resolve(plugin);
                     }

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

@@ -31,6 +31,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

@@ -267,7 +267,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;
@@ -453,20 +453,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/radio/Radio.d.ts

@@ -48,7 +48,7 @@ export default class RadioComponent extends ListComponent {
     detach(element: any): void;
     validateValueProperty(): boolean;
     validateValueAvailability(setting: any, value: any): boolean;
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;

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

@@ -226,17 +226,19 @@ export default class RadioComponent extends ListComponent {
         }
         return false;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (_.isObject(value)) {
             value = JSON.stringify(value);
         }
         else if (!_.isString(value)) {
             value = _.toString(value);
         }
-        if (this.component.dataSrc !== 'values') {
+        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
+        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
             return value;
         }
-        const option = _.find(this.component.values, (v) => v.value === value);
+        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
+        const option = _.find(values, (v) => v.value === value);
         if (!value) {
             return _.get(option, 'label', '');
         }

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(): string;
     recaptchaResult: any;

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

@@ -1,5 +1,6 @@
 /**
  * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
  * @returns {import('@formio/core').Component[]} - The edit form components.
  */
-export default function _default(): import('@formio/core').Component[];
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -2,9 +2,10 @@ import Components from '../Components';
 import ReCaptchaEditDisplay from './editForm/ReCaptcha.edit.display';
 /**
  * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
  * @returns {import('@formio/core').Component[]} - The edit form components.
  */
-export default function () {
+export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
@@ -26,5 +27,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;
@@ -7,7 +24,13 @@ declare const _default: ({
         label: string;
         value: string;
     }[];
+    validate: {
+        required: boolean;
+    };
     weight: number;
+    tag?: undefined;
+    className?: undefined;
+    content?: undefined;
     input?: undefined;
     dataSrc?: undefined;
     valueProperty?: undefined;
@@ -27,16 +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;
-    weight?: undefined;
+    validate?: 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: [
             {
@@ -15,6 +23,9 @@ export default [
                 value: 'buttonClick'
             }
         ],
+        validate: {
+            required: true
+        },
         weight: 650
     },
     {
@@ -24,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

@@ -226,9 +226,10 @@ export default class SelectComponent extends ListComponent {
     }
     selectValueAndLabel(data) {
         const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
         return {
             value,
-            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
         };
     }
     itemTemplate(data, value) {
@@ -1492,6 +1493,10 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
+        if (options.modalPreview && this.selectData) {
+            const { label } = this.selectValueAndLabel(value);
+            return label;
+        }
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
             if (valueProperty) {

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: {

package/lib/mjs/components/select/fixtures/comp23.d.ts

@@ -0,0 +1,58 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        dataSrc: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        multiple: boolean;
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string[];
+        selectValues: string;
+        disableLimit: boolean;
+        noRefreshOnScroll: boolean;
+        selectData: {
+            value1: {
+                label: string;
+            };
+            value3: {
+                label: string;
+            };
+        };
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        multiple?: undefined;
+        valueProperty?: undefined;
+        validateWhenHidden?: undefined;
+        defaultValue?: undefined;
+        selectValues?: undefined;
+        disableLimit?: undefined;
+        noRefreshOnScroll?: undefined;
+        selectData?: undefined;
+    })[];
+}
+export default _default;

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

@@ -0,0 +1,47 @@
+export default {
+    title: 'FIO-8281',
+    name: 'fio8281',
+    path: 'fio8281',
+    type: 'form',
+    display: 'form',
+    components: [{
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'url',
+            data: {
+                url: 'https://fake_url.com',
+                headers: [
+                    {
+                        key: '',
+                        value: ''
+                    },
+                ],
+            },
+            multiple: true,
+            valueProperty: 'value',
+            validateWhenHidden: false,
+            key: 'select',
+            type: 'select',
+            input: true,
+            defaultValue: ['value1', 'value3'],
+            selectValues: 'data',
+            disableLimit: false,
+            noRefreshOnScroll: false,
+            selectData: {
+                value1: {
+                    label: 'Label 1',
+                },
+                value3: {
+                    label: 'Label 3',
+                },
+            },
+        }, {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        }]
+};

package/lib/mjs/components/select/fixtures/comp24.d.ts

@@ -0,0 +1,47 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        widget: string;
+        tableView: boolean;
+        dataSrc: string;
+        data: {
+            resource: string;
+        };
+        template: string;
+        validate: {
+            select: boolean;
+        };
+        key: string;
+        type: string;
+        searchField: string;
+        input: boolean;
+        noRefreshOnScroll: boolean;
+        addResource: boolean;
+        reference: boolean;
+        valueProperty: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        template?: undefined;
+        validate?: undefined;
+        searchField?: undefined;
+        noRefreshOnScroll?: undefined;
+        addResource?: undefined;
+        reference?: undefined;
+        valueProperty?: undefined;
+    })[];
+}
+export default _default;

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

@@ -0,0 +1,38 @@
+export 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/mjs/components/select/fixtures/index.d.ts

@@ -19,5 +19,7 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './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/mjs/components/select/fixtures/index.js

@@ -20,4 +20,6 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './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 };

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -160,11 +160,14 @@ export default class SelectBoxesComponent extends RadioComponent {
         }
         return changed;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (!value) {
             return '';
         }
         if (this.isSelectURL) {
+            if (options.modalPreview && this.loadedOptions) {
+                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+            }
             return _(value).pickBy((val) => val).keys().join(', ');
         }
         return _(this.component.values || [])

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

@@ -71,4 +71,5 @@ export 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/mjs/utils/utils.d.ts

@@ -31,6 +31,12 @@ export function getElementRect(element: HTMLElement): {
     width: number;
     height: number;
 };
+/**
+ * Get non HTMLElement property in the window object
+ * @param {string} property - The window property to fetch the script plugin from.
+ * @returns {any | undefined} - The HTML Element property on the window object.
+ */
+export function getScriptPlugin(property: string): any | undefined;
 /**
  * Determines the boolean value of a setting.
  * @param {string|boolean} value - A string or boolean value to convert to boolean.

package/lib/mjs/utils/utils.js

@@ -85,6 +85,19 @@ export function getElementRect(element) {
         height: getPropertyValue(style, 'height')
     };
 }
+/**
+ * Get non HTMLElement property in the window object
+ * @param {string} property - The window property to fetch the script plugin from.
+ * @returns {any | undefined} - The HTML Element property on the window object.
+ */
+export function getScriptPlugin(property) {
+    const obj = window[property];
+    if (typeof HTMLElement === 'object' ? obj instanceof HTMLElement : //DOM2
+        obj && typeof obj === 'object' && true && obj.nodeType === 1 && typeof obj.nodeName === 'string') {
+        return undefined;
+    }
+    return obj;
+}
 /**
  * Determines the boolean value of a setting.
  * @param {string|boolean} value - A string or boolean value to convert to boolean.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-rc.57",
+  "version": "5.0.0-rc.59",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -79,9 +79,9 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "^3.0.0-rc.24",
+    "@formio/bootstrap": "^3.0.0-rc.25",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "^2.1.0-dev.tt.12",
+    "@formio/core": "^2.1.0-dev.tt.13",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
@@ -119,7 +119,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
-    "ace-builds": "1.33.2",
+    "ace-builds": "1.34.2",
     "async-limiter": "^2.0.0",
     "bootstrap-icons": "^1.10.5",
     "bootswatch": "^5.3.3",