@arquimedes.co/eureka-forms 1.9.128-test → 1.9.128

package/dist/App.js

@@ -60,7 +60,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import Loader from './shared/Loader/Loader';
 import styles from './App.module.css';
-import FormComponent from './Form/Form';
+import FormComponent from './FormComponents/Form/Form';
 import StepTypes from './constants/FormStepTypes';
 import axiosInstance from './AxiosAPI';
 import widgetInstance from './AxiosWidget';
@@ -68,7 +68,7 @@ import { calcCbrForm } from './utils/CbrFunctions';
 import CBRStepTypes from './constants/CBRFormStepTypes';
 import { nanoid } from 'nanoid';
 import { EditorState, convertFromRaw } from 'draft-js';
-import { stringToDraft, getRawText, } from './FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep';
+import { stringToDraft, getRawText, } from './FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep';
 function App(_a) {
     var _this = this;
     var _b, _c, _d, _e;

package/dist/FormComponents/Form/ColumnForm/ColumnForm.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FormComponentProps } from '../Form';
+import Types from '../../../constants/FormStepTypes';
+import { CustomStep } from '../../../App';
+import { FormStep } from '../../../@Types/FormStep';
+export interface StepDependency {
+    value: any | undefined;
+    type: Types | 'ORIGINAL';
+    empty?: boolean;
+}
+export type DependencyStore = Record<string, StepDependency>;
+declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, sendLabel, widthStats, customSteps, customSend, customSubmit, handleLoaded, originalValues, ...others }: FormComponentProps): JSX.Element;
+export default ColumnForm;
+export declare const calcValue: (idStep: string, steps: Record<string, FormStep>, values: Record<string, any>, customSteps: Record<string, CustomStep>, deleteIds: string[], value?: any) => any;
+export declare function calcStepDependencyValue(depStep: FormStep, originalValues: Record<string, any>, customSteps?: Record<string, CustomStep>): StepDependency['value'];

package/dist/FormComponents/Form/ColumnForm/ColumnForm.js

