@formio/js 5.0.0-rc.27 → 5.0.0-rc.29

package/lib/cjs/components/_classes/nested/NestedComponent.d.ts

@@ -43,13 +43,6 @@ export default class NestedComponent extends Field {
      * @return {Object} - The component retrieved.
      */
     getComponentById(id: string, fn: Function): Object;
-    /**
-     * Return a path of component's value.
-     *
-     * @param {Object} component - The component instance.
-     * @return {string} - The component's value path.
-     */
-    calculateComponentPath(component: Object): string;
     /**
      * Create a new component and add it to the components array.
      *
@@ -83,7 +76,7 @@ export default class NestedComponent extends Field {
     attachComponentsLogic(components: any): void;
     attachComponents(element: any, components: any, container: any): Promise<any>;
     /**
-     * Remove a component from the components array.
+     * Remove a component from the components array and from the children object
      *
      * @param {Component} component - The component to remove from the components.
      * @param {Array<Component>} components - An array of components to remove this component from.
@@ -106,7 +99,8 @@ export default class NestedComponent extends Field {
      */
     removeComponentById(id: string, fn: Function): null;
     updateValue(value: any, flags?: {}): any;
-    checkData(data: any, flags: any, row: any, components: any): any;
+    shouldSkipValidation(data: any, row: any, flags: any): boolean;
+    checkData(data: any, flags: any, row: any, components: any): true | undefined;
     checkConditions(data: any, flags: any, row: any): boolean;
     clearOnHide(show: any): void;
     restoreComponentsContext(): void;
@@ -119,11 +113,34 @@ export default class NestedComponent extends Field {
     calculateValue(data: any, flags: any, row: any): any;
     isLastPage(): boolean;
     isValid(data: any, dirty: any): any;
-    checkChildComponentsValidity(data: any, dirty: any, row: any, silentCheck: any, isParentValid: any): any;
-    checkValidity(data: any, dirty: any, row: any, silentCheck: any): any;
+    validationProcessor({ scope, data, row, instance }: {
+        scope: any;
+        data: any;
+        row: any;
+        instance: any;
+    }, flags: any): void;
+    /**
+     * Perform a validation on all child components of this nested component.
+     * @param {*} components
+     * @param {*} data
+     * @param {*} flags
+     * @returns
+     */
+    validateComponents(components: any, data: any, flags?: any): any;
+    /**
+     * Validate a nested component with data, or its own internal data.
+     * @param {*} data
+     * @param {*} flags
+     * @returns
+     */
+    validate(data: any, flags?: any): any;
+    checkComponentValidity(data: any, dirty: any, row: any, flags?: {}, allErrors?: any[]): boolean;
+    checkValidity(data: any, dirty: any, row: any, silentCheck: any, childErrors?: any[]): boolean;
+    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<any>;
     setPristine(pristine: any): void;
     get isPristine(): any;
     destroyComponents(all?: boolean): void;
+    get visibleErrors(): any;
     get errors(): any;
     get dataReady(): Promise<any[]>;
     setNestedValue(component: any, value: any, flags?: {}): any;

package/lib/cjs/components/_classes/nested/NestedComponent.js

@@ -7,6 +7,7 @@ const lodash_1 = __importDefault(require("lodash"));
 const Field_1 = __importDefault(require("../field/Field"));
 const Components_1 = __importDefault(require("../../Components"));
 const utils_1 = require("../../../utils/utils");
+const process_1 = require("@formio/core/process");
 class NestedComponent extends Field_1.default {
     static schema(...extend) {
         return Field_1.default.schema({
@@ -34,7 +35,7 @@ class NestedComponent extends Field_1.default {
     collapse(value) {
         const promise = this.redraw();
         if (!value) {
-            this.checkValidity(this.data, !this.pristine, null, this.pristine);
+            this.checkValidity(this.data, !this.pristine);
         }
         return promise;
     }
@@ -192,6 +193,14 @@ class NestedComponent extends Field_1.default {
      */
     getComponent(path, fn, originalPath) {
         originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);
+        if (this.componentsMap.hasOwnProperty(originalPath)) {
+            if (fn) {
+                return fn(this.componentsMap[originalPath]);
+            }
+            else {
+                return this.componentsMap[originalPath];
+            }
+        }
         path = (0, utils_1.getArrayFromComponentPath)(path);
         const pathStr = originalPath;
         const newPath = lodash_1.default.clone(path);
@@ -246,26 +255,6 @@ class NestedComponent extends Field_1.default {
         });
         return comp;
     }
-    /**
-     * Return a path of component's value.
-     *
-     * @param {Object} component - The component instance.
-     * @return {string} - The component's value path.
-     */
-    calculateComponentPath(component) {
-        let path = '';
-        if (component.component.key) {
-            let thisPath = this;
-            while (thisPath && !thisPath.allowData && thisPath.parent) {
-                thisPath = thisPath.parent;
-            }
-            const rowIndex = component.row ? `[${Number.parseInt(component.row)}]` : '';
-            path = thisPath.path ? `${thisPath.path}${rowIndex}.` : '';
-            path += component._parentPath && component.component.shouldIncludeSubFormPath ? component._parentPath : '';
-            path += component.component.key;
-            return path;
-        }
-    }
     /**
      * Create a new component and add it to the components array.
      *
@@ -286,14 +275,7 @@ class NestedComponent extends Field_1.default {
         if (!(options.display === 'pdf' && this.builderMode)) {
             component.id = (0, utils_1.getRandomComponentId)();
         }
-        if (!this.isInputComponent && this.component.shouldIncludeSubFormPath) {
-            component.shouldIncludeSubFormPath = true;
-        }
         const comp = Components_1.default.create(component, options, data, true);
-        const path = this.calculateComponentPath(comp);
-        if (path) {
-            comp.path = path;
-        }
         comp.init();
         if (component.internal) {
             return comp;
@@ -366,9 +348,6 @@ class NestedComponent extends Field_1.default {
     addComponent(component, data, before, noAdd) {
         data = data || this.data;
         this.components = this.components || [];
-        if (this.options.parentPath) {
-            component.shouldIncludeSubFormPath = true;
-        }
         component = this.hook('addComponent', component, data, before, noAdd);
         const comp = this.createComponent(component, this.options, data, before ? before : null);
         if (noAdd) {
@@ -455,7 +434,7 @@ class NestedComponent extends Field_1.default {
         return Promise.all(promises);
     }
     /**
-     * Remove a component from the components array.
+     * Remove a component from the components array and from the children object
      *
      * @param {Component} component - The component to remove from the components.
      * @param {Array<Component>} components - An array of components to remove this component from.
@@ -464,6 +443,9 @@ class NestedComponent extends Field_1.default {
         components = components || this.components;
         component.destroy(all);
         lodash_1.default.remove(components, { id: component.id });
+        if (this.componentsMap[component.path]) {
+            delete this.componentsMap[component.path];
+        }
     }
     /**
      * Removes a component provided the API key of that component.
@@ -512,13 +494,13 @@ class NestedComponent extends Field_1.default {
             return comp.updateValue(null, flags) || changed;
         }, super.updateValue(value, flags));
     }
-    shouldSkipValidation(data, dirty, row) {
+    shouldSkipValidation(data, row, flags) {
         // Nested components with no input should not be validated.
         if (!this.component.input) {
             return true;
         }
         else {
-            return super.shouldSkipValidation(data, dirty, row);
+            return super.shouldSkipValidation(data, row, flags);
         }
     }
     checkData(data, flags, row, components) {
@@ -529,11 +511,8 @@ class NestedComponent extends Field_1.default {
         flags = flags || {};
         row = row || this.data;
         components = components && lodash_1.default.isArray(components) ? components : this.getComponents();
-        const isValid = components.reduce((valid, comp) => {
-            return comp.checkData(data, flags, row) && valid;
-        }, super.checkData(data, flags, row));
-        this.checkModal(isValid, this.isDirty);
-        return isValid;
+        super.checkData(data, flags, row);
+        components.forEach((comp) => comp.checkData(data, flags, row));
     }
     checkConditions(data, flags, row) {
         // check conditions of parent component first, because it may influence on visibility of it's children
@@ -571,7 +550,7 @@ class NestedComponent extends Field_1.default {
      * @return {*}
      */
     beforeSubmit() {
-        return Promise.all(this.getComponents().map((comp) => comp.beforeSubmit()));
+        return Promise.allSettled(this.getComponents().map((comp) => comp.beforeSubmit()));
     }
     calculateValue(data, flags, row) {
         // Do not iterate into children and calculateValues if this nested component is conditionally hidden.
@@ -586,23 +565,75 @@ class NestedComponent extends Field_1.default {
     isValid(data, dirty) {
         return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));
     }
-    checkChildComponentsValidity(data, dirty, row, silentCheck, isParentValid) {
-        return this.getComponents().reduce((check, comp) => comp.checkValidity(data, dirty, row, silentCheck) && check, isParentValid);
-    }
-    checkValidity(data, dirty, row, silentCheck) {
-        if (!this.checkCondition(row, data)) {
-            this.setCustomValidity('');
-            return true;
+    validationProcessor({ scope, data, row, instance }, flags) {
+        const { dirty } = flags;
+        if (!instance) {
+            return;
+        }
+        instance.checkComponentValidity(data, dirty, row, flags, scope.errors);
+        if (instance.processOwnValidation) {
+            scope.noRecurse = true;
         }
-        const isValid = this.checkChildComponentsValidity(data, dirty, row, silentCheck, super.checkValidity(data, dirty, row, silentCheck));
-        this.checkModal(isValid, dirty);
-        return isValid;
+    }
+    /**
+     * Perform a validation on all child components of this nested component.
+     * @param {*} components
+     * @param {*} data
+     * @param {*} flags
+     * @returns
+     */
+    validateComponents(components, data, flags = {}) {
+        components = components || this.component.components;
+        data = data || this.rootValue;
+        const { async, dirty, process } = flags;
+        const processorContext = {
+            process: process || 'unknown',
+            components,
+            instances: this.componentsMap,
+            data: data,
+            scope: { errors: [] },
+            processors: [
+                (context) => this.validationProcessor(context, flags),
+                ({ instance, component, components }) => {
+                    // If we just validated the last component, and there are errors from our parent, then we need to show a model of those errors.
+                    if (instance &&
+                        instance.parent &&
+                        (component === components[components.length - 1]) &&
+                        instance.parent.componentModal) {
+                        instance.parent.checkModal(instance.parent.childErrors, dirty);
+                    }
+                }
+            ]
+        };
+        return async ? (0, process_1.process)(processorContext).then((scope) => scope.errors) : (0, process_1.processSync)(processorContext).errors;
+    }
+    /**
+     * Validate a nested component with data, or its own internal data.
+     * @param {*} data
+     * @param {*} flags
+     * @returns
+     */
+    validate(data, flags = {}) {
+        data = data || this.rootValue;
+        return this.validateComponents(this.getComponents().map((component) => component.component), data, flags);
+    }
+    checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {
+        this.childErrors = [];
+        return super.checkComponentValidity(data, dirty, row, flags, allErrors);
+    }
+    checkValidity(data, dirty, row, silentCheck, childErrors = []) {
+        console.log('Deprecation warning:  Component.checkValidity() will be deprecated in 6.x version of renderer. Use "validate" method instead.');
+        childErrors.push(...this.validate(data, { dirty, silentCheck }));
+        return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck }, childErrors) && childErrors.length === 0;
     }
     checkAsyncValidity(data, dirty, row, silentCheck) {
+        console.log('Deprecation warning:  Component.checkAsyncValidity() will be deprecated in 6.x version of renderer.');
         return this.ready.then(() => {
-            const promises = [super.checkAsyncValidity(data, dirty, row, silentCheck)];
-            this.eachComponent((component) => promises.push(component.checkAsyncValidity(data, dirty, row, silentCheck)));
-            return Promise.all(promises).then((results) => results.reduce((valid, result) => (valid && result), true));
+            return this.validate(data, { dirty, silentCheck, async: true }).then((childErrors) => {
+                return this.checkComponentValidity(data, dirty, row, { dirty, silentCheck, async: true }, childErrors).then((valid) => {
+                    return valid && childErrors.length === 0;
+                });
+            });
         });
     }
     setPristine(pristine) {
@@ -636,8 +667,11 @@ class NestedComponent extends Field_1.default {
         components.forEach((comp) => this.removeComponent(comp, this.components, all));
         this.components = [];
     }
+    get visibleErrors() {
+        return this.getComponents().reduce((errors, comp) => errors.concat(comp.visibleErrors || []), super.visibleErrors);
+    }
     get errors() {
-        const thisErrors = this.error ? [this.error] : [];
+        const thisErrors = super.errors;
         return this.getComponents()
             .reduce((errors, comp) => errors.concat(comp.errors || []), thisErrors)
             .filter(err => err.level !== 'hidden');
@@ -677,9 +711,6 @@ class NestedComponent extends Field_1.default {
         if (!value) {
             return false;
         }
-        if (value.submitAsDraft && !value.submit) {
-            flags.noValidate = true;
-        }
         return this.getComponents().reduce((changed, component) => {
             return this.setNestedValue(component, value, flags, changed) || changed;
         }, false);

package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -5,10 +5,11 @@ export default class NestedArrayComponent extends NestedDataComponent {
     prevHasAddButton: any;
     checkAddButtonChanged(): void;
     checkData(data: any, flags: any, row: any): any;
-    checkRows(method: any, data: any, opts: any, defaultValue: any, silentCheck: any): any;
-    checkRow(method: any, data: any, opts: any, row: any, components: any, silentCheck: any): any;
+    processRows(method: any, data: any, opts: any, defaultValue: any, silentCheck: any): any;
+    validate(data: any, flags?: {}): any;
+    processRow(method: any, data: any, opts: any, row: any, components: any, silentCheck: any): any;
     hasAddButton(): any;
-    getComponent(path: any, fn: any, originalPath: any): any[];
+    getComponent(path: any, fn: any, originalPath: any): any;
     everyComponent(fn: any, rowIndex: any, options: any): void;
     getComponents(rowIndex: any): any;
 }

package/lib/cjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -44,19 +44,23 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
         flags = flags || {};
         row = row || this.data;
         this.checkAddButtonChanged();
-        return this.checkRows('checkData', data, flags, Component_1.default.prototype.checkData.call(this, data, flags, row));
+        return this.processRows('checkData', data, flags, Component_1.default.prototype.checkData.call(this, data, flags, row));
     }
-    checkRows(method, data, opts, defaultValue, silentCheck) {
+    processRows(method, data, opts, defaultValue, silentCheck) {
         return this.iteratableRows.reduce((valid, row, rowIndex) => {
             if (!(opts === null || opts === void 0 ? void 0 : opts.rowIndex) || (opts === null || opts === void 0 ? void 0 : opts.rowIndex) === rowIndex) {
-                return this.checkRow(method, data, opts, row.data, row.components, silentCheck) && valid;
+                return this.processRow(method, data, opts, row.data, row.components, silentCheck) && valid;
             }
             else {
                 return valid;
             }
         }, defaultValue);
     }
-    checkRow(method, data, opts, row, components, silentCheck) {
+    validate(data, flags = {}) {
+        data = data || this.data;
+        return this.validateComponents([this.component], data, flags);
+    }
+    processRow(method, data, opts, row, components, silentCheck) {
         if (opts === null || opts === void 0 ? void 0 : opts.isolateRow) {
             silentCheck = true;
             opts.noRefresh = true;
@@ -81,6 +85,15 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
             }, 'show'));
     }
     getComponent(path, fn, originalPath) {
+        originalPath = originalPath || (0, utils_1.getStringFromComponentPath)(path);
+        if (this.componentsMap.hasOwnProperty(originalPath)) {
+            if (fn) {
+                return fn(this.componentsMap[originalPath]);
+            }
+            else {
+                return this.componentsMap[originalPath];
+            }
+        }
         path = Array.isArray(path) ? path : [path];
         let key = path.shift();
         const remainingPath = path;

package/lib/cjs/components/builder.js

@@ -42,7 +42,6 @@ const Tags_form_1 = __importDefault(require("./tags/Tags.form"));
 const TextArea_form_1 = __importDefault(require("./textarea/TextArea.form"));
 const TextField_form_1 = __importDefault(require("./textfield/TextField.form"));
 const Time_form_1 = __importDefault(require("./time/Time.form"));
-const Tree_form_1 = __importDefault(require("./tree/Tree.form"));
 const Unknown_form_1 = __importDefault(require("./unknown/Unknown.form"));
 const Url_form_1 = __importDefault(require("./url/Url.form"));
 const Well_form_1 = __importDefault(require("./well/Well.form"));
@@ -84,7 +83,6 @@ _1.default.tags.editForm = Tags_form_1.default;
 _1.default.textarea.editForm = TextArea_form_1.default;
 _1.default.textfield.editForm = TextField_form_1.default;
 _1.default.time.editForm = Time_form_1.default;
-_1.default.tree.editForm = Tree_form_1.default;
 _1.default.unknown.editForm = Unknown_form_1.default;
 _1.default.url.editForm = Url_form_1.default;
 _1.default.well.editForm = Well_form_1.default;

package/lib/cjs/components/button/Button.js

@@ -195,7 +195,7 @@ class ButtonComponent extends Field_1.default {
             const isSilent = flags && flags.silent;
             //check root validity only if disableOnInvalid is set and when it is not possible to make submission because of validation errors
             if (flags && flags.noValidate && (this.component.disableOnInvalid || this.hasError)) {
-                isValid = flags.rootValidity || (this.root ? this.root.checkValidity(this.root.data, null, null, true) : true);
+                isValid = flags.rootValidity || (this.root ? (this.root.validate(this.root.data, { dirty: false, silentCheck: true }).length === 0) : true);
                 flags.rootValidity = isValid;
             }
             this.isDisabledOnInvalid = this.component.disableOnInvalid && (isSilent || !isValid);
@@ -284,6 +284,7 @@ class ButtonComponent extends Field_1.default {
                 event.stopPropagation();
                 this.loading = true;
                 this.emit('submitButton', {
+                    noValidate: this.component.state === 'draft',
                     state: this.component.state || 'submitted',
                     component: this.component,
                     instance: this

package/lib/cjs/components/columns/Columns.d.ts

@@ -22,6 +22,7 @@ export default class ColumnsComponent extends NestedComponent {
      * @return {Array.<ColumnComponent[]>}
      */
     groupByRow(): Array<ColumnComponent[]>;
+    checkData(data: any, flags: any, row: any, components: any): void;
     detach(all: any): void;
 }
 import NestedComponent from '../_classes/nested/NestedComponent';

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

@@ -71,7 +71,7 @@ class ColumnsComponent extends NestedComponent_1.default {
             if (!column.size) {
                 column.size = 'md';
             }
-            column.currentWidth = column.width || 0;
+            column.currentWidth = this.options.condensedMode ? this.gridSize : column.width || 0;
             // Ensure there is a components array.
             if (!Array.isArray(column.components)) {
                 column.components = [];
@@ -140,14 +140,13 @@ class ColumnsComponent extends NestedComponent_1.default {
         return lodash_1.default.concat(result.rows, [result.stack]);
     }
     checkData(data, flags, row, components) {
-        const isValid = super.checkData(data, flags, row, components);
+        super.checkData(data, flags, row, components);
         if (this.component.autoAdjust && this.options.display !== 'pdf') {
             const redraw = this.justify();
             if (redraw) {
                 this.redraw();
             }
         }
-        return isValid;
     }
     detach(all) {
         super.detach(all);

package/lib/cjs/components/columns/editForm/Columns.edit.display.d.ts

@@ -5,8 +5,29 @@ declare const _default: ({
     type?: undefined;
     input?: undefined;
     label?: undefined;
-    addAnother?: undefined;
+    placeholder?: undefined;
     tooltip?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
+    addAnother?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    validate: {
+        required: boolean;
+    };
+    autofocus: boolean;
+    overrideEditForm: boolean;
+    ignore?: undefined;
+    addAnother?: undefined;
     reorder?: undefined;
     components?: undefined;
 } | {
@@ -43,6 +64,10 @@ declare const _default: ({
         data?: undefined;
     })[];
     ignore?: undefined;
+    placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
 } | {
     weight: number;
     type: string;
@@ -51,6 +76,10 @@ declare const _default: ({
     key: string;
     input: boolean;
     ignore?: undefined;
+    placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
     addAnother?: undefined;
     reorder?: undefined;
     components?: undefined;

package/lib/cjs/components/columns/editForm/Columns.edit.display.js

@@ -33,6 +33,24 @@ exports.default = [
         key: 'tableView',
         ignore: true
     },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
+    {
+        weight: 0,
+        type: 'textfield',
+        input: true,
+        key: 'label',
+        label: 'Label',
+        placeholder: 'Field Label',
+        tooltip: 'The label for this field.',
+        validate: {
+            required: true
+        },
+        autofocus: true,
+        overrideEditForm: true
+    },
     {
         weight: 150,
         type: 'datagrid',
@@ -96,5 +114,9 @@ exports.default = [
         tooltip: 'Will automatically adjust columns based on if nested components are hidden.',
         key: 'autoAdjust',
         input: true
-    }
+    },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
 ];

package/lib/cjs/components/container/Container.d.ts

@@ -10,6 +10,7 @@ export default class ContainerComponent extends NestedDataComponent {
     };
     constructor(...args: any[]);
     addComponents(data: any, options: any): void;
+    checkData(data: any, flags: any, row: any, components: any): void;
     focus(): void;
 }
 import NestedDataComponent from '../_classes/nesteddata/NestedDataComponent';

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

@@ -59,12 +59,8 @@ class ContainerComponent extends NestedDataComponent_1.default {
         flags = flags || {};
         row = row || this.data;
         components = components && lodash_1.default.isArray(components) ? components : this.getComponents();
-        return components.reduce((valid, comp) => {
-            return comp.checkData(data, flags, this.dataValue) && valid;
-        }, Component_1.default.prototype.checkData.call(this, data, flags, row));
-    }
-    checkChildComponentsValidity(data, dirty, row, silentCheck, isParentValid) {
-        return super.checkChildComponentsValidity(data, dirty, this.dataValue, silentCheck, isParentValid);
+        Component_1.default.prototype.checkData.call(this, data, flags, row);
+        components.forEach((comp) => comp.checkData(data, flags, this.dataValue));
     }
     focus() {
         const focusableElements = (0, utils_1.getFocusableElements)(this.element);

package/lib/cjs/components/content/Content.d.ts

@@ -4,6 +4,7 @@ export default class ContentComponent extends Component {
         group: string;
         icon: string;
         preview: boolean;
+        showPreview: boolean;
         documentation: string;
         weight: number;
         schema: any;

package/lib/cjs/components/content/Content.js

@@ -21,6 +21,7 @@ class ContentComponent extends Component_1.default {
             group: 'layout',
             icon: 'html5',
             preview: false,
+            showPreview: false,
             documentation: '/userguide/form-building/layout-components#content',
             weight: 5,
             schema: ContentComponent.schema()

package/lib/cjs/components/datagrid/DataGrid.d.ts

@@ -70,14 +70,6 @@ export default class DataGridComponent extends NestedArrayComponent {
     setRowComponentsData(rowIndex: any, rowData: any): void;
     createRows(init: any, rebuild: any): boolean;
     createRowComponents(row: any, rowIndex: any): {};
-    /**
-     * Checks the validity of this datagrid.
-     *
-     * @param data
-     * @param dirty
-     * @return {*}
-     */
-    checkValidity(data: any, dirty: any, row: any, silentCheck: any): any;
     checkColumns(data: any, flags?: {}): {
         rebuild: boolean;
         show: boolean;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const NestedArrayComponent_1 = __importDefault(require("../_classes/nestedarray/NestedArrayComponent"));
 const utils_1 = require("../../utils/utils");
+const Components_1 = require("../Components");
 class DataGridComponent extends NestedArrayComponent_1.default {
     static schema(...extend) {
         return NestedArrayComponent_1.default.schema({
@@ -346,10 +347,13 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     }
     focusOnNewRowElement(row) {
         Object.keys(row).find((key) => {
-            const focusableElements = (0, utils_1.getFocusableElements)(row[key].element);
-            if (focusableElements && focusableElements[0]) {
-                focusableElements[0].focus();
-                return true;
+            const element = row[key].element;
+            if (element) {
+                const focusableElements = (0, utils_1.getFocusableElements)(element);
+                if (focusableElements && focusableElements[0]) {
+                    focusableElements[0].focus();
+                    return true;
+                }
             }
             return false;
         });
@@ -390,7 +394,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             }
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
-            component.path = this.calculateComponentPath(component);
+            component.path = Components_1.Components.getComponentPath(component);
         });
     }
     updateRowsComponents(rowIndex) {
@@ -473,27 +477,6 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         });
         return components;
     }
-    /**
-     * Checks the validity of this datagrid.
-     *
-     * @param data
-     * @param dirty
-     * @return {*}
-     */
-    checkValidity(data, dirty, row, silentCheck) {
-        data = data || this.rootValue;
-        row = row || this.data;
-        if (!this.checkCondition(row, data)) {
-            this.setCustomValidity('');
-            return true;
-        }
-        if (!this.checkComponentValidity(data, dirty, row, { silentCheck })) {
-            return false;
-        }
-        const isValid = this.checkRows('checkValidity', data, dirty, true, silentCheck);
-        this.checkModal(isValid, dirty);
-        return isValid;
-    }
     checkColumns(data, flags = {}) {
         data = data || this.rootValue;
         let show = false;