@formio/js 5.0.0-dev.5613.3476921 → 5.0.0-dev.5614.b5c93f3

package/lib/cjs/components/button/Button.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -5,6 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Components_1 = __importDefault(require("../Components"));
 const Button_edit_display_1 = __importDefault(require("./editForm/Button.edit.display"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {

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

@@ -229,6 +229,11 @@ class ButtonComponent extends Field_1.default {
         });
         this.disabled = this.shouldDisabled;
         this.setDisabled(this.refs.button, this.disabled);
+        /**
+         * Get url parameter by name
+         * @param {string} name - The url parameter
+         * @returns {string} - The url parameter value
+         */
         function getUrlParameter(name) {
             name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
             const regex = new RegExp(`[\\?&]${name}=([^&#]*)`);
@@ -268,7 +273,7 @@ class ButtonComponent extends Field_1.default {
         super.detach();
     }
     onClick(event) {
-        this.triggerReCaptcha();
+        this.triggerCaptcha();
         // Don't click if disabled or in builder mode.
         if (this.disabled || this.options.attachMode === 'builder') {
             return;
@@ -454,20 +459,20 @@ class ButtonComponent extends Field_1.default {
             this.refs.button.focus();
         }
     }
-    triggerReCaptcha() {
+    triggerCaptcha() {
         if (!this.root) {
             return;
         }
-        let recaptchaComponent;
+        let captchaComponent;
         this.root.everyComponent((component) => {
-            if (component.component.type === 'recaptcha' &&
+            if (/^(re)?captcha$/.test(component.component.type) &&
                 component.component.eventType === 'buttonClick' &&
                 component.component.buttonKey === this.component.key) {
-                recaptchaComponent = component;
+                captchaComponent = component;
             }
         });
-        if (recaptchaComponent) {
-            recaptchaComponent.verify(`${this.component.key}Click`);
+        if (captchaComponent) {
+            captchaComponent.verify(`${this.component.key}Click`);
         }
     }
 }

package/lib/cjs/components/checkbox/Checkbox.d.ts

@@ -19,13 +19,6 @@ export default class CheckBoxComponent extends Field {
             };
             type: string;
         };
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static get conditionOperatorsSettings(): {
         operators: string[];
@@ -39,39 +32,23 @@ export default class CheckBoxComponent extends Field {
             };
             type: string;
         };
-        constructor: Function;
-        toString(): string;
-        toLocaleString(): string;
-        valueOf(): Object;
-        hasOwnProperty(v: PropertyKey): boolean;
-        isPrototypeOf(v: Object): boolean;
-        propertyIsEnumerable(v: PropertyKey): boolean;
     };
     static savedValueTypes(schema: any): string[] | null;
     get labelClass(): string;
-    get inputInfo(): {
-        type: string;
-        component: any;
-        changeEvent: string;
-        attr: {
-            name: any;
-            type: any;
-            class: string;
-            lang: any;
-        };
-    };
+    get inputInfo(): any;
     get labelInfo(): {
         hidden: boolean;
     };
-    render(): any;
+    render(): Field;
+    attach(element: any): Promise<void>;
     input: any;
     detach(element: any): void;
-    get emptyValue(): false | null;
+    get emptyValue(): false | "";
     getValueAt(index: any): any;
     get checked(): boolean;
     setCheckedState(value: any): any;
     setValue(value: any, flags?: {}): boolean;
-    getValueAsString(value: any): any;
+    getValueAsString(value: any): string;
     updateValue(value: any, flags: any): boolean;
 }
 import Field from '../_classes/field/Field';

package/lib/cjs/components/checkbox/Checkbox.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

package/lib/cjs/components/checkbox/Checkbox.form.js

@@ -7,6 +7,11 @@ const Components_1 = __importDefault(require("../Components"));
 const Checkbox_edit_data_1 = __importDefault(require("./editForm/Checkbox.edit.data"));
 const Checkbox_edit_display_1 = __importDefault(require("./editForm/Checkbox.edit.display"));
 const Checkbox_edit_validation_1 = __importDefault(require("./editForm/Checkbox.edit.validation"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {

package/lib/cjs/components/checkbox/Checkbox.js

@@ -117,7 +117,7 @@ class CheckBoxComponent extends Field_1.default {
         super.detach();
     }
     get emptyValue() {
-        return this.component.inputType === 'radio' ? null : false;
+        return this.component.inputType === 'radio' ? '' : false;
     }
     isEmpty(value = this.dataValue) {
         return super.isEmpty(value) || value === false;

package/lib/cjs/components/checkbox/fixtures/comp6.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        inputType: string;
+        tableView: boolean;
+        defaultValue: boolean;
+        key: string;
+        type: string;
+        name: string;
+        value: string;
+        input: boolean;
+        'some name': boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        inputType?: undefined;
+        defaultValue?: undefined;
+        name?: undefined;
+        value?: undefined;
+        'some name'?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/checkbox/fixtures/comp6.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    name: 'ckeckbox',
+    path: 'ckeckbox',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Checkbox',
+            inputType: 'radio',
+            tableView: false,
+            defaultValue: false,
+            key: 'checkbox',
+            type: 'checkbox',
+            name: 'some name',
+            value: 'ok',
+            input: true,
+            'some name': false
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};

package/lib/cjs/components/checkbox/fixtures/index.d.ts

@@ -3,5 +3,6 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
+import comp6 from './comp6';
 import customDefaultComponent from './customDefaultComponent';
-export { comp1, comp2, comp3, comp4, comp5, customDefaultComponent };
+export { comp1, comp2, comp3, comp4, comp5, comp6, customDefaultComponent };

package/lib/cjs/components/checkbox/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.customDefaultComponent = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.customDefaultComponent = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const customDefaultComponent_1 = __importDefault(require("./customDefaultComponent"));
@@ -16,3 +16,5 @@ const comp4_1 = __importDefault(require("./comp4"));
 exports.comp4 = comp4_1.default;
 const comp5_1 = __importDefault(require("./comp5"));
 exports.comp5 = comp5_1.default;
+const comp6_1 = __importDefault(require("./comp6"));
+exports.comp6 = comp6_1.default;

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

@@ -10,16 +10,17 @@ export default class ColumnsComponent extends NestedComponent {
     };
     static savedValueTypes(): never[];
     rows: any[];
+    get schema(): any;
     get columnKey(): string;
     columns: any[] | undefined;
     labelIsHidden(): boolean;
-    render(): any;
+    render(): import("../_classes/field/Field").default;
     justifyColumn(items: any, index: any): boolean;
     justify(): any;
     get gridSize(): number;
     /**
      * Group columns in rows.
-     * @return {Array.<ColumnComponent[]>}
+     * @returns {Array.<ColumnComponent[]>} - The array of columns
      */
     groupByRow(): Array<ColumnComponent[]>;
     checkData(data: any, flags: any, row: any, components: any): void;

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

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -5,6 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const NestedComponent_form_1 = __importDefault(require("../_classes/nested/NestedComponent.form"));
 const Columns_edit_display_1 = __importDefault(require("./editForm/Columns.edit.display"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     return (0, NestedComponent_form_1.default)([
         {

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

@@ -120,7 +120,7 @@ class ColumnsComponent extends NestedComponent_1.default {
     }
     /**
      * Group columns in rows.
-     * @return {Array.<ColumnComponent[]>}
+     * @returns {Array.<ColumnComponent[]>} - The array of columns
      */
     groupByRow() {
         const initVal = { stack: [], rows: [] };
@@ -151,8 +151,8 @@ class ColumnsComponent extends NestedComponent_1.default {
     detach(all) {
         super.detach(all);
     }
-    destroy(all = false) {
-        super.destroy(all);
+    destroy() {
+        super.destroy();
         this.columns = [];
     }
 }

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

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -6,6 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Components_1 = __importDefault(require("../Components"));
 const Container_edit_display_1 = __importDefault(require("./editForm/Container.edit.display"));
 const Container_edit_data_1 = __importDefault(require("./editForm/Container.edit.data"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {

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

@@ -11,8 +11,9 @@ export default class ContentComponent extends Component {
     };
     static savedValueTypes(): never[];
     get content(): any;
-    render(): any;
+    render(): string;
     get dataReady(): any;
+    attach(element: any): Promise<void>;
     get emptyValue(): string;
 }
 import Component from '../_classes/component/Component';

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

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -6,6 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Components_1 = __importDefault(require("../Components"));
 const Content_edit_display_1 = __importDefault(require("./editForm/Content.edit.display"));
 const Content_edit_logic_1 = __importDefault(require("./editForm/Content.edit.logic"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     const editForm = Components_1.default.baseEditForm([
         {

package/lib/cjs/components/currency/Currency.form.d.ts

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

package/lib/cjs/components/currency/Currency.form.js

@@ -6,6 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const TextField_form_1 = __importDefault(require("../textfield/TextField.form"));
 const Currency_edit_display_1 = __importDefault(require("./editForm/Currency.edit.display"));
 const Currency_edit_data_1 = __importDefault(require("./editForm/Currency.edit.data"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     return (0, TextField_form_1.default)([
         {

package/lib/cjs/components/currency/Currency.js

@@ -35,8 +35,7 @@ class CurrencyComponent extends Number_1.default {
     }
     /**
      * Creates the number mask for currency numbers.
-     *
-     * @return {*}
+     * @returns {*} - The result of the createNumberMask function
      */
     createNumberMask() {
         const decimalLimit = lodash_1.default.get(this.component, 'decimalLimit', 2);

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

@@ -30,20 +30,20 @@ export default class DataGridComponent extends NestedArrayComponent {
     isEmpty(value?: any[]): any;
     /**
      * Split rows into chunks.
-     * @param {Number[]} groups - array of numbers where each item is size of group
+     * @param {number[]} groups - array of numbers where each item is size of group
      * @param {Array<T>} rows - rows collection
-     * @return {Array<T[]>}
+     * @returns {Array<T[]>} - The chunked rows
      */
     getRowChunks(groups: number[], rows: Array<T>): Array<T[]>;
     /**
      * Create groups object.
      * Each key in object represents index of first row in group.
-     * @return {Object}
+     * @returns {object} - The groups object.
      */
-    getGroups(): Object;
+    getGroups(): object;
     /**
-     * Retrun group sizes.
-     * @return {Number[]}
+     * Get group sizes.
+     * @returns {number[]} - The array of group sizes.
      */
     getGroupSizes(): number[];
     hasRowGroups(): any;
@@ -54,13 +54,22 @@ export default class DataGridComponent extends NestedArrayComponent {
     hasTopSubmit(): any;
     hasBottomSubmit(): any;
     get canAddColumn(): boolean;
-    render(): any;
+    render(): import("../_classes/field/Field").default;
     getRows(): {}[];
     getColumns(): any[];
     hasHeader(): any;
     loadRefs(element: any, refs: any): void;
     dragula: any;
     getComponentsContainer(): any;
+    /**
+     * Reorder values in array based on the old and new position
+     * @param {any} valuesArr - An array of values.
+     * @param {number} oldPosition - The index of the value in array before reordering.
+     * @param {number} newPosition - The index of the value in array after reordering.
+     * @param {boolean|any} movedBelow - Whether or not the value is moved below.
+     * @returns {void}
+     */
+    reorderValues(valuesArr: any, oldPosition: number, newPosition: number, movedBelow: boolean | any): void;
     onReorder(element: any, _target: any, _source: any, sibling: any): void;
     focusOnNewRowElement(row: any): void;
     addRow(): void;
@@ -76,6 +85,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         rebuild: boolean;
         show: boolean;
     };
+    checkComponentConditions(data: any, flags: any, row: any): boolean;
     getComponent(path: any, fn: any): any;
     toggleGroup(element: any, index: any): void;
 }

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

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

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

@@ -7,6 +7,11 @@ const Components_1 = __importDefault(require("../Components"));
 const DataGrid_edit_data_1 = __importDefault(require("./editForm/DataGrid.edit.data"));
 const DataGrid_edit_display_1 = __importDefault(require("./editForm/DataGrid.edit.display"));
 const DataGrid_edit_validation_1 = __importDefault(require("./editForm/DataGrid.edit.validation"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {

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

@@ -7,6 +7,7 @@ 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");
+const dragula_1 = __importDefault(require("dragula"));
 class DataGridComponent extends NestedArrayComponent_1.default {
     static schema(...extend) {
         return NestedArrayComponent_1.default.schema({
@@ -139,9 +140,9 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     }
     /**
      * Split rows into chunks.
-     * @param {Number[]} groups - array of numbers where each item is size of group
+     * @param {number[]} groups - array of numbers where each item is size of group
      * @param {Array<T>} rows - rows collection
-     * @return {Array<T[]>}
+     * @returns {Array<T[]>} - The chunked rows
      */
     getRowChunks(groups, rows) {
         const [, chunks] = groups.reduce(([startIndex, acc], size) => {
@@ -153,7 +154,7 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     /**
      * Create groups object.
      * Each key in object represents index of first row in group.
-     * @return {Object}
+     * @returns {object} - The groups object.
      */
     getGroups() {
         const groups = lodash_1.default.get(this.component, 'rowGroups', []);
@@ -167,8 +168,8 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         }, {});
     }
     /**
-     * Retrun group sizes.
-     * @return {Number[]}
+     * Get group sizes.
+     * @returns {number[]} - The array of group sizes.
      */
     getGroupSizes() {
         return lodash_1.default.map(lodash_1.default.get(this.component, 'rowGroups', []), 'numberOfRows');
@@ -281,34 +282,32 @@ class DataGridComponent extends NestedArrayComponent_1.default {
             this.refs[`${this.datagridKey}-row`].forEach((row, index) => {
                 row.dragInfo = { index };
             });
-            if (this.root.dragulaLib) {
-                this.dragula = this.root.dragulaLib([this.refs[`${this.datagridKey}-tbody`]], {
-                    moves: (_draggedElement, _oldParent, clickedElement) => {
-                        const clickedElementKey = clickedElement.getAttribute('data-key');
-                        const oldParentKey = _oldParent.getAttribute('data-key');
-                        //Check if the clicked button belongs to that container, if false, it belongs to the nested container
-                        if (oldParentKey === clickedElementKey) {
-                            return clickedElement.classList.contains('formio-drag-button');
-                        }
-                    }
-                }).on('drop', this.onReorder.bind(this));
-                this.dragula.on('cloned', (el, original) => {
-                    if (el && el.children && original && original.children) {
-                        lodash_1.default.each(original.children, (child, index) => {
-                            const styles = getComputedStyle(child, null);
-                            if (styles.cssText !== '') {
-                                el.children[index].style.cssText = styles.cssText;
-                            }
-                            else {
-                                const cssText = Object.values(styles).reduce((css, propertyName) => {
-                                    return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
-                                }, '');
-                                el.children[index].style.cssText = cssText;
-                            }
-                        });
+            this.dragula = (0, dragula_1.default)([this.refs[`${this.datagridKey}-tbody`]], {
+                moves: (_draggedElement, _oldParent, clickedElement) => {
+                    const clickedElementKey = clickedElement.getAttribute('data-key');
+                    const oldParentKey = _oldParent.getAttribute('data-key');
+                    //Check if the clicked button belongs to that container, if false, it belongs to the nested container
+                    if (oldParentKey === clickedElementKey) {
+                        return clickedElement.classList.contains('formio-drag-button');
                     }
-                });
-            }
+                }
+            }).on('drop', this.onReorder.bind(this));
+            this.dragula.on('cloned', (el, original) => {
+                if (el && el.children && original && original.children) {
+                    lodash_1.default.each(original.children, (child, index) => {
+                        const styles = getComputedStyle(child, null);
+                        if (styles.cssText !== '') {
+                            el.children[index].style.cssText = styles.cssText;
+                        }
+                        else {
+                            const cssText = Object.values(styles).reduce((css, propertyName) => {
+                                return `${css}${propertyName}:${styles.getPropertyValue(propertyName)};`;
+                            }, '');
+                            el.children[index].style.cssText = cssText;
+                        }
+                    });
+                }
+            });
         }
         this.refs[`${this.datagridKey}-addRow`].forEach((addButton) => {
             this.addEventListener(addButton, 'click', this.addRow.bind(this));
@@ -336,6 +335,24 @@ class DataGridComponent extends NestedArrayComponent_1.default {
     getComponentsContainer() {
         return this.component.components;
     }
+    /**
+     * Reorder values in array based on the old and new position
+     * @param {any} valuesArr - An array of values.
+     * @param {number} oldPosition - The index of the value in array before reordering.
+     * @param {number} newPosition - The index of the value in array after reordering.
+     * @param {boolean|any} movedBelow - Whether or not the value is moved below.
+     * @returns {void}
+     */
+    reorderValues(valuesArr, oldPosition, newPosition, movedBelow) {
+        if (!lodash_1.default.isArray(valuesArr) || lodash_1.default.isEmpty(valuesArr)) {
+            return;
+        }
+        const draggedRowData = valuesArr[oldPosition];
+        //insert element at new position
+        valuesArr.splice(newPosition, 0, draggedRowData);
+        //remove element from old position (if was moved above, after insertion it's at +1 index)
+        valuesArr.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
+    }
     onReorder(element, _target, _source, sibling) {
         if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
             console.warn('There is no Drag Info available for either dragged or sibling element');
@@ -346,11 +363,12 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         const newPosition = sibling ? sibling.dragInfo.index : this.dataValue.length;
         const movedBelow = newPosition > oldPosition;
         const dataValue = (0, utils_1.fastCloneDeep)(this.dataValue);
-        const draggedRowData = dataValue[oldPosition];
-        //insert element at new position
-        dataValue.splice(newPosition, 0, draggedRowData);
-        //remove element from old position (if was moved above, after insertion it's at +1 index)
-        dataValue.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
+        this.reorderValues(dataValue, oldPosition, newPosition, movedBelow);
+        //reorder select data
+        this.reorderValues(lodash_1.default.get(this.root, `submission.metadata.selectData.${this.path}`, []), oldPosition, newPosition, movedBelow);
+        // When components are reordered we need to set the dataGrid and form pristine properties to false
+        this.root.pristine = false;
+        this.pristine = false;
         //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();