@@ -0,0 +1,411 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useEffect, useRef, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import SectionComponent from '../../Section/Section';
+import { useForm } from 'react-hook-form';
+import styles from './ColumnForm.module.css';
+import Types, { EntityValueDataTypes } from '../../../constants/FormStepTypes';
+import { convertToRaw } from 'draft-js';
+import TermComponent from '../../Term/Term';
+import ConfirmationDialog from '../ConfirmationDialog/ConfirmationDialog';
+import Loader from '../../../shared/Loader/Loader';
+import axiosInstance from '../../../AxiosAPI';
+import widgetInstance from '../../../AxiosWidget';
+import React from 'react';
+function ColumnForm(_a) {
+    var _this = this;
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, sendLabel = _a.sendLabel, widthStats = _a.widthStats, customSteps = _a.customSteps, customSend = _a.customSend, customSubmit = _a.customSubmit, handleLoaded = _a.handleLoaded, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "sendLabel", "widthStats", "customSteps", "customSend", "customSubmit", "handleLoaded", "originalValues"]);
+    var _b = useState(false), tempError = _b[0], setTempError = _b[1];
+    var _c = useState(calcDependencies(form.steps, originalValues, customSteps)), dependencyStore = _c[0], setDependencyStore = _c[1];
+    var _d = useForm({
+        defaultValues: originalValues,
+        mode: 'onTouched',
+        shouldFocusError: true,
+    }), getValues = _d.getValues, setValue = _d.setValue, clearErrors = _d.clearErrors, control = _d.control, errors = _d.formState.errors, trigger = _d.trigger, setFocus = _d.setFocus;
+    var recaptchaRef = useRef();
+    var _e = useState(undefined), sections = _e[0], setSections = _e[1];
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
+    var _g = useState(), showConfirmation = _g[0], setShowConfirmation = _g[1];
+    useEffect(function () {
+        var tempSections = [];
+        calcNextSection(form, form.firstSection, tempSections);
+        setSections(tempSections);
+        handleLoaded();
+    }, []);
+    if (sections === undefined) {
+        return _jsx("div", {});
+    }
+    var onSubmit = function (token) { return __awaiter(_this, void 0, void 0, function () {
+        var valid, values, newValues, deleteIds, _i, _a, idStep, _b, deleteIds_1, id, customResp, params, url, axios, resp, error_1;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!apiKey && !internal && !customSend)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
+                case 1:
+                    valid = _c.sent();
+                    values = getValues();
+                    if (!valid) {
+                        console.error('ERRORS:', errors);
+                        setTempError(true);
+                        setTimeout(function () {
+                            setTempError(false);
+                        }, 500);
+                        return [2 /*return*/];
+                    }
+                    _c.label = 2;
+                case 2:
+                    _c.trys.push([2, 6, , 7]);
+                    setLoading(true);
+                    newValues = {};
+                    deleteIds = [];
+                    for (_i = 0, _a = Object.keys(values); _i < _a.length; _i++) {
+                        idStep = _a[_i];
+                        newValues[idStep] = calcValue(idStep, form.steps, values, customSteps, deleteIds);
+                    }
+                    for (_b = 0, deleteIds_1 = deleteIds; _b < deleteIds_1.length; _b++) {
+                        id = deleteIds_1[_b];
+                        delete newValues[id];
+                    }
+                    if (!customSend) return [3 /*break*/, 4];
+                    return [4 /*yield*/, customSend(newValues, reload)];
+                case 3:
+                    customResp = _c.sent();
+                    setLoading(false);
+                    return [2 /*return*/, customResp];
+                case 4:
+                    params = new URLSearchParams();
+                    if (domain || internal)
+                        params.set('idOrganization', domain !== null && domain !== void 0 ? domain : '');
+                    if (token)
+                        params.set('token', token);
+                    url = "/ticket/".concat(internal ? form.apiKey : apiKey);
+                    if (params.toString()) {
+                        url += "?".concat(params.toString());
+                    }
+                    axios = domain || internal ? widgetInstance : axiosInstance;
+                    return [4 /*yield*/, axios.post(url, newValues)];
+                case 5:
+                    resp = _c.sent();
+                    setShowConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
+                    return [3 /*break*/, 7];
+                case 6:
+                    error_1 = _c.sent();
+                    console.error(error_1);
+                    return [3 /*break*/, 7];
+                case 7:
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), showConfirmation !== undefined && (_jsx(ConfirmationDialog, { formStyle: formStyle, confirmation: showConfirmation, onClose: function () {
+                    reload();
+                    setShowConfirmation(undefined);
+                } })), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, sendLabel: sendLabel, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps, setDependencyStore: setDependencyStore, dependencyStore: dependencyStore, setFocus: setFocus, setValue: setValue }, others), idSection)); }), form.terms &&
+                (!internal || (internal && postview)) &&
+                (originalValues === null || originalValues === void 0 ? void 0 : originalValues['INTERNAL_CREATING_AGENT']) === undefined && (_jsx("div", __assign({ className: styles.termsContainer, style: {
+                    width: (form.size.blockSize + form.size.spacingSize) *
+                        form.size.blockNum,
+                } }, { children: form.terms.map(function (term) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, term.id)); }) }))), !postview && others.editable && (_jsxs(React.Fragment, { children: [form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), !customSubmit && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                                var valid, captcha;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            if (!(form.hasCaptcha && !internal)) return [3 /*break*/, 5];
+                                            return [4 /*yield*/, trigger(undefined, {
+                                                    shouldFocus: true,
+                                                })];
+                                        case 1:
+                                            valid = _a.sent();
+                                            if (!valid) return [3 /*break*/, 4];
+                                            captcha = recaptchaRef.current.getValue();
+                                            if (!!captcha) return [3 /*break*/, 3];
+                                            return [4 /*yield*/, (recaptchaRef === null || recaptchaRef === void 0 ? void 0 : recaptchaRef.current.executeAsync())];
+                                        case 2:
+                                            captcha =
+                                                _a.sent();
+                                            _a.label = 3;
+                                        case 3:
+                                            onSubmit(captcha);
+                                            _a.label = 4;
+                                        case 4: return [3 /*break*/, 6];
+                                        case 5:
+                                            onSubmit();
+                                            _a.label = 6;
+                                        case 6: return [2 /*return*/];
+                                    }
+                                });
+                            }); }, style: {
+                                background: formStyle.primaryColor,
+                                color: formStyle.primaryContrastColor,
+                            }, disabled: loading }, { children: [_jsx("div", __assign({ style: {
+                                        visibility: loading
+                                            ? 'hidden'
+                                            : 'visible',
+                                    } }, { children: sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar' })), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: formStyle.primaryContrastColor, position: "unset" }) })))] })) }))), customSubmit &&
+                        cloneElement(customSubmit, {
+                            onSubmit: onSubmit,
+                            loading: loading,
+                        })] }))] })));
+}
+export default ColumnForm;
+function calcNextSection(form, idSection, sections) {
+    var _a;
+    var section = form.sections[idSection];
+    if (section) {
+        sections.push(idSection);
+        var nextSectionId = (_a = section.nextSection) !== null && _a !== void 0 ? _a : '';
+        var nextSection = form.sections[nextSectionId];
+        if (nextSection) {
+            calcNextSection(form, nextSectionId, sections);
+        }
+    }
+}
+export var calcValue = function (idStep, steps, values, customSteps, deleteIds, value) {
+    var _a, _b;
+    if (value === void 0) { value = values[idStep]; }
+    var step = steps[idStep];
+    if (!step)
+        return value;
+    var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
+    if (custom !== undefined) {
+        return (_b = (_a = custom.calcValue) === null || _a === void 0 ? void 0 : _a.call(custom, step, value)) !== null && _b !== void 0 ? _b : value;
+    }
+    else {
+        switch (step === null || step === void 0 ? void 0 : step.type) {
+            case Types.TEXTAREA: {
+                if (step.hasTextEditor) {
+                    var currentContent = value.getCurrentContent();
+                    return {
+                        value: currentContent.getPlainText(),
+                        draft: convertToRaw(currentContent),
+                    };
+                }
+                else {
+                    return {
+                        value: value,
+                        draft: stringToDraft(value),
+                    };
+                }
+            }
+            case Types.FILEUPLOAD: {
+                return value.map(function (val) { return ({
+                    fileName: val.fileName,
+                    S3Key: val.S3Key,
+                }); });
+            }
+            case Types.SELECTOR:
+            case Types.CLASSIFIER_SELECTOR: {
+                return value.value;
+            }
+            case Types.COLLAPSIBLE: {
+                return !!value;
+            }
+            case Types.MAPPER: {
+                var elements = value === null || value === void 0 ? void 0 : value.filter(function (element) { return element.deleted !== true; });
+                var mappedValues = [];
+                for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
+                    var element = elements_1[_i];
+                    var newValue = {
+                        id: element.id,
+                    };
+                    for (var _c = 0, _d = Object.keys(element.originalValues); _c < _d.length; _c++) {
+                        var key = _d[_c];
+                        newValue[key] = element.originalValues[key];
+                    }
+                    if (element.value)
+                        newValue.value = element.value;
+                    for (var _e = 0, _f = Object.keys(step.steps); _e < _f.length; _e++) {
+                        var idStep_1 = _f[_e];
+                        var mappedId = element.ids[idStep_1];
+                        if (values[mappedId] !== undefined) {
+                            newValue[idStep_1] = calcValue(idStep_1, step.steps, values, customSteps, deleteIds, values[mappedId]);
+                            deleteIds.push(mappedId);
+                        }
+                    }
+                    mappedValues.push(newValue);
+                }
+                return mappedValues;
+            }
+            default:
+                if ((step === null || step === void 0 ? void 0 : step.type) === 'CBR_INCIDENCIAS') {
+                    return value === null || value === void 0 ? void 0 : value.filter(function (incidencia) { return incidencia.deleted !== true; });
+                }
+                return value;
+        }
+    }
+};
+function stringToDraft(text) {
+    var draftStructure = {
+        blocks: [],
+        entityMap: {},
+    };
+    text.split('\n').forEach(function (element, index) {
+        draftStructure.blocks.push({
+            key: String(index),
+            text: element,
+            type: 'unstyled',
+            depth: 0,
+            inlineStyleRanges: [],
+            entityRanges: [],
+            data: {},
+        });
+    });
+    return draftStructure;
+}
+function calcDependencies(steps, originalValues, customSteps, allSteps, dependencies) {
+    var _a, _b, _c, _d;
+    if (customSteps === void 0) { customSteps = {}; }
+    if (allSteps === void 0) { allSteps = steps; }
+    if (dependencies === void 0) { dependencies = {}; }
+    for (var _i = 0, _e = Object.values(steps); _i < _e.length; _i++) {
+        var step = _e[_i];
+        if (step.dependencies) {
+            for (var _f = 0, _g = step.dependencies; _f < _g.length; _f++) {
+                var idDep = _g[_f];
+                var depStep = allSteps[idDep];
+                if (depStep && dependencies[idDep] === undefined) {
+                    dependencies[idDep] = {
+                        type: depStep.type,
+                        value: calcStepDependencyValue(depStep, originalValues, customSteps),
+                    };
+                }
+                else if (dependencies[idDep] === undefined) {
+                    dependencies[idDep] = {
+                        type: (_a = depStep === null || depStep === void 0 ? void 0 : depStep.type) !== null && _a !== void 0 ? _a : 'ORIGINAL',
+                        value: originalValues[idDep],
+                    };
+                }
+            }
+        }
+        if (step.type === Types.MAPPER) {
+            var newSteps = {};
+            var elements = (_b = originalValues[step.id]) !== null && _b !== void 0 ? _b : [];
+            var _loop_1 = function (element) {
+                for (var _o = 0, _p = Object.keys(step.steps); _o < _p.length; _o++) {
+                    var idSubStep = _p[_o];
+                    var subStep = step.steps[idSubStep];
+                    var mappedId = element.ids[idSubStep];
+                    newSteps[mappedId] = __assign(__assign({}, subStep), { id: mappedId, dependencies: (_c = subStep.dependencies) === null || _c === void 0 ? void 0 : _c.map(function (dep) { var _a; return (_a = element.ids[dep]) !== null && _a !== void 0 ? _a : dep; }) });
+                }
+            };
+            for (var _h = 0, elements_2 = elements; _h < elements_2.length; _h++) {
+                var element = elements_2[_h];
+                _loop_1(element);
+            }
+            if (elements.length === 0) {
+                newSteps = step.steps;
+            }
+            calcDependencies(newSteps, originalValues, customSteps, __assign(__assign({}, allSteps), newSteps), dependencies);
+        }
+    }
+    /** After all steps have been checked check missing entityvalue dependencies */
+    for (var _j = 0, _k = Object.values(steps); _j < _k.length; _j++) {
+        var step = _k[_j];
+        if (step.type === Types.ENTITYVALUEPICKER) {
+            for (var _l = 0, _m = __spreadArray(__spreadArray([], step.path, true), step.filters, true); _l < _m.length; _l++) {
+                var path = _m[_l];
+                if (path.type !== EntityValueDataTypes.STEP)
+                    continue;
+                if ((_d = step.dependencies) === null || _d === void 0 ? void 0 : _d.includes(path.idStep))
+                    continue;
+                if (dependencies[path.idStep] === undefined) {
+                    dependencies[path.idStep] = originalValues[path.idStep];
+                }
+            }
+        }
+    }
+    return dependencies;
+}
+export function calcStepDependencyValue(depStep, originalValues, customSteps) {
+    var _a, _b, _c, _d;
+    if (customSteps === void 0) { customSteps = {}; }
+    var custom = customSteps[depStep === null || depStep === void 0 ? void 0 : depStep.type];
+    if (custom === null || custom === void 0 ? void 0 : custom.calcDependencyValue) {
+        return custom.calcDependencyValue(depStep, originalValues[depStep.id]);
+    }
+    switch (depStep.type) {
+        case Types.TEXTAREA: {
+            if (depStep.hasTextEditor) {
+                return null;
+            }
+            else {
+                return (_a = originalValues[depStep.id]) === null || _a === void 0 ? void 0 : _a.value;
+            }
+        }
+        case Types.MAPPER: {
+            return ((_c = (_b = originalValues[depStep.id]) === null || _b === void 0 ? void 0 : _b.map(function (mapperValue) { var _a; return (_a = mapperValue.value) !== null && _a !== void 0 ? _a : mapperValue; })) !== null && _c !== void 0 ? _c : null);
+        }
+        default:
+            return (_d = originalValues[depStep.id]) !== null && _d !== void 0 ? _d : null;
+    }
+}

