@formio/js 5.4.0 → 5.4.2

package/lib/mjs/components/checkbox/Checkbox.js

@@ -30,9 +30,7 @@ export default class CheckBoxComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [
-                'isEqual',
-            ],
+            operators: ['isEqual'],
             valueComponent() {
                 return {
                     valueType: 'boolean',
@@ -54,13 +52,9 @@ export default class CheckBoxComponent extends Field {
             return types;
         }
         if (schema.inputType === 'radio') {
-            return [
-                componentValueTypes.string,
-            ];
+            return [componentValueTypes.string];
         }
-        return [
-            componentValueTypes.boolean,
-        ];
+        return [componentValueTypes.boolean];
     }
     get defaultSchema() {
         return CheckBoxComponent.schema();
@@ -195,7 +189,7 @@ export default class CheckBoxComponent extends Field {
         if (_.isUndefined(value) && this.inDataTable) {
             return '';
         }
-        return this.t(hasValue ? 'Yes' : 'No');
+        return this.t(hasValue ? 'yes' : 'no');
     }
     updateValue(value, flags) {
         // If this is a radio and is alredy checked, uncheck it.

package/lib/mjs/components/checkbox/editForm/Checkbox.edit.display.js

@@ -58,10 +58,7 @@ export default [
         weight: 420,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.inputType' },
-                    'radio',
-                ],
+                '===': [{ var: 'data.inputType' }, 'radio'],
             },
         },
     },
@@ -74,10 +71,7 @@ export default [
         weight: 430,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.inputType' },
-                    'radio',
-                ],
+                '===': [{ var: 'data.inputType' }, 'radio'],
             },
         },
     },

package/lib/mjs/components/columns/Columns.js

