@formio/js 5.6.0 → 5.7.0-api912.2

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

@@ -29,6 +29,9 @@ export const findComponents: typeof Utils.findComponents;
 export const eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined, localRoot?: import("@formio/core").LocalRoot | undefined) => Promise<void>;
 export const eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined, localRoot?: import("@formio/core").LocalRoot | undefined) => void;
 export const getComponentKey: typeof Utils.getComponentKey;
+export const getSharedPathKey: typeof Utils.getSharedPathKey;
+export const registerInstanceAtPath: typeof Utils.registerInstanceAtPath;
+export const resolveInstanceAtPath: typeof Utils.resolveInstanceAtPath;
 export const getContextualRowPath: any;
 export const getContextualRowData: typeof Utils.getContextualRowData;
 export const componentInfo: typeof Utils.componentInfo;

package/lib/cjs/utils/formUtils.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemTemplateKeys = exports.compareSelectResourceWithObjectTypeValues = exports.isSelectResourceWithObjectValue = exports.isComponentDataEmpty = exports.getEmptyValue = exports.findComponent = exports.applyFormChanges = exports.generateFormChange = exports.getStrings = exports.getValue = exports.escapeRegExCharacters = exports.formatAsCurrency = exports.parseFloatExt = exports.hasCondition = exports.removeComponent = exports.searchComponents = exports.getComponent = exports.matchComponent = exports.isLayoutComponent = exports.getComponentActualValue = exports.getComponentData = exports.eachComponentAsync = exports.eachComponent = exports.componentInfo = exports.getContextualRowData = exports.getContextualRowPath = exports.getComponentKey = exports.eachComponentData = exports.eachComponentDataAsync = exports.findComponents = exports.getComponentValue = exports.getComponentFromPath = exports.getBestMatch = exports.componentMatches = exports.getComponentPaths = exports.componentPath = exports.isComponentNestedDataType = exports.resetComponentScope = exports.setComponentScope = exports.getComponentPath = exports.getModelType = exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = exports.uniqueName = exports.guid = exports.flattenComponents = void 0;
+exports.getItemTemplateKeys = exports.compareSelectResourceWithObjectTypeValues = exports.isSelectResourceWithObjectValue = exports.isComponentDataEmpty = exports.getEmptyValue = exports.findComponent = exports.applyFormChanges = exports.generateFormChange = exports.getStrings = exports.getValue = exports.escapeRegExCharacters = exports.formatAsCurrency = exports.parseFloatExt = exports.hasCondition = exports.removeComponent = exports.searchComponents = exports.getComponent = exports.matchComponent = exports.isLayoutComponent = exports.getComponentActualValue = exports.getComponentData = exports.eachComponentAsync = exports.eachComponent = exports.componentInfo = exports.getContextualRowData = exports.getContextualRowPath = exports.resolveInstanceAtPath = exports.registerInstanceAtPath = exports.getSharedPathKey = exports.getComponentKey = exports.eachComponentData = exports.eachComponentDataAsync = exports.findComponents = exports.getComponentValue = exports.getComponentFromPath = exports.getBestMatch = exports.componentMatches = exports.getComponentPaths = exports.componentPath = exports.isComponentNestedDataType = exports.resetComponentScope = exports.setComponentScope = exports.getComponentPath = exports.getModelType = exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = exports.uniqueName = exports.guid = exports.flattenComponents = void 0;
 const core_1 = require("@formio/core");
-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, } = core_1.Utils;
+const { flattenComponents, guid, uniqueName, MODEL_TYPES_OF_KNOWN_COMPONENTS, getModelType, getComponentPath, setComponentScope, resetComponentScope, isComponentNestedDataType, componentPath, getComponentPaths, componentMatches, getBestMatch, getComponentFromPath, getComponentValue, findComponents, eachComponentDataAsync, eachComponentData, getComponentKey, getSharedPathKey, registerInstanceAtPath, resolveInstanceAtPath, 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, } = core_1.Utils;
 exports.flattenComponents = flattenComponents;
 exports.guid = guid;
 exports.uniqueName = uniqueName;
@@ -22,6 +22,9 @@ exports.findComponents = findComponents;
 exports.eachComponentDataAsync = eachComponentDataAsync;
 exports.eachComponentData = eachComponentData;
 exports.getComponentKey = getComponentKey;
