datasync-dynamic-form 1.3.4 → 1.3.6

package/dist/DsDynamicForm.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { Component, useImperativeHandle, forwardRef } from "react";
 import Multiselect from 'multiselect-react-dropdown';
@@ -15,11 +6,13 @@ import { DsBlob } from "datasync-blob";
 import { DsPdf } from "datasync-pdf";
 // reactstrap components
 import { Button, Label, FormGroup, Input, InputGroupText, InputGroup, Row as ReactstrapRow, Col as ReactstrapCol, } from "reactstrap";
-const debugging = false;
+import "./flex-grid.css";
+const FlexRow = ({ className, ...props }) => (_jsx(ReactstrapRow, { className: ["flex-row", className].filter(Boolean).join(" "), ...props }));
+const FlexCol = ({ className, ...props }) => (_jsx(ReactstrapCol, { className: ["flex-col", className].filter(Boolean).join(" "), ...props }));
 const globals = {
     parameters: {
-        debugging: debugging,
         local: true,
+        production: false,
         use_navigate: false,
         save_failed_alert: false,
         form_version: "1.0",
@@ -40,19 +33,19 @@ export class DsDynamicForm extends Component {
          */
         this.updatePageDomElement = (p_pageIndex, p_page_isVisible) => {
             let pageObject = document.getElementById(`dsdf_page_${p_pageIndex}`);
-            if (globals.parameters.debugging)
+            if (this.debugging)
                 console.log(`updatePageDomElement = (${p_pageIndex}, ${p_page_isVisible ? "show" : "hide"})`);
             if (!pageObject) {
                 console.error(`Page element with id 'dsdf_page_${p_pageIndex}' not found`);
                 return;
             }
-            if (globals.parameters.debugging)
+            if (this.debugging)
                 console.log("pageObject.classList(before)->", pageObject.classList);
             if (p_page_isVisible)
                 pageObject.classList.add("page_visible");
             else
                 pageObject.classList.remove("page_visible");
-            if (globals.parameters.debugging)
+            if (this.debugging)
                 console.log("pageObject.classList(after)->", pageObject.classList);
         };
         /**
@@ -72,7 +65,7 @@ export class DsDynamicForm extends Component {
             if (this.props.foreign_keys && typeof this.props.foreign_keys !== "object")
                 throw new Error("foreign_keys must be a json object !");
             this.local_data_blob.data_tier = Object.assign(this.props.foreign_keys ? this.props.foreign_keys : {}, duplicate_data_tier);
-            if (globals.parameters.debugging)
+            if (this.debugging)
                 console.log("clearForm->this.local_data_blob.data_tier =>", this.local_data_blob.data_tier);
         };
         this.getFieldData = (fieldName) => {
@@ -82,7 +75,7 @@ export class DsDynamicForm extends Component {
         };
         this.setFieldData = (fieldName, value) => {
             try {
-                if (globals.parameters.debugging)
+                if (this.debugging)
                     console.log("setFieldData:fieldName ->", fieldName, " value ->", value);
                 let duplicate_data_tier = JSON.parse(JSON.stringify(this.local_data_blob.data_tier));
                 duplicate_data_tier[fieldName] = value;
@@ -109,7 +102,7 @@ export class DsDynamicForm extends Component {
         this.getFieldError = (pFieldObject) => {
             /** Return data value form field object */
             try {
-                if (globals.parameters.debugging)
+                if (this.debugging)
                     console.log(`getFieldError(${JSON.stringify(pFieldObject)}) -> ${this.state.fieldError}`);
                 let dbg = (this.state.fieldError && this.state.fieldError[pFieldObject.name]) ? this.state.fieldError[pFieldObject.name] : "";
                 return `${dbg}`;
@@ -187,8 +180,11 @@ export class DsDynamicForm extends Component {
             this.onFormSavedLocalHandler, this.onFormUpdatedLocalHandler, this.onFormFailedLocalHandler, null);
         };
         /** Form Handlers */
-        this.onClickSubmitFormHandler = (event) => __awaiter(this, void 0, void 0, function* () {
+        this.onClickSubmitFormHandler = async (event) => {
             try {
+                //Trigger handler as user click submit button in order to animate checking + saving progress bar.
+                if (this.props.onBeforeFormSubmit)
+                    this.props.onBeforeFormSubmit(this.local_data_blob);
                 if (event)
                     event.preventDefault();
                 //Force all fields check    
@@ -219,7 +215,7 @@ export class DsDynamicForm extends Component {
                 if (!canSubmit) {
                     // Scroll to the first field with error only on submit
                     if (firstErrFieldName) {
-                        if (globals.parameters.debugging)
+                        if (this.debugging)
                             console.log("WScrollTo invoked :-)");
                         WScrollTo(firstErrFieldName);
                     }
@@ -232,7 +228,7 @@ export class DsDynamicForm extends Component {
                 }
                 //Invoke onFormSubmit props
                 if (this.props.onFormSubmit) {
-                    if (globals.parameters.debugging)
+                    if (this.debugging)
                         alert("onFormSubmit => filter log with AsyncDebug:: prefixe");
                     //If props function return false then cancel form submit and do not save !
                     this.props.onFormSubmit(this.local_data_blob);
@@ -247,12 +243,55 @@ export class DsDynamicForm extends Component {
                 console.error(`onClickSubmitFormHandler raises "${error}"`);
                 return false;
             }
-        });
+        };
+        this.checkCurrentPage = async (event) => {
+            try {
+                /*Trigger typically called from external to check curetn page fields.
+                returns true when all fields are correct. User is then allowed to pursue to next page*/
+                if (event)
+                    event.preventDefault();
+                //Force all fields check    
+                let canSubmit = true;
+                let firstErrFieldName = null;
+                let iPage = this.props.active_page || 0; //Process only current page
+                let iRow = 0;
+                while (iRow < this.state.form.Pages[iPage].Rows.length) {
+                    let iCol = 0;
+                    while (iCol < this.state.form.Pages[iPage].Rows[iRow].Cols.length) {
+                        let ii = 0;
+                        while (ii < this.state.form.Pages[iPage].Rows[iRow].Cols[iCol].Fields.length) {
+                            const field = this.state.form.Pages[iPage].Rows[iRow].Cols[iCol].Fields[ii];
+                            const isValid = this.checkValidation(field);
+                            if (!isValid && firstErrFieldName === null) {
+                                firstErrFieldName = field.name;
+                            }
+                            canSubmit = canSubmit && isValid;
+                            ii++;
+                        }
+                        iCol++;
+                    }
+                    iRow++;
+                }
+                if (!canSubmit) {
+                    let err_message = `La page ${iPage} de formulaire comporte des erreurs !`;
+                    if (this.props.onFormFailed)
+                        this.props.onFormFailed(err_message);
+                    else
+                        console.error(`checkCurrentPage ${iPage} raises "${err_message}"`);
+                    return false;
+                }
+                return canSubmit;
+            }
+            catch (error) {
+                console.error(`checkCurrentPage raises "${error}"`);
+                return false;
+            }
+        };
         this.onFormSavedLocalHandler = (blob) => {
             if (this.props.onFormSaved)
                 this.props.onFormSaved(blob);
             else
-                console.error("DynamicForm3Tiers2.onFormSaved props is not defined !");
+                console.error("DsDynamicForm.onFormSaved props is not defined !");
             //clear form
             if (this.props.clearOnSave)
                 this.clearForm();
@@ -265,7 +304,7 @@ export class DsDynamicForm extends Component {
                 if (this.props.onFormUpdated)
                     this.props.onFormUpdated(blob);
                 else
-                    console.error("DynamicForm3Tiers2.onFormUpdated props is not defined !");
+                    console.error("DsDynamicForm.onFormUpdated props is not defined !");
                 //clear form
                 if (this.props.clearOnUpdate)
                     this.clearForm();
@@ -281,10 +320,18 @@ export class DsDynamicForm extends Component {
             if (this.props.onFormFailed)
                 this.props.onFormFailed(err);
             else {
-                console.error("DynamicForm3Tiers2.onFormFailed props is not defined !");
+                console.error("DsDynamicForm.onFormFailed props is not defined !");
                 alert("Erreur de sauvegarde !!!");
             }
         };
+        this.onBlobErrorLocalHandler = (errorObject) => {
+            if (this.props.onBlobErrorHandler)
+                this.props.onBlobErrorHandler(errorObject);
+            else {
+                console.error("DsDynamicForm.onBlobErrorHandler props is not defined !");
+                alert(errorObject.message);
+            }
+        };
         this.checkValidation = (pFieldObject) => {
             /** Get field properties */
             let min = pFieldObject.min_length || 0;
@@ -313,7 +360,7 @@ export class DsDynamicForm extends Component {
             }
             if ((max > 0) && (fieldValue.trim().length > max))
                 nextErrors.push(`trop long, ${fieldValue.trim().length - max} caractères en trop.`);
-            if (globals.parameters.debugging) {
+            if (this.debugging) {
                 console.log(`pFieldObject.name->`, JSON.stringify(pFieldObject.name));
                 console.log(`nextErrors->`, JSON.stringify(nextErrors));
                 console.log(`-----------`);
@@ -338,7 +385,7 @@ export class DsDynamicForm extends Component {
                     !isNaN(parseFloat(eventObject.event.target.value)))
                 this.setFieldData(eventObject.fieldObject.name, eventObject.event.target.value);
             else {
-                if (globals.parameters.debugging)
+                if (this.debugging)
                     console.error(`Value rejected -> ${eventObject.event.target.value}`);
             }
             this.checkValidation(eventObject.fieldObject);
@@ -385,23 +432,22 @@ export class DsDynamicForm extends Component {
         };
         this._rowRendering = (row) => {
             try {
-                return (_jsx(ReactstrapRow, { children: row.Cols.map((col, ii) => {
+                return (_jsx(FlexRow, { children: row.Cols.map((col, ii) => {
                         return (this._colRendering(col));
                     }) }));
             }
             catch (err) {
-                return (_jsxs(ReactstrapCol, { children: ["Error ", err.message] }));
+                return (_jsxs(FlexCol, { children: ["Error ", err.message] }));
             }
         };
         this._colRendering = (col) => {
-            var _a, _b, _c, _d;
             try {
-                return (_jsx(ReactstrapCol, { xs: (_a = this.props.col_xs) !== null && _a !== void 0 ? _a : 12, sm: (_b = this.props.col_sm) !== null && _b !== void 0 ? _b : 12, md: (_c = this.props.col_md) !== null && _c !== void 0 ? _c : 6, lg: (_d = this.props.col_lg) !== null && _d !== void 0 ? _d : 4, id: `${col.Id ? col.Id : ''}`, children: col.Fields.map((field, ii) => {
+                return (_jsx(FlexCol, { id: `${col.Id ? col.Id : ''}`, children: col.Fields.map((field, ii) => {
                         return this._fieldRendering(field, ii);
                     }) }));
             }
             catch (err) {
-                return (_jsxs(ReactstrapCol, { children: ["Error ", err.message] }));
+                return (_jsxs(FlexCol, { children: ["Error ", err.message] }));
             }
         };
         this._fieldRendering = (field, ii) => {
@@ -421,7 +467,7 @@ export class DsDynamicForm extends Component {
                         /* Checkbox is override with combobox */
                         return (_jsxs("div", { children: [this.getFieldLabelTitle(field), _jsx(Multiselect, { showArrow: true, options: ["Oui", "Non"], isObject: false, displayValue: "key", selectedValues: this.getFieldData(field.name) ? this.getFieldData(field.name).split(";") : [], placeholder: field.placeholder, emptyRecordMsg: "", onSelect: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, onRemove: (selectedList, selectedItem) => { this.setFieldData(field.name, selectedList.join(";")); }, disable: this.props.read_only, singleSelect: true }), this._error_label(field)] }));
                     case "blob":
-                        return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10", children: [_jsx(DsBlob, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPicture: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary", width: field.width ? field.width : undefined, height: field.height ? field.height : undefined, maxWidth: field.maxWidth ? field.maxWidth : undefined, maxHeight: field.maxHeight ? field.maxHeight : undefined, reduceImage: field.reduceImage ? field.reduceImage : undefined }), this._error_label(field)] })] }));
+                        return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10", children: [_jsx(DsBlob, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPicture: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary", width: field.width ? field.width : undefined, height: field.height ? field.height : undefined, maxWidth: field.max_width ? field.max_width : undefined, maxHeight: field.max_height ? field.max_height : undefined, maxKBytes: field.max_kbytes ? field.max_kbytes : undefined, reduceImage: field.reduceImage ? field.reduceImage : undefined, onErrorHandler: (errorObject) => { this.onBlobErrorLocalHandler(errorObject); }, debugging: this.debugging }), this._error_label(field)] })] }));
                     case "pdf":
                         return (_jsxs(_Fragment, { children: [this.getFieldLabelTitle(field), _jsxs("div", { className: "col-md-10", children: [_jsx(DsPdf, { item_id: field.name, readOnly: this.props.read_only ? this.props.read_only : false, Caption: `${this.getFieldPrompt(field)} ...`, data: this.getFieldData(field.name), uploadPdf: (UploadFile) => { this.setFieldData(field.name, UploadFile.data); this.checkValidation(field); }, pictureStyle: "pic", buttonStyle: "btn btn-secondary" }), this._error_label(field)] })] }));
                     case "email":
@@ -470,44 +516,41 @@ export class DsDynamicForm extends Component {
             }
         };
         this._cancelButton = () => {
-            var _a, _b, _c, _d;
             let buttonIsHidden = (this.props.read_only || (this.props.buttons_options && this.props.buttons_options.cancel_button_hidden)) ? true : false;
             let buttonCaption = (this.props.buttons_options && this.props.buttons_options.cancel_button_caption) ? this.props.buttons_options.cancel_button_caption : "Annuler";
             if (buttonIsHidden)
                 return (_jsx(_Fragment, {}));
             else {
-                return (_jsx(ReactstrapCol, { xs: (_a = this.props.col_xs) !== null && _a !== void 0 ? _a : 12, sm: (_b = this.props.col_sm) !== null && _b !== void 0 ? _b : 12, md: (_c = this.props.col_md) !== null && _c !== void 0 ? _c : 6, lg: (_d = this.props.col_lg) !== null && _d !== void 0 ? _d : 4, children: _jsx(Button, { id: "dsdf_clear_button", block: true, className: "btn-round", color: "danger", outline: true, type: "reset", onClick: () => { this.clearForm(); }, children: buttonCaption }) }));
+                return (_jsx(FlexCol, { children: _jsx(Button, { id: "dsdf_clear_button", block: true, className: "btn-round", color: "danger", outline: true, type: "reset", onClick: () => { this.clearForm(); }, children: buttonCaption }) }));
             }
         };
         this._submitButton = () => {
-            var _a, _b, _c, _d;
             let buttonIsHidden = (this.props.read_only || (this.props.buttons_options && this.props.buttons_options.submit_button_hidden)) ? true : false;
             let buttonCaption = (this.props.buttons_options && this.props.buttons_options.submit_button_caption) ? this.props.buttons_options.submit_button_caption : "Soumettre";
             if (buttonIsHidden)
                 return (_jsx(_Fragment, {}));
             else {
-                return (_jsx(ReactstrapCol, { xs: (_a = this.props.col_xs) !== null && _a !== void 0 ? _a : 12, sm: (_b = this.props.col_sm) !== null && _b !== void 0 ? _b : 12, md: (_c = this.props.col_md) !== null && _c !== void 0 ? _c : 6, lg: (_d = this.props.col_lg) !== null && _d !== void 0 ? _d : 4, children: _jsx(Button, { id: "dsdf_submit_button", block: true, className: "btn-round", color: "danger", outline: true, type: "submit", onClick: () => { this.onClickSubmitFormHandler(); }, children: buttonCaption }) }));
+                return (_jsx(FlexCol, { children: _jsx(Button, { id: "dsdf_submit_button", block: true, className: "btn-round", color: "danger", outline: true, type: "submit", onClick: () => { this.onClickSubmitFormHandler(); }, children: buttonCaption }) }));
             }
         };
         this.render = () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
             return (_jsxs(_Fragment, { children: [_jsx(_Fragment, {}), !this.state.form &&
                         _jsx("div", { children: _jsx("h1", { children: "Form loading..." }) }), !(this.state.form &&
                         this.state.form.Pages) &&
                         _jsx("div", { children: _jsx("h1", { children: "Form Missing Pages !!!" }) }), _jsx("form", { children: this.state.form &&
                             this.state.form.Pages &&
                             this.state.form.Pages.map((page, pageIndex) => {
-                                if (globals.parameters.debugging)
+                                if (this.debugging)
                                     console.log(`Rendering page ${pageIndex}:`, page);
                                 return (_jsx("div", { id: `dsdf_page_${pageIndex}`, className: `form-page ${((pageIndex == this.state.active_page) || this.props.read_only) ? "page_visible" : ""}`, children: page.Rows.map((row, rowIndex) => {
                                         return (_jsx("div", { children: this._rowRendering(row) }, rowIndex));
                                     }) }, pageIndex));
-                            }) }), _jsxs(ReactstrapRow, { id: "dsdf_buttons_container", className: "buttons-row", children: [this._cancelButton(), this._submitButton(), this.props.custom_button_caption &&
-                                _jsx(ReactstrapCol, { xs: (_a = this.props.col_xs) !== null && _a !== void 0 ? _a : 12, sm: (_b = this.props.col_sm) !== null && _b !== void 0 ? _b : 12, md: (_c = this.props.col_md) !== null && _c !== void 0 ? _c : 6, lg: (_d = this.props.col_lg) !== null && _d !== void 0 ? _d : 4, children: _jsx(Button, { id: "dsdf_custom_button", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler)
+                            }) }), _jsxs(FlexRow, { id: "dsdf_buttons_container", className: "buttons-row", children: [this._cancelButton(), this._submitButton(), this.props.custom_button_caption &&
+                                _jsx(FlexCol, { children: _jsx(Button, { id: "dsdf_custom_button", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler)
                                             this.props.custom_button_handler(this.state.form);
                                         else
                                             console.error("custom_button_handler unset !"); }, children: this.props.custom_button_caption }) }), this.props.custom_button_caption2 &&
-                                _jsx(ReactstrapCol, { xs: (_e = this.props.col_xs) !== null && _e !== void 0 ? _e : 12, sm: (_f = this.props.col_sm) !== null && _f !== void 0 ? _f : 12, md: (_g = this.props.col_md) !== null && _g !== void 0 ? _g : 6, lg: (_h = this.props.col_lg) !== null && _h !== void 0 ? _h : 4, children: _jsx(Button, { id: "dsdf_custom_button2", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler2)
+                                _jsx(FlexCol, { children: _jsx(Button, { id: "dsdf_custom_button2", block: true, className: "btn-round", color: "primary", type: "submit", onClick: (e) => { if (this.props.custom_button_handler2)
                                             this.props.custom_button_handler2(this.state.form);
                                         else
                                             console.error("custom_button_handler2 unset !"); }, children: this.props.custom_button_caption2 }) })] })] }));
@@ -515,6 +558,10 @@ export class DsDynamicForm extends Component {
         this.state = { form: { Pages: [] }, active_page: 0 };
         this.local_data_blob = { data_tier: {} };
     }
+    // Helper method to get debugging value from props with default fallback
+    get debugging() {
+        return this.props.debugging ?? false;
+    }
     componentDidUpdate(prevProps) {
         // Typical usage (don't forget to compare props):
         if (this.props.form !== prevProps.form) {
@@ -526,7 +573,10 @@ export class DsDynamicForm extends Component {
             this.clearForm();
         }
         if (this.props.active_page != prevProps.active_page) {
-            if (globals.parameters.debugging)
+            //Page is about to change, then triger onPageChanging Handler
+            if (this.props.onPageChanging)
+                this.props.onPageChanging({ "active_page": prevProps.active_page ?? 0, "next_page": this.props.active_page ?? 0, "last_page": this.state.form.Pages.length - 1 });
+            if (this.debugging)
                 console.log("active_page has changed !");
             try {
                 if (prevProps.active_page !== undefined) {
@@ -552,14 +602,18 @@ export const DsDynamicFormForwardRef = forwardRef((props, ref) => {
     const innerRef = React.useRef(null);
     useImperativeHandle(ref, () => ({
         clearForm: () => {
-            var _a;
-            (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.clearForm();
+            innerRef.current?.clearForm();
         },
         onClickSubmitFormHandler: (event) => {
             return innerRef.current
                 ? innerRef.current.onClickSubmitFormHandler(event)
                 : Promise.resolve(false);
         },
+        checkCurrentPage: (event) => {
+            return innerRef.current
+                ? innerRef.current.checkCurrentPage(event)
+                : Promise.resolve(false);
+        },
     }));
-    return (_jsx(DsDynamicForm, Object.assign({}, props, { ref: innerRef })));
+    return (_jsx(DsDynamicForm, { ...props, ref: innerRef }));
 });

package/dist/flex-grid.css

@@ -0,0 +1,51 @@
+.flex-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 10px;
+    /* Make all .flex-col in a flex-row equal height */
+    align-items: stretch;
+    /* For multi-line rows, ensure lines use full vertical space */
+    align-content: stretch;
+}
+
+.flex-col {
+    flex: 1 1 0;
+    /* Fill available vertical space of its flex line */
+    height: 100%;
+    min-height: 100px;
+    border: 3px solid;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.box-next {
+    flex: 1 1 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+}
+
+/* Media query pour 600px :  diviser par 2 le nombre de div par ligne */
+@media (max-width: 600px) {
+    .box {
+        flex:  1 1 calc(50% - 5px);
+        max-width: calc(50% - 5px);
+    }
+    
+    /* Si une div est seule sur sa ligne, elle prend 100% */
+    .box:only-child {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+}
+
+/* Media query pour 300px : toutes les divs à 100% de la largeur */
+@media (max-width: 300px) {
+    .box {
+        flex: 1 1 100%;
+        max-width: 100%;
+    }
+}

package/dist/types/DsDynamicForm.d.ts

@@ -1,4 +1,5 @@
 import React, { Component, ChangeEvent } from "react";
+import "./flex-grid.css";
 interface Field {
     name: string;
     input_type: string;
@@ -12,8 +13,9 @@ interface Field {
     hidden?: boolean;
     width?: number;
     height?: number;
-    maxWidth?: number;
-    maxHeight?: number;
+    max_width?: number;
+    max_height?: number;
+    max_kbytes?: number;
     reduceImage?: boolean;
     name_day?: string;
     name_month?: string;
@@ -79,10 +81,17 @@ interface DsDynamicFormProps {
     read_only?: boolean;
     foreign_keys?: DataTier;
     onFormChange?: (data: DataTier) => void;
+    onBeforeFormSubmit?: (data: DataBlob) => void;
     onFormSubmit?: (data: DataBlob) => void;
     onFormSaved?: (blob: DataBlob) => void;
     onFormUpdated?: (blob: DataBlob) => void;
     onFormFailed?: (error: string) => void;
+    onPageChanging?: (pageInfo: {
+        active_page: number;
+        next_page: number;
+        last_page: number;
+    }) => void;
+    onBlobErrorHandler?: (errorObject: ErrorObject) => void;
     clearOnSave?: boolean;
     clearOnUpdate?: boolean;
     onTerminated?: () => void;
@@ -101,6 +110,7 @@ interface DsDynamicFormProps {
     col_sm?: number | string;
     col_md?: number | string;
     col_lg?: number | string;
+    debugging?: boolean;
 }
 interface DsDynamicFormState {
     form: Form;
@@ -111,9 +121,15 @@ interface DsDynamicFormState {
     captcha2?: number;
     active_page?: number;
 }
+interface ErrorObject {
+    error_code: string;
+    error_definition: string;
+    message: string;
+}
 export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynamicFormState> {
     private local_data_blob;
     constructor(props: DsDynamicFormProps);
+    private get debugging();
     componentDidMount: () => void;
     componentDidUpdate(prevProps: DsDynamicFormProps): void;
     /**
@@ -144,9 +160,11 @@ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynam
     saveFormToDatasyncProcess: () => void;
     /** Form Handlers */
     onClickSubmitFormHandler: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
+    checkCurrentPage: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
     onFormSavedLocalHandler: (blob: DataBlob) => void;
     onFormUpdatedLocalHandler: (blob: DataBlob) => void;
     onFormFailedLocalHandler: (err: string) => void;
+    onBlobErrorLocalHandler: (errorObject: ErrorObject) => void;
     checkValidation: (pFieldObject: Field) => boolean;
     dynamicInputTextChangeHandler: (eventObject: EventObject) => void;
     dynamicInputNumericChangeHandler: (eventObject: EventObject) => void;
@@ -167,6 +185,7 @@ export declare class DsDynamicForm extends Component<DsDynamicFormProps, DsDynam
 export type DsDynamicFormRef = {
     clearForm: () => void;
     onClickSubmitFormHandler: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
+    checkCurrentPage: (event?: React.MouseEvent<HTMLButtonElement>) => Promise<boolean>;
 };
-export declare const DsDynamicFormForwardRef: any;
+export declare const DsDynamicFormForwardRef: React.ForwardRefExoticComponent<DsDynamicFormProps & React.RefAttributes<DsDynamicFormRef>>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "datasync-dynamic-form",
   "description": "Datasync Dynamic Form component",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "main": "dist/DsDynamicForm.js",
   "module": "dist/DsDynamicForm.js",
   "types": "dist/types/DsDynamicForm.d.ts",
@@ -17,6 +17,8 @@
     "email": "pmabiala@me.com"
   },
   "devDependencies": {
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.25",
     "datasync-core": "^1.0.44",
     "multiselect-react-dropdown": "^2.0.25",
     "react": ">=18.2.0",
@@ -28,14 +30,14 @@
     "react": "^17 || ^18"
   },
   "scripts": {
-    "hybrid": "tsc"
+    "hybrid": "tsc && cp src/flex-grid.css dist/flex-grid.css"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "axios": "^1.7.2",
-    "datasync-blob": "^1.1.10",
+    "datasync-blob": "^1.1.12",
     "datasync-pdf": "^0.0.1",
     "runscripts": "^0.0.1"
   }