@formio/js 5.0.0-dev.5936.905c79f → 5.0.0-dev.5937.6595453

package/lib/cjs/components/radio/Radio.js

@@ -7,7 +7,6 @@ const lodash_1 = __importDefault(require("lodash"));
 const ListComponent_1 = __importDefault(require("../_classes/list/ListComponent"));
 const Formio_1 = require("../../Formio");
 const utils_1 = require("../../utils/utils");
-const uuid_1 = require("uuid");
 class RadioComponent extends ListComponent_1.default {
     static schema(...extend) {
         return ListComponent_1.default.schema({
@@ -143,7 +142,6 @@ class RadioComponent extends ListComponent_1.default {
         });
         this.optionsLoaded = !this.component.dataSrc || this.component.dataSrc === 'values';
         this.loadedOptions = [];
-        this.valuesMap = new Map();
         if (!this.visible) {
             this.itemsLoadedResolve();
         }
@@ -183,12 +181,9 @@ class RadioComponent extends ListComponent_1.default {
                 if (!lodash_1.default.isString(this.dataValue)) {
                     dataValue = lodash_1.default.toString(this.dataValue);
                 }
-                if (this.isSelectURL) {
-                    const valueKey = this.loadedOptions[index].value;
-                    const optionValue = this.valuesMap.has(valueKey)
-                        ? this.valuesMap.get(valueKey)
-                        : valueKey;
-                    input.checked = lodash_1.default.isEqual(this.normalizeValue(optionValue), this.dataValue);
+                if (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) {
+                    const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
+                    input.checked = lodash_1.default.isEqual(optionValue, this.dataValue);
                 }
                 else {
                     input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -225,14 +220,9 @@ class RadioComponent extends ListComponent_1.default {
         let value = this.component.inputType === 'checkbox' ? '' : this.dataValue;
         this.refs.input.forEach((input, index) => {
             if (input.checked) {
-                if (!this.isSelectURL) {
-                    value = input.value;
-                    return;
-                }
-                const optionValue = this.loadedOptions[index].value;
-                value = this.valuesMap.has(optionValue)
-                    ? this.valuesMap.get(optionValue)
-                    : optionValue;
+                value = (this.isSelectURL && lodash_1.default.isObject(this.loadedOptions[index].value)) ?
+                    this.loadedOptions[index].value :
+                    input.value;
             }
         });
         return value;
@@ -276,8 +266,8 @@ class RadioComponent extends ListComponent_1.default {
     }
     setValueAt(index, value) {
         if (this.refs.input && this.refs.input[index] && value !== null && value !== undefined) {
-            const inputValue = this.getValueByInput(this.refs.input[index]);
-            this.refs.input[index].checked = lodash_1.default.isEqual(inputValue, value);
+            const inputValue = this.refs.input[index].value;
+            this.refs.input[index].checked = (inputValue === value.toString());
         }
     }
     get shouldLoad() {
@@ -287,23 +277,6 @@ class RadioComponent extends ListComponent_1.default {
         }
         return super.shouldLoad;
     }
-    prepareValue(item, options = {}) {
-        const value = this.component.valueProperty && !options.skipValueProperty
-            ? lodash_1.default.get(item, this.component.valueProperty)
-            : item;
-        if (this.component.type === 'radio' && typeof value !== 'string') {
-            const uuid = (0, uuid_1.v4)();
-            this.valuesMap.set(uuid, value);
-            return uuid;
-        }
-        return value;
-    }
-    getValueByInput(input) {
-        const inputValue = input.value;
-        return this.valuesMap.has(inputValue)
-            ? this.valuesMap.get(inputValue)
-            : inputValue;
-    }
     loadItems(url, search, headers, options, method, body) {
         if (this.optionsLoaded) {
             this.itemsLoadedResolve();
@@ -354,7 +327,7 @@ class RadioComponent extends ListComponent_1.default {
                 label: this.itemTemplate(item)
             };
             if (lodash_1.default.isEqual(item, this.selectData || lodash_1.default.pick(this.dataValue, lodash_1.default.keys(item)))) {
-                this.loadedOptions[i].value = this.prepareValue(this.dataValue, { skipValueProperty: true });
+                this.loadedOptions[i].value = this.dataValue;
             }
         });
         this.optionsLoaded = true;
@@ -364,15 +337,12 @@ class RadioComponent extends ListComponent_1.default {
         const listData = [];
         items === null || items === void 0 ? void 0 : items.forEach((item, i) => {
             const valueAtProperty = lodash_1.default.get(item, this.component.valueProperty);
-            const value = this.prepareValue(item);
-            const label = this.component.valueProperty
-                ? this.itemTemplate(item, valueAtProperty, i)
-                : this.itemTemplate(item, item, i);
-            this.loadedOptions[i] = { label, value };
-            listData.push(this.templateData[i]);
-            if (this.valuesMap.has(value)) {
-                this.templateData[value] = this.templateData[i];
-            }
+            this.loadedOptions[i] = {
+                value: this.component.valueProperty ? valueAtProperty : item,
+                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
+            };
+            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
+            const value = this.loadedOptions[i].value;
             if (!this.isRadio && (lodash_1.default.isObject(value) || lodash_1.default.isBoolean(value) || lodash_1.default.isUndefined(value))) {
                 this.loadedOptions[i].invalid = true;
             }
@@ -395,9 +365,7 @@ class RadioComponent extends ListComponent_1.default {
             const value = this.dataValue;
             this.refs.wrapper.forEach((wrapper, index) => {
                 const input = this.refs.input[index];
-                const checked = (input.type === 'checkbox')
-                    ? value[input.value] || input.checked
-                    : lodash_1.default.isEqual(this.normalizeValue(this.getValueByInput(input)), value);
+                const checked = (input.type === 'checkbox') ? value[input.value] || input.checked : (input.value.toString() === value.toString());
                 if (checked) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
@@ -411,25 +379,10 @@ class RadioComponent extends ListComponent_1.default {
             });
         }
     }
-    setMetadata(value) {
-        let key = value;
-        if (typeof value !== 'string') {
-            const checkedInput = Array.prototype.find.call(this.refs.input, (input => input.type === 'radio' && input.getAttribute('checked')));
-            key = (checkedInput === null || checkedInput === void 0 ? void 0 : checkedInput.value) || key;
-        }
-        if (this.isSelectURL && this.templateData && this.templateData[key]) {
-            const submission = this.root.submission;
-            if (!submission.metadata.selectData) {
-                submission.metadata.selectData = {};
-            }
-            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[key]);
-        }
-    }
     updateValue(value, flags) {
         const changed = super.updateValue(value, flags);
         if (changed) {
             this.setSelectedClasses();
-            this.setMetadata(this.dataValue);
         }
         if (!flags || !flags.modified || !this.isRadio) {
             if (changed) {
@@ -485,10 +438,14 @@ class RadioComponent extends ListComponent_1.default {
                 value = !(!value || value.toString() === 'false');
                 break;
         }
+        if (this.isSelectURL && this.templateData && this.templateData[value]) {
+            const submission = this.root.submission;
+            if (!submission.metadata.selectData) {
+                submission.metadata.selectData = {};
+            }
+            lodash_1.default.set(submission.metadata.selectData, this.path, this.templateData[value]);
+        }
         return super.normalizeValue(value);
     }
-    isSingleInputValue() {
-        return true;
-    }
 }
 exports.default = RadioComponent;

package/lib/cjs/components/selectboxes/SelectBoxes.js

@@ -275,7 +275,6 @@ class SelectBoxesComponent extends Radio_1.default {
         else {
             return super.setCustomValidity(messages, dirty, external);
         }
-        ;
     }
     validateValueAvailability(setting, value) {
         if (!(0, utils_1.boolValue)(setting) || !value) {

package/lib/cjs/formio.form.js

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

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

@@ -20,13 +20,13 @@ class DateGeaterThan extends ConditionOperator_1.default {
     }
     execute(options, functionName = 'isAfter') {
         var _a;
-        const { value, instance, conditionComponentPath } = options;
+        const { value, instance, path } = options;
         if (!value) {
             return false;
         }
         let conditionTriggerComponent = null;
         if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
-            conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            conditionTriggerComponent = instance.root.getComponent(path);
         }
         if (conditionTriggerComponent && conditionTriggerComponent.isPartialDay && conditionTriggerComponent.isPartialDay(value)) {
             return false;

package/lib/cjs/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/cjs/utils/conditionOperators/IsEmptyValue.js

@@ -15,11 +15,11 @@ class IsEmptyValue extends ConditionOperator_1.default {
     static get requireValue() {
         return false;
     }
-    execute({ value, instance, conditionComponentPath }) {
+    execute({ value, instance, path }) {
         var _a;
         const isEmptyValue = lodash_1.default.isEmpty(lodash_1.default.isNumber(value) ? String(value) : value);
         if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
-            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            const conditionTriggerComponent = instance.root.getComponent(path);
             return (conditionTriggerComponent === null || conditionTriggerComponent === void 0 ? void 0 : conditionTriggerComponent.isEmpty) ? conditionTriggerComponent.isEmpty() : isEmptyValue;
         }
         return isEmptyValue;

package/lib/cjs/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/cjs/utils/conditionOperators/IsEqualTo.js

@@ -13,7 +13,7 @@ class IsEqualTo extends ConditionOperator_1.default {
     static get displayedName() {
         return 'Is Equal To';
     }
-    execute({ value, comparedValue, instance, conditionComponentPath }) {
+    execute({ value, comparedValue, instance, path }) {
         var _a, _b;
         if ((value || value === false) && comparedValue && typeof value !== typeof comparedValue && lodash_1.default.isString(comparedValue)) {
             try {
@@ -23,7 +23,7 @@ class IsEqualTo extends ConditionOperator_1.default {
             catch (e) { }
         }
         if ((_a = instance === null || instance === void 0 ? void 0 : instance.root) === null || _a === void 0 ? void 0 : _a.getComponent) {
-            const conditionTriggerComponent = instance.root.getComponent(conditionComponentPath);
+            const conditionTriggerComponent = instance.root.getComponent(path);
             if (conditionTriggerComponent
                 && (0, utils_1.isSelectResourceWithObjectValue)(conditionTriggerComponent.component)
                 && ((_b = conditionTriggerComponent.component) === null || _b === void 0 ? void 0 : _b.template)) {

package/lib/cjs/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/cjs/utils/formUtils.js

@@ -1,18 +1,24 @@
 "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.componentChildPath = exports.componentPath = exports.isComponentNestedDataType = exports.getComponentPath = exports.getComponentAbsolutePath = exports.getModelType = exports.MODEL_TYPES = exports.uniqueName = exports.guid = exports.flattenComponents = exports.findComponents = 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.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, 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 } = 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, 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;
-exports.MODEL_TYPES = MODEL_TYPES;
+exports.MODEL_TYPES_OF_KNOWN_COMPONENTS = MODEL_TYPES_OF_KNOWN_COMPONENTS;
 exports.getModelType = getModelType;
-exports.getComponentAbsolutePath = getComponentAbsolutePath;
 exports.getComponentPath = getComponentPath;
+exports.setComponentScope = setComponentScope;
+exports.resetComponentScope = resetComponentScope;
 exports.isComponentNestedDataType = isComponentNestedDataType;
 exports.componentPath = componentPath;
-exports.componentChildPath = componentChildPath;
+exports.getComponentPaths = getComponentPaths;
+exports.componentMatches = componentMatches;
+exports.getBestMatch = getBestMatch;
+exports.getComponentFromPath = getComponentFromPath;
+exports.getComponentValue = getComponentValue;
+exports.findComponents = findComponents;
 exports.eachComponentDataAsync = eachComponentDataAsync;
 exports.eachComponentData = eachComponentData;
 exports.getComponentKey = getComponentKey;
@@ -42,14 +48,3 @@ exports.isComponentDataEmpty = isComponentDataEmpty;
 exports.isSelectResourceWithObjectValue = isSelectResourceWithObjectValue;
 exports.compareSelectResourceWithObjectTypeValues = compareSelectResourceWithObjectTypeValues;
 exports.getItemTemplateKeys = getItemTemplateKeys;
-/**
- * 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.
- */
-function findComponents(components, query) {
-    console.warn('formio.js/utils findComponents is deprecated. Use searchComponents instead.');
-    return searchComponents(components, query);
-}
-exports.findComponents = findComponents;

package/lib/cjs/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.

package/lib/cjs/utils/utils.js

@@ -51,17 +51,6 @@ json_logic_js_1.default.add_operation('relativeMinDate', (relativeMinDate) => {
 json_logic_js_1.default.add_operation('relativeMaxDate', (relativeMaxDate) => {
     return (0, moment_timezone_1.default)().add(relativeMaxDate, 'days').toISOString();
 });
-/**
- * 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.
@@ -262,7 +251,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
                     const value = getComponentActualValue(path, data, row);
                     const ConditionOperator = conditionOperators_1.default[operator];
                     return ConditionOperator
-                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+                        ? new ConditionOperator().getResult({ value, comparedValue, instance, component, path })
                         : true;
                 });
             }
@@ -270,7 +259,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
                 const value = getComponentActualValue(conditionComponentPath, data, row);
                 const СonditionOperator = conditionOperators_1.default[operator];
                 return СonditionOperator
-                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, conditionComponentPath })
+                    ? new СonditionOperator().getResult({ value, comparedValue, instance, component, path: conditionComponentPath })
                     : true;
             }
         });
@@ -367,22 +356,23 @@ exports.checkJsonConditional = checkJsonConditional;
  * @returns {*} - The contextual row data for the component.
  */
 function getRow(component, row, instance, conditional) {
-    var _a;
+    var _a, _b, _c;
     const condition = conditional || component.conditional;
     // If no component's instance passed (happens only in 6.x server), calculate its path based on the schema
     if (!instance) {
         instance = lodash_1.default.cloneDeep(component);
-        setPathToComponentAndPerentSchema(instance);
     }
     const dataParent = getDataParentComponent(instance);
-    const parentPath = dataParent ? getComponentPath(dataParent) : null;
-    const isTriggerCondtionComponentPath = condition.when || !condition.conditions
-        ? (_a = condition.when) === null || _a === void 0 ? void 0 : _a.startsWith(parentPath)
-        : lodash_1.default.some(condition.conditions, cond => cond.component.startsWith(parentPath));
-    if (dataParent && isTriggerCondtionComponentPath) {
-        const newRow = {};
-        lodash_1.default.set(newRow, parentPath, row);
-        row = newRow;
+    if (dataParent) {
+        const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localDataPath;
+        const isTriggerCondtionComponentPath = condition.when || !condition.conditions
+            ? (_b = condition.when) === null || _b === void 0 ? void 0 : _b.startsWith((_c = dataParent.paths) === null || _c === void 0 ? void 0 : _c.localPath)
+            : lodash_1.default.some(condition.conditions, cond => { var _a; return cond.component.startsWith((_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath); });
+        if (isTriggerCondtionComponentPath) {
+            const newRow = {};
+            lodash_1.default.set(newRow, parentPath, row);
+            row = newRow;
+        }
     }
     return row;
 }
@@ -1566,16 +1556,10 @@ exports.getComponentPathWithoutIndicies = getComponentPathWithoutIndicies;
 /**
  * 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
  */
-function getComponentPath(component, path = '') {
-    var _a;
-    if (!component || !component.key || ((_a = component === null || component === void 0 ? void 0 : component._form) === null || _a === void 0 ? void 0 : _a.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);
+function getComponentPath(component) {
+    return component.paths.localDataPath;
 }
 exports.getComponentPath = getComponentPath;
 /**

package/lib/mjs/Webform.d.ts

@@ -426,7 +426,7 @@ declare class Webform extends NestedDataComponent {
      */
     cancel(noconfirm: boolean): boolean;
     setMetadata(submission: any): void;
-    submitForm(options?: {}): Promise<any>;
+    submitForm(options?: {}, local?: boolean): Promise<any>;
     setServerErrors(error: any): void;
     serverErrors: any;
     executeSubmit(options: any): Promise<object>;

package/lib/mjs/Webform.js

@@ -588,6 +588,7 @@ export default class Webform extends NestedDataComponent {
         try {
             // Do not set the form again if it has been already set
             if (isFormAlreadySet && JSON.stringify(this._form) === JSON.stringify(form)) {
+                this.formReadyResolve();
                 return Promise.resolve();
             }
             // Create the form.
@@ -595,13 +596,11 @@ export default class Webform extends NestedDataComponent {
             if (this.onSetForm) {
                 this.onSetForm(_.cloneDeep(this._form), form);
             }
-            if (this.parent?.component?.modalEdit) {
-                return Promise.resolve();
-            }
         }
         catch (err) {
             console.warn(err);
             // If provided form is not a valid JSON object, do not set it too
+            this.formReadyReject(err);
             return Promise.resolve();
         }
         // Allow the form to provide component overrides.
@@ -850,6 +849,9 @@ export default class Webform extends NestedDataComponent {
         return changed;
     }
     getValue() {
+        if (!this._submission) {
+            this._submission = {};
+        }
         if (!this._submission.data) {
             this._submission.data = {};
         }
@@ -1111,29 +1113,23 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         // Mark any components as invalid if in a custom message.
+        const componentErrors = {};
         errors.forEach((err) => {
-            const { components = [] } = err;
-            if (err.component) {
-                components.push(err.component);
+            const path = err.path || err.context?.path || err.component?.key;
+            if (!componentErrors[path]) {
+                componentErrors[path] = [];
             }
-            if (err.path) {
-                components.push(err.path);
-            }
-            components.forEach((path) => {
-                const originalPath = getStringFromComponentPath(path);
-                const component = this.getComponent(path, _.identity, originalPath);
-                if (err.fromServer) {
-                    if (component.serverErrors) {
-                        component.serverErrors.push(err);
-                    }
-                    else {
-                        component.serverErrors = [err];
-                    }
-                }
-                const components = _.compact(Array.isArray(component) ? component : [component]);
-                components.forEach((component) => component.setCustomValidity(err.message, true));
-            });
+            componentErrors[path].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);
+            }
+        }
         const displayedErrors = [];
         if (errors.length) {
             errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
@@ -1326,7 +1322,7 @@ export default class Webform extends NestedDataComponent {
             onLine: navigator.onLine,
         });
     }
-    submitForm(options = {}) {
+    submitForm(options = {}, local = false) {
         this.clearServerErrors();
         return new Promise((resolve, reject) => {
             // Read-only forms should never submit.
@@ -1351,6 +1347,7 @@ export default class Webform extends NestedDataComponent {
                             return reject("Invalid Submission");
                         }
                         const errors = this.validate(submission.data, {
+                            local,
                             dirty: true,
                             silentCheck: false,
                             process: "submit",
@@ -1366,11 +1363,11 @@ export default class Webform extends NestedDataComponent {
                 }
                 this.everyComponent((comp) => {
                     if (submission._vnote && comp.type === "form" && comp.component.reference) {
-                        _.get(submission.data, comp.path, {})._vnote = submission._vnote;
+                        _.get(submission.data, local ? comp.paths?.localDataPath : comp.path, {})._vnote = submission._vnote;
                     }
                     const { persistent } = comp.component;
                     if (persistent === "client-only") {
-                        _.unset(submission.data, comp.path);
+                        _.unset(submission.data, local ? comp.paths?.localDataPath : comp.path);
                     }
                 });
                 this.hook("customValidation", { ...submission, component: options.component }, (err) => {
@@ -1536,7 +1533,7 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         const captchaComponent = [];
-        eachComponent(this.components, (component) => {
+        this.eachComponent((component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }

package/lib/mjs/WebformBuilder.js

@@ -1096,20 +1096,12 @@ export default class WebformBuilder extends Component {
     findRepeatablePaths() {
         const repeatablePaths = [];
         const keys = new Map();
-        eachComponent(this.form.components, (comp, path) => {
-            if (!comp.key) {
-                return;
-            }
-            if (keys.has(comp.key)) {
-                if (keys.get(comp.key).includes(path)) {
-                    repeatablePaths.push(path);
-                }
-                else {
-                    keys.set(comp.key, [...keys.get(comp.key), path]);
-                }
+        eachComponent(this.form.components, (comp, path, components, parent, paths) => {
+            if (keys.has(paths.dataPath)) {
+                repeatablePaths.push(paths.dataPath);
             }
             else {
-                keys.set(comp.key, [path]);
+                keys.set(paths.dataPath, true);
             }
         }, true);
         return repeatablePaths;
@@ -1241,7 +1233,8 @@ export default class WebformBuilder extends Component {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
-                this.updateComponent(this.editForm.submission.data ?? component);
+                const editFormData = this.editForm.submission?.data;
+                this.updateComponent(editFormData?.componentJson || editFormData || component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });