@formio/js 5.3.1-refb-rc.0 → 5.3.2

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

@@ -1,6 +1,7 @@
 export default ConditionOperators;
 declare const ConditionOperators: {
-    [x: string]: typeof IsEqualTo | typeof DateGreaterThan;
+    [x: string]: typeof IsEqualTo | typeof IsEmptyValue | typeof DateGreaterThan;
 };
 import IsEqualTo from './IsEqualTo';
+import IsEmptyValue from './IsEmptyValue';
 import DateGreaterThan from './DateGreaterThan';

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

@@ -5,7 +5,7 @@ declare const FormioUtils: {
     Evaluator: DefaultEvaluator;
     interpolate: typeof interpolate;
     ConditionOperators: {
-        [x: string]: typeof import("./conditionOperators/IsEqualTo").default | typeof import("./conditionOperators/DateGreaterThan").default;
+        [x: string]: typeof import("./conditionOperators/IsEqualTo").default | typeof import("./conditionOperators/IsEmptyValue").default | typeof import("./conditionOperators/DateGreaterThan").default;
     };
     _: any;
     moment: typeof moment;
@@ -150,6 +150,7 @@ declare const FormioUtils: {
     getFocusableElements(element: HTMLElement): NodeList<HTMLElement>;
     getComponentSavedTypes(fullSchema: import("@formio/core").Component): string[] | null;
     hasEncodedTimezone(value: string): boolean;
+    announceScreenReaderMessage(component: any, value: any, index?: any, forFocus?: any): undefined;
     screenReaderSpeech(text: string): void;
     firstNonNil: any;
     componentValueTypes: {

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

@@ -499,6 +499,15 @@ export function getComponentSavedTypes(fullSchema: import('@formio/core').Compon
  * @returns {boolean} if value has encoded timezone
  */
 export function hasEncodedTimezone(value: string): boolean;
+/**
+ * The function for announcing messages via a screen reader
+ * @param {component} component - The component instance
+ * @param {value} value - The current component value
+ * @param {index} index - The component index
+ * @param {forFocus} forFocus - Whether the component is focused or not
+ * @returns {undefined}
+ */
+export function announceScreenReaderMessage(component: any, value: any, index?: any, forFocus?: any): undefined;
 /**
  * Outputs text to screen reader
  * @param {string} text The text to output to screen readers

package/lib/mjs/utils/utils.js

@@ -135,7 +135,7 @@ function getConditionalPathsRecursive(conditionPaths, data) {
             if (currentData.some((element) => typeof element !== 'object')) {
                 return;
             }
-            const hasInnerDataArray = currentData.find((x) => Array.isArray(x[conditionPaths[currentLocalIndex]]));
+            const hasInnerDataArray = currentData.find((x) => x && conditionPaths && Array.isArray(x[conditionPaths[currentLocalIndex]]));
             if (hasInnerDataArray) {
                 currentData.forEach((_, indexOutside) => {
                     const innerCompDataPath = `${currentPath}[${indexOutside}].${conditionPaths[currentLocalIndex]}`;
@@ -1619,6 +1619,135 @@ export function hasEncodedTimezone(value) {
         value.substring(value.length - 1) === 'Z' ||
         value.match(/[+|-][0-9]{2}:[0-9]{2}$/));
 }
+// Types for min max validation if value = string
+const TYPES = new Map([["char", "Length"], ["word", "Words"]]);
+// The number from which the remaining character(words) count message starts being read
+const REMAIN_COUNT = new Map([["char", 10], ["word", 5]]);
+function getWordOrCharacterLabel(isWordType, count) {
+    const base = isWordType ? "word" : "character";
+    return Math.abs(count) === 1 ? base : `${base}s`;
+}
+/**
+ * The function calculates the message values depending on the type and the current component settings.
+ * @param {component} component - The component instance
+ * @param {type} type - The type of validation max and min
+ * @param {value} value - The current component value
+ * @param {forFocus} forFocus - Whether the component is focused or not
+ * @returns {string} - The messsage string
+ */
+function getScreenReaderMessage(component, type, value) {
+    const isWordType = type === "word";
+    const maxKey = typeof value === "string" && (type === "char" || isWordType)
+        ? `validate.max${TYPES.get(type)}`
+        : "validate.max";
+    const minKey = typeof value === "string" && (type === "char" || isWordType)
+        ? `validate.min${TYPES.get(type)}`
+        : "validate.min";
+    const max = _.parseInt(_.get(component.component, maxKey), 10);
+    const min = _.parseInt(_.get(component.component, minKey), 10);
+    let message = "";
+    if (typeof value === "string") {
+        const currentLength = isWordType ? component.getWordCount(value) : value.length;
+        if (!isNaN(max)) {
+            const remains = max - currentLength;
+            if (value) {
+                const threshold = REMAIN_COUNT.get(type) || max;
+                if (remains > 0 && remains < threshold) {
+                    message += `${remains} ${getWordOrCharacterLabel(isWordType, remains)} remaining. `;
+                }
+                else if (remains < 0) {
+                    const removeCount = Math.abs(remains);
+                    message += `${removeCount} ${getWordOrCharacterLabel(isWordType, removeCount)} should be removed. `;
+                }
+                else if (remains === 0) {
+                    message += `No ${getWordOrCharacterLabel(isWordType, 0)} remaining.`;
+                }
+            }
+            else {
+                message += `Maximum ${max} ${getWordOrCharacterLabel(isWordType, max)}. `;
+            }
+        }
+        if (!isNaN(min)) {
+            if (value) {
+                const remains = min - currentLength;
+                if (remains > 0) {
+                    message += `${remains} ${getWordOrCharacterLabel(isWordType, remains)} should be added.`;
+                }
+                if (remains === 0) {
+                    message += ``;
+                }
+            }
+            else {
+                message += `Minimum ${min} ${getWordOrCharacterLabel(isWordType, min)}. `;
+            }
+        }
+    }
+    else if (typeof value === "number" || value === null) {
+        if (value != null && value !== "") {
+            if (!isNaN(max) && value > max) {
+                message += `Number cannot be greater than ${max}. `;
+            }
+            if (!isNaN(min) && value < min) {
+                message += `Number cannot be less than ${min}.`;
+            }
+        }
+        else {
+            if (!isNaN(min))
+                message += `Minimum value ${min}. `;
+            if (!isNaN(max))
+                message += `Maximum value ${max}. `;
+        }
+    }
+    return message.trim();
+}
+/**
+ * The function for announcing messages via a screen reader
+ * @param {component} component - The component instance
+ * @param {value} value - The current component value
+ * @param {index} index - The component index
+ * @param {forFocus} forFocus - Whether the component is focused or not
+ * @returns {undefined}
+ */
+export function announceScreenReaderMessage(component, value, index = 0, forFocus = false) {
+    if (typeof value !== "string" && typeof value !== "number" && value !== null) {
+        return;
+    }
+    // The ref for announcing messages
+    const messageSpan = "announceMessage";
+    if (!component.refs[messageSpan])
+        return;
+    const el = component.refs[messageSpan][index];
+    if (!el)
+        return;
+    // Define types for validation
+    const typesToCheck = [];
+    if (typeof value === "string")
+        typesToCheck.push("char", "word");
+    if (typeof value === "number" || value === null)
+        typesToCheck.push("number");
+    // Construct the combined message
+    const combinedMessage = typesToCheck
+        .map(type => getScreenReaderMessage(component, type, value))
+        .filter(msg => msg)
+        .join(" ")
+        .trim();
+    if (forFocus) {
+        setTimeout(() => {
+            el.textContent = "";
+            requestAnimationFrame(() => {
+                el.textContent = combinedMessage;
+            });
+        }, 150);
+        return;
+    }
+    clearTimeout(el._announceTimer);
+    el._announceTimer = setTimeout(() => {
+        el.textContent = "";
+        requestAnimationFrame(() => {
+            el.textContent = combinedMessage;
+        });
+    }, 500);
+}
 /**
  * Outputs text to screen reader
  * @param {string} text The text to output to screen readers

package/lib/mjs/widgets/CalendarWidget.js

@@ -442,7 +442,7 @@ export default class CalendarWidget extends InputWidget {
         // If other fields are used to calculate disabled dates, we need to redraw calendar to refresh disabled dates
         if (this.settings.disableFunction && this.componentInstance && this.componentInstance.root) {
             this.changeHandler = (e) => {
-                if (e.changed && this.calendar) {
+                if (e.changed && this.calendar?.config) {
                     this.calendar.redraw();
                 }
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.3.1-refb-rc.0",
+  "version": "5.3.2",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -67,7 +67,7 @@
     "core-js": "^3.37.1",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.3.3",
     "downloadjs": "^1.4.7",
     "dragula": "^3.7.3",
     "eventemitter3": "^5.0.1",
@@ -88,8 +88,8 @@
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.0",
     "vanilla-picker": "^2.12.3",
-    "@formio/bootstrap": "^3.2.0",
-    "@formio/core": "^2.6.0"
+    "@formio/bootstrap": "^3.2.2",
+    "@formio/core": "^2.6.2"
   },
   "devDependencies": {
     "@types/node": "^22.15.19",