@formio/js 5.4.0 → 5.4.2

package/lib/cjs/components/_classes/list/editForm/ListComponent.edit.data.js

@@ -21,10 +21,7 @@ exports.default = [
         tooltip: 'A URL that returns a JSON array to use as the data source.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },
@@ -51,10 +48,7 @@ exports.default = [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },
@@ -70,14 +64,7 @@ exports.default = [
         tooltip: 'The property of each item in the data source to use as the select value. If not specified, the item itself will be used.',
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'json',
-                        'url',
-                        'custom',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['json', 'url', 'custom']],
             },
         },
     },
@@ -110,10 +97,7 @@ exports.default = [
         tooltip: 'Check this if you would like to use Formio Authentication with the request.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },
@@ -128,16 +112,10 @@ exports.default = [
             json: {
                 or: [
                     {
-                        '===': [
-                            { var: 'data.dataSrc' },
-                            'url',
-                        ],
+                        '===': [{ var: 'data.dataSrc' }, 'url'],
                     },
                     {
-                        '===': [
-                            { var: 'data.dataSrc' },
-                            'resource',
-                        ],
+                        '===': [{ var: 'data.dataSrc' }, 'resource'],
                     },
                 ],
             },

package/lib/cjs/components/_classes/multivalue/Multivalue.js

@@ -22,26 +22,16 @@ class Multivalue extends Field_1.default {
             if (Array.isArray(value)) {
                 if (underlyingValueShouldBeArray) {
                     if (value.length === 0 || !Array.isArray(value[0])) {
-                        return [
-                            value,
-                        ];
+                        return [value];
                     }
                 }
                 if (value.length === 0) {
-                    return [
-                        emptyValue,
-                    ];
+                    return [emptyValue];
                 }
                 return super.normalizeValue(value, flags);
             }
             else {
-                return super.normalizeValue(value == null
-                    ? [
-                        emptyValue,
-                    ]
-                    : [
-                        value,
-                    ], flags);
+                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);
             }
         }
         else {
@@ -69,22 +59,16 @@ class Multivalue extends Field_1.default {
         let value = super.defaultValue;
         if (this.component.multiple) {
             if (lodash_1.default.isArray(value)) {
-                value = !value.length
-                    ? [
-                        super.emptyValue,
-                    ]
-                    : value;
+                value = !value.length ? [super.emptyValue] : value;
             }
             else {
-                value = [
-                    value,
-                ];
+                value = [value];
             }
         }
         return value;
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     /**
      * @returns {Field} - The created field.
@@ -203,7 +187,7 @@ class Multivalue extends Field_1.default {
                 this.saveCaretPosition(element, index);
             }
             catch (err) {
-                console.warn('An error occurred while trying to save caret position', err);
+                console.warn(this.t('caretPositionSavingError'), err);
             }
             // If a mask is present, delay the update to allow mask to update first.
             if (element.mask) {
@@ -305,9 +289,7 @@ class Multivalue extends Field_1.default {
         }
         let dataValue = this.dataValue || [];
         if (!Array.isArray(dataValue)) {
-            dataValue = [
-                dataValue,
-            ];
+            dataValue = [dataValue];
         }
         if (Array.isArray(value)) {
             dataValue = dataValue.concat(value);

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -515,10 +515,7 @@ class NestedComponent extends Field_1.default {
                 }
             });
         }
-        return Promise.all([
-            superPromise,
-            childPromise,
-        ]);
+        return Promise.all([superPromise, childPromise]);
     }
     /**
      * Attach the logic to the components.

package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -16,15 +16,13 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
         }, ...extend);
     }
     static savedValueTypes() {
-        return [
-            utils_2.componentValueTypes.array,
-        ];
+        return [utils_2.componentValueTypes.array];
     }
     componentContext(component) {
         return this.iteratableRows[component.rowIndex].data;
     }
     get iteratableRows() {
-        throw new Error('Getter #iteratableRows() is not implemented');
+        throw new Error(this.t('iteratableRowsError'));
     }
     get rowIndex() {
         return this._rowIndex;
@@ -64,12 +62,10 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
     }
     validate(data, flags = {}) {
         data = data || this.data;
-        return this.validateComponents([
-            this.component,
-        ], data, flags);
+        return this.validateComponents([this.component], data, flags);
     }
     checkRow(...args) {
-        console.log('Deprecation Warning: checkRow method has been replaced with processRow');
+        console.log(this.t('checkRowDeprecation'));
         return this.processRow.call(this, ...args);
     }
     processRow(method, data, opts, row, components, silentCheck) {
@@ -127,7 +123,7 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
       `;
             (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.forEach((component) => {
                 const label = component.label || component.key;
-                result += `<th style="padding: 5px 10px;">${label}</th>`;
+                result += `<th style="padding: 5px 10px;">${this.t(label, { _userInput: true })}</th>`;
             });
             result += `
           </tr>

package/lib/cjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -16,9 +16,7 @@ class NestedDataComponent extends NestedComponent_1.default {
         return !lodash_1.default.isEqual(newValue, oldValue);
     }
     static savedValueTypes(schema) {
-        return ((0, utils_1.getComponentSavedTypes)(schema) || [
-            utils_1.componentValueTypes.object,
-        ]);
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
     }
     get allowData() {
         return true;

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

@@ -84,9 +84,7 @@ class AddressComponent extends Container_1.default {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return ((0, utils_1.getComponentSavedTypes)(schema) || [
-            utils_1.componentValueTypes.object,
-        ]);
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
     }
     static get builderInfo() {
         return {
@@ -102,10 +100,7 @@ class AddressComponent extends Container_1.default {
         return AddressComponent.conditionOperatorsSettings;
     }
     static get conditionOperatorsSettings() {
-        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: [
-                'isEmpty',
-                'isNotEmpty',
-            ] });
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEmpty', 'isNotEmpty'] });
     }
     mergeSchema(component = {}) {
         let { defaultSchema } = this;
@@ -205,11 +200,7 @@ class AddressComponent extends Container_1.default {
     }
     get address() {
         if (this.isMultiple) {
-            return lodash_1.default.isArray(this.dataValue)
-                ? this.dataValue
-                : [
-                    this.dataValue,
-                ];
+            return lodash_1.default.isArray(this.dataValue) ? this.dataValue : [this.dataValue];
         }
         // Manual mode is not implementing for multiple value
         return this.manualModeEnabled && this.dataValue ? this.dataValue.address : this.dataValue;
@@ -225,11 +216,7 @@ class AddressComponent extends Container_1.default {
     get defaultValue() {
         let defaultValue = super.defaultValue;
         if (this.isMultiple) {
-            defaultValue = lodash_1.default.isArray(defaultValue)
-                ? defaultValue
-                : [
-                    defaultValue,
-                ];
+            defaultValue = lodash_1.default.isArray(defaultValue) ? defaultValue : [defaultValue];
         }
         return defaultValue;
     }
@@ -245,9 +232,7 @@ class AddressComponent extends Container_1.default {
     get dataValue() {
         const resultValue = lodash_1.default.get(this._data, this.path);
         if (!lodash_1.default.isArray(resultValue) && this.component.multiple) {
-            return [
-                resultValue,
-            ];
+            return [resultValue];
         }
         return super.dataValue;
     }
@@ -342,7 +327,7 @@ class AddressComponent extends Container_1.default {
         return !this.isMultiple && (this.builderMode || this.manualModeEnabled);
     }
     get addAnother() {
-        return this.t(this.component.addAnother || 'Add Another');
+        return this.t(this.component.addAnother || 'addAnother');
     }
     renderElement(value) {
         return this.renderTemplate(this.templateName, {
@@ -385,9 +370,7 @@ class AddressComponent extends Container_1.default {
         var _a;
         if (this.isMultiple) {
             this.address[index] = address;
-            this.address = [
-                ...this.address,
-            ];
+            this.address = [...this.address];
         }
         else {
             this.address = address;
@@ -604,12 +587,9 @@ class AddressComponent extends Container_1.default {
             }
             return this.getComponents()
                 .filter((component) => component.hasValue(address))
-                .map((component) => [
-                component,
-                lodash_1.default.get(address, component.key),
-            ])
-                .filter(([component, componentValue,]) => !component.isEmpty(componentValue))
-                .map(([component, componentValue,]) => component.getValueAsString(componentValue, options))
+                .map((component) => [component, lodash_1.default.get(address, component.key)])
+                .filter(([component, componentValue]) => !component.isEmpty(componentValue))
+                .map(([component, componentValue]) => component.getValueAsString(componentValue, options))
                 .join(', ');
         }
         return super.getValueAsString(address, options);

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

@@ -43,10 +43,7 @@ exports.default = [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'azure',
-                ],
+                '===': [{ var: 'data.provider' }, 'azure'],
             },
         },
     },
@@ -63,10 +60,7 @@ exports.default = [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -81,10 +75,7 @@ exports.default = [
         tooltip: 'Which query param should be used to pass as a search string. Default is `query`.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -98,10 +89,7 @@ exports.default = [
         tooltip: 'The property within the response data, where iterable addresses reside. For example: results.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -115,10 +103,7 @@ exports.default = [
         tooltip: 'The property of each address in the response to use as the display value.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -135,10 +120,7 @@ exports.default = [
         tooltip: 'Additional query params can be specified here in a way of JSON object.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.provider' }, 'custom'],
             },
         },
     },
@@ -155,10 +137,7 @@ exports.default = [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
+                '===': [{ var: 'data.provider' }, 'google'],
             },
         },
     },
@@ -176,10 +155,7 @@ exports.default = [
         tooltip: "Specify Google Maps Autocomplete options used for address searching as JSON object. Follow the <a href ='https://developers.google.com/maps/documentation/javascript/places-autocomplete' target='_blank'>link</a> for available options",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.provider' },
-                    'google',
-                ],
+                '===': [{ var: 'data.provider' }, 'google'],
             },
         },
     },

package/lib/cjs/components/alert/Alert.js

@@ -27,11 +27,7 @@ class Alert {
         };
     }
     showErrors(errors = [], triggerEvent = false, options = {}) {
-        errors = lodash_1.default.isArray(errors)
-            ? errors
-            : [
-                errors,
-            ];
+        errors = lodash_1.default.isArray(errors) ? errors : [errors];
         const messagesList = this.createMessagesList('error', errors);
         this.showAlert('error', messagesList, options);
         if (triggerEvent) {
@@ -114,7 +110,7 @@ class Alert {
             ] });
         if ((_c = this.refs.messageRef) === null || _c === void 0 ? void 0 : _c.length) {
             this.refs.messageRef.forEach((el) => {
-                Object.entries(customEvents).forEach(([event, listeners,]) => {
+                Object.entries(customEvents).forEach(([event, listeners]) => {
                     listeners.forEach((listener) => this.parentComponent.addEventListener(el, event, listener));
                     this.eventListenersKeys.push(event);
                 });
@@ -146,6 +142,7 @@ class Alert {
             const component = (_a = this.parentComponent.root) === null || _a === void 0 ? void 0 : _a.getComponent(path, null, keyOrPath);
             if (component && lodash_1.default.isFunction(component.focus)) {
                 component.focus();
+                component.scrollIntoView();
             }
         }
     }

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

@@ -29,6 +29,7 @@ export default class ButtonComponent extends Field {
     detach(element: any): void;
     onClick(event: any): void;
     openOauth(settings: any): void;
+    _handleOauthSessionExpired(): void;
     get oauthComponentPath(): any;
     focus(): void;
     triggerCaptcha(): void;

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

@@ -35,9 +35,7 @@ class ButtonComponent extends Field_1.default {
         };
     }
     static savedValueTypes(schema) {
-        return ((0, utils_1.getComponentSavedTypes)(schema) || [
-            utils_1.componentValueTypes.boolean,
-        ]);
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.boolean];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -49,12 +47,7 @@ class ButtonComponent extends Field_1.default {
     get inputInfo() {
         const info = super.elementInfo();
         info.type = 'button';
-        info.attr.type = [
-            'submit',
-            'saveState',
-        ].includes(this.component.action)
-            ? 'submit'
-            : 'button';
+        info.attr.type = ['submit', 'saveState'].includes(this.component.action) ? 'submit' : 'button';
         this.component.theme = this.component.theme || 'default';
         info.attr.class = `btn btn-${this.component.theme}`;
         if (this.component.size) {
@@ -282,7 +275,7 @@ class ButtonComponent extends Field_1.default {
         super.detach();
     }
     onClick(event) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         this.triggerCaptcha();
         // Don't click if disabled or in builder mode.
         if (this.disabled || this.options.attachMode === 'builder') {
@@ -352,17 +345,17 @@ class ButtonComponent extends Field_1.default {
                 break;
             case 'oauth':
                 if (this.root === this) {
-                    console.warn('You must add the OAuth button to a form for it to function properly');
+                    console.warn(this.t('noOAuthBtn'));
                     return;
                 }
                 // Display Alert if OAuth config is missing
                 if (!this.oauthConfig) {
-                    (_c = this.root) === null || _c === void 0 ? void 0 : _c.setAlert('danger', 'OAuth not configured. You must configure oauth for your project before it will work.');
+                    this.root.setAlert('danger', this.t('noOAuthConfiguration'));
                     break;
                 }
                 // Display Alert if oAuth has an error is missing
                 if (this.oauthConfig.error) {
-                    (_d = this.root) === null || _d === void 0 ? void 0 : _d.setAlert('danger', `The Following Error Has Occured ${this.oauthConfig.error}`);
+                    (_c = this.root) === null || _c === void 0 ? void 0 : _c.setAlert('danger', `${this.t('oAuthErrorsTitle')} ${this.t(this.oauthConfig.error)}`);
                     break;
                 }
                 this.openOauth(this.oauthConfig);
@@ -371,8 +364,14 @@ class ButtonComponent extends Field_1.default {
     }
     openOauth(settings) {
         var _a;
+        // this is if the temp session (storing the state and code verifiers) expires in the db
+        // and we need to fetch new oauth state
+        if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
+            this._handleOauthSessionExpired();
+            return;
+        }
         if (!((_a = this.root) === null || _a === void 0 ? void 0 : _a.formio)) {
-            console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
+            console.warn(this.t('noOAuthFormUrl'));
             return;
         }
         let params = {
@@ -386,7 +385,8 @@ class ButtonComponent extends Field_1.default {
         if (settings.state) {
             params.state = settings.state;
         }
-        else if (settings.code_challenge) {
+        // okta requires both a state and a code challenge for PKCE
+        if (settings.code_challenge) {
             params.code_challenge = settings.code_challenge;
             params.code_challenge_method = 'S256';
         }
@@ -426,9 +426,12 @@ class ButtonComponent extends Field_1.default {
                     }
                     // TODO: check for error response here
                     if (settings.state !== params.state) {
-                        (_b = this.root) === null || _b === void 0 ? void 0 : _b.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
+                        (_b = this.root) === null || _b === void 0 ? void 0 : _b.setAlert('danger', this.t('oAuthStateError'));
                         return;
                     }
+                    if (settings.sessionId) {
+                        params.sessionId = settings.sessionId;
+                    }
                     // Depending on where the settings came from, submit to either the submission endpoint (old) or oauth endpoint (new).
                     let requestPromise = Promise.resolve();
                     if (lodash_1.default.has(this, 'root.form.config.oauth') &&
@@ -457,6 +460,11 @@ class ButtonComponent extends Field_1.default {
                     })
                         .catch((err) => {
                         var _a;
+                        console.log(err);
+                        if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
+                            this._handleOauthSessionExpired();
+                            return;
+                        }
                         (_a = this.root) === null || _a === void 0 ? void 0 : _a.onSubmissionError(err);
                     });
                 }
@@ -464,7 +472,7 @@ class ButtonComponent extends Field_1.default {
             catch (error) {
                 if (error.name !== 'SecurityError' &&
                     (error.name !== 'Error' || error.message !== 'Permission denied')) {
-                    (_h = this.root) === null || _h === void 0 ? void 0 : _h.setAlert('danger', error.message || error);
+                    (_h = this.root) === null || _h === void 0 ? void 0 : _h.setAlert('danger', this.t(`${error.message || error}`));
                 }
             }
             if (!popup || popup.closed || popup.closed === undefined) {
@@ -472,6 +480,12 @@ class ButtonComponent extends Field_1.default {
             }
         }, 100);
     }
+    _handleOauthSessionExpired() {
+        var _a;
+        (_a = this.root) === null || _a === void 0 ? void 0 : _a.setAlert('warning', this.t('oauthSessionExpired'));
+        this.loading = true;
+        setTimeout(() => window.location.reload(), 2000);
+    }
     get oauthComponentPath() {
         const pathArray = (0, utils_1.getArrayFromComponentPath)(this.path);
         return lodash_1.default.chain(pathArray)

package/lib/cjs/components/button/editForm/Button.edit.display.js

@@ -62,10 +62,7 @@ exports.default = [
         },
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'oauth',
-                ],
+                '===': [{ var: 'data.action' }, 'oauth'],
             },
         },
     },
@@ -79,10 +76,7 @@ exports.default = [
         input: true,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'saveState',
-                ],
+                '===': [{ var: 'data.action' }, 'saveState'],
             },
         },
     },
@@ -96,10 +90,7 @@ exports.default = [
         tooltip: 'Use the Enter key to submit form.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'submit',
-                ],
+                '===': [{ var: 'data.action' }, 'submit'],
             },
         },
     },
@@ -113,10 +104,7 @@ exports.default = [
         tooltip: 'When the button is pressed, show any validation errors on the form.',
         conditional: {
             json: {
-                '!==': [
-                    { var: 'data.action' },
-                    'submit',
-                ],
+                '!==': [{ var: 'data.action' }, 'submit'],
             },
         },
     },
@@ -129,10 +117,7 @@ exports.default = [
         tooltip: 'The event to fire when the button is clicked.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'event',
-                ],
+                '===': [{ var: 'data.action' }, 'event'],
             },
         },
     },
@@ -147,10 +132,7 @@ exports.default = [
         placeholder: 'https://example.form.io',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'url',
-                ],
+                '===': [{ var: 'data.action' }, 'url'],
             },
         },
     },
@@ -178,10 +160,7 @@ exports.default = [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'url',
-                ],
+                '===': [{ var: 'data.action' }, 'url'],
             },
         },
     },
@@ -197,10 +176,7 @@ exports.default = [
         placeholder: "data['mykey'] = data['anotherKey'];",
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.action' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.action' }, 'custom'],
             },
         },
     },