@formio/js 5.2.4 → 5.2.6

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

@@ -22,7 +22,7 @@
 
 /*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
 
-/*! formiojs v5.2.4 | https://unpkg.com/formiojs@5.2.4/LICENSE.txt */
+/*! formiojs v5.2.6 | https://unpkg.com/formiojs@5.2.6/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

@@ -419,7 +419,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.2.4';
+Formio.version = '5.2.6';
 // 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.2.4';
+sdk_1.Formio.version = '5.2.6';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 sdk_1.Formio.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

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

@@ -2216,7 +2216,7 @@ class Component extends Element_1.default {
     setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
         this.clearErrorClasses();
         elements.forEach((element) => {
-            this.setElementInvalid(this.performInputMapping(element), false);
+            this.setElementInvalid(this.performInputMapping(element), hasErrors);
         });
         this.setInputWidgetErrorClasses(elements, hasErrors);
         // do not set error classes for hidden components
@@ -2254,6 +2254,9 @@ class Component extends Element_1.default {
         else {
             this.removeClass(element, 'is-invalid');
         }
+        if (this.type === 'radio' && !invalid) {
+            return;
+        }
         element.setAttribute('aria-invalid', invalid ? 'true' : 'false');
     }
     /**

package/lib/cjs/components/_classes/nested/NestedComponent.d.ts

@@ -149,7 +149,7 @@ export default class NestedComponent extends Field {
     beforeFocus(): void;
     render(children: any): string;
     renderComponents(components: any): any;
-    attach(element: any): Promise<[void, void]>;
+    attach(element: any): Promise<void>;
     /**
      * Attach the logic to the components.
      * @param {import('@formio/core').Component[]} components - The components to attach logic to.

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

@@ -1,4 +1,13 @@
 '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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -58,11 +67,12 @@ class NestedComponent extends Field_1.default {
      * @returns {void}
      */
     collapse(value) {
-        const promise = this.redraw();
-        if (!value) {
-            this.checkValidity(this.data, !this.pristine);
-        }
-        return promise;
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.redraw();
+            if (!value) {
+                this.checkValidity(this.data, !this.pristine);
+            }
+        });
     }
     /**
      * Set collapsed state.
@@ -490,35 +500,37 @@ class NestedComponent extends Field_1.default {
         });
     }
     attach(element) {
-        const superPromise = super.attach(element);
-        this.loadRefs(element, {
-            header: 'single',
-            collapsed: this.collapsed,
-            [this.nestedKey]: 'single',
-            messageContainer: 'single-scope',
+        const _super = Object.create(null, {
+            attach: { get: () => super.attach }
         });
-        let childPromise = Promise.resolve();
-        if (this.refs[this.nestedKey]) {
-            childPromise = this.attachComponents(this.refs[this.nestedKey]);
-        }
-        if (!this.visible) {
-            this.attachComponentsLogic();
-        }
-        if (this.component.collapsible && this.refs.header) {
-            this.addEventListener(this.refs.header, 'click', () => {
-                this.collapsed = !this.collapsed;
+        return __awaiter(this, void 0, void 0, function* () {
+            yield _super.attach.call(this, element);
+            this.loadRefs(element, {
+                header: 'single',
+                collapsed: this.collapsed,
+                [this.nestedKey]: 'single',
+                messageContainer: 'single-scope',
             });
-            this.addEventListener(this.refs.header, 'keydown', (e) => {
-                if (e.keyCode === 13 || e.keyCode === 32) {
-                    e.preventDefault();
+            let childPromise = Promise.resolve();
+            if (this.refs[this.nestedKey]) {
+                childPromise = this.attachComponents(this.refs[this.nestedKey]);
+            }
+            if (!this.visible) {
+                this.attachComponentsLogic();
+            }
+            if (this.component.collapsible && this.refs.header) {
+                this.addEventListener(this.refs.header, 'click', () => {
                     this.collapsed = !this.collapsed;
-                }
-            });
-        }
-        return Promise.all([
-            superPromise,
-            childPromise,
-        ]);
+                });
+                this.addEventListener(this.refs.header, 'keydown', (e) => {
+                    if (e.keyCode === 13 || e.keyCode === 32) {
+                        e.preventDefault();
+                        this.collapsed = !this.collapsed;
+                    }
+                });
+            }
+            return yield childPromise;
+        });
     }
     /**
      * Attach the logic to the components.

package/lib/cjs/components/address/Address.d.ts

@@ -72,7 +72,6 @@ export default class AddressComponent extends ContainerComponent {
     render(): string;
     onSelectAddress(address: any, element: any, index: any): void;
     addRow(): void;
-    attach(element: any): Promise<void>;
     addChildComponent(component: any): void;
     clearAddress(element: any, index: any): void;
     getDisplayValue(value?: any): any;

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

@@ -396,6 +396,7 @@ 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 });
         this.redraw().then(() => {
@@ -423,7 +424,10 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
-        const [row] = this.rows.splice(index, 1);
+        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);

package/lib/cjs/components/day/Day.js

@@ -53,7 +53,7 @@ class DayComponent extends Field_1.default {
         return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];
     }
     constructor(component, options, data) {
-        if (!options.inFormBuilder && !options.building) {
+        if (options && !options.inFormBuilder && !options.building) {
             if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
                 component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();
             }

package/lib/cjs/components/editgrid/EditGrid.js

@@ -807,6 +807,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 return false;
             }
         }
+        (0, utils_1.screenReaderSpeech)('Row has been saved');
         if (this.saveEditMode) {
             const dataValue = this.dataValue;
             if ((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.component.typeChangeEnabled) {
@@ -894,6 +895,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         this.emit('editGridDeleteRow', {
             index: rowIndex
         });
+        (0, utils_1.screenReaderSpeech)('Row has been deleted');
         this.editRows.splice(rowIndex, 1);
         this.openWhenEmpty();
         this.updateRowsComponents(rowIndex);

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.2.4"
+    "version": "5.2.6"
 }

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

@@ -149,6 +149,7 @@ declare const FormioUtils: {
     isPromise(value: any): boolean;
     getFocusableElements(element: HTMLElement): NodeList<HTMLElement>;
     getComponentSavedTypes(fullSchema: import("@formio/core").Component): string[] | null;
+    screenReaderSpeech(text: string): void;
     firstNonNil: any;
     componentValueTypes: {
         number: string;

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

@@ -490,6 +490,11 @@ export function getFocusableElements(element: HTMLElement): NodeList<HTMLElement
  * @returns {Array<string>|null} - The saved types for the component
  */
 export function getComponentSavedTypes(fullSchema: import('@formio/core').Component): Array<string> | null;
