@formio/js 5.4.1 → 5.4.3

package/lib/mjs/providers/storage/url.js

@@ -64,8 +64,19 @@ function url(formio) {
                     reject(xhr.response || 'Unable to upload file');
                 }
             };
-            xhr.onerror = () => reject(xhr);
-            xhr.onabort = () => reject(xhr);
+            xhr.onerror = () => {
+                xhr.message =
+                    xhr.status >= 400
+                        ? `${xhr.status} ${xhr.statusText || ''}`.trim()
+                        : xhr.statusText && xhr.statusText.trim()
+                            ? xhr.statusText.trim()
+                            : 'Unable to upload file';
+                return reject(xhr);
+            };
+            xhr.onabort = () => {
+                xhr.type = 'abort';
+                return reject(xhr);
+            };
             let requestUrl = url + (url.indexOf('?') > -1 ? '&' : '?');
             for (const key in query) {
                 requestUrl += `${key}=${query[key]}&`;

package/lib/mjs/providers/storage/xhr.js

@@ -24,45 +24,32 @@ const XHR = {
             .join('/');
     },
     async upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {
-        // make request to Form.io server
-        const token = formio.getToken();
-        let response;
+        // Use makeRequest so portal plugins (e.g. x-remote-token) are applied. GOTCHA(G-FJS05)
+        let serverResponse;
         try {
-            response = await fetch(`${formio.formUrl}/storage/${type}`, {
-                method: 'POST',
-                headers: {
-                    Accept: 'application/json',
-                    'Content-Type': 'application/json; charset=UTF-8',
-                    ...(token ? { 'x-jwt-token': token } : {}),
-                },
-                body: JSON.stringify({
-                    name: XHR.path([
-                        dir,
-                        fileName,
-                    ]),
-                    size: file.size,
-                    type: file.type,
-                    groupPermissions,
-                    groupId,
-                    multipart: multipartOptions,
-                }),
+            serverResponse = await formio.makeRequest('file', `${formio.formUrl}/storage/${type}`, 'POST', {
+                name: XHR.path([dir, fileName]),
+                size: file.size,
+                type: file.type,
+                groupPermissions,
+                groupId,
+                multipart: multipartOptions,
             });
         }
         catch (err) {
-            // only throws on network errors
-            err.networkError = true;
-            throw err;
-        }
-        if (!response.ok) {
-            if (response.status === 504) {
-                const error = new Error('Network request failed');
+            if (err?.networkError) {
+                throw err;
+            }
+            if (err instanceof Error) {
+                throw err;
+            }
+            const message = typeof err === 'string' ? err : err?.message || err?.error;
+            const error = new Error(message || 'Unable to sign file.');
+            if (err?.status === 504) {
                 error.networkError = true;
-                throw error;
             }
-            const message = await response.text();
-            throw new Error(message || 'Unable to sign file.');
+            throw error;
         }
-        const serverResponse = await response.json();
         return await XHR.makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback);
     },
     makeXhrRequest(formio, xhrCallback, serverResponse, progressCallback, abortCallback) {

package/lib/mjs/templates/Templates.js

@@ -1,4 +1,5 @@
 import templates from './index';
+// GOTCHA(G-FJS03)
 import { Template } from '@formio/core/experimental';
 Template.addTemplates(templates);
 Template.defaultTemplates = Template.templates.bootstrap;

package/lib/mjs/templates/index.d.ts

@@ -43,6 +43,7 @@ declare namespace _default {
         iconClass: (iconset: "fa" | "bi", name: string, spinning: boolean) => string;
         cssClasses: {
             'border-default': string;
+            'sr-only': string;
             'formio-tab-panel-active': string;
             'formio-tab-link-active': string;
             'formio-tab-link-container-active': string;

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

@@ -1,83 +1,238 @@
-declare namespace _default {
-    let unsavedRowsError: string;
-    let invalidRowsError: string;
-    let invalidRowError: string;
-    let invalidOption: string;
-    let invalidDay: string;
-    let complete: string;
-    let error: string;
-    let errorListHotkey: string;
-    let errorsListNavigationMessage: string;
-    let submitError: string;
-    let required: string;
-    let unique: string;
-    let array: string;
-    let array_nonempty: string;
-    let nonarray: string;
-    let select: string;
-    let pattern: string;
-    let minLength: string;
-    let maxLength: string;
-    let minWords: string;
-    let maxWords: string;
-    let min: string;
-    let max: string;
-    let maxDate: string;
-    let minDate: string;
-    let maxYear: string;
-    let minYear: string;
-    let minSelectedCount: string;
-    let maxSelectedCount: string;
-    let invalid_email: string;
-    let invalid_url: string;
-    let invalid_regex: string;
-    let invalid_date: string;
-    let invalid_day: string;
-    let invalidValueProperty: string;
-    let mask: string;
-    let valueIsNotAvailable: string;
-    let stripe: string;
-    let month: string;
-    let day: string;
-    let year: string;
-    let january: string;
-    let february: string;
-    let march: string;
-    let april: string;
-    let may: string;
-    let june: string;
-    let july: string;
-    let august: string;
-    let september: string;
-    let october: string;
-    let november: string;
-    let december: string;
-    let next: string;
-    let previous: string;
-    let cancel: string;
-    let submit: string;
-    let confirmCancel: string;
-    let saveDraftInstanceError: string;
-    let saveDraftAuthError: string;
-    let restoreDraftInstanceError: string;
-    let saveDraftError: string;
-    let restoreDraftError: string;
-    let time: string;
-    let cancelButtonAriaLabel: string;
-    let previousButtonAriaLabel: string;
-    let nextButtonAriaLabel: string;
-    let submitButtonAriaLabel: string;
-    let reCaptchaTokenValidationError: string;
-    let reCaptchaTokenNotSpecifiedError: string;
-    let apiKey: string;
-    let typeRemaining: string;
-    let typeCount: string;
-    let requiredDayField: string;
-    let requiredDayEmpty: string;
-    let requiredMonthField: string;
-    let requiredYearField: string;
-    let fileTooSmall: string;
-    let fileTooBig: string;
-    let oauthSessionExpired: string;
-}
+declare const _default: {
+    unsavedRowsError: string;
+    invalidRowsError: string;
+    invalidRowError: string;
+    invalidOption: string;
+    invalidDay: string;
+    complete: string;
+    error: string;
+    errorListHotkey: string;
+    errorsListNavigationMessage: string;
+    submitError: string;
+    required: string;
+    unique: string;
+    array: string;
+    array_nonempty: string;
+    nonarray: string;
+    select: string;
+    pattern: string;
+    minLength: string;
+    maxLength: string;
+    minWords: string;
+    maxWords: string;
+    min: string;
+    max: string;
+    maxDate: string;
+    minDate: string;
+    maxYear: string;
+    minYear: string;
+    minSelectedCount: string;
+    maxSelectedCount: string;
+    invalid_email: string;
+    invalid_url: string;
+    invalid_regex: string;
+    invalid_date: string;
+    invalid_day: string;
+    invalidValueProperty: string;
+    mask: string;
+    valueIsNotAvailable: string;
+    stripe: string;
+    month: string;
+    day: string;
+    year: string;
+    january: string;
+    february: string;
+    march: string;
+    april: string;
+    may: string;
+    june: string;
+    july: string;
+    august: string;
+    september: string;
+    october: string;
+    november: string;
+    december: string;
+    next: string;
+    previous: string;
+    cancel: string;
+    submit: string;
+    confirmCancel: string;
+    saveDraftInstanceError: string;
+    saveDraftAuthError: string;
+    restoreDraftInstanceError: string;
+    saveDraftError: string;
+    restoreDraftError: string;
+    time: string;
+    cancelButtonAriaLabel: string;
+    previousButtonAriaLabel: string;
+    nextButtonAriaLabel: string;
+    submitButtonAriaLabel: string;
+    reCaptchaTokenValidationError: string;
+    reCaptchaTokenNotSpecifiedError: string;
+    apiKey: string;
+    typeRemaining: string;
+    typeCount: string;
+    requiredDayField: string;
+    requiredDayEmpty: string;
+    requiredMonthField: string;
+    requiredYearField: string;
+    fileTooSmall: string;
+    fileTooBig: string;
+    formNotReady: string;
+    noFormElement: string;
+    notUniqueKey: string;
+    newFormSchema: string;
+    missingUrl: string;
+    urlNotAttachedToBtn: string;
+    loadingProjectSettingsError: string;
+    sessionStorageSupportError: string;
+    builderUniqueError: string;
+    pageNotFound: string;
+    noDragInfoError: string;
+    addonSupportTypeError: string;
+    setPathError: string;
+    calculatedPathDeprecation: string;
+    unknownTemplate: string;
+    unknownComponent: string;
+    renderTemplateFunctionDeprecation: string;
+    whenReadyDeprecation: string;
+    loadResourcesError: string;
+    noSelectDataConfiguration: string;
+    indexedDBSupportError: string;
+    caretPositionSavingError: string;
+    iteratableRowsError: string;
+    checkRowDeprecation: string;
+    noOAuthBtn: string;
+    noOAuthConfiguration: string;
+    oAuthErrorsTitle: string;
+    noOAuthFormUrl: string;
+    oAuthStateError: string;
+    componentInvalidRowValidation: string;
+    videoPlayerNotFound: string;
+    synchronizationFailed: string;
+    fileWithDuplicatedNameInProgress: string;
+    fileWithDuplicatedNameLoaded: string;
+    nestedForm: string;
+    noDataProvided: string;
+    subformSubmissionLoadingError: string;
+    noDelimiterSet: string;
+    noSiteKey: string;
+    failedToNormalize: string;
+    failedToCompareItems: string;
+    editorFocusError: string;
+    quillImageUploadFailed: string;
+    noFilesSelected: string;
+    needConfigurationForQuill: string;
+    waitPdfConverting: string;
+    uploading: string;
+    pasteBelow: string;
+    copy: string;
+    move: string;
+    edit: string;
+    editJson: string;
+    remove: string;
+    clickToSetValue: string;
+    words: string;
+    characters: string;
+    addAnother: string;
+    yes: string;
+    no: string;
+    wantToClearData: string;
+    yesDelete: string;
+    waitFileProcessing: string;
+    wrongFileType: string;
+    noFileService: string;
+    fileProcessingFailed: string;
+    readyForUpload: string;
+    readyForRemovingFromStorage: string;
+    preparingFileToRemove: string;
+    succefullyRemoved: string;
+    succefullyUploaded: string;
+    maxSelectItems: string;
+    minSelectItems: string;
+    clickToSign: string;
+    surveyQuestion: string;
+    surveyQuestionValue: string;
+    success: string;
+    noResultsFound: string;
+    noChoices: string;
+    typeToSearch: string;
+    loading: string;
+    confirmComponentRemoveWithChildren: string;
+    confirmComponentRemove: string;
+    requestAborted: string;
+    checkEnteredParameters: string;
+    oauthSessionExpired: string;
+    help: string;
+    component: string;
+    save: string;
+    preview: string;
+    dragAndDropComponent: string;
+    searchFields: string;
+    noMatchesFound: string;
+    fileName: string;
+    size: string;
+    type: string;
+    gallery: string;
+    camera: string;
+    dropFilesToAttach: string;
+    useCamera: string;
+    browse: string;
+    takePicture: string;
+    switchToFileUpload: string;
+    completeStatus: string;
+    noStorageSet: string;
+    noFileApiSupport: string;
+    noFormDataSupport: string;
+    noProgressSupport: string;
+    close: string;
+    addResource: string;
+    autocomplete: string;
+    showPreview: string;
+    hidePreview: string;
+    createPage: string;
+    page: string;
+    closeBtnDescription: string;
+    cancelBtnDescription: string;
+    saveBtnDescription: string;
+    addOrRemove: string;
+    anyFileTypesAllowed: string;
+    allowedFileTypes: string;
+    syncing: string;
+    syncNow: string;
+    pressToOpen: string;
+    browseToAttachFileFor: string;
+    or: string;
+    numericOnly: string;
+    uploadPdfFile: string;
+    dropToStart: string;
+    expand: string;
+    collapse: string;
+    add: string;
+    delete: string;
+    revert: string;
+    removeBtnPressToRemove: string;
+    file: string;
+    captureVideo: string;
+    captureAudio: string;
+    captureImage: string;
+    browseFiles: string;
+    noComponentsSetInGrid: string;
+    sortAscending: string;
+    sortDescending: string;
+    filter: string;
+    clear: string;
+    showItemsWithValue: string;
+    gridItemsPerPage: string;
+    gridAllItems: string;
+    recordsSelectedOnPage: string;
+    recordsSelectedInTable: string;
+    gridSelectAll: string;
+    itemsInTable: string;
+    clearSelection: string;
+    editGridRow: string;
+    deleteGridRow: string;
+    selected: string;
+    actions: string;
+};
 export default _default;

package/lib/mjs/translations/en.js

@@ -1,4 +1,6 @@
+import bootstrap from '@formio/bootstrap';
 export default {
+    ...(bootstrap?.translations?.en || {}),
     unsavedRowsError: 'Please save all rows before proceeding.',
     invalidRowsError: 'Please correct invalid rows before proceeding.',
     invalidRowError: 'Invalid row. Please correct it or delete.',
@@ -78,6 +80,92 @@ export default {
     requiredYearField: '{{ field }} is required',
     fileTooSmall: 'File is too small; it must be at least {{ size }}',
     fileTooBig: 'File is too big; it must be at most {{ size }}',
+    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 }}',
+    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',
+    confirmComponentRemoveWithChildren: 'Removing this component will also remove all of its children. Are you sure you want to do this?',
+    confirmComponentRemove: 'Are you sure you want to remove this component?',
+    requestAborted: 'Request was aborted',
+    checkEnteredParameters: 'Please, check the entered parameters',
     // when temp document storing oauth state and code verifier is cleared by ttl before the user completes login
     oauthSessionExpired: 'Login attempt expired; please try again. Refreshing...',
 };

package/lib/mjs/utils/ChoicesWrapper.js

@@ -30,7 +30,7 @@ class ChoicesWrapper extends Choices {
         this._wasTap = true;
     }
     _onEnterKey(...args) {
-        const [event,] = args;
+        const [event] = args;
         // Prevent dropdown form opening when removeItemButton was pressed using 'Enter' on keyboard
         if (event.target.className === 'choices__button') {
             this.shouldOpenDropDown = false;

package/lib/mjs/utils/builder.js

@@ -12,23 +12,14 @@ export default {
         const formKeys = {};
         eachComponent(container, (comp) => {
             formKeys[comp.key] = true;
-            if ([
-                'address',
-                'container',
-                'datagrid',
-                'editgrid',
-                'dynamicWizard',
-                'tree',
-            ].includes(comp.type) ||
+            if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(comp.type) ||
                 comp.tree ||
                 comp.arrayTree) {
                 return true;
             }
         }, true);
         // Recurse into all child components.
-        eachComponent([
-            component,
-        ], (component) => {
+        eachComponent([component], (component) => {
             // Skip key uniquification if this component doesn't have a key.
             if (!component.key) {
                 return;
@@ -39,14 +30,7 @@ export default {
                 changed = true;
             }
             formKeys[newKey] = true;
-            if ([
-                'address',
-                'container',
-                'datagrid',
-                'editgrid',
-                'dynamicWizard',
-                'tree',
-            ].includes(component.type) ||
+            if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) ||
                 component.tree ||
                 component.arrayTree) {
                 return true;
@@ -58,10 +42,7 @@ export default {
      * Additional shortcuts for the builder.
      */
     additionalShortcuts: {
-        button: [
-            'Enter',
-            'Esc',
-        ],
+        button: ['Enter', 'Esc'],
     },
     /**
      * Returns the alpha character shortcuts.
@@ -96,9 +77,7 @@ export default {
         if (!component) {
             return [];
         }
-        return [
-            '',
-        ]
+        return ['']
             .concat(_.difference(this.getAlphaShortcuts().concat(this.getAdditionalShortcuts(component.type)), this.getBindedShortcuts(form.components, component)))
             .map((shortcut) => ({
             label: shortcut,

package/lib/mjs/utils/i18n.d.ts

@@ -2,14 +2,17 @@
  * This file is used to mimic the i18n library interface.
  */
 export class I18n {
+    static languages: {};
+    static setDefaultTranslations(languages: any): void;
     static init(languages?: {}): I18n;
     static createInstance(): I18n;
     constructor(languages?: {});
-    languages: {};
+    languages: any;
+    defaultKeys: any;
     language: string;
     originalLanguage: string;
     currentLanguage: any;
-    setLanguages(languages: any): void;
+    setLanguages(languages: any, noDefaultOverride: any): void;
     dir(lang?: string): "rtl" | "ltr";
     changeLanguage(language: any, ready?: null): void;
     addResourceBundle(language: any, type: any, strings: any): void;