+exports.getSharedPathKey = getSharedPathKey;
+exports.registerInstanceAtPath = registerInstanceAtPath;
+exports.resolveInstanceAtPath = resolveInstanceAtPath;
 exports.getContextualRowPath = getContextualRowPath;
 exports.getContextualRowData = getContextualRowData;
 exports.componentInfo = componentInfo;

package/lib/cjs/utils/index.d.ts

@@ -40,6 +40,9 @@ declare const FormioUtils: {
     eachComponentDataAsync: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataAsyncCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataAsyncCallback | undefined, localRoot?: import("@formio/core").LocalRoot | undefined) => Promise<void>;
     eachComponentData: (components: import("@formio/core").Component[], data: import("@formio/core").DataObject, fn: import("@formio/core").EachComponentDataCallback, includeAll?: boolean | undefined, local?: boolean | undefined, parent?: import("@formio/core").Component | undefined, parentPaths?: import("@formio/core").ComponentPaths | undefined, noScopeReset?: boolean | undefined, afterFn?: import("@formio/core").EachComponentDataCallback | undefined, localRoot?: import("@formio/core").LocalRoot | undefined) => void;
     getComponentKey: typeof import("@formio/core/lib/utils/formUtil").getComponentKey;
+    getSharedPathKey: typeof import("@formio/core/lib/utils/formUtil").getSharedPathKey;
+    registerInstanceAtPath: typeof import("@formio/core/lib/utils/formUtil").registerInstanceAtPath;
+    resolveInstanceAtPath: typeof import("@formio/core/lib/utils/formUtil").resolveInstanceAtPath;
     getContextualRowPath: any;
     getContextualRowData: typeof import("@formio/core/lib/utils/formUtil").getContextualRowData;
     componentInfo: typeof import("@formio/core/lib/utils/formUtil").componentInfo;

package/lib/cjs/utils/utils.js

