@formio/js 5.2.5 → 5.2.7-rc.0

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.5 | https://unpkg.com/formiojs@5.2.5/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.5';
+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/Form.js

@@ -250,7 +250,7 @@ class Form extends Element_1.default {
             return Promise.resolve(this.instance);
         }
         this.form.display = display;
-        this.instance.destroy();
+        this.instance.destroy(true);
         this.instance = this.create(display);
         return this.setForm(this.form);
     }

package/lib/cjs/FormBuilder.d.ts

@@ -73,11 +73,11 @@ export default class FormBuilder extends Form {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */
-    constructor(element: HTMLElement, form: string | object, options: {
+    constructor(element: HTMLElement, form: string | object | undefined, options: {
         /**
          * - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
          */

package/lib/cjs/FormBuilder.js

@@ -10,7 +10,7 @@ class FormBuilder extends Form_1.default {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */

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.5';
+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/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.5"
+    "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.5';
+    static version = '5.2.6';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {

package/lib/mjs/Form.js

@@ -342,7 +342,7 @@ export default class Form extends Element {
             return Promise.resolve(this.instance);
         }
         this.form.display = display;
-        this.instance.destroy();
+        this.instance.destroy(true);
         this.instance = this.create(display);
         return this.setForm(this.form);
     }

package/lib/mjs/FormBuilder.d.ts

@@ -73,11 +73,11 @@ export default class FormBuilder extends Form {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */
-    constructor(element: HTMLElement, form: string | object, options: {
+    constructor(element: HTMLElement, form: string | object | undefined, options: {
         /**
          * - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
          */

package/lib/mjs/FormBuilder.js

@@ -25,7 +25,7 @@ export default class FormBuilder extends Form {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */

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.5';
+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/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.5"
+    "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.5",
+  "version": "5.2.7-rc.0",
   "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",