@formio/js 5.4.0 → 5.4.1

package/dist/formio.utils.min.js.LICENSE.txt

@@ -20,7 +20,7 @@
 
 /*! @license DOMPurify 3.4.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.0/LICENSE */
 
-/*! formiojs v5.4.0 | https://unpkg.com/formiojs@5.4.0/LICENSE.txt */
+/*! formiojs v5.4.1 | https://unpkg.com/formiojs@5.4.1/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 

package/lib/cjs/Embed.js

@@ -508,7 +508,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.4.0';
+Formio.version = '5.4.1';
 // Create a report.
 Formio.Report = {
     create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/cjs/Formio.js

@@ -11,7 +11,7 @@ const CDN_1 = __importDefault(require("./CDN"));
 const providers_1 = __importDefault(require("./providers"));
 sdk_1.Formio.cdn = new CDN_1.default();
 sdk_1.Formio.Providers = providers_1.default;
-sdk_1.Formio.version = '5.4.0';
+sdk_1.Formio.version = '5.4.1';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

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

@@ -396,6 +396,11 @@ declare class Component extends Element {
      * @param {string} [referenceAttributeName] - The attribute name to use for the reference.
      */
     loadRefs(element: HTMLElement, refs: object, referenceAttributeName?: string | undefined): void;
+    /**
+     * Announces a message to screen readers via the component's live region.
+     * @param {string} message - The message to announce.
+     */
+    announce(message: string): void;
     /**
      * Opens the modal element.
      * @param {string} template - The template to use for the modal dialog.

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

@@ -1219,6 +1219,19 @@ class Component extends Element_1.default {
             }
         }
     }
+    /**
+     * Announces a message to screen readers via the component's live region.
+     * @param {string} message - The message to announce.
+     */
+    announce(message) {
+        const liveRegion = this.refs.liveRegion;
+        if (liveRegion) {
+            liveRegion.textContent = '';
+            setTimeout(() => {
+                liveRegion.textContent = message;
+            }, 50);
+        }
+    }
     /**
      * Opens the modal element.
      * @param {string} template - The template to use for the modal dialog.
@@ -1352,6 +1365,7 @@ class Component extends Element_1.default {
         this.loadRefs(element, {
             messageContainer: 'single',
             tooltip: 'multiple',
+            liveRegion: 'single',
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1596,13 +1610,13 @@ class Component extends Element_1.default {
             value.forEach((val, index) => {
                 const widget = this.refs.input[index] && this.refs.input[index].widget;
                 if (widget) {
-                    values.push(widget.getValueAsString(val, options));
+                    values.push(widget.getValueAsString(val));
                 }
             });
             return values;
         }
         const widget = this.refs.input[0].widget;
-        return widget.getValueAsString(value, options);
+        return widget.getValueAsString(value);
     }
     /**
      * Returns the value of the component as a string.

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

@@ -371,6 +371,12 @@ 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.');
             return;
@@ -386,7 +392,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';
         }
@@ -429,6 +436,9 @@ class ButtonComponent extends Field_1.default {
                         (_b = this.root) === null || _b === void 0 ? void 0 : _b.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
                         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 +467,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);
                     });
                 }
@@ -472,6 +487,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/datagrid/DataGrid.js

@@ -446,11 +446,11 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             component: this.component,
             row,
         });
-        (0, utils_1.screenReaderSpeech)('Row has been added');
         this.checkConditions();
         (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, { modified: true, noPristineChangeOnModified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
+            this.announce(this.t('Row has been added'));
         });
     }
     updateComponentsRowIndex(components, rowIndex) {
@@ -493,15 +493,14 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
-        if (this.rows.length > 1) {
-            (0, utils_1.screenReaderSpeech)('Row has been deleted');
-        }
         const [row,] = this.rows.splice(index, 1);
         this.removeSubmissionMetadataRow(index);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
         this.setValue(this.dataValue, flags);
-        this.redraw();
+        this.redraw().then(() => {
+            this.announce(this.t('Row has been deleted'));
+        });
     }
     removeRowComponents(row) {
         lodash_1.default.each(row, (component) => this.removeComponent(component));

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

@@ -1299,8 +1299,7 @@ class SelectComponent extends ListComponent_1.default {
     }
     setMetadata(value, flags = {}) {
         var _a, _b;
-        if (lodash_1.default.isNil(value) ||
-            (this.inDataTable && this.component.dataSrc === 'values')) {
+        if (lodash_1.default.isNil(value)) {
             return;
         }
         const valueIsObject = lodash_1.default.isObject(value);
@@ -1605,7 +1604,7 @@ class SelectComponent extends ListComponent_1.default {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }
-            const templateValue = this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data) ? { data: value } : value;
+            const templateValue = !lodash_1.default.isEmpty(value) && this.isEntireObjectDisplay() && !lodash_1.default.isObject(value.data) ? { data: value } : value;
             const template = this.itemTemplate(templateValue, value, options);
             return template;
         }

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.4.0"
+    "version": "5.4.1"
 }

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

@@ -95,7 +95,7 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
   
      */
     setAutocompleteOptions() {
-        let options = lodash_1.default.get(this.options, 'params.autocompleteOptions', {});
+        let options = lodash_1.default.get(this.options, 'autocompleteOptions', {});
         if (!lodash_1.default.isObject(options)) {
             options = {};
         }

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

@@ -78,5 +78,6 @@ declare namespace _default {
     let requiredYearField: string;
     let fileTooSmall: string;
     let fileTooBig: string;
+    let oauthSessionExpired: string;
 }
 export default _default;

package/lib/cjs/translations/en.js

@@ -79,5 +79,7 @@ exports.default = {
     requiredMonthField: '{{ field }} is required',
     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 }}'
