@formio/js 5.5.1 → 5.6.0

package/lib/cjs/providers/address/GoogleAddressProvider.js

@@ -1,4 +1,24 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,6 +31,7 @@ const AddressProvider_1 = require("./AddressProvider");
 const GOOGLE_MAPS_BASE_URL = 'https://maps.googleapis.com';
 const GOOGLE_MAPS_JS_URL = `${GOOGLE_MAPS_BASE_URL}/maps/api/js`;
 const GOOGLE_MAPS_JS_WITH_PARAMS_URL = `${GOOGLE_MAPS_JS_URL}?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback`;
+const NEW_PLACES_API_VERSION = 'newPlacesApi';
 /**
  * @typedef {object} AutocompleteOptions
  * @property {string[]} fields - The fields to include in the autocomplete response.
@@ -78,6 +99,19 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
     get alternativeDisplayValueProperty() {
         return 'formatted_address';
     }
+    /**
+     * @returns {string} The property to use for display value on places returned by the new Places API.
+     */
+    get newApiDisplayValueProperty() {
+        return 'formattedAddress';
+    }
+    /**
+     * @returns {boolean} Whether the provider is configured to use the new Places API.
+     */
+    get usesNewPlacesApi() {
+        var _a;
+        return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.version) === NEW_PLACES_API_VERSION;
+    }
     /**
      * @param {AutocompleteOptions} options - The autocomplete options.
      */
@@ -95,10 +129,11 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
   
      */
     setAutocompleteOptions() {
-        let options = lodash_1.default.get(this.options, 'autocompleteOptions', {});
-        if (!lodash_1.default.isObject(options)) {
-            options = {};
-        }
+        // Clone so the stored provider options are never mutated: the required fields
+        // differ per Places API version, and stale fields from a previous computation
+        // must not leak into the next one (FIO-10428).
+        const storedOptions = lodash_1.default.get(this.options, 'autocompleteOptions', {});
+        const options = lodash_1.default.isObject(storedOptions) ? lodash_1.default.cloneDeep(storedOptions) : {};
         this.addRequiredProviderOptions(options);
         this.autocompleteOptions = options;
     }
