@formio/js 5.0.0-rc.19 → 5.0.0-rc.21

package/lib/cjs/WebformBuilder.d.ts

@@ -49,6 +49,7 @@ export default class WebformBuilder extends Component {
             weight: number;
         };
     };
+    redraw(): Promise<void> | Promise<boolean>;
     set form(arg: any);
     get form(): any;
     get container(): any;
@@ -60,6 +61,7 @@ export default class WebformBuilder extends Component {
     findNamespaceRoot(component: any): any;
     recurseNamespace(component: any): any;
     render(): any;
+    attach(element: any): Promise<any>;
     searchFields(searchString?: string): void;
     orderComponents(groupInfo: any, foundComponents: any): void;
     updateDragAndDrop(): any;
@@ -86,6 +88,9 @@ export default class WebformBuilder extends Component {
     saveComponent(component: any, parent: any, isNew: any, original: any): boolean;
     isComponentCreated: boolean | undefined;
     emitSaveComponentEvent(schema: any, originalComp: any, parentComponentSchema: any, path: any, index: any, isNew: any, originalComponentSchema: any): void;
+    attachEditComponentControls(component: any, parent: any, isNew: any, original: any, ComponentClass: any): void;
+    saved: boolean | undefined;
+    showPreview: any;
     editComponent(component: any, parent: any, isNew: any, isJsonEdit: any, original: any, flags?: {}): void;
     editForm: Webform | undefined;
     preview: Webform | null | undefined;
@@ -93,7 +98,7 @@ export default class WebformBuilder extends Component {
     dialog: any;
     updateComponentKey(data: any): any;
     moveComponent(component: any): void;
-    selectedElement: any;
+    selectedComponent: any;
     moveHandler: (e: any) => void;
     updateComponentPlacement(direction: any): void;
     stopMoving(comp: any): void;

package/lib/cjs/WebformBuilder.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Webform_1 = __importDefault(require("./Webform"));
 const Component_1 = __importDefault(require("./components/_classes/component/Component"));
 const tippy_js_1 = __importDefault(require("tippy.js"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const Components_1 = __importDefault(require("./components/Components"));
 const Formio_1 = require("./Formio");
 const utils_1 = require("./utils/utils");
@@ -37,8 +36,10 @@ class WebformBuilder extends Component_1.default {
         options.display = options.display || 'form';
         super(null, options);
         this.moveHandler = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
+            if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
             if (e.keyCode === 38) {
                 this.updateComponentPlacement(true);
             }
@@ -46,7 +47,7 @@ class WebformBuilder extends Component_1.default {
                 this.updateComponentPlacement(false);
             }
             if (e.keyCode === 13) {
-                this.stopMoving(this.selectedElement);
+                this.stopMoving(this.selectedComponent);
             }
         };
         this.setElement(element);
@@ -317,6 +318,9 @@ class WebformBuilder extends Component_1.default {
         });
     }
     attachComponent(element, component) {
+        if (component instanceof WebformBuilder) {
+            return;
+        }
         // Add component to element for later reference.
         element.formioComponent = component;
         component.loadRefs(element, {
@@ -403,7 +407,7 @@ class WebformBuilder extends Component_1.default {
             premium: {
                 title: 'Premium',
                 weight: 40
-            },
+            }
         };
     }
     redraw() {
@@ -583,7 +587,7 @@ class WebformBuilder extends Component_1.default {
             const { subgroups = [], components } = result;
             const filteredComponents = [];
             for (const key in components) {
-                const isMatchedToTitle = components[key].title.toLowerCase().match(searchValue);
+                const isMatchedToTitle = this.t(components[key].title).toLowerCase().match(searchValue);
                 const isMatchedToKey = components[key].key.toLowerCase().match(searchValue);
                 if (isMatchedToTitle || isMatchedToKey) {
                     filteredComponents.push(components[key]);
@@ -701,8 +705,17 @@ class WebformBuilder extends Component_1.default {
     }
     getComponentInfo(key, group) {
         let info;
+        // Need to check in first order as resource component key can be the same as from webform default components
+        if (group && group.slice(0, group.indexOf('-')) === 'resource') {
+            // This is an existing resource field.
+            const resourceGroups = this.groups.resource.subgroups;
+            const resourceGroup = lodash_1.default.find(resourceGroups, { key: group });
+            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {
+                info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);
+            }
+        }
         // This is a new component
-        if (this.schemas.hasOwnProperty(key)) {
+        else if (this.schemas.hasOwnProperty(key)) {
             info = (0, utils_1.fastCloneDeep)(this.schemas[key]);
         }
         else if (this.groups.hasOwnProperty(group)) {
@@ -711,14 +724,6 @@ class WebformBuilder extends Component_1.default {
                 info = (0, utils_1.fastCloneDeep)(groupComponents[key].schema);
             }
         }
-        else if (group.slice(0, group.indexOf('-')) === 'resource') {
-            // This is an existing resource field.
-            const resourceGroups = this.groups.resource.subgroups;
-            const resourceGroup = lodash_1.default.find(resourceGroups, { key: group });
-            if (resourceGroup && resourceGroup.components.hasOwnProperty(`component-${key}`)) {
-                info = (0, utils_1.fastCloneDeep)(resourceGroup.components[`component-${key}`].schema);
-            }
-        }
         else if (group === 'searchFields') { //Search components go into this group
             const resourceGroups = this.groups.resource.subgroups;
             for (let ix = 0; ix < resourceGroups.length; ix++) {
@@ -866,7 +871,7 @@ class WebformBuilder extends Component_1.default {
             rebuild = target.formioComponent.rebuild();
         }
         if (!rebuild) {
-            rebuild = native_promise_only_1.default.resolve();
+            rebuild = Promise.resolve();
         }
         return rebuild.then(() => {
             this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);
@@ -885,7 +890,7 @@ class WebformBuilder extends Component_1.default {
         }
         this.keyboardActionsEnabled = lodash_1.default.get(this.options, 'keyboardBuilder', false) || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.keyboardBuilder);
         const isShowSubmitButton = !this.options.noDefaultSubmitButton
-            && !form.components.length;
+            && (!form.components.length || !form.components.find(comp => comp.key === 'submit'));
         // Ensure there is at least a submit button.
         if (isShowSubmitButton) {
             form.components.push({
@@ -912,7 +917,7 @@ class WebformBuilder extends Component_1.default {
                 return this.rebuild().then(() => this.form);
             });
         }
-        return native_promise_only_1.default.resolve(form);
+        return Promise.resolve(form);
     }
     populateRecaptchaSettings(form) {
         //populate isEnabled for recaptcha form settings
@@ -961,7 +966,7 @@ class WebformBuilder extends Component_1.default {
             else if (parent.formioComponent && parent.formioComponent.removeChildComponent) {
                 parent.formioComponent.removeChildComponent(component);
             }
-            const rebuild = parent.formioComponent.rebuild() || native_promise_only_1.default.resolve();
+            const rebuild = parent.formioComponent.rebuild() || Promise.resolve();
             rebuild.then(() => {
                 this.emit('removeComponent', component, parent.formioComponent.schema, path, index);
                 this.emit('change', this.form);
@@ -1010,6 +1015,9 @@ class WebformBuilder extends Component_1.default {
                 lodash_1.default.assign(defaultValueComponent.component, lodash_1.default.omit(Object.assign({}, component), [
                     'key',
                     'label',
+                    'labelPosition',
+                    'labelMargin',
+                    'labelWidth',
                     'placeholder',
                     'tooltip',
                     'hidden',
@@ -1139,7 +1147,7 @@ class WebformBuilder extends Component_1.default {
             else if (isParentSaveChildMethod) {
                 parent.formioComponent.saveChildComponent(submissionData);
             }
-            const rebuild = parentComponent.rebuild() || native_promise_only_1.default.resolve();
+            const rebuild = parentComponent.rebuild() || Promise.resolve();
             return rebuild.then(() => {
                 const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []);
                 this.emitSaveComponentEvent(schema, originalComp, parentComponent.schema, path, index, isNew, originalComponentSchema);
@@ -1153,16 +1161,71 @@ class WebformBuilder extends Component_1.default {
             });
         }
         this.highlightInvalidComponents();
-        return native_promise_only_1.default.resolve();
+        return Promise.resolve();
     }
     emitSaveComponentEvent(schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema) {
         this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);
     }
+    attachEditComponentControls(component, parent, isNew, original, ComponentClass) {
+        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
+        cancelButtons.forEach((cancelButton) => {
+            this.editForm.addEventListener(cancelButton, 'click', (event) => {
+                event.preventDefault();
+                this.editForm.detach();
+                this.emit('cancelComponent', component);
+                this.dialog.close();
+                this.highlightInvalidComponents();
+            });
+        });
+        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
+        removeButtons.forEach((removeButton) => {
+            this.editForm.addEventListener(removeButton, 'click', (event) => {
+                event.preventDefault();
+                // Since we are already removing the component, don't trigger another remove.
+                this.saved = true;
+                this.editForm.detach();
+                this.removeComponent(component, parent, original);
+                this.dialog.close();
+                this.highlightInvalidComponents();
+            });
+        });
+        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
+        saveButtons.forEach((saveButton) => {
+            this.editForm.addEventListener(saveButton, 'click', (event) => {
+                event.preventDefault();
+                if (!this.editForm.checkValidity(this.editForm.data, true, this.editForm.data)) {
+                    this.editForm.setPristine(false);
+                    this.editForm.showErrors();
+                    return false;
+                }
+                this.saved = true;
+                this.saveComponent(component, parent, isNew, original);
+            });
+        });
+        const previewButtons = this.componentEdit.querySelectorAll('[ref="previewButton"]');
+        previewButtons.forEach((previewButton) => {
+            this.editForm.addEventListener(previewButton, 'click', (event) => {
+                event.preventDefault();
+                this.showPreview = !this.showPreview;
+                this.editForm.detach();
+                this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
+                    componentInfo: ComponentClass.builderInfo,
+                    editForm: this.editForm.render(),
+                    preview: this.preview ? this.preview.render() : false,
+                    showPreview: this.showPreview,
+                    helplinks: this.helplinks,
+                }));
+                this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+                this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
+            });
+        });
+    }
     editComponent(component, parent, isNew, isJsonEdit, original, flags = {}) {
+        var _a;
         if (!component.key) {
             return;
         }
-        let saved = false;
+        this.saved = false;
         const componentCopy = (0, utils_1.fastCloneDeep)(component);
         let ComponentClass = Components_1.default.components[componentCopy.type];
         const isCustom = ComponentClass === undefined;
@@ -1206,7 +1269,9 @@ class WebformBuilder extends Component_1.default {
                 }
             ]
         } : ComponentClass.editForm(lodash_1.default.cloneDeep(overrides));
-        const instanceOptions = {};
+        const instanceOptions = {
+            inFormBuilder: true,
+        };
         this.hook('instanceOptionsPreview', instanceOptions);
         const instance = new ComponentClass(componentCopy, instanceOptions);
         const schema = this.hook('builderComponentSchema', component, instance);
@@ -1231,12 +1296,14 @@ class WebformBuilder extends Component_1.default {
             ]));
             this.hook('previewFormSettitngs', schema, isJsonEdit);
         }
+        this.showPreview = (_a = ComponentClass.builderInfo.showPreview) !== null && _a !== void 0 ? _a : true;
         this.componentEdit = this.ce('div', { 'class': 'component-edit-container' });
         this.setContent(this.componentEdit, this.renderTemplate('builderEditForm', {
             componentInfo: ComponentClass.builderInfo,
             editForm: this.editForm.render(),
             preview: this.preview ? this.preview.render() : false,
-            helplinks: this.helplinks,
+            showPreview: this.showPreview,
+            helplinks: this.helplinks
         }));
         this.dialog = this.createModal(this.componentEdit, lodash_1.default.get(this.options, 'dialogAttr', {}));
         // This is the attach step.
@@ -1290,48 +1357,14 @@ class WebformBuilder extends Component_1.default {
                 this.updateComponent(event.data.componentJson || event.data, event.changed);
             }
         });
-        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
-        cancelButtons.forEach((cancelButton) => {
-            this.addEventListener(cancelButton, 'click', (event) => {
-                event.preventDefault();
-                this.editForm.detach();
-                this.emit('cancelComponent', component);
-                this.dialog.close();
-                this.highlightInvalidComponents();
-            });
-        });
-        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
-        removeButtons.forEach((removeButton) => {
-            this.addEventListener(removeButton, 'click', (event) => {
-                event.preventDefault();
-                // Since we are already removing the component, don't trigger another remove.
-                saved = true;
-                this.editForm.detach();
-                this.removeComponent(component, parent, original);
-                this.dialog.close();
-                this.highlightInvalidComponents();
-            });
-        });
-        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
-        saveButtons.forEach((saveButton) => {
-            this.addEventListener(saveButton, 'click', (event) => {
-                event.preventDefault();
-                if (!this.editForm.checkValidity(this.editForm.data, true, this.editForm.data)) {
-                    this.editForm.setPristine(false);
-                    this.editForm.showErrors();
-                    return false;
-                }
-                saved = true;
-                this.saveComponent(component, parent, isNew, original);
-            });
-        });
+        this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
         const dialogClose = () => {
             this.editForm.destroy(true);
             if (this.preview) {
                 this.preview.destroy(true);
                 this.preview = null;
             }
-            if (isNew && !saved) {
+            if (isNew && !this.saved) {
                 this.removeComponent(component, parent, original);
                 this.highlightInvalidComponents();
             }
@@ -1350,14 +1383,19 @@ class WebformBuilder extends Component_1.default {
             data.type).replace(/^[0-9]*/, '');
     }
     moveComponent(component) {
+        var _a;
+        if (this.selectedComponent) {
+            const prevSelected = this.selectedComponent;
+            (_a = prevSelected.element) === null || _a === void 0 ? void 0 : _a.classList.remove('builder-component-selected');
+            this.removeEventListener(document, 'keydown');
+        }
         component.element.focus();
-        component.element.classList.add('builder-selected');
-        this.selectedElement = component;
-        this.removeEventListener(component.element, 'keydown');
-        this.addEventListener(component.element, 'keydown', this.moveHandler.bind(this));
+        component.element.classList.add('builder-component-selected');
+        this.selectedComponent = component;
+        this.addEventListener(document, 'keydown', this.moveHandler.bind(this));
     }
     updateComponentPlacement(direction) {
-        const component = this.selectedElement;
+        const component = this.selectedComponent;
         let index, info;
         const step = direction ? -1 : 1;
         if (component) {
@@ -1400,7 +1438,9 @@ class WebformBuilder extends Component_1.default {
     }
     stopMoving(comp) {
         const parent = comp.element.parentNode;
+        this.removeEventListener(document, 'keydown');
         parent.formioComponent.rebuild();
+        this.selectedComponent = null;
     }
     addNewComponent(element) {
         var _a;

package/lib/cjs/Wizard.d.ts

@@ -11,7 +11,7 @@ declare class Wizard extends Webform {
     _seenPages: number[];
     subWizards: any[];
     allPages: any[];
-    lastPromise: any;
+    lastPromise: Promise<void>;
     enabledIndex: number;
     editMode: boolean;
     originalOptions: any;
@@ -40,6 +40,7 @@ declare class Wizard extends Webform {
     prepareHeaderSettings(ctx: any, headerType: any): any;
     redrawNavigation(): void;
     redrawHeader(): void;
+    attach(element: any): Promise<void>;
     scrollPageToTop(): void;
     isBreadcrumbClickable(): any;
     isAllowPrevious(): any;
@@ -60,16 +61,18 @@ declare class Wizard extends Webform {
     establishPages(data?: any): any[];
     updatePages(): void;
     addComponents(): void;
-    setPage(num: any): any;
+    setPage(num: any): Promise<void>;
     pageFieldLogic(page: any): void;
     get currentPage(): any;
     getNextPage(): number | null;
     getPreviousPage(): number;
+    beforeSubmit(): Promise<any[]>;
+    beforePage(next: any): Promise<any>;
     emitNextPage(): void;
-    nextPage(): any;
+    nextPage(): Promise<void>;
     emitPrevPage(): void;
-    prevPage(): any;
-    cancel(noconfirm: any): any;
+    prevPage(): Promise<void>;
+    cancel(noconfirm: any): Promise<void> | Promise<number>;
     getPageIndexByKey(key: any): number;
     get schema(): Object;
     setComponentSchema(): void;

package/lib/cjs/Wizard.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const lodash_1 = __importDefault(require("lodash"));
 const Webform_1 = __importDefault(require("./Webform"));
 const Formio_1 = require("./Formio");
@@ -40,7 +39,7 @@ class Wizard extends Webform_1.default {
         this._seenPages = [0];
         this.subWizards = [];
         this.allPages = [];
-        this.lastPromise = native_promise_only_1.default.resolve();
+        this.lastPromise = Promise.resolve();
         this.enabledIndex = 0;
         this.editMode = false;
         this.originalOptions = lodash_1.default.cloneDeep(this.options);
@@ -556,7 +555,7 @@ class Wizard extends Webform_1.default {
     }
     setPage(num) {
         if (num === this.page) {
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         if (num >= 0 && num < this.pages.length) {
             this.page = num;
@@ -579,13 +578,13 @@ class Wizard extends Webform_1.default {
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
             });
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         else if (!this.pages.length) {
             this.redraw();
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
-        return native_promise_only_1.default.reject('Page not found');
+        return Promise.reject('Page not found');
     }
     pageFieldLogic(page) {
         var _a;
@@ -640,13 +639,13 @@ class Wizard extends Webform_1.default {
     }
     beforeSubmit() {
         const pages = this.getPages();
-        return native_promise_only_1.default.all(pages.map((page) => {
+        return Promise.all(pages.map((page) => {
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
     }
     beforePage(next) {
-        return new native_promise_only_1.default((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             this.hook(next ? 'beforeNext' : 'beforePrev', this.currentPage, this.submission, (err) => {
                 if (err) {
                     this.showErrors(err, true);
@@ -690,7 +689,7 @@ class Wizard extends Webform_1.default {
         else {
             this.currentPage.components.forEach((comp) => comp.setPristine(false));
             this.scrollIntoView(this.element);
-            return native_promise_only_1.default.reject(this.showErrors([], true));
+            return Promise.reject(this.showErrors([], true));
         }
     }
     emitPrevPage() {
@@ -705,7 +704,7 @@ class Wizard extends Webform_1.default {
     }
     cancel(noconfirm) {
         if (this.options.readOnly) {
-            return native_promise_only_1.default.resolve();
+            return Promise.resolve();
         }
         if (super.cancel(noconfirm)) {
             this.setPristine(true);
@@ -718,7 +717,7 @@ class Wizard extends Webform_1.default {
                 return this.page;
             });
         }
-        return native_promise_only_1.default.resolve();
+        return Promise.resolve();
     }
     getPageIndexByKey(key) {
         let pageIndex = this.page;
@@ -781,7 +780,8 @@ class Wizard extends Webform_1.default {
     setValue(submission, flags = {}, ignoreEstablishment) {
         this._submission = submission;
         if ((flags && flags.fromSubmission && (this.options.readOnly || this.editMode) && !this.isHtmlRenderMode()) ||
-            (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id)) {
+            (flags && flags.fromSubmission && (this.prefixComps.length || this.suffixComps.length) && submission._id) ||
+            (this.options.server && (this.prefixComps.length || this.suffixComps.length))) {
             this._data = submission.data;
         }
         if (!ignoreEstablishment) {

package/lib/cjs/WizardBuilder.d.ts

@@ -30,10 +30,12 @@ export default class WizardBuilder extends WebformBuilder {
             components: any[];
         }[];
     };
-    addPage(page: any): any;
-    removePage(pageIndex: any, componentIndex: any): any;
-    onReorder(element: any, _target: any, _source: any, sibling: any): any;
-    setPage(index: any): any;
+    navigationDragula: any;
+    rebuild(): Promise<void> | Promise<boolean>;
+    addPage(page: any): Promise<void> | Promise<boolean>;
+    removePage(pageIndex: any, componentIndex: any): Promise<void> | Promise<boolean> | undefined;
+    onReorder(element: any, _target: any, _source: any, sibling: any): Promise<void> | undefined;
+    setPage(index: any): Promise<void> | Promise<boolean> | undefined;
     getPageConfig(index: any, components?: any[]): {
         title: string;
         label: string;

package/lib/cjs/WizardBuilder.js

@@ -106,6 +106,11 @@ class WizardBuilder extends WebformBuilder_1.default {
             const components = this._form.components.filter((component) => component.type !== 'button');
             this._form.components = [this.getPageConfig(1, components)];
         }
+        else {
+            const components = this._form.components
+                .filter((component) => component.type !== 'button' || component.action !== 'submit');
+            this._form.components = components;
+        }
         this.rebuild();
     }
     get form() {
@@ -148,7 +153,10 @@ class WizardBuilder extends WebformBuilder_1.default {
             page.parentNode.dragInfo = { index };
         });
         if (this.dragulaLib) {
-            this.dragulaLib([this.element.querySelector('.wizard-pages')])
+            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {
+                moves: (el) => (!el.classList.contains('wizard-add-page')),
+                accepts: (el, target, source, sibling) => (sibling ? true : false),
+            })
                 .on('drop', this.onReorder.bind(this));
         }
         this.refs.addPage.forEach(link => {
@@ -165,6 +173,13 @@ class WizardBuilder extends WebformBuilder_1.default {
         });
         return super.attach(element);
     }
+    detach() {
+        if (this.navigationDragula) {
+            this.navigationDragula.destroy();
+        }
+        this.navigationDragula = null;
+        super.detach();
+    }
     rebuild() {
         var _a;
         const page = this.currentPage;
@@ -202,13 +217,15 @@ class WizardBuilder extends WebformBuilder_1.default {
         }
     }
     onReorder(element, _target, _source, sibling) {
-        if (!element.dragInfo || (sibling && !sibling.dragInfo)) {
+        const isSiblingAnAddPageButton = sibling === null || sibling === void 0 ? void 0 : sibling.classList.contains('wizard-add-page');
+        // We still can paste before Add Page button
+        if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {
             console.warn('There is no Drag Info available for either dragged or sibling element');
             return;
         }
         const oldPosition = element.dragInfo.index;
         //should drop at next sibling position; no next sibling means drop to last position
-        const newPosition = (sibling ? sibling.dragInfo.index : this.pages.length);
+        const newPosition = (sibling && sibling.dragInfo ? sibling.dragInfo.index : this.pages.length);
         const movedBelow = newPosition > oldPosition;
         const formComponents = (0, utils_1.fastCloneDeep)(this._form.components);
         const draggedRowData = this._form.components[oldPosition];

package/lib/cjs/addons/FormioAddon.d.ts

@@ -12,7 +12,7 @@ export default class FormioAddon extends Element {
     namespace: string;
     component: any;
     settings: any;
-    attach(element: any): any;
+    attach(element: any): Promise<void>;
     _element: any;
     destroy(): void;
 }

package/lib/cjs/addons/FormioAddon.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Element_1 = __importDefault(require("../Element"));
-const native_promise_only_1 = __importDefault(require("native-promise-only"));
 const lodash_1 = __importDefault(require("lodash"));
 class FormioAddon extends Element_1.default {
     static get info() {
@@ -30,7 +29,7 @@ class FormioAddon extends Element_1.default {
     }
     attach(element) {
         this._element = element;
-        return native_promise_only_1.default.resolve();
+        return Promise.resolve();
     }
     destroy() { }
 }