@@ -474,9 +474,7 @@ function setActionProperty(component, action, result, row, data, instance) {
         case 'string': {
             const safeData = escapeInterpolationDataStrings(data);
             const safeRow = escapeInterpolationDataStrings(row);
-            const safeResult = typeof result === 'string'
-                ? lodash_1.default.escape(result)
-                : escapeInterpolationDataStrings(result);
+            const safeResult = typeof result === 'string' ? lodash_1.default.escape(result) : escapeInterpolationDataStrings(result);
             const evalData = {
                 data: safeData,
                 row: safeRow,
@@ -1777,21 +1775,11 @@ function getScreenReaderMessage(component, type, value) {
             }
         }
     }
-    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}. `;
-        }
+    else if (value === null) {
+        if (!isNaN(min))
+            message += `Minimum value ${min}. `;
+        if (!isNaN(max))
+            message += `Maximum value ${max}. `;
     }
     return message.trim();
 }

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.6.0';
+    static version = '5.7.0-api912.2';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {
@@ -332,7 +332,10 @@ export class Formio {
             };
         });
         const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
-        const hasQuillComponent = (components = []) => {
+        // Quill and CKEditor cannot run in the shadow DOM (https://github.com/quilljs/quill/issues/2021,
+        // https://github.com/ckeditor/ckeditor5/issues/15824), so fall back to the light DOM when the
+        // form contains one of them.
+        const hasShadowIncompatibleEditor = (components) => {
             if (!Array.isArray(components)) {
                 return false;
             }
@@ -340,16 +343,38 @@ export class Formio {
                 if (!component || typeof component !== 'object') {
                     return false;
                 }
-                const isQuillTextarea = component.type === 'textarea' &&
-                    component.wysiwyg === true &&
-                    component.editor === 'quill';
-                return (isQuillTextarea ||
-                    hasQuillComponent(component.components) ||
-                    hasQuillComponent(component.columns?.flatMap((column) => column.components || [])) ||
-                    hasQuillComponent(component.rows?.flatMap((row) => row.flatMap((cell) => cell.components || []))));
+                if (component.type === 'textarea') {
+                    // A textarea with `wysiwyg` set and no explicit `editor` defaults to CKEditor at render time.
+                    const editor = component.editor || (component.wysiwyg ? 'ckeditor' : '');
+                    if (['quill', 'ckeditor'].includes(editor)) {
+                        return true;
+                    }
+                }
+                const children = (component.components || []).concat(component.columns?.flatMap((column) => column.components || []) || [], component.rows?.flatMap((row) => row.flatMap((cell) => cell.components || [])) || []);
+                return hasShadowIncompatibleEditor(children);
             });
         };
-        const disableShadowForQuill = hasQuillComponent(Formio.config.form?.components);
+        const shouldSkipShadowDom = async () => {
+            if (Formio.config.form?.components) {
+                return hasShadowIncompatibleEditor(Formio.config.form.components);
+            }
+            const formUrl = Formio.config.src || (typeof Formio.config.form === 'string' ? Formio.config.form : '');
+            if (!formUrl) {
+                return false;
+            }
+            try {
+                const response = await fetch(formUrl);
+                if (!response.ok) {
+                    throw new Error(`Request failed with status ${response.status}`);
+                }
+                const form = await response.json();
+                return hasShadowIncompatibleEditor(form?.components);
+            }
+            catch (err) {
+                Formio.debug('Could not load the form to check for shadow DOM support', err);
+                return false;
+            }
+        };
         // Create a new wrapper and add the element inside of a new wrapper.
         let wrapper = Formio.createElement('div', {
             id: `${id}-wrapper`,
@@ -358,20 +383,8 @@ export class Formio {
         // If we include the libraries, then we will attempt to run this in shadow dom.
         const useShadowDom = Formio.config.includeLibs &&
             !Formio.config.noshadow &&
-            !disableShadowForQuill &&
-            typeof wrapper.attachShadow === 'function';
-        if (useShadowDom) {
-            wrapper = wrapper.attachShadow({
-                mode: 'open',
-            });
-            options.shadowRoot = wrapper;
-            // Due to an issue with quill not loading styles in the shadowdom, we need to add quill styles and js to the shadowdom
-            const quill = {
-                js: `${Formio.cdn.quill}/quill.js`,
-                css: `${Formio.cdn.quill}/quill.snow.css`,
-            };
-            await Formio.addLibrary(wrapper, quill, 'quill');
-        }
+            typeof wrapper.attachShadow === 'function' &&
+            !(await shouldSkipShadowDom());
         element.parentNode.removeChild(element);
         wrapper.appendChild(element);
         // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.

package/lib/mjs/Form.d.ts

@@ -45,7 +45,7 @@
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string } | { resource: { form: string, codeComponent: string, mapComponent: string } }} [i18n] - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -198,12 +198,18 @@ export type FormOptions = {
      */
     noAlerts?: boolean | undefined;
     /**
-     * - The translation file for this rendering.
+     * - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
      */
     i18n?: {
         [key: string]: string;
     } | {
         translationsUrl: string;
+    } | {
+        resource: {
+            form: string;
+            codeComponent: string;
+            mapComponent: string;
+        };
     } | undefined;
     /**
      * - Custom logic for creation of elements.

package/lib/mjs/Form.js

@@ -50,7 +50,7 @@ import FormioUtils from './utils';
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string } | { resource: { form: string, codeComponent: string, mapComponent: string } }} [i18n] - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.

package/lib/mjs/Formio.js

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = '5.6.0';
+FormioCore.version = '5.7.0-api912.2';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/mjs/PDF.d.ts

@@ -2,6 +2,7 @@ export default class PDF extends Webform {
     constructor(element: any, options: any);
     components: any[];
     init(): void;
+    forwardRefreshEventsToIframe(): void;
     render(): any;
     submitButton: any;
     attachComponents(element: any, components: any, container: any): Promise<void>;

package/lib/mjs/PDF.js

@@ -13,10 +13,7 @@ const getIframeOrigin = (iframeElement) => {
 const isTrustedIframeMessage = (event, form) => {
     const iframeWindow = form?.iframeElement?.contentWindow;
     const iframeOrigin = form?.iframeElement && getIframeOrigin(form.iframeElement);
-    return Boolean(iframeWindow &&
-        iframeOrigin &&
-        event.source === iframeWindow &&
-        event.origin === iframeOrigin);
+    return Boolean(iframeWindow && iframeOrigin && event.source === iframeWindow && event.origin === iframeOrigin);
 };
 export default class PDF extends Webform {
     constructor(element, options) {
@@ -25,7 +22,9 @@ export default class PDF extends Webform {
         this.components = [];
     }
     init() {
+        this.options.pdfShell = true;
         super.init();
+        this.forwardRefreshEventsToIframe();
         // Handle an iframe submission.
         this.on('iframe-submission', (submission) => this.setValue(submission, {
             fromIframe: true,
@@ -56,6 +55,17 @@ export default class PDF extends Webform {
         // Re-emit pageEnd without the iframe- prefix for consumers tracking PDF scroll position.
         this.on('iframe-pageEnd', (data) => this.emit('pageEnd', data), true);
     }
+    // The iframe renders the components in its own realm with its own emitter, so an event they
+    // refresh on only reaches them across the bridge.
+    forwardRefreshEventsToIframe() {
+        const refreshEvents = new Set();
+        eachComponent(this.component.components, (component) => {
+            if (component.refreshOnEvent) {
+                refreshEvents.add(component.refreshOnEvent);
+            }
+        });
+        refreshEvents.forEach((event) => this.on(event, () => this.postMessage({ name: 'emit', data: event }), true));
+    }
     render() {
         this.submitButton = this.addComponent({
             disabled: this.form.disableWizardSubmit,
@@ -309,7 +319,13 @@ if (typeof window !== 'undefined') {
             if (eventData.compPath) {
                 const comp = form.getComponent(eventData.compPath);
                 if (comp) {
-                    comp.emit(eventData.name, eventData.data);
+                    // Emit component instance for focus/blur events to match payload of those events on other forms
+                    if (['focus', 'blur'].includes(eventData.name)) {
+                        comp.emit(eventData.name, comp);
+                    }
+                    else {
+                        comp.emit(eventData.name, eventData.data);
+                    }
                 }
             }
             else {

package/lib/mjs/PDFBuilder.d.ts

@@ -19,6 +19,7 @@ export default class PDFBuilder extends WebformBuilder {
                 file: boolean;
                 htmlelement: boolean;
                 signrequestsignature: boolean;
+                datasource: boolean;
             };
         };
         basic: boolean;

package/lib/mjs/PDFBuilder.js

@@ -46,6 +46,7 @@ export default class PDFBuilder extends WebformBuilder {
                     file: true,
                     htmlelement: true,
                     signrequestsignature: true,
+                    datasource: true,
                 },
             },
             basic: false,

package/lib/mjs/Webform.d.ts

@@ -293,8 +293,20 @@ declare class Webform extends NestedDataComponent {
     /**
      * Focus on selected component.
      * @param {string} key - The key of selected component.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
      */
-    focusOnComponent(key: string): void;
+    focusOnComponent(key: string, componentKey?: string | undefined): void;
+    /**
+     * Resolves the component that produced an error, to attach the error to it or to focus it from
+     * the error list. A checkbox with inputType 'radio' takes its `name` as its path, so several
+     * components can share `key`; the schema key of the component that produced the error tells them
+     * apart. The shared-path lookup is only consulted when `getComponent` picked another component,
+     * and only trusted when it finds the one with that schema key.
+     * @param {string} key - The path the error was reported at.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
+     * @returns {any} - The component that produced the error, if found.
+     */
+    getErrorComponent(key: string, componentKey?: string | undefined): any;
     /**
      * @returns {boolean} - Whether or not the draft submission is being edited
      */

package/lib/mjs/Webform.js

@@ -6,7 +6,7 @@ import i18nDefaults from './i18n';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, eachComponent, } from './utils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, eachComponent, resolveInstanceAtPath, } from './utils';
 // We need this here because dragula pulls in CustomEvent class that requires global to exist.
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
@@ -979,16 +979,18 @@ export default class Webform extends NestedDataComponent {
         }
         this.loadRefs(this.alert, { errorRef: 'multiple' });
         if (this.refs.errorRef && this.refs.errorRef.length) {
-            this.refs.errorRef.forEach((el) => {
-                this.addEventListener(el, 'click', (e) => {
-                    const key = e.currentTarget.dataset.componentKey;
-                    this.focusOnComponent(key);
-                });
+            this.refs.errorRef.forEach((el, index) => {
+                // The Nth link renders the Nth error; a custom template that reorders or filters the list
+                // fails this check, and the link then resolves by its key alone.
+                const listItem = options?.errors?.[index];
+                const isLinkForListItem = !!listItem && listItem.keyOrPath === el.dataset.componentKey;
+                const componentKey = isLinkForListItem ? listItem.componentKey : undefined;
+                const focusOnLinkedComponent = (e) => this.focusOnComponent(e.currentTarget.dataset.componentKey, componentKey);
+                this.addEventListener(el, 'click', focusOnLinkedComponent);
                 this.addEventListener(el, 'keydown', (e) => {
                     if (e.keyCode === 13) {
                         e.preventDefault();
-                        const key = e.currentTarget.dataset.componentKey;
-                        this.focusOnComponent(key);
+                        focusOnLinkedComponent(e);
                     }
                 });
             });
@@ -998,16 +1000,36 @@ export default class Webform extends NestedDataComponent {
     /**
      * Focus on selected component.
      * @param {string} key - The key of selected component.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
      */
-    focusOnComponent(key) {
+    focusOnComponent(key, componentKey) {
         if (key) {
-            const component = this.getComponent(key);
+            const component = this.getErrorComponent(key, componentKey);
             if (component) {
                 component.focus();
                 component.scrollIntoView();
             }
         }
     }
+    /**
+     * Resolves the component that produced an error, to attach the error to it or to focus it from
+     * the error list. A checkbox with inputType 'radio' takes its `name` as its path, so several
+     * components can share `key`; the schema key of the component that produced the error tells them
+     * apart. The shared-path lookup is only consulted when `getComponent` picked another component,
+     * and only trusted when it finds the one with that schema key.
+     * @param {string} key - The path the error was reported at.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
+     * @returns {any} - The component that produced the error, if found.
+     */
+    getErrorComponent(key, componentKey) {
+        const component = this.getComponent(key);
+        if (!componentKey || component?.component.key === componentKey) {
+            return component;
+        }
+        // GOTCHA(G-FJS06)
+        const componentWithKey = resolveInstanceAtPath(this.componentsMap, key, componentKey);
+        return componentWithKey?.component.key === componentKey ? componentWithKey : component;
+    }
     /**
      * @returns {boolean} - Whether or not the draft submission is being edited
      */
@@ -1041,23 +1063,23 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         // Mark any components as invalid if in a custom message.
-        const componentErrors = {};
+        const errorsByComponent = new Map();
         errors.forEach((err) => {
             const path = getStringFromComponentPath(err.path) || err.context?.path || err.component?.key;
-            if (!componentErrors[path]) {
-                componentErrors[path] = [];
+            const component = path && this.getErrorComponent(path, err.component?.key);
+            if (!component) {
+                return;
             }
-            componentErrors[path].push(err);
+            if (!errorsByComponent.has(component)) {
+                errorsByComponent.set(component, []);
+            }
+            errorsByComponent.get(component).push(err);
         });
         // Iterate through all of our component errors and apply them to the components.
-        for (let path in componentErrors) {
-            const component = this.getComponent(path);
-            const errors = componentErrors[path];
-            if (component) {
-                component.serverErrors = errors.filter((err) => err.fromServer);
-                component.setCustomValidity(errors, true);
-            }
-        }
+        errorsByComponent.forEach((componentErrors, component) => {
+            component.serverErrors = componentErrors.filter((err) => err.fromServer);
+            component.setCustomValidity(componentErrors, true);
+        });
         const displayedErrors = [];
         if (errors.length) {
             errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
@@ -1077,6 +1099,7 @@ export default class Webform extends NestedDataComponent {
                 return {
                     message: unescapeHTML(message),
                     keyOrPath: formattedKeyOrPath,
+                    componentKey: err.component?.key,
                 };
             };
             errors.forEach(({ message, context, fromServer, component }, index) => {
@@ -1090,7 +1113,7 @@ export default class Webform extends NestedDataComponent {
         // GOTCHA(G-FJS02)
         // Only paint the alert from a subform when the root won't double paint it to avoid a painful flicker
         if (this === this.root || !this.root?.submitted) {
-            this.root?.setAlert('danger', errorsList);
+            this.root?.setAlert('danger', errorsList, { errors: displayedErrors });
         }
         if (triggerEvent) {
             this.emit('error', errors);
@@ -1518,9 +1541,16 @@ export default class Webform extends NestedDataComponent {
         const translationsUrl = typeof this.options.i18n?.translationsUrl === 'string'
             ? this.options.i18n.translationsUrl
             : null;
+        // Translations can also live in a Form.io resource, one submission per language.
+        const languageResource = this.options.i18n?.resource;
+        const usesLanguageResource = Boolean(languageResource?.form);
         if (translationsUrl) {
             const url = this.sanitize(this.interpolate(translationsUrl, {}), this.shouldSanitizeValue);
-            Formio.makeStaticRequest(url, 'GET')
+            // Simple CORS GET: skip Content-Type / token so static hosts need no preflight.
+            Formio.makeStaticRequest(url, 'GET', null, {
+                headers: { Accept: 'application/json' },
+                noToken: true,
+            })
                 .then((response) => {
                 let languages = response;
                 try {
@@ -1547,6 +1577,27 @@ export default class Webform extends NestedDataComponent {
                 translationsLoadResolve();
             });
         }
+        else if (usesLanguageResource) {
+            const { form: resourceId, codeComponent, mapComponent } = languageResource;
+            const language = this.i18next?.originalLanguage || this.options.language;
+            const languageQuery = `data.${codeComponent}=${encodeURIComponent(language)}`;
+            // The resource is addressed by id, so it needs the /form/ route — the bare
+            // `{project}/{alias}` route resolves by path only and would 404 on an id.
+            const url = `${Formio.getProjectUrl()}/form/${resourceId}/submission?${languageQuery}&limit=1`;
+            Formio.makeStaticRequest(url, 'GET')
+                .then((submissions) => {
+                const translations = submissions?.[0]?.data?.[mapComponent];
+                // No submission for this language just leaves the form in its default language.
+                if (translations) {
+                    this.addLanguage(language, translations, true);
+                }
+                translationsLoadResolve();
+            })
+                .catch((err) => {
+                console.warn(err);
+                translationsLoadResolve();
+            });
+        }
         else {
             translationsLoadResolve();
         }

package/lib/mjs/Wizard.d.ts

@@ -112,7 +112,7 @@ declare class Wizard extends Webform {
     pageId(page: any): any;
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
-    focusOnComponent(key: any): void | Promise<void>;
+    focusOnComponent(key: any, componentKey: any): void | Promise<void>;
     triggerButtonCaptcha(page: any): void;
 }
 declare namespace Wizard {

package/lib/mjs/Wizard.js

@@ -122,9 +122,15 @@ export default class Wizard extends Webform {
             { name: 'cancel', method: 'cancel' },
             { name: 'previous', method: 'prevPage' },
             { name: 'next', method: 'nextPage' },
-            { name: 'submit', method: 'submit', args: [false, {
+            {
+                name: 'submit',
+                method: 'submit',
+                args: [
+                    false,
+                    {
                         state: 'submitted',
-                    }],
+                    },
+                ],
             },
         ].forEach((button) => {
             if (this.hasButton(button.name)) {
@@ -1004,8 +1010,8 @@ export default class Wizard extends Webform {
     get errors() {
         return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;
     }
-    focusOnComponent(key) {
-        const component = this.getComponent(key);
+    focusOnComponent(key, componentKey) {
+        const component = this.getErrorComponent(key, componentKey);
         if (component) {
             let topPanel = component.parent;
             while (!(topPanel.parent instanceof Wizard)) {
@@ -1015,11 +1021,11 @@ export default class Wizard extends Webform {
             if (pageIndex >= 0) {
                 const page = this.pages[pageIndex];
                 if (page && page !== this.currentPage) {
-                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key));
+                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key, componentKey));
                 }
             }
         }
-        return super.focusOnComponent(key);
+        return super.focusOnComponent(key, componentKey);
     }
     triggerButtonCaptcha(page) {
         if (!page.components) {

package/lib/mjs/components/Components.js

@@ -65,11 +65,7 @@ export default class Components {
         else {
             comp = new Component(component, options, data);
         }
-        if (comp.path) {
-            comp.eachRootChildComponentsMap((map) => {
-                map[comp.path] = comp;
-            });
-        }
+        comp.registerComponentInstance();
         // Reset the componentMatches on the root element if any new component is created.
         let parent = comp.parent;
         while (parent) {

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

@@ -171,6 +171,20 @@ declare class Component extends Element {
      * @param {(map: object) => void} fn - Called once per root that exposes a `childComponentsMap`.
      */
     eachRootChildComponentsMap(fn: (map: object) => void): void;
+    /**
+     * Registers this instance in every root's `childComponentsMap`. Several components can resolve
+     * to one data path — see `getSharedPathKey` in `@formio/core` for the rule this follows.
+     * @returns {void}
+     */
+    registerComponentInstance(): void;
+    sharedPathKey: string | undefined;
+    /**
+     * Removes this instance from every root's `childComponentsMap`.
+     * @param {string} [path] - The path this instance was registered under, when it has since
+     * been re-keyed (a DataGrid row index change regenerates paths before unregistering).
+     * @returns {void}
+     */
+    unregisterComponentInstance(path?: string | undefined): void;
     /**
      * Returns if the parent should conditionally clear.
      *