@@ -138,14 +173,9 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
      * @returns {string[]} The required address properties.
      */
     getRequiredAddressProperties() {
-        return [
-            'address_components',
-            'formatted_address',
-            'geometry',
-            'place_id',
-            'plus_code',
-            'types',
-        ];
+        return this.usesNewPlacesApi
+            ? ['addressComponents', 'formattedAddress', 'location', 'viewport', 'id', 'plusCode', 'types']
+            : ['address_components', 'formatted_address', 'geometry', 'place_id', 'plus_code', 'types'];
     }
     /**
      * Adds the required provider options to the options.
@@ -174,25 +204,77 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
         }
         return filteredPlace;
     }
-    attachAutocomplete(elem, index, onSelectAddress) {
+    attachAutocomplete(elem, index, onSelectAddress, disable = false) {
+        if (disable) {
+            return Promise.resolve();
+        }
         return Formio_1.Formio.libraryReady(this.getLibraryName()).then(() => {
-            const autocomplete = new google.maps.places.Autocomplete(elem, this.autocompleteOptions);
-            const listener = autocomplete.addListener('place_changed', () => {
-                const place = this.filterPlace(autocomplete.getPlace());
-                place.formattedPlace = lodash_1.default.get(autocomplete, 'gm_accessors_.place.se.formattedPrediction', place[this.alternativeDisplayValueProperty]);
-                onSelectAddress(place, elem, index);
+            this.setAutocompleteOptions();
+            if (!this.usesNewPlacesApi) {
+                const autocomplete = new google.maps.places.Autocomplete(elem, this.autocompleteOptions);
+                const listener = autocomplete.addListener('place_changed', () => {
+                    const place = this.filterPlace(autocomplete.getPlace());
+                    place.formattedPlace = lodash_1.default.get(autocomplete, 'gm_accessors_.place.se.formattedPrediction', place[this.alternativeDisplayValueProperty]);
+                    onSelectAddress(place, elem, index);
+                });
+                return () => {
+                    var _a;
+                    if ((_a = google === null || google === void 0 ? void 0 : google.maps) === null || _a === void 0 ? void 0 : _a.event) {
+                        google.maps.event.clearInstanceListeners(autocomplete);
+                        google.maps.event.removeListener(listener);
+                    }
+                    document.querySelectorAll('.pac-container').forEach((node) => {
+                        if (node.parentNode) {
+                            node.parentNode.removeChild(node);
+                        }
+                    });
+                };
+            }
+            const _a = this.autocompleteOptions, { fields, componentRestrictions } = _a, elementOptions = __rest(_a, ["fields", "componentRestrictions"]);
+            const country = componentRestrictions === null || componentRestrictions === void 0 ? void 0 : componentRestrictions.country;
+            if (country) {
+                // The new element spells legacy componentRestrictions.country as includedRegionCodes.
+                elementOptions.includedRegionCodes = lodash_1.default.castArray(country);
+            }
+            elementOptions.noInputIcon = true;
+            const autocomplete = new google.maps.places.PlaceAutocompleteElement(elementOptions);
+            if (elem === null || elem === void 0 ? void 0 : elem.value) {
+                autocomplete.value = elem.value;
+            }
+            autocomplete.classList.add('form-control');
+            // Replace the existing element with the autocomplete element
+            elem.parentNode.replaceChildren(autocomplete);
+            const handlePlaceSelect = (event) => __awaiter(this, void 0, void 0, function* () {
+                var _b, _c;
+                let selectedPlace;
+                try {
+                    const place = event.placePrediction.toPlace();
+                    yield place.fetchFields({
+                        fields: fields || this.getRequiredAddressProperties(),
+                    });
+                    const convertedPlace = {
+                        addressComponents: place.addressComponents || [],
+                        formattedAddress: place.formattedAddress || '',
+                        location: place.location || {},
+                        viewport: place.viewport || {},
+                        id: place.id || '',
+                        plusCode: place.plusCode || {},
+                        types: place.types || [],
+                    };
+                    selectedPlace = this.filterPlace(convertedPlace);
+                    selectedPlace.formattedPlace = convertedPlace.formattedAddress;
+                }
+                catch (err) {
+                    // fetchFields rejections are otherwise swallowed by the Maps event
+                    // dispatcher; never let a failed details request drop the selection.
+                    console.warn(`Unable to fetch the selected place's details: ${err}`);
+                    selectedPlace = { formattedPlace: String((_c = (_b = event.placePrediction) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c : '') };
+                }
+                onSelectAddress(selectedPlace, elem, index);
             });
+            autocomplete.addEventListener('gmp-select', handlePlaceSelect);
             return () => {
-                var _a;
-                if ((_a = google === null || google === void 0 ? void 0 : google.maps) === null || _a === void 0 ? void 0 : _a.event) {
-                    google.maps.event.clearInstanceListeners(autocomplete);
-                    google.maps.event.removeListener(listener);
-                }
-                document.querySelectorAll('.pac-container').forEach((node) => {
-                    if (node.parentNode) {
-                        node.parentNode.removeChild(node);
-                    }
-                });
+                autocomplete.removeEventListener('gmp-select', handlePlaceSelect);
             };
         });
     }
@@ -203,10 +285,12 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
         return Promise.resolve();
     }
     getDisplayValue(address) {
-        const displayedProperty = lodash_1.default.has(address, this.displayValueProperty)
-            ? this.displayValueProperty
-            : this.alternativeDisplayValueProperty;
-        return lodash_1.default.get(address, displayedProperty, '');
+        const displayedProperty = [
+            this.displayValueProperty,
+            this.alternativeDisplayValueProperty,
+            this.newApiDisplayValueProperty,
+        ].find((property) => lodash_1.default.has(address, property));
+        return displayedProperty ? lodash_1.default.get(address, displayedProperty, '') : '';
     }
     /**
      * Tries to remove the library if api key for loaded script is different.

package/lib/cjs/providers/storage/indexeddb.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const uuid_1 = require("uuid");
+const utils_1 = require("../../utils/utils");
 /**
  * indexedDb provider for file storage.
  * @returns {import('./typedefs').FileProvider} The FileProvider interface defined in index.js.
@@ -29,7 +29,7 @@ function indexeddb() {
                 return new Promise((resolve, reject) => {
                     reader.onload = () => {
                         const blobObject = new Blob([file], { type: file.type });
-                        const id = (0, uuid_1.v4)(blobObject);
+                        const id = (0, utils_1.guid)();
                         const data = {
                             id,
                             data: blobObject,

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

@@ -163,11 +163,6 @@ export function convertStringToHTMLElement(str: string, selector: string): HTMLE
  * @returns {string} - A unique filename.
  */
 export function uniqueName(name: string, template: string, evalContext: object): string;
