@formio/js 5.3.0 → 5.4.0-api98.1

package/lib/mjs/components/file/File.js

@@ -96,6 +96,8 @@ export default class FileComponent extends Field {
         };
         this.isSyncing = false;
         this.abortUploads = [];
+        this.pendingfiles = [];
+        this.resolvedFiles = [];
     }
     get dataReady() {
         return this.filesReady || Promise.resolve();
@@ -695,22 +697,42 @@ export default class FileComponent extends Field {
             };
         }
         // Check file minimum size
-        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {
-            return {
-                status: 'error',
-                message: this.t('File is too small; it must be at least {{ size }}', {
-                    size: this.component.fileMinSize,
-                }),
-            };
+        if (this.component.fileMinSize) {
+            const interpolatedMinSize = this.interpolate(this.component.fileMinSize, this.evalContext());
+            // This case is when the user entered fileMinSize expression, but did not enter or made a typo when
+            // setting the fileMinSize variable in the config of the project
+            if (!interpolatedMinSize) {
+                return {
+                    status: 'error',
+                    message: 'Please, check the entered parameters',
+                };
+            }
+            if (!this.validateMinSize(file, interpolatedMinSize)) {
+                return {
+                    status: 'error',
+                    message: this.t('fileTooSmall', {
+                        size: interpolatedMinSize,
+                    }),
+                };
+            }
         }
         // Check file maximum size
-        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {
-            return {
-                status: 'error',
-                message: this.t('File is too big; it must be at most {{ size }}', {
-                    size: this.component.fileMaxSize,
-                }),
-            };
+        if (this.component.fileMaxSize) {
+            const interpolatedMaxSize = this.interpolate(this.component.fileMaxSize, this.evalContext());
+            if (!interpolatedMaxSize) {
+                return {
+                    status: 'error',
+                    message: 'Please, check the entered parameters',
+                };
+            }
+            if (!this.validateMaxSize(file, interpolatedMaxSize)) {
+                return {
+                    status: 'error',
+                    message: this.t('fileTooBig', {
+                        size: interpolatedMaxSize,
+                    }),
+                };
+            }
         }
         return {};
     }
@@ -965,7 +987,23 @@ export default class FileComponent extends Field {
                         fileInfo,
                     };
                 }
-                fileInfo = await this.uploadFile(fileToSync);
+                if (fileToSync.status === "success") {
+                    const uploadedFile = this.resolvedFiles.find(x => x.fileToSync.originalName === fileToSync.originalName);
+                    return {
+                        fileToSync: uploadedFile.fileToSync,
+                        fileInfo: uploadedFile.fileInfo,
+                    };
+                }
+                const pendingFile = this.pendingfiles.find(x => x.name === fileToSync.name);
+                if (pendingFile) {
+                    fileInfo = await pendingFile.fileInfoProm;
+                }
+                else {
+                    const promInfo = this.uploadFile(fileToSync);
+                    this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });
+                    fileInfo = await promInfo;
+                }
+                this.pendingfiles = this.pendingfiles.filter(x => x.name !== fileToSync.name);
                 fileToSync.status = 'success';
                 fileToSync.message = this.t('Succefully uploaded');
                 fileInfo.originalName = fileToSync.originalName;