+    fileTooBig: 'File is too big; it must be at most {{ size }}',
+    // 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/cjs/utils/utils.js

@@ -159,7 +159,7 @@ function getConditionalPathsRecursive(conditionPaths, data) {
             }
             else {
                 currentData.forEach((x, index) => {
-                    if (!lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {
+                    if (x && conditionPaths && !lodash_1.default.isNil(x[conditionPaths[currentLocalIndex]])) {
                         const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;
                         conditionalPathsArray.push(compDataPath);
                     }
@@ -1823,18 +1823,18 @@ function announceScreenReaderMessage(component, value, index = 0, forFocus = fal
     if (forFocus) {
         setTimeout(() => {
             el.textContent = "";
-            requestAnimationFrame(() => {
+            setTimeout(() => {
                 el.textContent = combinedMessage;
-            });
+            }, 50);
         }, 150);
         return;
     }
     clearTimeout(el._announceTimer);
     el._announceTimer = setTimeout(() => {
         el.textContent = "";
-        requestAnimationFrame(() => {
+        setTimeout(() => {
             el.textContent = combinedMessage;
-        });
+        }, 50);
     }, 500);
 }
 exports.announceScreenReaderMessage = announceScreenReaderMessage;

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.4.0';
+    static version = '5.4.1';
     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.4.0';
+FormioCore.version = '5.4.1';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

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

@@ -396,6 +396,11 @@ declare class Component extends Element {
      * @param {string} [referenceAttributeName] - The attribute name to use for the reference.
      */
     loadRefs(element: HTMLElement, refs: object, referenceAttributeName?: string | undefined): void;
+    /**
+     * Announces a message to screen readers via the component's live region.
+     * @param {string} message - The message to announce.
+     */
+    announce(message: string): void;
     /**
      * Opens the modal element.
      * @param {string} template - The template to use for the modal dialog.

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

@@ -1212,6 +1212,19 @@ export default class Component extends Element {
             }
         }
     }
+    /**
+     * Announces a message to screen readers via the component's live region.
+     * @param {string} message - The message to announce.
+     */
+    announce(message) {
+        const liveRegion = this.refs.liveRegion;
+        if (liveRegion) {
+            liveRegion.textContent = '';
+            setTimeout(() => {
+                liveRegion.textContent = message;
+            }, 50);
+        }
+    }
     /**
      * Opens the modal element.
      * @param {string} template - The template to use for the modal dialog.
@@ -1352,6 +1365,7 @@ export default class Component extends Element {
         this.loadRefs(element, {
             messageContainer: 'single',
             tooltip: 'multiple',
+            liveRegion: 'single',
         });
         this.attachTooltips(this.refs.tooltip);
         // Attach logic.
@@ -1591,13 +1605,13 @@ export default class Component extends Element {
             value.forEach((val, index) => {
                 const widget = this.refs.input[index] && this.refs.input[index].widget;
                 if (widget) {
-                    values.push(widget.getValueAsString(val, options));
+                    values.push(widget.getValueAsString(val));
                 }
             });
             return values;
         }
         const widget = this.refs.input[0].widget;
-        return widget.getValueAsString(value, options);
+        return widget.getValueAsString(value);
     }
     /**
      * Returns the value of the component as a string.

package/lib/mjs/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/mjs/components/button/Button.js

@@ -363,6 +363,12 @@ export default class ButtonComponent extends Field {
         }
     }
     openOauth(settings) {
+        // 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 (!this.root?.formio) {
             console.warn('You must attach a Form API url to your form in order to use OAuth buttons.');
             return;
@@ -378,7 +384,8 @@ export default class ButtonComponent extends Field {
         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';
         }
@@ -420,6 +427,9 @@ export default class ButtonComponent extends Field {
                         this.root?.setAlert('danger', 'OAuth state does not match. Please try logging in again.');
                         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 (_.has(this, 'root.form.config.oauth') &&
@@ -446,6 +456,11 @@ export default class ButtonComponent extends Field {
                         this.root?.onSubmit(result, true);
                     })
                         .catch((err) => {
+                        console.log(err);
+                        if (settings.sessionExpireAt && Date.now() >= settings.sessionExpireAt) {
+                            this._handleOauthSessionExpired();
+                            return;
+                        }
                         this.root?.onSubmissionError(err);
                     });
                 }
@@ -461,6 +476,11 @@ export default class ButtonComponent extends Field {
             }
         }, 100);
     }
+    _handleOauthSessionExpired() {
+        this.root?.setAlert('warning', this.t('oauthSessionExpired'));
+        this.loading = true;
+        setTimeout(() => window.location.reload(), 2000);
+    }
     get oauthComponentPath() {
         const pathArray = getArrayFromComponentPath(this.path);
         return _.chain(pathArray)

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

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
-import { fastCloneDeep, getFocusableElements, getComponent, eachComponent, screenReaderSpeech } from '../../utils';
+import { fastCloneDeep, getFocusableElements, getComponent, eachComponent } from '../../utils';
 import dragula from 'dragula';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
@@ -441,11 +441,11 @@ export default class DataGridComponent extends NestedArrayComponent {
             component: this.component,
             row,
         });
-        screenReaderSpeech('Row has been added');
         this.checkConditions();
         this.triggerChange?.({ modified: true, noPristineChangeOnModified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
+            this.announce(this.t('Row has been added'));
         });
     }
     updateComponentsRowIndex(components, rowIndex) {
@@ -487,15 +487,14 @@ export default class DataGridComponent extends NestedArrayComponent {
         const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
-        if (this.rows.length > 1) {
-            screenReaderSpeech('Row has been deleted');
-        }
         const [row,] = this.rows.splice(index, 1);
         this.removeSubmissionMetadataRow(index);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
         this.setValue(this.dataValue, flags);
-        this.redraw();
+        this.redraw().then(() => {
+            this.announce(this.t('Row has been deleted'));
+        });
     }
     removeRowComponents(row) {
         _.each(row, (component) => this.removeComponent(component));

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

@@ -1326,8 +1326,7 @@ export default class SelectComponent extends ListComponent {
         return super.normalizeValue(this.normalizeSingleValue(value));
     }
     setMetadata(value, flags = {}) {
-        if (_.isNil(value) ||
-            (this.inDataTable && this.component.dataSrc === 'values')) {
+        if (_.isNil(value)) {
             return;
         }
         const valueIsObject = _.isObject(value);
@@ -1631,7 +1630,7 @@ export default class SelectComponent extends ListComponent {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }
-            const templateValue = this.isEntireObjectDisplay() && !_.isObject(value.data) ? { data: value } : value;
+            const templateValue = !_.isEmpty(value) && this.isEntireObjectDisplay() && !_.isObject(value.data) ? { data: value } : value;
             const template = this.itemTemplate(templateValue, value, options);
             return template;
         }

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.4.0"
+    "version": "5.4.1"
     
 }

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

@@ -88,7 +88,7 @@ export class GoogleAddressProvider extends AddressProvider {
   
      */
     setAutocompleteOptions() {
-        let options = _.get(this.options, 'params.autocompleteOptions', {});
+        let options = _.get(this.options, 'autocompleteOptions', {});
         if (!_.isObject(options)) {
             options = {};
         }

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

@@ -78,5 +78,6 @@ declare namespace _default {
     let requiredYearField: string;
     let fileTooSmall: string;
     let fileTooBig: string;
+    let oauthSessionExpired: string;
 }
 export default _default;

package/lib/mjs/translations/en.js

@@ -77,5 +77,7 @@ export default {
     requiredMonthField: '{{ field }} is required',
     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 }}'
+    fileTooBig: 'File is too big; it must be at most {{ size }}',
+    // 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/utils.js

@@ -144,7 +144,7 @@ function getConditionalPathsRecursive(conditionPaths, data) {
             }
             else {
                 currentData.forEach((x, index) => {
-                    if (!_.isNil(x[conditionPaths[currentLocalIndex]])) {
+                    if (x && conditionPaths && !_.isNil(x[conditionPaths[currentLocalIndex]])) {
                         const compDataPath = `${currentPath}[${index}].${conditionPaths[currentLocalIndex]}`;
                         conditionalPathsArray.push(compDataPath);
                     }
@@ -1750,18 +1750,18 @@ export function announceScreenReaderMessage(component, value, index = 0, forFocu
     if (forFocus) {
         setTimeout(() => {
             el.textContent = "";
-            requestAnimationFrame(() => {
+            setTimeout(() => {
                 el.textContent = combinedMessage;
-            });
+            }, 50);
         }, 150);
         return;
     }
     clearTimeout(el._announceTimer);
     el._announceTimer = setTimeout(() => {
         el.textContent = "";
-        requestAnimationFrame(() => {
+        setTimeout(() => {
             el.textContent = combinedMessage;
-        });
+        }, 50);
     }, 500);
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -68,7 +68,7 @@
     "core-js": "^3.37.1",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
-    "dompurify": "^3.3.3",
+    "dompurify": "^3.4.0",
     "downloadjs": "^1.4.7",
     "dragula": "^3.7.3",
     "eventemitter3": "^5.0.1",
@@ -83,14 +83,14 @@
     "lodash": "^4.17.23",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.44",
-    "quill": "^2.0.2",
+    "quill": "2.0.2",
     "signature_pad": "^4.2.0",
     "string-hash": "^1.1.3",
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.0",
     "vanilla-picker": "^2.12.3",
-    "@formio/bootstrap": "^4.0.0",
-    "@formio/core": "^2.7.0"
+    "@formio/core": "^2.7.1",
+    "@formio/bootstrap": "^4.0.1"
   },
   "devDependencies": {
     "@types/node": "^22.15.19",