-/**
- * Returns a GUID
- * @returns {string} - A GUID.
- */
-export function guid(): string;
 /**
  * Return a translated date setting.
  * @param {string|Date} date - The date to translate.
@@ -520,6 +515,7 @@ export function announceScreenReaderMessage(component: any, value: any, index?:
  * @param {string} text The text to output to screen readers
  */
 export function screenReaderSpeech(text: string): void;
+export { guid };
 /**
  * Map values through unfold and return first non-nil value.
  * @param {Array<T>} collection - The collection to map through unfold.;
@@ -536,3 +532,4 @@ export namespace componentValueTypes {
     let any: string;
 }
 export function interpolateErrors(component: Component, errors: FieldError[], interpolateFn: Function): [];
+import { guid } from './formUtils';

package/lib/cjs/utils/utils.js

@@ -10,6 +10,7 @@ const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezo
 const jstimezonedetect_1 = __importDefault(require("jstimezonedetect"));
 const dompurify_1 = __importDefault(require("dompurify"));
 const formUtils_1 = require("./formUtils");
+Object.defineProperty(exports, "guid", { enumerable: true, get: function () { return formUtils_1.guid; } });
 const Evaluator_1 = require("./Evaluator");
 const conditionOperators_1 = __importDefault(require("./conditionOperators"));
 const core_1 = require("@formio/core");
@@ -551,25 +552,13 @@ function uniqueName(name, template, evalContext) {
     fileName = fileName.substr(0, 100);
     evalContext = Object.assign(evalContext || {}, {
         fileName,
-        guid: guid(),
+        guid: (0, formUtils_1.guid)(),
     });
     //only letters, numbers, dots, dashes, underscores and spaces are allowed. Anything else will be replaced with dash
     const uniqueName = `${Evaluator_1.Evaluator.interpolate(template, evalContext)}${extension}`.replace(/[^0-9a-zA-Z.\-_ ]/g, '-');
     return uniqueName;
 }
 exports.uniqueName = uniqueName;
-/**
- * Returns a GUID
- * @returns {string} - A GUID.
- */
-function guid() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = (Math.random() * 16) | 0;
-        const v = c === 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-}
-exports.guid = guid;
 /**
  * Return a translated date setting.
  * @param {string|Date} date - The date to translate.

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.5.1';
+    static version = '5.6.0';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {

package/lib/mjs/Formio.js

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = '5.5.1';
+FormioCore.version = '5.6.0';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/mjs/PDF.js

@@ -194,6 +194,10 @@ export default class PDF extends Webform {
         if (this.builderMode) {
             params.push('builder=1');
         }
+        const parentIconset = this.options.iconset || Formio.Templates?.current?.defaultIconset;
+        if (parentIconset && parentIconset !== 'bi') {
+            params.push(`iconset=${encodeURIComponent(parentIconset)}`);
+        }
         if (params.length) {
             iframeSrc += `?${params.join('&')}`;
         }

package/lib/mjs/Wizard.d.ts

@@ -60,6 +60,11 @@ declare class Wizard extends Webform {
      */
     handleSaveOnEnter(event: KeyboardEvent): void;
     attachNav(): void;