@@ -990,6 +1028,10 @@ export default class FileComponent extends Field {
             finally {
                 delete fileToSync.progress;
                 this.redraw();
+                const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
+                if (!fileExists) {
+                    this.resolvedFiles.push({ fileToSync, fileInfo });
+                }
             }
             return {
                 fileToSync,
@@ -1006,6 +1048,9 @@ export default class FileComponent extends Field {
                 this.delete(),
                 this.upload(),
             ]);
+            if (filesToUpload.length !== this.filesToSync?.filesToUpload?.length) {
+                return;
+            }
             this.filesToSync.filesToDelete = filesToDelete
                 .filter((file) => file.fileToSync?.status === 'error')
                 .map((file) => file.fileToSync);

package/lib/mjs/components/form/Form.js

@@ -554,7 +554,8 @@ export default class FormComponent extends Component {
     get shouldSubmit() {
         return (this.subFormReady &&
             (!this.component.hasOwnProperty('reference') || this.component.reference) &&
-            !this.shouldConditionallyClear());
+            !this.shouldConditionallyClear() &&
+            !(this.component.hidden && this.component.clearOnHide));
     }
     /**
      * Returns the data for the subform.

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]) {
@@ -522,7 +522,7 @@ export default class SelectComponent extends ListComponent {
                     noUpdateEvent: true,
                 });
             }
-            else if (this.shouldAddDefaultValue && !this.options.readOnly) {
+            else if (this.shouldAddDefaultValue && !this.options.readOnly && this.root && !this.root.submissionSet) {
                 // If a default value is provided then select it.
                 const defaultValue = this.defaultValue;
                 if (!this.isEmpty(defaultValue)) {
@@ -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/table/editForm/Table.edit.display.d.ts

@@ -10,6 +10,8 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -27,6 +29,8 @@ declare const _default: ({
     autofocus: boolean;
     overrideEditForm: boolean;
     ignore?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -42,6 +46,25 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    defaultValue?: undefined;
+} | {
+    label: string;
+    multiple: boolean;
+    key: string;
+    type: string;
+    input: boolean;
+    tooltip: string;
+    customConditional: string;
+    weight: number;
+    ignore?: undefined;
+    placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -57,6 +80,8 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -80,5 +105,7 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/table/editForm/Table.edit.display.js

@@ -67,6 +67,16 @@ export default [
         placeholder: 'Number of Columns',
         tooltip: 'Enter the number or columns that should be displayed by this table.',
     },
+    {
+        label: "Column Headers",
+        multiple: true,
+        key: "header",
+        type: "textfield",
+        input: true,
+        tooltip: 'Enter header names for the columns',
+        customConditional: "if(instance && instance.dataValue && Array.isArray(instance.dataValue)) {\r\n  const isAllowToAddHeader = instance.dataValue.length < data.numCols;\r\n  const addBtn = _.get(instance, 'refs.addButton[0]', null);\r\n  if(addBtn) {\r\n    isAllowToAddHeader? addBtn.removeAttribute('disabled'):  addBtn.setAttribute('disabled', 'disabled');\r\n  }\r\n} ",
+        weight: 3,
+    },
     {
         type: 'checkbox',
         label: 'Clone Row Components',

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.4.0-api98.1"
     
 }

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

@@ -20,6 +20,9 @@ declare namespace _default {
         wizardHeaderVertical: {
             form: string;
         };
+        wizardHeaderStepIndicator: {
+            form: string;
+        };
         wizardNav: {
             form: string;
         };

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

@@ -76,5 +76,7 @@ declare namespace _default {
     let requiredDayEmpty: string;
     let requiredMonthField: string;
     let requiredYearField: string;
+    let fileTooSmall: string;
+    let fileTooBig: string;
 }
 export default _default;

package/lib/mjs/translations/en.js

@@ -76,4 +76,6 @@ export default {
     requiredDayEmpty: '{{ field }} is required',
     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 }}'
 };

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/i18n.d.ts

@@ -7,6 +7,7 @@ export class I18n {
     constructor(languages?: {});
     languages: {};
     language: string;
+    originalLanguage: string;
     currentLanguage: any;
     setLanguages(languages: any): void;
     dir(lang?: string): "rtl" | "ltr";

package/lib/mjs/utils/i18n.js

@@ -12,6 +12,7 @@ for (const lang in i18n.resources) {
 export class I18n {
     languages = i18Defaults;
     language = 'en';
+    originalLanguage = 'en';
     currentLanguage = i18Defaults.en;
     constructor(languages = {}) {
         this.setLanguages(languages);
@@ -66,6 +67,7 @@ export class I18n {
         return new I18n();
     }
     changeLanguage(language, ready = null) {
+        this.originalLanguage = language;
         if (!this.languages[language]) {
             language = 'en';
         }

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.4.0-api98.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": "^4.0.0-api98.1",
+    "@formio/core": "^2.7.0-api98.0"
   },
   "devDependencies": {
     "@types/node": "^22.15.19",
@@ -100,6 +100,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": "^9.38.0",
@@ -170,7 +171,7 @@
     "lint": "eslint . --fix",
     "serve": "jekyll serve --config _config.yml,_config.dev.yml",
     "test": "mocha --config .mocharc.json test/unit/*.unit.js",
-    "test:updateRenders": "npm run lib && cross-env TZ=UTC node --require jsdom-global/register test/updateRenders.js",
+    "test:updateRenders": "npm run lib && cross-env TZ=UTC node --require jsdom-global/register test/updateRenders.cjs",
     "show-coverage": "open coverage/lcov-report/index.html"
   }
 }