@formio/js 5.0.1-rc.1 → 5.1.0-dev.5965.5d8702c

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

@@ -156,7 +156,9 @@ export default class SignatureComponent extends Input {
             if (this.dataValue) {
                 this.setDataToSigaturePad();
             }
-            this.showCanvas(true);
+            if (!this.disabled) {
+                this.showCanvas(true);
+            }
         }
     }
     renderElement(value, index) {
@@ -169,7 +171,7 @@ export default class SignatureComponent extends Input {
         return false;
     }
     getModalPreviewTemplate() {
-        return this.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             previewText: this.dataValue ?
                 `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
                 this.t('Click to Sign')

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

@@ -37,7 +37,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/survey/Survey.d.ts

@@ -14,7 +14,7 @@ export default class SurveyComponent extends Field {
         operators: string[];
     };
     static savedValueTypes(schema: any): string[];
-    render(): Field;
+    render(): string;
     attach(element: any): Promise<void>;
     setValue(value: any, flags?: {}): boolean;
     get emptyValue(): {};

package/lib/mjs/components/table/Table.d.ts

@@ -19,6 +19,6 @@ export default class TableComponent extends NestedComponent {
     get colWidth(): string;
     noField: boolean;
     table: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

package/lib/mjs/components/tabs/Tabs.d.ts

@@ -16,7 +16,7 @@ export default class TabsComponent extends NestedComponent {
     currentTab: number;
     noField: boolean;
     tabs: any[] | undefined;
-    render(): import("../_classes/field/Field").default;
+    render(): string;
     detach(all: any): void;
     /**
      * Set the current tab.

package/lib/mjs/formio.form.js

@@ -56,6 +56,7 @@ export function registerModule(mod, defaultFn = null, options = {}) {
             case 'templates':
                 for (const framework of Object.keys(mod.templates)) {
                     Formio.Templates.extendTemplate(framework, mod.templates[framework]);
+                    Formio.Templates.defaultTemplates = _.defaults(mod.templates[framework], Formio.Templates.defaultTemplates);
                 }
                 if (mod.templates[current]) {
                     Formio.Templates.current = mod.templates[current];

package/lib/mjs/providers/address/GoogleAddressProvider.d.ts

@@ -82,6 +82,11 @@ export class GoogleAddressProvider extends AddressProvider {
     search(): Promise<void>;
     makeRequest(): Promise<void>;
     getDisplayValue(address: any): any;
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options?: ProviderOptions): void;
 }
 export type AutocompleteOptions = {
     /**

package/lib/mjs/providers/address/GoogleAddressProvider.js

@@ -2,6 +2,9 @@
 import { Formio } from '../../Formio';
 import _ from 'lodash';
 import { AddressProvider } from './AddressProvider';
+const GOOGLE_MAPS_BASE_URL = 'https://maps.googleapis.com';
+const GOOGLE_MAPS_JS_URL = `${GOOGLE_MAPS_BASE_URL}/maps/api/js`;
+const GOOGLE_MAPS_JS_WITH_PARAMS_URL = `${GOOGLE_MAPS_JS_URL}?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback`;
 /**
  * @typedef {object} AutocompleteOptions
  * @property {string[]} fields - The fields to include in the autocomplete response.
@@ -48,10 +51,11 @@ export class GoogleAddressProvider extends AddressProvider {
     constructor(options = {}) {
         super(options);
         this.setAutocompleteOptions();
-        let src = 'https://maps.googleapis.com/maps/api/js?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback';
+        let src = GOOGLE_MAPS_JS_WITH_PARAMS_URL;
         if (options.params?.key) {
             src += `&key=${options.params.key}`;
         }
+        this.tryRemoveLibrary(options);
         Formio.requireLibrary(this.getLibraryName(), 'google.maps.places', src);
     }
     /**
@@ -178,4 +182,21 @@ export class GoogleAddressProvider extends AddressProvider {
             : this.alternativeDisplayValueProperty;
         return _.get(address, displayedProperty, '');
     }
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options = {}) {
+        if (!Formio.libraries[this.getLibraryName()]) {
+            return;
+        }
+        const existingScript = document.querySelector(`script[src^="${GOOGLE_MAPS_JS_URL}"]`);
+        if (existingScript && options.params?.key && !existingScript.attributes.src.value.endsWith(options.params.key)) {
+            const googleMapsScripts = document.querySelectorAll(`script[src^="${GOOGLE_MAPS_BASE_URL}"]`) ?? [];
+            googleMapsScripts.forEach(script => script.parentNode.removeChild(script));
+            delete Formio.libraries[this.getLibraryName()];
+            delete global?.google?.maps;
+            delete global[`${this.getLibraryName()}Callback`];
+        }
+    }
 }

package/lib/mjs/translations/en.js

@@ -24,8 +24,8 @@ export default {
     maxWords: '{{field}} must have no more than {{length}} words.',
     min: '{{field}} cannot be less than {{min}}.',
     max: '{{field}} cannot be greater than {{max}}.',
-    maxDate: '{{field}} should not contain date after {{- maxDate}}',
-    minDate: '{{field}} should not contain date before {{- minDate}}',
+    maxDate: '{{field}} should not contain date after {{maxDate}}',
+    minDate: '{{field}} should not contain date before {{minDate}}',
     maxYear: '{{field}} should not contain year greater than {{maxYear}}',
     minYear: '{{field}} should not contain year less than {{minYear}}',
     minSelectedCount: 'You must select at least {{minCount}} items',

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

@@ -14,13 +14,13 @@ export default class DateGeaterThan extends ConditionOperator {
         return { date, comparedDate };
     }
     execute(options, functionName = 'isAfter') {
-        const { value, instance, conditionComponentPath } = options;
+        const { value, instance, path } = options;
         if (!value) {
             return false;
         }
         let conditionTriggerComponent = null;
         if (instance?.root?.getComponent) {
-            conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            conditionTriggerComponent = instance.root.getComponent(path);
         }
         if (conditionTriggerComponent && conditionTriggerComponent.isPartialDay && conditionTriggerComponent.isPartialDay(value)) {
             return false;

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

@@ -1,8 +1,8 @@
 export default class IsEmptyValue extends ConditionOperator {
-    execute({ value, instance, conditionComponentPath }: {
+    execute({ value, instance, path }: {
         value: any;
         instance: any;
-        conditionComponentPath: any;
+        path: any;
     }): any;
     getResult(options: any): any;
 }

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

@@ -10,10 +10,10 @@ export default class IsEmptyValue extends ConditionOperator {
     static get requireValue() {
         return false;
     }
-    execute({ value, instance, conditionComponentPath }) {
+    execute({ value, instance, path }) {
         const isEmptyValue = _.isEmpty(_.isNumber(value) ? String(value) : value);
         if (instance?.root?.getComponent) {
-            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            const conditionTriggerComponent = instance.root.getComponent(path);
             return conditionTriggerComponent?.isEmpty ? conditionTriggerComponent.isEmpty() : isEmptyValue;
         }
         return isEmptyValue;

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

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

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

@@ -8,7 +8,7 @@ export default class IsEqualTo extends ConditionOperator {
     static get displayedName() {
         return 'Is Equal To';
     }
-    execute({ value, comparedValue, instance, conditionComponentPath }) {
+    execute({ value, comparedValue, instance, path }) {
         if ((value || value === false) && comparedValue && typeof value !== typeof comparedValue && _.isString(comparedValue)) {
             try {
                 comparedValue = JSON.parse(comparedValue);
@@ -17,7 +17,7 @@ export default class IsEqualTo extends ConditionOperator {
             catch (e) { }
         }
         if (instance?.root?.getComponent) {
-            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            const conditionTriggerComponent = instance.root.getComponent(path);
             if (conditionTriggerComponent
                 && isSelectResourceWithObjectValue(conditionTriggerComponent.component)
                 && conditionTriggerComponent.component?.template) {

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

@@ -1,22 +1,33 @@
-/**
- * Deprecated version of findComponents. Renamed to searchComponents.
- * @param {import('@formio/core').Component[]} components - The components to find components within.
- * @param {object} query - The query to use when searching for the components.
- * @returns {import('@formio/core').Component[]} - The result of the component that is found.
- */
-export function findComponents(components: import('@formio/core').Component[], query: object): import('@formio/core').Component[];
 export const flattenComponents: typeof Utils.flattenComponents;
 export const guid: typeof Utils.guid;
 export const uniqueName: typeof Utils.uniqueName;
-export const MODEL_TYPES: any;
+export const MODEL_TYPES_OF_KNOWN_COMPONENTS: {
+    nestedArray: string[];
+    nestedDataArray: string[];
+    dataObject: string[];
+    object: string[];
+    map: string[];
+    content: string[];
+    string: string[];
+    number: string[];
+    boolean: string[];
+    none: string[];
+    any: string[];
+};
 export const getModelType: typeof Utils.getModelType;
-export const getComponentAbsolutePath: typeof Utils.getComponentAbsolutePath;
-export const getComponentPath: typeof Utils.getComponentPath;
+export const getComponentPath: any;
+export const setComponentScope: typeof Utils.setComponentScope;
+export const resetComponentScope: typeof Utils.resetComponentScope;
 export const isComponentNestedDataType: typeof Utils.isComponentNestedDataType;
 export const componentPath: typeof Utils.componentPath;
-export const componentChildPath: any;
-export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => Promise<void>;
-export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, path?: string | undefined, index?: number | undefined, parent?: any, includeAll?: boolean | undefined) => void;
+export const getComponentPaths: typeof Utils.getComponentPaths;
+export const componentMatches: typeof Utils.componentMatches;
+export const getBestMatch: typeof Utils.getBestMatch;
+export const getComponentFromPath: typeof Utils.getComponentFromPath;
+export const getComponentValue: typeof Utils.getComponentValue;
+export const findComponents: typeof Utils.findComponents;
+export const eachComponentDataAsync: (components: Component[], data: DataObject, fn: EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => Promise<void>;
+export const eachComponentData: (components: Component[], data: DataObject, fn: EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: any, parentPaths?: any) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
 export const getContextualRowPath: typeof Utils.getContextualRowPath;
 export const getContextualRowData: typeof Utils.getContextualRowData;
@@ -24,7 +35,7 @@ export const componentInfo: typeof Utils.componentInfo;
 export const eachComponent: typeof Utils.eachComponent;
 export const eachComponentAsync: typeof Utils.eachComponentAsync;
 export const getComponentData: typeof Utils.getComponentData;
-export const getComponentActualValue: typeof Utils.getComponentActualValue;
+export const getComponentActualValue: any;
 export const isLayoutComponent: typeof Utils.isLayoutComponent;
 export const matchComponent: typeof Utils.matchComponent;
 export const getComponent: typeof Utils.getComponent;

package/lib/mjs/utils/formUtils.js

@@ -1,13 +1,3 @@
 import { Utils } from '@formio/core';
-const { flattenComponents, guid, uniqueName, MODEL_TYPES, getModelType, getComponentAbsolutePath, getComponentPath, isComponentNestedDataType, componentPath, componentChildPath, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys } = Utils;
-/**
- * Deprecated version of findComponents. Renamed to searchComponents.
- * @param {import('@formio/core').Component[]} components - The components to find components within.
- * @param {object} query - The query to use when searching for the components.
- * @returns {import('@formio/core').Component[]} - The result of the component that is found.
- */
-export function findComponents(components, query) {
-    console.warn('formio.js/utils findComponents is deprecated. Use searchComponents instead.');
-    return searchComponents(components, query);
-}
-export { flattenComponents, guid, uniqueName, MODEL_TYPES, getModelType, getComponentAbsolutePath, getComponentPath, isComponentNestedDataType, componentPath, componentChildPath, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys };
+const { flattenComponents, guid, uniqueName, MODEL_TYPES_OF_KNOWN_COMPONENTS, getModelType, getComponentPath, setComponentScope, resetComponentScope, isComponentNestedDataType, componentPath, getComponentPaths, componentMatches, getBestMatch, getComponentFromPath, getComponentValue, findComponents, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys } = Utils;
+export { flattenComponents, guid, uniqueName, MODEL_TYPES_OF_KNOWN_COMPONENTS, getModelType, getComponentPath, setComponentScope, resetComponentScope, isComponentNestedDataType, componentPath, getComponentPaths, componentMatches, getBestMatch, getComponentFromPath, getComponentValue, findComponents, eachComponentDataAsync, eachComponentData, getComponentKey, getContextualRowPath, getContextualRowData, componentInfo, eachComponent, eachComponentAsync, getComponentData, getComponentActualValue, isLayoutComponent, matchComponent, getComponent, searchComponents, removeComponent, hasCondition, parseFloatExt, formatAsCurrency, escapeRegExCharacters, getValue, getStrings, generateFormChange, applyFormChanges, findComponent, getEmptyValue, isComponentDataEmpty, isSelectResourceWithObjectValue, compareSelectResourceWithObjectTypeValues, getItemTemplateKeys };

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

@@ -462,10 +462,9 @@ export function getComponentPathWithoutIndicies(path?: string): string;
 /**
  * Returns a path to the component which based on its schema
  * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property
- * @param {string} path - Path to the component
  * @returns {string} - Path to the component
  */
-export function getComponentPath(component: import('@formio/core').Component, path?: string): string;
+export function getComponentPath(component: import('@formio/core').Component): string;
 /**
  * Returns a parent component of the passed component instance skipping all the Layout components
  * @param {Component} componentInstance - The component to check for the parent.
@@ -515,7 +514,6 @@ export namespace componentValueTypes {
     let any: string;
 }
 export function interpolateErrors(component: Component, errors: FieldError[], interpolateFn: Function): [];
-import jsonLogic from 'json-logic-js';
 import ConditionOperators from './conditionOperators';
 import { Evaluator } from './Evaluator';
 export const interpolate: typeof Evaluator.interpolate;

package/lib/mjs/utils/utils.js

@@ -25,17 +25,6 @@ jsonLogic.add_operation('relativeMaxDate', (relativeMaxDate) => {
     return moment().add(relativeMaxDate, 'days').toISOString();
 });
 export { jsonLogic, ConditionOperators, moment };
-/**
- * Sets the path to the component and parent schema.
- * @param {import('@formio/core').Component} component - The component to set the path for.
- */
-function setPathToComponentAndPerentSchema(component) {
-    component.path = getComponentPath(component);
-    const dataParent = getDataParentComponent(component);
-    if (dataParent && typeof dataParent === 'object') {
-        dataParent.path = getComponentPath(dataParent);
-    }
-}
 /**
  * Evaluate a method.
  * @param {Function|string|object} func - The function to evaluate.
@@ -227,7 +216,7 @@ export function checkSimpleConditional(component, condition, row, data, instance
                     const value = getComponentActualValue(path, data, row);
                     const ConditionOperator = ConditionOperators[operator];
                     return ConditionOperator
-                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })
                         : true;
                 });
             }
@@ -235,7 +224,7 @@ export function checkSimpleConditional(component, condition, row, data, instance
                 const value = getComponentActualValue(conditionComponentPath, data, row);
                 const СonditionOperator = ConditionOperators[operator];
                 return СonditionOperator
-                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })
                     : true;
             }
         });
@@ -259,12 +248,12 @@ export function checkSimpleConditional(component, condition, row, data, instance
  */
 export function getComponentActualValue(compPath, data, row) {
     let value = null;
-    if (row) {
-        value = getValue({ data: row }, compPath);
-    }
-    if (data && _.isNil(value)) {
+    if (data) {
         value = getValue({ data }, compPath);
     }
+    if (row && _.isNil(value)) {
+        value = getValue({ data: row }, compPath);
+    }
     // FOR-400 - Fix issue where falsey values were being evaluated as show=true
     if (_.isNil(value) || (_.isObject(value) && _.isEmpty(value))) {
         value = '';
@@ -332,17 +321,18 @@ function getRow(component, row, instance, conditional) {
     // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema
     if (!instance) {
         instance = _.cloneDeep(component);
-        setPathToComponentAndPerentSchema(instance);
     }
     const dataParent = getDataParentComponent(instance);
-    const parentPath = dataParent ? getComponentPath(dataParent) : null;
-    const isTriggerCondtionComponentPath = condition.when || !condition.conditions
-        ? condition.when?.startsWith(parentPath)
-        : _.some(condition.conditions, cond => cond.component.startsWith(parentPath));
-    if (dataParent && isTriggerCondtionComponentPath) {
-        const newRow = {};
-        _.set(newRow, parentPath, row);
-        row = newRow;
+    if (dataParent) {
+        const parentPath = dataParent.paths?.localDataPath;
+        const isTriggerCondtionComponentPath = condition.when || !condition.conditions
+            ? condition.when?.startsWith(dataParent.paths?.localPath)
+            : _.some(condition.conditions, cond => cond.component.startsWith(dataParent.paths?.localPath));
+        if (isTriggerCondtionComponentPath) {
+            const newRow = {};
+            _.set(newRow, parentPath, row);
+            row = newRow;
+        }
     }
     return row;
 }
@@ -1478,15 +1468,10 @@ export function getComponentPathWithoutIndicies(path = '') {
 /**
  * Returns a path to the component which based on its schema
  * @param {import('@formio/core').Component} component - Component containing link to its parent's schema in the 'parent' property
- * @param {string} path - Path to the component
  * @returns {string} - Path to the component
  */
-export function getComponentPath(component, path = '') {
-    if (!component || !component.key || component?._form?.display === 'wizard') { // unlike the Webform, the Wizard has the key and it is a duplicate of the panel key
-        return path;
-    }
-    path = component.isInputComponent || component.input === true ? `${component.key}${path ? '.' : ''}${path}` : path;
-    return getComponentPath(component.parent, path);
+export function getComponentPath(component) {
+    return component.paths.localDataPath;
 }
 /**
  * Returns a parent component of the passed component instance skipping all the Layout components

package/lib/mjs/widgets/CalendarWidget.js

@@ -96,14 +96,8 @@ export default class CalendarWidget extends InputWidget {
         this.settings.dateFormat = convertFormatToFlatpickr(this.settings.dateFormat);
         this.settings.position = 'auto center';
         this.settings.onChange = () => {
-            if (this.settings.allowInput) {
-                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {
-                    this.calendar._input.value = this.settings.manualInputValue;
-                }
-                else {
-                    this.settings.manualInputValue = '';
-                }
-                this.settings.isManuallyOverriddenValue = false;
+            if (this.settings.allowInput && this.settings.enableTime) {
+                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
             }
             this.emit('update');
         };
@@ -112,8 +106,7 @@ export default class CalendarWidget extends InputWidget {
             this.hook('onCalendarClose');
             this.closedOn = Date.now();
             if (this.settings.allowInput && this.settings.enableTime) {
-                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;
-                this.settings.isManuallyOverriddenValue = false;
+                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
                 this.emit('update');
             }
             if (this.settings.wasDefaultValueChanged) {
@@ -125,7 +118,7 @@ export default class CalendarWidget extends InputWidget {
             }
         };
         Formio.requireLibrary('flatpickr-css', 'flatpickr', [
-            { type: 'styles', src: `${Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }
+            { type: 'styles', src: `${Formio.cdn['flatpickr']}/flatpickr.min.css` }
         ], true);
         if (this.component.shortcutButtons) {
             this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);