+    /**
+     * Renders the submission result message under the navigation submit button, mirroring the
+     * behavior of the Button components.
+     */
+    attachSubmitMessage(): void;
     /**
      * Emits an event indicating that a wizard page has been selected.
      * @param {number} index - Index of the selected wizard page in the `pages` array.

package/lib/mjs/Wizard.js

@@ -214,6 +214,8 @@ export default class Wizard extends Webform {
                     [`${this.wizardKey}-previous`]: 'single',
                     [`${this.wizardKey}-next`]: 'single',
                     [`${this.wizardKey}-submit`]: 'single',
+                    [`${this.wizardKey}-buttonMessageContainer`]: 'single',
+                    [`${this.wizardKey}-buttonMessage`]: 'single',
                 });
                 this.attachNav();
             }
@@ -250,6 +252,8 @@ export default class Wizard extends Webform {
             [`${this.wizardKey}-previous`]: 'single',
             [`${this.wizardKey}-next`]: 'single',
             [`${this.wizardKey}-submit`]: 'single',
+            [`${this.wizardKey}-buttonMessageContainer`]: 'single',
+            [`${this.wizardKey}-buttonMessage`]: 'single',
             [`${this.wizardKey}-link`]: 'multiple',
             [`${this.wizardKey}-tooltip`]: 'multiple',
         });
@@ -264,6 +268,7 @@ export default class Wizard extends Webform {
         ]);
         this.attachNav();
         this.attachHeader();
+        this.attachSubmitMessage();
         return promises.then(() => {
             this.emit('render', { component: this.currentPage, page: this.page });
             if (this.component.scrollToTop) {
@@ -360,6 +365,23 @@ export default class Wizard extends Webform {
             });
         });
     }
+    /**
+     * Renders the submission result message under the navigation submit button, mirroring the
+     * behavior of the Button components.
+     */
+    attachSubmitMessage() {
+        this.on('submitDone', (message) => {
+            const messageContainer = this.refs[`${this.wizardKey}-buttonMessageContainer`];
+            const messageElement = this.refs[`${this.wizardKey}-buttonMessage`];
+            if (!messageElement) {
+                return;
+            }
+            const resultMessage = _.isString(message) ? message : this.t('complete');
+            this.addClass(messageContainer, 'has-success');
+            this.removeClass(messageContainer, 'has-error');
+            this.setContent(messageElement, resultMessage);
+        }, true);
+    }
     /**
      * Emits an event indicating that a wizard page has been selected.
      * @param {number} index - Index of the selected wizard page in the `pages` array.

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

@@ -924,7 +924,7 @@ export default class Component extends Element {
             return '';
         }
         // Use _userInput: true to ignore translations from defaults
-        if (text in enTranslation && params._userInput) {
+        if (this.i18next?.language === 'en' && text in enTranslation && params._userInput) {
             return text;
         }
         params.data = params.data || this.rootValue;

package/lib/mjs/components/address/Address.js

@@ -414,8 +414,12 @@ export default class AddressComponent extends ContainerComponent {
         this.searchInput.forEach((element, index) => {
             if (!this.builderMode && element && this.provider) {
                 if (this.component.provider === 'google') {
+                    if (this.component.enableNewPlacesApi) {
+                        this.provider.options.version = 'newPlacesApi';
+                    }
                     this.googlePlacesCleanups = [];
-                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this))
+                    this.provider
+                        .attachAutocomplete(element, index, this.onSelectAddress.bind(this), this.disabled)
                         .then((cleanup) => {
                         if (typeof cleanup === 'function') {
                             this.googlePlacesCleanups.push(cleanup);
@@ -516,7 +520,6 @@ export default class AddressComponent extends ContainerComponent {
         if (this.autocompleterWidget && typeof this.autocompleterWidget.destroy === 'function') {
             this.autocompleterWidget.destroy();
         }
-        ;
         (this.googlePlacesCleanups || []).forEach((cleanup) => {
             cleanup();
         });

package/lib/mjs/components/address/editForm/Address.edit.provider.d.ts

@@ -118,6 +118,30 @@ declare const _default: ({
     validate?: undefined;
     defaultValue?: undefined;
     description?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+        };
+    };
+    placeholder?: undefined;
+    valueProperty?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    validate?: undefined;
+    defaultValue?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    description?: undefined;
 } | {
     type: string;
     input: boolean;

package/lib/mjs/components/address/editForm/Address.edit.provider.js

@@ -136,6 +136,19 @@ export default [
             },
         },
     },
+    {
+        weight: 10,
+        type: 'checkbox',
+        input: true,
+        key: 'enableNewPlacesApi',
+        label: 'Places API (New)',
+        tooltip: 'Enable the new Google Places API instead of the legacy version.',
+        conditional: {
+            json: {
+                '===': [{ var: 'data.provider' }, 'google'],
+            },
+        },
+    },
     {
         type: 'textarea',
         input: true,

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

@@ -539,10 +539,11 @@ export default class DataGridComponent extends NestedArrayComponent {
                     }, modified);
                     this.triggerRootChange(flags, changed, modified);
                 }
+                const rowData = this.dataValue[rowIndex];
                 this.processRow('checkData', null, {
                     ...flags,
                     changed,
-                }, row, _.toArray(this.rows[rowIndex]));
+                }, rowData, _.toArray(this.rows[rowIndex]));
             };
             let columnComponent;
             if (this.builderMode) {

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

@@ -92,6 +92,11 @@ export default class FileComponent extends Field {
         this.abortUploads = [];
         this.pendingfiles = [];
         this.resolvedFiles = [];
+        const imageSize = Number(this.component.imageSize);
+        const isValidImageSize = imageSize > 0;
+        if (!isValidImageSize) {
+            this.component.imageSize = '200';
+        }
     }
     get dataReady() {
         return this.filesReady || Promise.resolve();
@@ -635,7 +640,7 @@ export default class FileComponent extends Field {
             fileKey: this.component.fileKey || 'file',
             storage: this.component.storage,
             options: this.component.storage === 'url'
-                ? (this.component.urlRequestOptions || this.component.options)
+                ? this.component.urlRequestOptions || this.component.options
                 : this.component.options,
             file,
             size: file.size,
@@ -668,7 +673,9 @@ export default class FileComponent extends Field {
         return fileWithSameNameUploaded || fileWithSameNameUploading
             ? {
                 status: 'error',
-                message: this.t(fileWithSameNameUploading ? 'fileWithDuplicatedNameInProgress' : 'fileWithDuplicatedNameLoaded'),
+                message: this.t(fileWithSameNameUploading
+                    ? 'fileWithDuplicatedNameInProgress'
+                    : 'fileWithDuplicatedNameLoaded'),
             }
             : {};
     }
@@ -866,8 +873,8 @@ export default class FileComponent extends Field {
     }
     async deleteFile(fileInfo) {
         const options = this.component.storage === 'url'
-            ? (this.component.urlRequestOptions || this.component.options || {})
-            : (this.component.options || {});
+            ? this.component.urlRequestOptions || this.component.options || {}
+            : this.component.options || {};
         if (fileInfo &&
             ['url', 'indexeddb', 's3', 'azure', 'googledrive'].includes(this.component.storage)) {
             const { fileService } = this;
@@ -1006,7 +1013,7 @@ export default class FileComponent extends Field {
                 delete fileToSync.progress;
                 this.redraw();
                 if (fileInfo) {
-                    const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
+                    const fileExists = this.resolvedFiles.find((x) => x.fileInfo.originalName === fileToSync.originalName);
                     if (!fileExists && fileToSync.status !== 'error') {
                         this.resolvedFiles.push({ fileToSync, fileInfo });
                     }
@@ -1060,8 +1067,8 @@ export default class FileComponent extends Field {
     }
     getFile(fileInfo) {
         const options = this.component.storage === 'url'
-            ? (this.component.urlRequestOptions || this.component.options || {})
-            : (this.component.options || {});
+            ? this.component.urlRequestOptions || this.component.options || {}
+            : this.component.options || {};
         const { fileService } = this;
         if (!fileService) {
             return alert(this.t('noFileService'));
@@ -1101,7 +1108,9 @@ export default class FileComponent extends Field {
                 return Promise.resolve();
             }
             await this.syncFiles();
-            return this.shouldSyncFiles ? Promise.reject(this.t('synchronizationFailed')) : Promise.resolve();
+            return this.shouldSyncFiles
+                ? Promise.reject(this.t('synchronizationFailed'))
+                : Promise.resolve();
         }
         catch (error) {
             return Promise.reject(error.message);