package/dist/{Form → FormComponents/Form}/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FormStyle } from '../../@Types/Form';
+import { FormStyle } from '../../../@Types/Form';
 interface ConfirmationDialogProps {
     confirmation: {
         case: string;

package/dist/{Form → FormComponents/Form}/Form.d.ts

@@ -1,17 +1,9 @@
-import React from 'react';
-import { Organization } from '../@Types/@Types';
-import { Form, FormStyle } from '../@Types/Form';
-import { CustomStep } from '../App';
-import { Branding } from '../@Types/Branding';
-import StepTypes from '../constants/FormStepTypes';
-import { FieldValues, UseFormReturn } from 'react-hook-form';
+/// <reference types="react" />
+import { Organization } from '../../@Types/@Types';
+import { Form, FormStyle } from '../../@Types/Form';
+import { CustomStep } from '../../App';
+import { Branding } from '../../@Types/Branding';
 export declare const getLocale: () => any;
-export interface StepDependency {
-    value: any | undefined;
-    type: StepTypes | 'ORIGINAL';
-    empty?: boolean;
-}
-export type DependencyStore = Record<string, StepDependency>;
 export interface WidthStats {
     currentBreakPoint: number;
     isResponsive: boolean;
@@ -19,7 +11,6 @@ export interface WidthStats {
 }
 export interface FormComponentProps {
     form: Form;
-    formController: UseFormReturn;
     organization: Organization;
     branding?: Branding;
     originalValues: Record<string, unknown>;
@@ -38,16 +29,14 @@ export interface FormComponentProps {
     apiKey: string | undefined;
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+    /** Function to call when the form has loaded */
+    handleLoaded: () => void;
     /** If the form can be edited (For entities) */
     editable: boolean;
     /** The custom send label to display */
     sendLabel?: string;
-    /** Function called when users clicks submit */
-    onSubmit: (values: FieldValues) => Promise<any>;
-    dependencyStore: DependencyStore;
-    setDependencyStore: React.Dispatch<React.SetStateAction<DependencyStore>>;
 }
-declare function FormComponent({ form, isWidget, internal, postview, branding, organization, containerRef, ...others }: Omit<FormComponentProps, 'widthStats' | 'formStyle' | 'formController' | 'onSubmit' | 'setDependencyStore' | 'dependencyStore'> & {
+declare function FormComponent({ form, isWidget, internal, postview, branding, organization, containerRef, ...others }: Omit<FormComponentProps, 'widthStats' | 'formStyle' | 'handleLoaded'> & {
     containerRef: any;
     organization: Organization | null;
     isWidget: boolean;

package/dist/FormComponents/Form/Form.js

@@ -0,0 +1,147 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { FormStyleTypes, FormTypes } from '../../constants/FormStepTypes';
+import Navbar from '../../shared/Navbar/Navbar';
+import ColumnForm from './ColumnForm/ColumnForm';
+import StepperForm from './StepperForm/StepperForm';
+import styles from './Form.module.css';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DateFnsUtils from '@date-io/date-fns';
+import { createGenerateClassName, createTheme, StylesProvider, ThemeProvider, } from '@material-ui/core';
+import { SEED } from '../../constants/MaterialClassNameSeed';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import enLocale from 'date-fns/locale/en-US';
+import esLocale from 'date-fns/locale/es';
+var localeMap = {
+    en: enLocale,
+    'en-US': enLocale,
+    es: esLocale,
+};
+export var getLocale = function () {
+    var _a;
+    return ((_a = localeMap[navigator.languages && navigator.languages.length
+        ? navigator.languages[0]
+        : navigator.userLanguage ||
+            navigator.language ||
+            navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
+};
+function FormComponent(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var form = _a.form, isWidget = _a.isWidget, internal = _a.internal, postview = _a.postview, branding = _a.branding, organization = _a.organization, containerRef = _a.containerRef, others = __rest(_a, ["form", "isWidget", "internal", "postview", "branding", "organization", "containerRef"]);
+    var _p = useState(false), loaded = _p[0], setLoaded = _p[1];
+    var _q = useState(undefined), widthStats = _q[0], setWidthStats = _q[1];
+    /** Calcs the currentBreakPoint and if is mobile */
+    var handleResize = function () {
+        var _a;
+        var currentWidth = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+        if (currentWidth !== undefined) {
+            var currentBreakPoint = form.size.blockNum;
+            var padding = postview || internal || !form.isStandAlone ? 0 : 40;
+            while (currentWidth <
+                (form.size.blockSize + form.size.spacingSize) *
+                    currentBreakPoint +
+                    padding) {
+                currentBreakPoint--;
+            }
+            setWidthStats({
+                isResponsive: currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) *
+                        form.size.blockNum +
+                        padding,
+                isMobile: currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) * 2 + padding,
+                currentBreakPoint: currentBreakPoint,
+            });
+        }
+    };
+    useEffect(function () {
+        /** On load add a resize listener to calc the currentBreakpoint */
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [containerRef.current, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth]);
+    //If currently displaying internal or form is standalone
+    if ((postview || internal || !form.isStandAlone) &&
+        widthStats !== undefined) {
+        return (_jsx("div", __assign({ style: {
+                backgroundColor: internal
+                    ? 'transparent'
+                    : (_d = (_c = form.style) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : InternalFormStyle.backgroundColor,
+                minHeight: form.isStandAlone && !isWidget ? '100vh' : '100%',
+            } }, { children: _jsx("div", __assign({ className: styles.widgetFormContainer, ref: containerRef }, { children: _jsx(FormTypeComponent, __assign({}, others, { branding: branding, handleLoaded: function () {
+                        setLoaded(true);
+                    }, widthStats: widthStats, form: form, internal: internal, postview: postview, organization: organization, formStyle: internal
+                        ? InternalFormStyle
+                        : __assign(__assign({}, InternalFormStyle), ((_e = form.style) !== null && _e !== void 0 ? _e : {})) })) })) })));
+    }
+    else if (organization && widthStats !== undefined) {
+        //Standalone cant have widget
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding === null || branding === void 0 ? void 0 : branding.images.logoUrl, color: (_g = (_f = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _f === void 0 ? void 0 : _f.navbarColor) !== null && _g !== void 0 ? _g : (_h = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _h === void 0 ? void 0 : _h.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
+                        background: (_k = (_j = form.style) === null || _j === void 0 ? void 0 : _j.standAloneBackgroundColor) !== null && _k !== void 0 ? _k : '#ffffff',
+                    } }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
+                            ? styles.fullScreenStandAloneForm
+                            : styles.standAloneFormCard, style: {
+                            backgroundColor: (_m = (_l = form.style) === null || _l === void 0 ? void 0 : _l.backgroundColor) !== null && _m !== void 0 ? _m : InternalFormStyle.backgroundColor,
+                            visibility: loaded ? 'visible' : 'hidden',
+                        } }, { children: _jsx(FormTypeComponent, __assign({}, others, { branding: branding, internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: (_o = form.style) !== null && _o !== void 0 ? _o : InternalFormStyle, organization: organization, handleLoaded: function () {
+                                setLoaded(true);
+                            } })) })) }))] }));
+    }
+    else {
+        return _jsx("div", {});
+    }
+}
+var muiTheme = createTheme({
+    typography: {
+        fontFamily: 'inherit',
+    },
+});
+var generateClassName = createGenerateClassName({
+    seed: SEED,
+    productionPrefix: 'efjss',
+});
+function FormTypeComponent(_a) {
+    var props = __rest(_a, []);
+    var renderTypes = function () {
+        switch (props.form.type) {
+            case FormTypes.STEPPER: {
+                return _jsx(StepperForm, __assign({}, props));
+            }
+            case FormTypes.COLUMN:
+            default: {
+                return _jsx(ColumnForm, __assign({}, props));
+            }
+        }
+    };
+    switch (props.formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+            return (_jsx(StylesProvider, __assign({ generateClassName: generateClassName }, { children: _jsx(ThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(MuiPickersUtilsProvider, __assign({ utils: DateFnsUtils, locale: getLocale() }, { children: renderTypes() })) })) })));
+        default:
+            return renderTypes();
+    }
+}
+export default FormComponent;

package/dist/{Form/FormTypes → FormComponents/Form}/StepperForm/StepperForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { FormComponentProps } from '../../Form';
+import { FormComponentProps } from '../Form';
 declare function StepperForm({}: FormComponentProps): JSX.Element;
 export default StepperForm;