@formio/js 5.3.0 → 5.3.1

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

@@ -187,6 +187,7 @@ declare class Component extends Element {
         tooltipClass: string;
         for: any;
     };
+    getFieldsetLegendIds(): string;
     init(): void;
     /**
      * Disable this component.

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

@@ -503,6 +503,17 @@ export default class Component extends Element {
         }
         return label;
     }
+    getFieldsetLegendIds() {
+        const legendIds = [];
+        let currentParent = this.parent;
+        while (currentParent) {
+            if (currentParent.component?.type === 'fieldset' && currentParent.component?.legend) {
+                legendIds.push(`l-${currentParent.id}-legend`);
+            }
+            currentParent = currentParent.parent;
+        }
+        return legendIds.reverse().join(' ');
+    }
     init() {
         this.disabled = this.shouldDisabled;
         this._visible = this.hasCondition() ? !this.conditionallyHidden() : !this.component.hidden;
@@ -3672,7 +3683,7 @@ export default class Component extends Element {
             class: 'form-control',
             lang: this.options.language,
         };
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !this.options?.readOnly) {
             attributes.placeholder = this.t(this.component.placeholder, { _userInput: true });
         }
         if (this.component.tabindex) {

package/lib/mjs/components/_classes/input/Input.js

@@ -1,5 +1,5 @@
 import Multivalue from '../multivalue/Multivalue';
-import { convertStringToHTMLElement } from '../../../utils/index';
+import { announceScreenReaderMessage, convertStringToHTMLElement } from '../../../utils/index';
 import Widgets from '../../../widgets/index';
 import _ from 'lodash';
 export default class Input extends Multivalue {
@@ -29,7 +29,7 @@ export default class Input extends Multivalue {
         if (this.component.inputMode) {
             attr.inputmode = this.component.inputMode;
         }
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !this.options?.readOnly) {
             attr.placeholder = this.getFormattedAttribute(this.component.placeholder);
         }
         if (this.component.tabindex) {
@@ -161,6 +161,9 @@ export default class Input extends Multivalue {
         }
     }
     updateValueAt(value, flags, index) {
+        if (flags.modified) {
+            announceScreenReaderMessage(this, value, index);
+        }
         flags = flags || {};
         if (_.get(this.component, 'showWordCount', false)) {
             if (this.refs.wordcount && this.refs.wordcount[index]) {
@@ -185,7 +188,7 @@ export default class Input extends Multivalue {
     updateValue(value, flags, index) {
         flags = flags || {};
         const changed = super.updateValue(value, flags);
-        this.triggerUpdateValueAt(this.dataValue, flags, index);
+        this.triggerUpdateValueAt(this.dataValue, { ...flags }, index);
         return changed;
     }
     parseValue(value) {
@@ -196,6 +199,7 @@ export default class Input extends Multivalue {
     }
     attach(element) {
         this.loadRefs(element, {
+            announceMessage: 'multiple',
             charcount: 'multiple',
             wordcount: 'multiple',
             prefix: 'multiple',
@@ -239,6 +243,15 @@ export default class Input extends Multivalue {
                 }
             });
         }
+        this.on('focus', (comp) => {
+            announceScreenReaderMessage(comp, comp.dataValue, 0, true);
+        });
+        this.on('blur', (comp) => {
+            const el = comp.refs?.["announceMessage"]?.[0];
+            if (el) {
+                el.textContent = "";
+            }
+        });
         return promise;
     }
     /**

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

@@ -317,7 +317,7 @@ export default class AddressComponent extends ContainerComponent {
             lang: this.options.language,
             tabindex: this.component.tabindex || 0,
         };
-        if (this.component.placeholder) {
+        if (this.component.placeholder && !this.options?.readOnly) {
             ((attr.placeholder = this.t(this.component.placeholder)), { _userInput: true });
         }
         if (this.disabled) {

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

@@ -108,6 +108,16 @@ export default class DataGridComponent extends NestedArrayComponent {
         for (let dIndex = defaultValue.length; dIndex < this.minLength; dIndex++) {
             defaultValue.push({});
         }
+        if (this.component.customDefaultValue) {
+            return defaultValue;
+        }
+        if (defaultValue.length === 1 && this.columns) {
+            eachComponent(this.components, (comp, path) => {
+                if (comp.component?.input && comp.defaultValue) {
+                    _.set(defaultValue[0], path, comp.defaultValue);
+                }
+            });
+        }
         return defaultValue;
     }
     set disabled(disabled) {
@@ -433,7 +443,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         });
         screenReaderSpeech('Row has been added');
         this.checkConditions();
-        this.triggerChange?.({ modified: true });
+        this.triggerChange?.({ modified: true, noPristineChangeOnModified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
         });

package/lib/mjs/components/fieldset/Fieldset.d.ts

@@ -10,6 +10,7 @@ export default class FieldsetComponent extends NestedComponent {
     };
     static savedValueTypes(): never[];
     constructor(...args: any[]);
+    attach(element: any): Promise<void>;
     noField: boolean;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/fieldset/Fieldset.js

@@ -34,6 +34,13 @@ export default class FieldsetComponent extends NestedComponent {
     get templateName() {
         return 'fieldset';
     }
+    attach(element) {
+        return super.attach(element).then(() => {
+            if (this.component.legend && this.refs.header) {
+                this.refs.header.setAttribute('id', `l-${this.id}-legend`);
+            }
+        });
+    }
     constructor(...args) {
         super(...args);
         this.noField = true;

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

@@ -276,9 +276,9 @@ export default class SelectComponent extends ListComponent {
         // Inside DataTable component won't have dataValue set
         const shouldUseSelectData = (this.component.multiple && _.isArray(this.dataValue)
             ? this.dataValue.find((val) => this.normalizeSingleValue(value) === val)
-            : this.dataValue === this.normalizeSingleValue(value)) || this.inDataTable;
+            : this.dataValue === this.normalizeSingleValue(value)) || (this.inDataTable && !this.element);
         if (shouldUseSelectData) {
-            const selectData = this.selectData;
+            const selectData = (this.inDataTable && !this.element) ? this.component.selectData : this.selectData;
             if (selectData) {
                 const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
                 if (!this.templateData || !this.templateData[templateValue]) {
@@ -768,7 +768,7 @@ export default class SelectComponent extends ListComponent {
         }
     }
     addPlaceholder() {
-        if (!this.component.placeholder) {
+        if (!this.component.placeholder || this.options?.readOnly) {
             return;
         }
         this.addOption('', this.component.placeholder, { placeholder: true });
@@ -835,7 +835,8 @@ export default class SelectComponent extends ListComponent {
         const useSearch = this.component.hasOwnProperty('searchEnabled')
             ? this.component.searchEnabled
             : true;
-        const placeholderValue = this.t(this.component.placeholder, { _userInput: true });
+        const hasPlaceholder = !!this.component.placeholder && !this.options?.readOnly;
+        const placeholderValue = hasPlaceholder ? this.t(this.component.placeholder, { _userInput: true }) : null;
         let customOptions = this.component.customOptions || {};
         if (typeof customOptions == 'string') {
             try {
@@ -865,7 +866,7 @@ export default class SelectComponent extends ListComponent {
             },
             addItemText: false,
             allowHTML: true,
-            placeholder: !!this.component.placeholder,
+            placeholder: hasPlaceholder,
             placeholderValue: placeholderValue,
             noResultsText: this.t('No results found'),
             noChoicesText: this.t('No choices to choose from'),
@@ -1325,7 +1326,8 @@ export default class SelectComponent extends ListComponent {
         return super.normalizeValue(this.normalizeSingleValue(value));
     }
     setMetadata(value, flags = {}) {
-        if (_.isNil(value)) {
+        if (_.isNil(value) ||
+            (this.inDataTable && this.component.dataSrc === 'values')) {
             return;
         }
         const valueIsObject = _.isObject(value);
@@ -1335,7 +1337,7 @@ export default class SelectComponent extends ListComponent {
         }
         // Check to see if we need to save off the template data into our metadata.
         const templateValue = this.component.reference && value?._id ? value._id.toString() : value;
-        const shouldSaveData = (!valueIsObject || this.component.reference) && !this.inDataTable;
+        const shouldSaveData = (!valueIsObject || this.component.reference) && !(this.inDataTable && this.row === '');
         if (!_.isNil(templateValue) &&
             shouldSaveData &&
             this.templateData &&
@@ -1620,7 +1622,8 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
-        if (options.modalPreview || this.inDataTable) {
+        if (options.modalPreview ||
+            ((this.inDataTable || this.inEditGrid) && !['values', 'custom'].includes(this.component.dataSrc))) {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }

package/lib/mjs/components/tags/Tags.js

@@ -74,7 +74,7 @@ export default class TagsComponent extends Input {
         if (!Choices) {
             return;
         }
-        const hasPlaceholder = !!this.component.placeholder;
+        const hasPlaceholder = !!this.component.placeholder && !this.options?.readOnly;
         this.choices = new Choices(element, {
             delimiter: this.delimiter,
             editItems: true,

package/lib/mjs/package.json

@@ -1,5 +1,5 @@
 {
     "type": "module",
-    "version": "5.3.0"
+    "version": "5.3.1"
     
 }

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

@@ -1,9 +1,7 @@
 export default class IsEqualTo extends ConditionOperator {
-    execute({ value, comparedValue, instance, path }: {
+    execute({ value, comparedValue }: {
         value: any;
         comparedValue: any;
-        instance: any;
-        path: any;
     }): any;
 }
 import ConditionOperator from './ConditionOperator';

package/lib/mjs/utils/conditionOperators/IsEqualTo.js

@@ -1,6 +1,5 @@
 import ConditionOperator from './ConditionOperator';
 import _ from 'lodash';
-import { compareSelectResourceWithObjectTypeValues, isSelectResourceWithObjectValue } from '../';
 export default class IsEqualTo extends ConditionOperator {
     static get operatorKey() {
         return 'isEqual';
@@ -8,7 +7,7 @@ export default class IsEqualTo extends ConditionOperator {
     static get displayedName() {
         return 'Is Equal To';
     }
-    execute({ value, comparedValue, instance, path }) {
+    execute({ value, comparedValue }) {
         if ((value || value === false) &&
             comparedValue &&
             typeof value !== typeof comparedValue &&
@@ -20,18 +19,14 @@ export default class IsEqualTo extends ConditionOperator {
                 // ignore
             }
         }
-        if (instance?.root?.getComponent) {
-            const conditionTriggerComponent = instance.root.getComponent(path);
-            if (conditionTriggerComponent &&
-                isSelectResourceWithObjectValue(conditionTriggerComponent.component) &&
-                conditionTriggerComponent.component?.template) {
-                return compareSelectResourceWithObjectTypeValues(value, comparedValue, conditionTriggerComponent.component);
-            }
-        }
         //special check for select boxes
         if (_.isObject(value) && comparedValue && _.isBoolean(value[comparedValue])) {
             return value[comparedValue];
         }
-        return _.isEqual(value, comparedValue);
+        const valuesAreObjects = typeof comparedValue === 'object' &&
+            comparedValue !== null &&
+            typeof value === 'object' &&
+            value !== null;
+        return valuesAreObjects ? _.isMatch(value, comparedValue) : _.isEqual(comparedValue, value);
     }
 }

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.0",
+  "version": "5.3.1",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -88,8 +88,8 @@
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.0",
     "vanilla-picker": "^2.12.3",
-    "@formio/core": "^2.6.0",
-    "@formio/bootstrap": "^3.2.0"
+    "@formio/bootstrap": "^3.2.1",
+    "@formio/core": "^2.6.1"
   },
   "devDependencies": {
     "@types/node": "^22.15.19",