+/**
+ * Outputs text to screen reader
+ * @param {string} text The text to output to screen readers
+ */
+export function screenReaderSpeech(text: string): void;
 /**
  * Map values through unfold and return first non-nil value.
  * @param {Array<T>} collection - The collection to map through unfold.;

package/lib/cjs/utils/utils.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getContextComponents = exports.observeOverload = exports.withSwitch = exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = void 0;
-exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = void 0;
+exports.screenReaderSpeech = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = void 0;
 /* global jQuery */
 const lodash_1 = __importDefault(require("lodash"));
 const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezone"));
@@ -1608,3 +1608,20 @@ const interpolateErrors = (component, errors, interpolateFn) => {
     });
 };
 exports.interpolateErrors = interpolateErrors;
+/**
+ * Outputs text to screen reader
+ * @param {string} text The text to output to screen readers
+ */
+function screenReaderSpeech(text) {
+    const ariaSpeechElement = document.createElement('div');
+    ariaSpeechElement.setAttribute("style", "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;white-space: nowrap;");
+    document.body.append(ariaSpeechElement);
+    ariaSpeechElement.ariaLive = 'assertive';
+    setTimeout(() => {
+        ariaSpeechElement.textContent = text;
+        setTimeout(() => {
+            ariaSpeechElement.remove();
+        }, 1000);
+    }, 100);
+}
+exports.screenReaderSpeech = screenReaderSpeech;

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.2.4';
+    static version = '5.2.6';
     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.2.4';
