@formio/js 5.4.0-api98.1 → 5.4.1

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

@@ -163,6 +163,13 @@ export default class DateTimeComponent extends Input {
     get momentFormat() {
         return FormioUtils.convertFormatToMoment(this.component.format);
     }
+    get timezone() {
+        const widget = this.component.widget;
+        if (widget && widget.type === 'calendar') {
+            return this.getTimezone(widget);
+        }
+        return super.timezone;
+    }
     isEmpty(value = this.dataValue) {
         if (value && value.toString() === 'Invalid Date') {
             return true;
@@ -194,7 +201,10 @@ export default class DateTimeComponent extends Input {
         let format = FormioUtils.convertFormatToMoment(this.component.format);
         format += format.match(/z$/) ? '' : ' z';
         const timezone = this.timezone;
-        if (value && !this.attached && timezone) {
+        const useTimezoneAwareFormat = value &&
+            timezone &&
+            (this.options.pdf || options?.email);
+        if (useTimezoneAwareFormat) {
             if (Array.isArray(value) && this.component.multiple) {
                 return value
                     .map((item) => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format)))

package/lib/mjs/components/datetime/editForm/DateTime.edit.date.d.ts

@@ -5,8 +5,10 @@ declare const _default: ({
     label: string;
     weight: number;
     tooltip: string;
+    validate: {
+        custom: string;
+    };
     placeholder?: undefined;
-    validate?: undefined;
     title?: undefined;
     collapsible?: undefined;
     collapsed?: undefined;
@@ -57,7 +59,22 @@ declare const _default: ({
     label?: undefined;
     weight?: undefined;
     tooltip?: undefined;
+    validate?: undefined;
     placeholder?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
     validate?: undefined;
+    placeholder?: undefined;
+    title?: undefined;
+    collapsible?: undefined;
+    collapsed?: undefined;
+    style?: undefined;
+    customConditional?: undefined;
+    components?: undefined;
 })[];
 export default _default;

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

@@ -8,6 +8,9 @@ export default [
         label: 'Enable Date Input',
         weight: 0,
         tooltip: 'Enables date input for this field.',
+        validate: {
+            custom: "valid = !data.enableTime && !input ? 'Cannot disable both Date and Time inputs at the same time' : true",
+        },
     },
     {
         type: 'tags',

package/lib/mjs/components/datetime/editForm/DateTime.edit.time.d.ts

@@ -1,9 +1,20 @@
-declare const _default: {
+declare const _default: ({
     type: string;
     input: boolean;
     key: string;
     label: string;
     tooltip: string;
     weight: number;
-}[];
+    validate: {
+        custom: string;
+    };
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+    validate?: undefined;
+})[];
 export default _default;

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

@@ -6,6 +6,9 @@ export default [
         label: 'Enable Time Input',
         tooltip: 'Enables time input for this field.',
         weight: 0,
+        validate: {
+            custom: "valid = !data.enableDate && !input ? 'Cannot disable both Date and Time inputs at the same time' : true",
+        },
     },
     {
         type: 'number',

package/lib/mjs/components/day/Day.d.ts

@@ -57,10 +57,6 @@ export default class DayComponent extends Field {
         value: string;
         label: any;
     }[];
-    _days: {
-        value: string;
-        label: any;
-    }[] | undefined;
     get months(): ({
         value: string;
         label: any;
@@ -68,21 +64,10 @@ export default class DayComponent extends Field {
         value: number;
         label: string;
     })[];
-    _months: ({
-        value: string;
-        label: any;
-    } | {
-        value: number;
-        label: string;
-    })[] | undefined;
     get years(): {
         value: string;
         label: any;
     }[];
-    _years: {
-        value: string;
-        label: any;
-    }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
     render(): string;

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

@@ -166,25 +166,19 @@ export default class DayComponent extends Field {
         };
     }
     get days() {
-        if (this._days) {
-            return this._days;
-        }
-        this._days = [
+        const days = [
             { value: '', label: _.get(this.component, 'fields.day.placeholder', '') },
         ];
         for (let x = 1; x <= 31; x++) {
-            this._days.push({
+            days.push({
                 value: x,
                 label: x.toString(),
             });
         }
-        return this._days;
+        return days;
     }
     get months() {
-        if (this._months) {
-            return this._months;
-        }
-        this._months = [
+        const months = [
             {
                 value: '',
                 label: _.get(this.component, 'fields.month.placeholder') ||
@@ -203,24 +197,21 @@ export default class DayComponent extends Field {
             { value: 11, label: 'November' },
             { value: 12, label: 'December' },
         ];
-        return this._months;
+        return months;
     }
     get years() {
-        if (this._years) {
-            return this._years;
-        }
-        this._years = [
+        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++) {
-            this._years.push({
+            years.push({
                 value: x,
                 label: x.toString(),
             });
         }
-        return this._years;
+        return years;
     }
     setErrorClasses(elements, dirty, hasError) {
         super.setErrorClasses(elements, dirty, hasError);

package/lib/mjs/components/editgrid/EditGrid.js

@@ -538,7 +538,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 isVisibleInRow: (component) => this.isComponentVisibleInRow(component, flattenedComponents),
                 getView: (component, data) => {
                     const instance = flattenedComponents[component.key];
-                    const view = instance ? instance.getView(data || instance.dataValue) : '';
+                    const view = instance ? instance.getView(instance.dataValue) : '';
                     // If there is an html tag in view, don't allow it to be injected in template
                     const htmlTagRegExp = new RegExp('<(.*?)>');
                     return typeof view === 'string' &&
@@ -859,7 +859,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         if (this.component.rowDrafts) {
             editRow.components.forEach((comp) => comp.setPristine(this.pristine));
         }
-        this.checkValidity(null, true);
+        this.checkValidity(null, !this.component.rowDrafts || this.root?.submitted);
         this.redraw();
         if (editRow.alerts) {
             editRow.alerts = false;
@@ -948,9 +948,19 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
             const column = _.clone(col);
             const options = _.clone(this.options);
+            const rootSubmissionTz = _.get(this.root, 'options.submissionTimezone');
+            if (rootSubmissionTz && !options.submissionTimezone) {
+                options.submissionTimezone = rootSubmissionTz;
+            }
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
+            if (this.submissionTimezone) {
+                options.submissionTimezone = this.submissionTimezone;
+                if (column.type === 'datetime') {
+                    column.widget = { ...column.widget, submissionTimezone: this.submissionTimezone };
+                }
+            }
             options.onChange = (flags = {}, changed, modified) => {
                 if (changed.instance.root?.id && this.root?.id !== changed.instance.root.id) {
                     changed.instance.root?.triggerChange?.(flags, changed, modified);

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

@@ -963,16 +963,17 @@ export default class FileComponent extends Field {
             : false;
     }
     async uploadFile(fileToSync) {
-        return await this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
+        const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
         // Progress callback
         this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
-            this.emit('fileUploadingStart');
+            this.emit('fileUploadingStart', filePromise);
         }, 
         // Abort upload callback
         (abort) => this.abortUploads.push({
             id: fileToSync.id,
             abort,
         }), this.getMultipartOptions(fileToSync));
+        return await filePromise;
     }
     async upload() {
         if (!this.filesToSync.filesToUpload.length) {
@@ -1008,7 +1009,7 @@ export default class FileComponent extends Field {
                 fileToSync.message = this.t('Succefully uploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
-                this.emit('fileUploadingEnd');
+                this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -1019,8 +1020,8 @@ export default class FileComponent extends Field {
                         : response.type === 'abort'
                             ? this.t('Request was aborted')
                             : response.toString();
-                this.emit('fileUploadingEnd');
-                this.emit('fileUploadError', {
+                this.emit('fileUploadingEnd', Promise.reject(response));
+                this.emit(_.get(response, 'type') === 'abort' ? 'fileUploadCanceled' : 'fileUploadError', {
                     fileToSync,
                     response,
                 });
@@ -1029,7 +1030,7 @@ export default class FileComponent extends Field {
                 delete fileToSync.progress;
                 this.redraw();
                 const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
-                if (!fileExists) {
+                if (!fileExists && fileToSync.status !== 'error') {
                     this.resolvedFiles.push({ fileToSync, fileInfo });
                 }
             }

package/lib/mjs/components/form/Form.d.ts

@@ -42,6 +42,7 @@ export default class FormComponent extends Component {
     everyComponent(...args: any[]): any;
     setSubFormDisabled(subForm: any): void;
     updateSubWizards(subForm: any): void;
+    updateTopLevelComponentsMap(): void;
     setComponentsMap(): void;
     /**
      * Create a subform instance.

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

@@ -393,13 +393,22 @@ export default class FormComponent extends Component {
             this.emit('subWizardsUpdated', subForm);
         }
     }
+    updateTopLevelComponentsMap() {
+        let prevRootId = null;
+        let currentRoot = this.root;
+        const subFormComponentMap = this.subForm.componentsMap;
+        // update components map for all top forms
+        while (currentRoot && prevRootId !== currentRoot.id) {
+            _.assign(currentRoot.componentsMap, subFormComponentMap);
+            prevRootId = currentRoot.id;
+            currentRoot = currentRoot.root;
+        }
+    }
     setComponentsMap() {
         if (!this.subForm) {
             return;
         }
-        const componentsMap = this.componentsMap;
-        const formComponentsMap = this.subForm.componentsMap;
-        _.assign(componentsMap, formComponentsMap);
+        this.updateTopLevelComponentsMap();
     }
     /**
      * Create a subform instance.
@@ -428,7 +437,7 @@ export default class FormComponent extends Component {
                 this.subForm.currentForm = this;
                 this.subForm.parentVisible = this.visible;
                 this.setComponentsMap();
-                this.component.components = this.subForm._form?.components;
+                this.component.components = this.subForm.components.map((comp) => comp.component);
                 this.component.display = this.subForm._form?.display;
                 this.subForm.on('change', () => {
                     if (this.subForm && !this.shouldConditionallyClear()) {
@@ -552,10 +561,11 @@ export default class FormComponent extends Component {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
+        const hiddenByJsonOnly = !this.hasCondition() && this.component.hidden;
         return (this.subFormReady &&
             (!this.component.hasOwnProperty('reference') || this.component.reference) &&
             !this.shouldConditionallyClear() &&
-            !(this.component.hidden && this.component.clearOnHide));
+            !(hiddenByJsonOnly && this.component.clearOnHide));
     }
     /**
      * Returns the data for the subform.
@@ -760,7 +770,9 @@ export default class FormComponent extends Component {
             }
             this.updateSubFormVisibility();
             this.clearOnHide();
-            isNestedWizard ? this.rebuild() : this.redraw();
+            if (!isNestedWizard) {
+                this.redraw();
+            }
         }
         if (!value && isNestedWizard) {
             this.root?.redraw();

package/lib/mjs/components/number/Number.d.ts

@@ -34,6 +34,7 @@ export default class NumberComponent extends Input {
      * @returns {number} a parsed number
      */
     parseNumber(value: string): number;
+    normalizeValue(value: any, flags?: {}, emptyValue?: null): any;
     setInputMask(input: any): void;
     getValueAt(index: any): number | null;
     setValueAt(index: any, value: any, flags?: {}): void;

package/lib/mjs/components/number/Number.js

@@ -141,6 +141,23 @@ export default class NumberComponent extends Input {
             return parseFloat(value);
         }
     }
+    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {
+        if (typeof value === 'string') {
+            const result = this.parseNumber(value);
+            value = _.isNaN(result) ? this.emptyValue : result;
+        }
+        if (this.component?.multiple && Array.isArray(value)) {
+            const normilizedValues = value.map((val) => {
+                if (typeof val === 'string') {
+                    const result = this.parseNumber(val);
+                    return _.isNaN(result) ? this.emptyValue : result;
+                }
+                return val;
+            });
+            value = normilizedValues;
+        }
+        return super.normalizeValue(value, flags, emptyValue);
+    }
     setInputMask(input) {
         let numberPattern = '[0-9';
         numberPattern += this.decimalSeparator || '';

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

@@ -1326,8 +1326,7 @@ export default class SelectComponent extends ListComponent {
         return super.normalizeValue(this.normalizeSingleValue(value));
     }
     setMetadata(value, flags = {}) {
-        if (_.isNil(value) ||
-            (this.inDataTable && this.component.dataSrc === 'values')) {
+        if (_.isNil(value)) {
             return;
         }
         const valueIsObject = _.isObject(value);
@@ -1366,6 +1365,10 @@ export default class SelectComponent extends ListComponent {
             }
             _.set(submission.metadata.selectData, this.path, templateData);
         }
+        else if (!this.templateData[templateValue] &&
+            this.isEmpty(value)) {
+            _.unset(this.root.submission, `metadata.selectData.${this.path}`);
+        }
         if (flags.resetValue && this.root?.submission && !this.options.readOnly) {
             const submission = this.root.submission;
             if (!submission.metadata) {
@@ -1627,7 +1630,7 @@ export default class SelectComponent extends ListComponent {
             if (this.inDataTable) {
                 value = this.undoValueTyping(value);
             }
-            const templateValue = this.isEntireObjectDisplay() && !_.isObject(value.data) ? { data: value } : value;
+            const templateValue = !_.isEmpty(value) && this.isEntireObjectDisplay() && !_.isObject(value.data) ? { data: value } : value;
             const template = this.itemTemplate(templateValue, value, options);
             return template;
         }

package/lib/mjs/components/signature/Signature.js

@@ -57,7 +57,7 @@ export default class SignatureComponent extends Input {
             this.component.height = '200px';
         }
         if (this.component.keepOverlayRatio &&
-            this.options?.display === 'pdf' &&
+            this.options.pdf &&
             this.component.overlay?.width &&
             this.component.overlay?.height) {
             this.ratio = this.component.overlay?.width / this.component.overlay?.height;

package/lib/mjs/components/signature/editForm/Signature.edit.display.d.ts

@@ -7,7 +7,6 @@ declare const _default: ({
     placeholder: string;
     weight: number;
     conditional?: undefined;
-    customConditional?: undefined;
     ignore?: undefined;
 } | {
     type: string;
@@ -24,7 +23,6 @@ declare const _default: ({
         };
     };
     weight: number;
-    customConditional?: undefined;
     ignore?: undefined;
 } | {
     weight: number;
@@ -32,9 +30,6 @@ declare const _default: ({
     label: string;
     tooltip: string;
     key: string;
-    customConditional: ({ options }: {
-        options: any;
-    }) => boolean;
     input: boolean;
     placeholder?: undefined;
     conditional?: undefined;
@@ -49,6 +44,5 @@ declare const _default: ({
     placeholder?: undefined;
     weight?: undefined;
     conditional?: undefined;
-    customConditional?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/signature/editForm/Signature.edit.display.js

@@ -46,7 +46,6 @@ export default [
         label: 'Keep Overlay Aspect Ratio',
         tooltip: 'If checked, the field will have the same aspect ratio as its preview.',
         key: 'keepOverlayRatio',
-        customConditional: ({ options }) => options?.editForm?.display === 'pdf',
         input: true,
     },
     {

package/lib/mjs/components/textfield/editForm/TextField.edit.display.d.ts

@@ -25,7 +25,6 @@ declare const _default: ({
         };
     };
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
@@ -40,7 +39,6 @@ declare const _default: ({
     label: string;
     clearOnHide: boolean;
     onChange: (context: any) => void;
-    customDefaultValue: (value: any, component: any, row: any, data: any, instance: any) => any;
     input: boolean;
     rows: number;
     editor: string;
@@ -79,7 +77,6 @@ declare const _default: ({
     data?: undefined;
     conditional?: undefined;
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
@@ -107,7 +104,6 @@ declare const _default: ({
     onChange?: undefined;
     conditional?: undefined;
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
@@ -133,7 +129,6 @@ declare const _default: ({
     data?: undefined;
     conditional?: undefined;
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
@@ -154,7 +149,6 @@ declare const _default: ({
     data?: undefined;
     conditional?: undefined;
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
@@ -177,7 +171,6 @@ declare const _default: ({
     data?: undefined;
     conditional?: undefined;
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
@@ -208,7 +201,6 @@ declare const _default: ({
     data?: undefined;
     conditional?: undefined;
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
@@ -228,7 +220,6 @@ declare const _default: ({
     data?: undefined;
     conditional?: undefined;
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;
@@ -251,7 +242,6 @@ declare const _default: ({
     data?: undefined;
     conditional?: undefined;
     clearOnHide?: undefined;
-    customDefaultValue?: undefined;
     rows?: undefined;
     editor?: undefined;
     as?: undefined;

package/lib/mjs/components/textfield/editForm/TextField.edit.display.js

@@ -14,30 +14,30 @@ export default [
         tooltip: 'The widget is the display UI used to input the value of the field.',
         defaultValue: 'input',
         calculateValue: (context) => {
-            let currentType = context.data['widget.type'];
+            let currentType = context.instance._widgetType;
             if (currentType) {
                 return currentType;
             }
             const widget = context.data.widget;
             if (isObject(widget) && widget.type) {
-                context.data['widget.type'] = widget.type;
+                context.instance._widgetType = widget.type;
                 return widget.type;
             }
             if (typeof widget === 'string') {
                 const originalType = getOriginalWidget(context.instance)?.type;
                 if (originalType) {
-                    context.data['widget.type'] = originalType;
+                    context.instance._widgetType = originalType;
                     return originalType;
                 }
             }
             return 'input';
         },
         onChange: (context) => {
-            const newType = context.data['widget.type'];
+            const newType = context.instance.dataValue;
             const currentWidget = context.data.widget;
             let oldType;
             if (isObject(currentWidget)) {
-                oldType = currentWidget.type;
+                oldType = context.instance._widgetType;
             }
             else if (typeof currentWidget === 'string') {
                 oldType = getOriginalWidget(context.instance)?.type;
@@ -48,10 +48,12 @@ export default [
             if (newType !== oldType) {
                 if (newType === 'input') {
                     context.data.widget = { type: 'input' };
+                    context.instance._widgetType = newType;
                 }
-                else {
+                else if (newType) {
                     const defaultSettings = getDefaultWidgetSettings(newType);
                     context.data.widget = defaultSettings || { type: newType };
+                    context.instance._widgetType = newType;
                 }
             }
             else if (!currentWidget) {
@@ -87,28 +89,12 @@ export default [
                 return;
             }
             if (isObject(currentWidget)) {
-                const currentType = context.data['widget.type'];
+                const currentType = context.instance.root.getComponent('widget.type')._widgetType || currentWidget.type;
                 if (currentType && currentWidget.type !== currentType) {
                     context.data.widget = { ...currentWidget, type: currentType };
                 }
             }
         },
-        customDefaultValue: (value, component, row, data, instance) => {
-            if (!data.widget) {
-                const originalWidget = getOriginalWidget(instance);
-                const widgetType = data['widget.type'] || originalWidget?.type;
-                if (widgetType && widgetType !== 'input') {
-                    if (originalWidget?.type === widgetType && !_.isEmpty(_.omit(originalWidget, 'type'))) {
-                        return _.omit(originalWidget, 'language');
-                    }
-                    const defaultSettings = getDefaultWidgetSettings(widgetType);
-                    if (defaultSettings) {
-                        return defaultSettings;
-                    }
-                }
-            }
-            return value;
-        },
         input: true,
         rows: 5,
         editor: 'ace',

package/lib/mjs/formio.form.js

@@ -7,7 +7,7 @@ import Templates from './templates/Templates';
 import Providers from './providers';
 import Widgets from './widgets';
 import Form, { FormOptions } from './Form';
-import Utils, { Evaluator, registerEvaluator, DefaultEvaluator } from './utils';
+import Utils, { DefaultEvaluator, Evaluator, registerEvaluator } from './utils';
 import Licenses from './licenses';
 import EventEmitter from './EventEmitter';
 import Webform from './Webform';
@@ -90,12 +90,9 @@ export function registerModule(mod, defaultFn = null, options = {}) {
                 break;
             default:
                 if (defaultFn) {
-                    if (!defaultFn(key, mod)) {
-                        console.warn('Unknown module option', key);
-                    }
+                    defaultFn(key, mod);
                     break;
                 }
-                console.log('Unknown module option', key);
         }
     }
 }
@@ -108,7 +105,7 @@ export function useModule(defaultFn = null) {
         plugins = _.isArray(plugins)
             ? plugins
             : [
-                plugins,
+                plugins
             ];
         plugins.forEach((plugin) => {
             if (Array.isArray(plugin)) {
@@ -129,4 +126,4 @@ export function useModule(defaultFn = null) {
 Formio.use = useModule();
 export { Formio as FormioCore } from './Formio';
 // Export the components.
-export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform, DefaultEvaluator, FormOptions, };
+export { Components, Displays, Providers, Widgets, Templates, Utils, Form, Formio, Licenses, EventEmitter, Webform, DefaultEvaluator, FormOptions };