@@ -36,9 +36,7 @@ export default class ColumnsComponent extends NestedComponent {
         this.rows = [];
     }
     get schema() {
-        const schema = _.omit(super.schema, [
-            'components',
-        ]);
+        const schema = _.omit(super.schema, ['components']);
         schema.columns?.map((column, colIndex) => {
             column.components.map((comp, compIndex) => {
                 const clonedComp = _.clone(comp);
@@ -122,28 +120,18 @@ export default class ColumnsComponent extends NestedComponent {
         const initVal = { stack: [], rows: [] };
         const width = (x) => x.component.width;
         const result = _.reduce(this.components, (acc, next) => {
-            const stack = [
-                ...acc.stack,
-                next,
-            ];
+            const stack = [...acc.stack, next];
             if (_.sumBy(stack, width) <= this.gridSize) {
                 acc.stack = stack;
                 return acc;
             }
             else {
-                acc.rows = [
-                    ...acc.rows,
-                    acc.stack,
-                ];
-                acc.stack = [
-                    next,
-                ];
+                acc.rows = [...acc.rows, acc.stack];
+                acc.stack = [next];
                 return acc;
             }
         }, initVal);
-        return _.concat(result.rows, [
-            result.stack,
-        ]);
+        return _.concat(result.rows, [result.stack]);
     }
     checkData(data, flags, row, components) {
         super.checkData(data, flags, row, components);

package/lib/mjs/components/container/Container.js

@@ -32,9 +32,7 @@ export default class ContainerComponent extends NestedDataComponent {
         this.type = 'container';
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     addComponents(data, options) {
         return super.addComponents(this.dataValue, options);

package/lib/mjs/components/currency/Currency.js

@@ -104,13 +104,8 @@ export default class CurrencyComponent extends NumberComponent {
         const isNegative = value.includes(negativeValueSymbol) || false;
         value = this.stripPrefixSuffix(isNegative ? value.replace(negativeValueSymbol, '') : value);
         if (value.includes(this.decimalSeparator)) {
-            [
-                integerPart,
-                decimalPart,
-            ] = value.split(this.decimalSeparator);
-            decimalPartNumbers = [
-                ...decimalPart.split(''),
-            ];
+            [integerPart, decimalPart] = value.split(this.decimalSeparator);
+            decimalPartNumbers = [...decimalPart.split('')];
         }
         else {
             integerPart = value;

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

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
-import { fastCloneDeep, getFocusableElements, getComponent, eachComponent, screenReaderSpeech } from '../../utils';
+import { fastCloneDeep, getFocusableElements, getComponent, eachComponent } from '../../utils';
 import dragula from 'dragula';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
@@ -34,9 +34,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.components = this.components || [];
         // Add new values based on minLength.
         this.rows = [];
-        this.columns = [
-            ...this.component.components,
-        ];
+        this.columns = [...this.component.components];
         if (this.initRows || !_.isEqual(this.dataValue, this.emptyValue)) {
             this.createRows(true);
         }
@@ -64,11 +62,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         return this.builderMode || this.path === 'defaultValue' || !this.initEmpty;
     }
     get emptyValue() {
-        return this.initEmpty
-            ? []
-            : [
-                {},
-            ];
+        return this.initEmpty ? [] : [{}];
     }
     get addAnotherPosition() {
         return _.get(this.component, 'addAnotherPosition', 'bottom');
@@ -86,11 +80,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         const isEmptyInit = this.initEmpty;
         // Ensure we have one and only one row in builder mode.
         if (isBuilderMode || (isEmptyInit && !this.dataValue.length)) {
-            return isEmptyInit && !isBuilderMode
-                ? []
-                : [
-                    {},
-                ];
+            return isEmptyInit && !isBuilderMode ? [] : [{}];
         }
         const value = super.defaultValue;
         let defaultValue;
@@ -98,9 +88,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             defaultValue = value;
         }
         else if (value && typeof value === 'object') {
-            defaultValue = [
-                value,
-            ];
+            defaultValue = [value];
         }
         else {
             defaultValue = this.emptyValue;
@@ -160,22 +148,10 @@ export default class DataGridComponent extends NestedArrayComponent {
      * @returns {Array<T[]>} - The chunked rows
      */
     getRowChunks(groups, rows) {
-        const [, chunks,] = groups.reduce(([startIndex, acc,], size) => {
+        const [, chunks] = groups.reduce(([startIndex, acc], size) => {
             const endIndex = startIndex + size;
-            return [
-                endIndex,
-                [
-                    ...acc,
-                    [
-                        startIndex,
-                        endIndex,
-                    ],
-                ],
-            ];
-        }, [
-            0,
-            [],
-        ]);
+            return [endIndex, [...acc, [startIndex, endIndex]]];
+        }, [0, []]);
         return chunks.map((range) => _.slice(rows, ...range));
     }
     /**
@@ -189,9 +165,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         const indexes = sizes.reduce((groupIndexes, size) => {
             const last = groupIndexes[groupIndexes.length - 1];
             return groupIndexes.concat(last + size);
-        }, [
-            0,
-        ]);
+        }, [0]);
         return groups.reduce((gidxs, group, idx) => {
             return {
                 ...gidxs,
@@ -227,18 +201,10 @@ export default class DataGridComponent extends NestedArrayComponent {
             this.dataValue.length > _.get(this.component, 'validate.minLength', 0));
     }
     hasTopSubmit() {
-        return (this.hasAddButton() &&
-            [
-                'top',
-                'both',
-            ].includes(this.addAnotherPosition));
+        return this.hasAddButton() && ['top', 'both'].includes(this.addAnotherPosition);
     }
     hasBottomSubmit() {
-        return (this.hasAddButton() &&
-            [
-                'bottom',
-                'both',
-            ].includes(this.addAnotherPosition));
+        return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);
     }
     get canAddColumn() {
         return this.builderMode && !this.options.design;
@@ -315,9 +281,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            this.dragula = dragula([
-                this.refs[`${this.datagridKey}-tbody`],
-            ], {
+            this.dragula = dragula([this.refs[`${this.datagridKey}-tbody`]], {
                 moves: (_draggedElement, _oldParent, clickedElement) => {
                     const clickedElementKey = clickedElement.getAttribute('data-key');
                     const oldParentKey = _oldParent.getAttribute('data-key');
@@ -361,9 +325,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.rows.forEach((row, rowIndex) => {
             let columnIndex = 0;
             columns.forEach((col) => {
-                this.attachComponents(this.refs[this.datagridKey][rowIndex * rowLength + columnIndex], [
-                    this.rows[rowIndex][col.key],
-                ], this.getComponentsContainer());
+                this.attachComponents(this.refs[this.datagridKey][rowIndex * rowLength + columnIndex], [this.rows[rowIndex][col.key]], this.getComponentsContainer());
                 columnIndex++;
             });
         });
@@ -392,7 +354,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     onReorder(element, _target, _source, sibling) {
         if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
-            console.warn('There is no Drag Info available for either dragged or sibling element');
+            console.warn(this.t('noDragInfoError'));
             return;
         }
         const oldPosition = element.dragInfo.index;
@@ -441,11 +403,11 @@ export default class DataGridComponent extends NestedArrayComponent {
             component: this.component,
             row,
         });
-        screenReaderSpeech('Row has been added');
         this.checkConditions();
         this.triggerChange?.({ modified: true, noPristineChangeOnModified: true });
         this.redraw().then(() => {
             this.focusOnNewRowElement(this.rows[index]);
+            this.announce(this.t('Row has been added'));
         });
     }
     updateComponentsRowIndex(components, rowIndex) {
@@ -484,18 +446,22 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     removeRow(index) {
         const makeEmpty = index === 0 && this.rows.length === 1;
-        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
+        const flags = {
+            isReordered: !makeEmpty,
+            resetValue: makeEmpty,
+            modified: true,
+            noPristineChangeOnModified: true,
+        };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
-        if (this.rows.length > 1) {
-            screenReaderSpeech('Row has been deleted');
-        }
-        const [row,] = this.rows.splice(index, 1);
+        const [row] = this.rows.splice(index, 1);
         this.removeSubmissionMetadataRow(index);
         this.removeRowComponents(row);
         this.updateRowsComponents(index);
         this.setValue(this.dataValue, flags);
-        this.redraw();
+        this.redraw().then(() => {
+            this.announce(this.t('Row has been deleted'));
+        });
     }
     removeRowComponents(row) {
         _.each(row, (component) => this.removeComponent(component));
@@ -610,10 +576,7 @@ export default class DataGridComponent extends NestedArrayComponent {
                         !!visibility[key] ||
                             (col.checkConditions(data, flags, dataValue[rowIndex]) && col.type !== 'hidden');
                     if (col.component.logic && firstRowCheck) {
-                        const compIndex = _.findIndex(this.columns, [
-                            'key',
-                            key,
-                        ]);
+                        const compIndex = _.findIndex(this.columns, ['key', key]);
                         const equalColumns = _.isEqualWith(this.columns[compIndex], col.component, (col1, col2, key) => {
                             // Don't compare columns by their auto-generated ids.
                             if (key === 'id') {
@@ -657,15 +620,11 @@ export default class DataGridComponent extends NestedArrayComponent {
         }
         if (!Array.isArray(value)) {
             if (typeof value === 'object') {
-                value = [
-                    value,
-                ];
+                value = [value];
             }
             else {
                 this.createRows();
-                value = [
-                    {},
-                ];
+                value = [{}];
             }
         }
         // Make sure we always have at least one row.

package/lib/mjs/components/datamap/DataMap.js

@@ -45,9 +45,7 @@ export default class DataMapComponent extends DataGridComponent {
         return _.omit(schema, 'components');
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -101,9 +99,7 @@ export default class DataMapComponent extends DataGridComponent {
     getRowValues() {
         const dataValue = this.dataValue;
         if (this.builderMode) {
-            return [
-                dataValue,
-            ];
+            return [dataValue];
         }
         if (_.isEmpty(dataValue)) {
             return [];
@@ -120,7 +116,7 @@ export default class DataMapComponent extends DataGridComponent {
         return this.rows.map((row) => {
             return {
                 components: row,
-                data: _.mapValues(row, (comp) => comp.dataValue)
+                data: _.mapValues(row, (comp) => comp.dataValue),
             };
         });
     }
@@ -141,15 +137,7 @@ export default class DataMapComponent extends DataGridComponent {
         const valueSchema = Object.assign({}, this.component.valueComponent);
         keySchema.hideLabel = false;
         valueSchema.hideLabel = false;
-        return this.component.keyBeforeValue
-            ? [
-                keySchema,
-                valueSchema,
-            ]
-            : [
-                valueSchema,
-                keySchema,
-            ];
+        return this.component.keyBeforeValue ? [keySchema, valueSchema] : [valueSchema, keySchema];
     }
     getRowKey(rowIndex) {
         const keys = Object.keys(this.dataValue);
@@ -273,13 +261,19 @@ export default class DataMapComponent extends DataGridComponent {
         if (this.submissionTimezone) {
             componentOptions.submissionTimezone = this.submissionTimezone;
             if (valueComponent.type === 'datetime') {
-                valueComponent.widget = { ...valueComponent.widget, submissionTimezone: this.submissionTimezone };
+                valueComponent.widget = {
+                    ...valueComponent.widget,
+                    submissionTimezone: this.submissionTimezone,
+                };
             }
         }
         const createdComponent = this.createComponent(valueComponent, componentOptions, this.dataValue);
         // Ensure submissionTimezone is set on datetime component instance's widget and options
         if (createdComponent?.type === 'datetime' && this.submissionTimezone) {
-            createdComponent.component.widget = { ...createdComponent.component.widget, submissionTimezone: this.submissionTimezone };
+            createdComponent.component.widget = {
+                ...createdComponent.component.widget,
+                submissionTimezone: this.submissionTimezone,
+            };
             createdComponent.options.submissionTimezone = this.submissionTimezone;
         }
         components[this.valueKey] = createdComponent;

package/lib/mjs/components/datetime/DateTime.js

@@ -77,9 +77,7 @@ export default class DateTimeComponent extends Input {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.date,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.date];
     }
     constructor(component, options, data) {
         super(component, options, data);
@@ -201,9 +199,7 @@ export default class DateTimeComponent extends Input {
         let format = FormioUtils.convertFormatToMoment(this.component.format);
         format += format.match(/z$/) ? '' : ' z';
         const timezone = this.timezone;
-        const useTimezoneAwareFormat = value &&
-            timezone &&
-            (this.options.pdf || options?.email);
+        const useTimezoneAwareFormat = value && timezone && (this.options.pdf || options?.email);
         if (useTimezoneAwareFormat) {
             if (Array.isArray(value) && this.component.multiple) {
                 return value

package/lib/mjs/components/datetime/editForm/DateTime.edit.display.js

@@ -34,10 +34,7 @@ export default [
         template: '<span>{{ item.label }}</span>',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.displayInTimezone' },
-                    'location',
-                ],
+                '===': [{ var: 'data.displayInTimezone' }, 'location'],
             },
         },
     },

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

@@ -57,9 +57,7 @@ export default class DayComponent extends Field {
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.string,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.string];
     }
     // Empty value used before 9.3.x
     static oldEmptyValue = '00/00/0000';
@@ -166,9 +164,7 @@ export default class DayComponent extends Field {
         };
     }
     get days() {
-        const days = [
-            { value: '', label: _.get(this.component, 'fields.day.placeholder', '') },
-        ];
+        const days = [{ value: '', label: _.get(this.component, 'fields.day.placeholder', '') }];
         for (let x = 1; x <= 31; x++) {
             days.push({
                 value: x,
@@ -182,7 +178,7 @@ export default class DayComponent extends Field {
             {
                 value: '',
                 label: _.get(this.component, 'fields.month.placeholder') ||
-                    (this.hideInputLabels ? this.t('Month') : ''),
+                    (this.hideInputLabels ? this.t('month') : ''),
             },
             { value: 1, label: 'January' },
             { value: 2, label: 'February' },
@@ -200,9 +196,7 @@ export default class DayComponent extends Field {
         return months;
     }
     get years() {
-        const years = [
-            { value: '', label: _.get(this.component, 'fields.year.placeholder', '') },
-        ];
+        const years = [{ value: '', label: _.get(this.component, 'fields.year.placeholder', '') }];
         const minYears = _.get(this.component, 'fields.year.minYear', 1900) || 1900;
         const maxYears = _.get(this.component, 'fields.year.maxYear', 2030) || 2030;
         for (let x = minYears; x <= maxYears; x++) {
@@ -215,18 +209,10 @@ export default class DayComponent extends Field {
     }
     setErrorClasses(elements, dirty, hasError) {
         super.setErrorClasses(elements, dirty, hasError);
-        super.setErrorClasses([
-            this.refs.day,
-            this.refs.month,
-            this.refs.year,
-        ], dirty, hasError);
+        super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);
     }
     removeInputError(elements) {
-        super.removeInputError([
-            this.refs.day,
-            this.refs.month,
-            this.refs.year,
-        ]);
+        super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);
         super.removeInputError(elements);
     }
     init() {
@@ -282,7 +268,7 @@ export default class DayComponent extends Field {
                 this.saveCaretPosition(element, name);
             }
             catch (err) {
-                console.warn('An error occurred while trying to save caret position', err);
+                console.warn(this.t('caretPositionSavingError'), err);
             }
             this.updateValue(null, {
                 modified: true,
@@ -317,11 +303,7 @@ export default class DayComponent extends Field {
             this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
                 modified: true,
             }));
-            [
-                this.refs.day,
-                this.refs.month,
-                this.refs.year,
-            ]
+            [this.refs.day, this.refs.month, this.refs.year]
                 .filter((element) => !!element)
                 .forEach((element) => {
                 super.addFocusBlurEvents(element);
@@ -374,17 +356,7 @@ export default class DayComponent extends Field {
         }
         const dateParts = [];
         const valueParts = value.split('/');
-        const [DAY, MONTH, YEAR,] = this.component.dayFirst
-            ? [
-                0,
-                1,
-                2,
-            ]
-            : [
-                1,
-                0,
-                2,
-            ];
+        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
         const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';
         let defaultDay = '';
         let defaultMonth = '';
@@ -461,17 +433,7 @@ export default class DayComponent extends Field {
         }
     }
     getDayWithHiddenFields(parts) {
-        let [DAY, MONTH, YEAR,] = this.component.dayFirst
-            ? [
-                0,
-                1,
-                2,
-            ]
-            : [
-                1,
-                0,
-                2,
-            ];
+        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
         if (!this.showDay) {
             MONTH = MONTH === 0 ? 0 : MONTH - 1;
             YEAR = YEAR - 1;
@@ -532,17 +494,7 @@ export default class DayComponent extends Field {
     getDate(value) {
         let defaults = [], day, month, year;
         // Map positions to identifiers to get default values for each part of day
-        const [DAY, MONTH, YEAR,] = this.component.dayFirst
-            ? [
-                0,
-                1,
-                2,
-            ]
-            : [
-                1,
-                0,
-                2,
-            ];
+        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
         const defaultValue = value || this.component.defaultValue;
         if (defaultValue) {
             defaults = defaultValue.split('/').map((x) => parseInt(x, 10));
@@ -686,17 +638,7 @@ export default class DayComponent extends Field {
         if (!value) {
             return true;
         }
-        const [DAY, MONTH, YEAR,] = this.component.dayFirst
-            ? [
-                0,
-                1,
-                2,
-            ]
-            : [
-                1,
-                0,
-                2,
-            ];
+        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
         const values = value.split('/');
         if (values.length < 3) {
             return true;

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

@@ -38,9 +38,7 @@ export default [
             if (data.defaultValue) {
                 const defaultValueParts = data.defaultValue.split('/');
                 if (!data.fields.day.hide && defaultValueParts.length !== 3) {
-                    const newDefaultValue = [
-                        '00',
-                    ];
+                    const newDefaultValue = ['00'];
                     if (!data.fields.month.hide) {
                         data.dayFirst
                             ? newDefaultValue.push(defaultValueParts[0])

package/lib/mjs/components/day/editForm/Day.edit.month.js

@@ -38,9 +38,7 @@ export default [
             if (data.defaultValue) {
                 const defaultValueParts = data.defaultValue.split('/');
                 if (!data.fields.month.hide && defaultValueParts.length !== 3) {
-                    const newDefaultValue = [
-                        '00',
-                    ];
+                    const newDefaultValue = ['00'];
                     if (!data.fields.day.hide) {
                         data.dayFirst
                             ? newDefaultValue.unshift(defaultValueParts[0])

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -42,6 +42,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     get iteratableRows(): any;
     get defaultValue(): any[];
     hasRemoveButtons(): boolean;
+    checkData(data: any, flags: any, row: any): Promise<void> | undefined;
     editRows: any;
     checkRowVariableTypeComponents(editRow: any, rowIndex: any): void;
     setVariableTypeComponents(): void;