@@ -142,7 +135,7 @@ export default class CalendarWidget extends InputWidget {
             }
         })
             .then((ShortcutButtonsPlugin) => {
-            return Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)
+            return Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio.cdn['flatpickr']}/flatpickr.min.js`, true)
                 .then((Flatpickr) => {
                 if (this.component.shortcutButtons?.length && ShortcutButtonsPlugin) {
                     this.initShortcutButtonsPlugin(ShortcutButtonsPlugin);
@@ -151,7 +144,7 @@ export default class CalendarWidget extends InputWidget {
                 if (this._input) {
                     const { locale } = this.settings;
                     if (locale && locale.length >= 2 && locale !== 'en') {
-                        return Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr-${locale}`, `${Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
+                        return Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${Formio.cdn['flatpickr']}/l10n/${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
                     }
                     else {
                         this.initFlatpickr(Flatpickr);
@@ -349,9 +342,14 @@ export default class CalendarWidget extends InputWidget {
         this.calendar = new Flatpickr(this._input, { ...this.settings, disableMobile: true });
         this.addEventListener(this.calendar.altInput, 'input', (event) => {
             if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
+                if (event.target.mask) {
+                    event.target.mask.textMaskInputElement.update();
+                }
                 this.settings.manualInputValue = event.target.value;
+                this._input.value = this.settings.manualInputValue;
                 this.settings.isManuallyOverriddenValue = true;
                 this.settings.currentValue = event.target.value;
+                this.emit('update');
             }
             if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
                 this.settings.wasDefaultValueChanged = true;
@@ -362,6 +360,18 @@ export default class CalendarWidget extends InputWidget {
                 this.settings.wasDefaultValueChanged = false;
             }
         });
+        if (this.calendar.daysContainer) {
+            this.calendar.daysContainer.addEventListener('click', () => {
+                this.settings.isManuallyOverriddenValue = false;
+                this.calendar.updateValue(false);
+            });
+        }
+        if (this.calendar.timeContainer) {
+            this.calendar.timeContainer.addEventListener('click', () => {
+                this.settings.isManuallyOverriddenValue = false;
+                this.calendar.updateValue(false);
+            });
+        }
         const excludedFromMaskFormats = ['MMMM'];
         if (!this.settings.readOnly && !_.some(excludedFromMaskFormats, format => _.includes(this.settings.format, format))) {
             // Enforce the input mask of the format.
@@ -387,6 +397,10 @@ export default class CalendarWidget extends InputWidget {
         }
         // Make sure we commit the value after a blur event occurs.
         this.addEventListener(this.calendar._input, 'blur', (event) => {
+            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask
+            if (this.settings.isManuallyOverriddenValue) {
+                return;
+            }
             const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.1-rc.1",
+  "version": "5.1.0-dev.5965.5d8702c",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -56,9 +56,10 @@
     "dopublish": "npm run build && npm run tag && npm publish",
     "lint": "eslint ./src --fix",
     "serve": "jekyll serve --config _config.yml,_config.dev.yml",
-    "test": "mocha 'src/**/*.unit.js'",
-    "test:updateRenders": "npm run lib && TZ=UTC node --require jsdom-global/register test/updateRenders.js",
-    "test:e2e": "NODE_OPTIONS=\"--max-old-space-size=4096\" karma start --verbose --single-run"
+    "test": "nyc --reporter=lcov --reporter=text --reporter=text-summary mocha test/unit/*.unit.js",
+    "test:updateRenders": "npm run lib && cross-env TZ=UTC node --require jsdom-global/register test/updateRenders.js",
+    "test:e2e": "NODE_OPTIONS=\"--max-old-space-size=4096\" karma start --verbose --single-run",
+    "show-coverage": "open coverage/lcov-report/index.html"
   },
   "repository": {
     "type": "git",
@@ -79,21 +80,21 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "3.0.0",
+    "@formio/bootstrap": "3.1.0-dev.1-dev.120.01bbe80",
     "@formio/choices.js": "^10.2.1",
-    "@formio/core": "2.3.0",
-    "@formio/text-mask-addons": "^3.8.0-formio.3",
+    "@formio/core": "v2.4.0-dev.210.e634ab4",
+    "@formio/text-mask-addons": "3.8.0-formio.4",
     "@formio/vanilla-text-mask": "^5.1.1-formio.1",
     "abortcontroller-polyfill": "^1.7.5",
     "autocompleter": "^8.0.4",
     "bootstrap": "^5.3.3",
     "browser-cookies": "^1.2.0",
     "browser-md5-file": "^1.1.1",
-    "compare-versions": "^6.0.0-rc.2",
+    "compare-versions": "^6.1.1",
     "core-js": "^3.37.1",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
-    "dompurify": "^3.1.3",
+    "dompurify": "^3.1.6",
     "downloadjs": "^1.4.7",
     "dragula": "^3.7.3",
     "eventemitter3": "^5.0.1",
@@ -102,7 +103,7 @@
     "idb": "^7.1.1",
     "inputmask": "^5.0.8",
     "ismobilejs": "^1.1.1",
-    "json-logic-js": "^2.0.2",
+    "json-logic-js": "^2.0.5",
     "jstimezonedetect": "^1.0.7",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
@@ -155,6 +156,7 @@
     "mocha": "^10.3.0",
     "mock-local-storage": "^1.1.24",
     "natives": "^1.1.6",
+    "nyc": "^17.0.0",
     "power-assert": "^1.6.1",
     "pre-commit": "^1.2.2",
     "pretty": "^2.0.0",
@@ -174,5 +176,19 @@
     "webpack-cli": "^5.1.1",
     "webpack-node-externals": "^3.0.0",
     "webpack-stream": "^7.0.0"
+  },
+  "nyc": {
+    "check-coverage": true,
+    "statements": 63,
+    "branches": 63,
+    "functions": 61,
+    "lines": 64,
+    "include": [
+      "src/**/*.js"
+    ],
+    "exclude": [
+      "src/**/fixtures"
+    ],
+    "all": true
   }
 }