+FormioCore.version = '5.2.6';
 CDN.defaultCDN = FormioCore.version.includes('rc') ? 'https://cdn.test-form.io' : 'https://cdn.form.io';
 const isNil = (val) => val === null || val === undefined;
 FormioCore.prototype.uploadFile = function (storage, file, fileName, dir, progressCallback, url, options, fileKey, groupPermissions, groupId, uploadStartCallback, abortCallback, multipartOptions) {

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

@@ -2211,7 +2211,7 @@ export default class Component extends Element {
     setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
         this.clearErrorClasses();
         elements.forEach((element) => {
-            this.setElementInvalid(this.performInputMapping(element), false);
+            this.setElementInvalid(this.performInputMapping(element), hasErrors);
         });
         this.setInputWidgetErrorClasses(elements, hasErrors);
         // do not set error classes for hidden components
@@ -2249,6 +2249,9 @@ export default class Component extends Element {
         else {
             this.removeClass(element, 'is-invalid');
         }
+        if (this.type === 'radio' && !invalid) {
+            return;
+        }
         element.setAttribute('aria-invalid', invalid ? 'true' : 'false');
     }
     /**

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -149,7 +149,7 @@ export default class NestedComponent extends Field {
     beforeFocus(): void;
     render(children: any): string;
     renderComponents(components: any): any;
-    attach(element: any): Promise<[void, void]>;
+    attach(element: any): Promise<void>;
     /**
      * Attach the logic to the components.
      * @param {import('@formio/core').Component[]} components - The components to attach logic to.

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

@@ -53,12 +53,11 @@ export default class NestedComponent extends Field {
      * @param {boolean} value - The collapsed state.
      * @returns {void}
      */
-    collapse(value) {
-        const promise = this.redraw();
+    async collapse(value) {
+        await this.redraw();
         if (!value) {
             this.checkValidity(this.data, !this.pristine);
         }
-        return promise;
     }
     /**
      * Set collapsed state.
@@ -485,8 +484,8 @@ export default class NestedComponent extends Field {
             components,
         });
     }
-    attach(element) {
-        const superPromise = super.attach(element);
+    async attach(element) {
+        await super.attach(element);
         this.loadRefs(element, {
             header: 'single',
             collapsed: this.collapsed,
@@ -511,10 +510,7 @@ export default class NestedComponent extends Field {
                 }
             });
         }
-        return Promise.all([
-            superPromise,
-            childPromise,
-        ]);
+        return await childPromise;
     }
     /**
      * Attach the logic to the components.

package/lib/mjs/components/address/Address.d.ts

@@ -72,7 +72,6 @@ export default class AddressComponent extends ContainerComponent {
     render(): string;
     onSelectAddress(address: any, element: any, index: any): void;
     addRow(): void;
-    attach(element: any): Promise<void>;
     addChildComponent(component: any): void;
     clearAddress(element: any, index: any): void;
     getDisplayValue(value?: any): any;

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

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
-import { fastCloneDeep, getFocusableElements, getComponent } from '../../utils';
+import { fastCloneDeep, getFocusableElements, getComponent, eachComponent, screenReaderSpeech } from '../../utils';
 import dragula from 'dragula';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
@@ -392,6 +392,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             component: this.component,
             row
         });
+        screenReaderSpeech('Row has been added');
         this.checkConditions();
         this.triggerChange?.({ modified: true });
         this.redraw().then(() => {
@@ -418,7 +419,10 @@ export default class DataGridComponent extends NestedArrayComponent {
         const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
-        const [row] = this.rows.splice(index, 1);
+        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);

package/lib/mjs/components/day/Day.js

@@ -53,7 +53,7 @@ export default class DayComponent extends Field {
     // Empty value used before 9.3.x
     static oldEmptyValue = '00/00/0000';
     constructor(component, options, data) {
-        if (!options.inFormBuilder && !options.building) {
+        if (options && !options.inFormBuilder && !options.building) {
             if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
                 component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
             }

package/lib/mjs/components/editgrid/EditGrid.js

@@ -4,7 +4,7 @@ import { editgrid as templates } from '@formio/bootstrap/components';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import Component from '../_classes/component/Component';
 import Alert from '../alert/Alert';
-import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent } from '../../utils';
+import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent, screenReaderSpeech } from '../../utils';
 const EditRowState = {
     New: 'new',
     Editing: 'editing',
@@ -797,6 +797,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 return false;
             }
         }
+        screenReaderSpeech('Row has been saved');
         if (this.saveEditMode) {
             const dataValue = this.dataValue;
             if (this.root?.focusedComponent?.component.typeChangeEnabled) {
@@ -883,6 +884,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.emit('editGridDeleteRow', {
             index: rowIndex
         });
+        screenReaderSpeech('Row has been deleted');
         this.editRows.splice(rowIndex, 1);
         this.openWhenEmpty();
         this.updateRowsComponents(rowIndex);

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.2.4"
+    "version": "5.2.6"
     
 }

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

@@ -149,6 +149,7 @@ declare const FormioUtils: {
     isPromise(value: any): boolean;
     getFocusableElements(element: HTMLElement): NodeList<HTMLElement>;
     getComponentSavedTypes(fullSchema: import("@formio/core").Component): string[] | null;
+    screenReaderSpeech(text: string): void;
     firstNonNil: any;
     componentValueTypes: {
         number: string;

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

@@ -490,6 +490,11 @@ export function getFocusableElements(element: HTMLElement): NodeList<HTMLElement
  * @returns {Array<string>|null} - The saved types for the component
  */
 export function getComponentSavedTypes(fullSchema: import('@formio/core').Component): Array<string> | null;
+/**
+ * Outputs text to screen reader
+ * @param {string} text The text to output to screen readers
+ */
+export function screenReaderSpeech(text: string): void;
 /**
  * Map values through unfold and return first non-nil value.
  * @param {Array<T>} collection - The collection to map through unfold.;

package/lib/mjs/utils/utils.js

@@ -1532,3 +1532,19 @@ export const interpolateErrors = (component, errors, interpolateFn) => {
         return { ...error, message: unescapeHTML(interpolateFn(toInterpolate, context)), context: { ...context } };
     });
 };
+/**
+ * Outputs text to screen reader
+ * @param {string} text The text to output to screen readers
+ */
+export function screenReaderSpeech(text) {
+    const ariaSpeechElement = document.createElement('div');
+    ariaSpeechElement.setAttribute("style", "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;white-space: nowrap;");
+    document.body.append(ariaSpeechElement);
+    ariaSpeechElement.ariaLive = 'assertive';
+    setTimeout(() => {
+        ariaSpeechElement.textContent = text;
+        setTimeout(() => {
+            ariaSpeechElement.remove();
+        }, 1000);
+    }, 100);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.2.4",
+  "version": "5.2.6",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -91,8 +91,8 @@
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.0",
     "vanilla-picker": "^2.12.3",
-    "@formio/bootstrap": "^3.1.3",
-    "@formio/core": "^2.5.3"
+    "@formio/bootstrap": "^3.1.4",
+    "@formio/core": "^2.5.4"
   },
   "devDependencies": {
     "@types/node": "^22.15.19",
@@ -105,6 +105,7 @@
     "browser-env": "^3.3.0",
     "chai": "^4.3.7",
     "chance": "^1.1.9",
+    "cross-env": "^10.1.0",
     "ejs-loader": "^0.5.0",
     "escape-string-regexp": "^5.0.0",
     "eslint": "^8.57.0",