@arquimedes.co/eureka-forms 1.9.134 → 2.0.0-test

package/dist/Contexts/CustomContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+var CustomContext = createContext({
+    customSteps: {},
+    customStepProps: {},
+});
+export default CustomContext;

package/dist/Contexts/FormContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Form } from '../@Types';
+declare const FormContext: import("react").Context<Form>;
+export default FormContext;

package/dist/Contexts/FormContext.js

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+var FormContext = createContext({
+    firstSection: 'FIRST',
+    sections: {
+        FIRST: {
+            id: 'FIRST',
+            name: 'FIRST',
+            steps: [],
+            nextSection: null,
+        },
+    },
+    steps: {},
+    size: {
+        blockSize: 0,
+        blockNum: 4,
+        spacingSize: 0,
+    },
+});
+export default FormContext;

package/dist/Contexts/SectionContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SectionContext: import("react").Context<string>;
+export default SectionContext;

package/dist/Contexts/SectionContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var SectionContext = createContext('NULL');
+export default SectionContext;

package/dist/Form/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -1,12 +1,10 @@
 /// <reference types="react" />
-import { FormStyle } from '../../@Types/Form';
 interface ConfirmationDialogProps {
     confirmation: {
         case: string;
         url: string;
     };
-    onClose: Function;
-    formStyle: FormStyle;
+    onClose: () => void;
 }
-declare function ConfirmationDialog({ confirmation, formStyle, onClose, }: ConfirmationDialogProps): JSX.Element;
+declare function ConfirmationDialog({ confirmation, onClose, }: ConfirmationDialogProps): JSX.Element;
 export default ConfirmationDialog;

package/dist/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -14,8 +14,10 @@ import CheckCircleOutlineRoundedIcon from '@material-ui/icons/CheckCircleOutline
 import styles from './ConfirmationDialog.module.css';
 import Dialog from '@material-ui/core/Dialog';
 import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
+import { useAppSelector } from '../../hooks';
 function ConfirmationDialog(_a) {
-    var confirmation = _a.confirmation, formStyle = _a.formStyle, onClose = _a.onClose;
+    var confirmation = _a.confirmation, onClose = _a.onClose;
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     return (_jsx(Dialog, __assign({ PaperProps: {
             style: {
                 borderRadius: '20px',

package/dist/Form/Form.d.ts

@@ -1,14 +1,17 @@
 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';
+import { FieldValues } from 'react-hook-form';
+import { AppProps } from '../App/App';
+import CBRFormStepTypes from '../constants/CBRFormStepTypes';
+import { Form } from '../@Types';
+import { FormStep } from '../@Types/FormStep';
+import { CBRFormStep } from '../@Types/CBRFormStep';
 export declare const getLocale: () => any;
 export interface StepDependency {
+    dependents: (FormStep | CBRFormStep)[];
     value: any | undefined;
-    type: StepTypes | 'ORIGINAL';
+    type: StepTypes | CBRFormStepTypes | 'ORIGINAL';
     empty?: boolean;
 }
 export type DependencyStore = Record<string, StepDependency>;
@@ -17,39 +20,19 @@ export interface WidthStats {
     isResponsive: boolean;
     isMobile: boolean;
 }
-export interface FormComponentProps {
+type CustomAppProps = Pick<AppProps, 'customSteps' | 'customSubmitBtns'>;
+export interface BaseFormProps extends CustomAppProps {
     form: Form;
-    formController: UseFormReturn;
-    organization: Organization;
     branding?: Branding;
-    originalValues: Record<string, unknown>;
-    customSteps: Record<string, CustomStep>;
-    customStepProps: Record<string, any>;
-    customSend?: (values: any, reload: Function) => Promise<any>;
-    customSubmit?: JSX.Element;
-    widthStats: WidthStats;
-    internal: boolean;
-    reload: Function;
-    partial: boolean;
-    postview: boolean;
-    preview: boolean;
-    formStyle: FormStyle;
-    domain?: string;
+    reload: () => void;
+    isWidget: boolean;
     apiKey: string | undefined;
-    /** Function to call on postview to fetch the download url of a file */
-    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
-    /** If the form can be edited (For entities) */
-    editable: boolean;
-    /** The custom send label to display */
-    sendLabel?: string;
+    customSubmit: AppProps['customSubmit'];
+    containerRef: React.RefObject<HTMLDivElement>;
+}
+export interface FormComponentProps extends CustomAppProps {
     /** 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'> & {
-    containerRef: any;
-    organization: Organization | null;
-    isWidget: boolean;
-}): JSX.Element;
+declare function FormComponent({ form, apiKey, reload, isWidget, branding, customSteps, containerRef, customSubmit, customSubmitBtns, }: BaseFormProps): JSX.Element;
 export default FormComponent;

package/dist/Form/Form.js

@@ -45,20 +45,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import Navbar from '../shared/Navbar/Navbar';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useContext, useEffect, useRef, useState, } from 'react';
+import Navbar from '../Shared/Navbar/Navbar';
 import styles from './Form.module.css';
 import InternalFormStyle from '../constants/InternalFormStyle';
 import enLocale from 'date-fns/locale/en-US';
@@ -66,16 +55,18 @@ import esLocale from 'date-fns/locale/es';
 import ColumnForm from './FormTypes/ColumnForm/ColumnForm';
 import StepperForm from './FormTypes/StepperForm/StepperForm';
 import { FormStyleTypes, FormTypes, } from '../constants/FormStepTypes';
-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 { calcDependencies, calcValue } from './FormFunctions';
-import { useForm } from 'react-hook-form';
-import widgetInstance from '../AxiosWidget';
-import axiosInstance from '../AxiosAPI';
+import { calcValue } from './FormFunctions';
+import { FormProvider, useForm } from 'react-hook-form';
+import widgetInstance from '../Utils/AxiosWidget';
+import axiosInstance from '../Utils/AxiosAPI';
 import ReCAPTCHA from 'react-google-recaptcha';
 import ConfirmationDialog from './ConfirmationDialog/ConfirmationDialog';
+import MaterialProviders from '../Utils/MaterialProviders';
+import { useWidthStats } from '../States/WidthStatsStateReducer';
+import { useAppDispatch, useAppSelector } from '../hooks';
+import FormContext from '../Contexts/FormContext';
+import { getAppState } from '../Utils/store';
+import { focusStep } from '../States/SiteStateReducer';
 var localeMap = {
     en: enLocale,
     'en-US': enLocale,
@@ -91,38 +82,46 @@ export var getLocale = function () {
 };
 function FormComponent(_a) {
     var _this = this;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    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 apiKey = others.apiKey, domain = others.domain, customSteps = others.customSteps, originalValues = others.originalValues, customSend = others.customSend;
-    var _m = useState(calcDependencies(form.steps, originalValues, customSteps)), dependencyStore = _m[0], setDependencyStore = _m[1];
-    var formController = useForm({
-        defaultValues: originalValues,
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, isWidget = _a.isWidget, branding = _a.branding, customSteps = _a.customSteps, containerRef = _a.containerRef, customSubmit = _a.customSubmit, customSubmitBtns = _a.customSubmitBtns;
+    var _l = useAppSelector(function (state) { return state.global; }), idOrganization = _l.idOrganization, internal = _l.internal, postview = _l.postview;
+    var formMethods = useForm({
         mode: 'onTouched',
         shouldFocusError: true,
     });
     var recaptchaRef = useRef();
-    var _o = useState(), showConfirmation = _o[0], setShowConfirmation = _o[1];
-    var onSubmit = function (values) { return __awaiter(_this, void 0, void 0, function () {
-        var token, token_1, newValues, deleteIds, _i, _a, idStep, _b, deleteIds_1, id, customResp, params, url, axios, resp, error_1;
+    var dispatch = useAppDispatch();
+    var _m = useState(), showConfirmation = _m[0], setShowConfirmation = _m[1];
+    var idFocusStep = useAppSelector(function (state) { return state.site.focusStep; });
+    useEffect(function () {
+        if (idFocusStep) {
+            formMethods.setFocus(idFocusStep);
+            dispatch(focusStep(undefined));
+        }
+    }, [idFocusStep]);
+    var onSubmit = useCallback(function (values) { return __awaiter(_this, void 0, void 0, function () {
+        var token, state, newValues, deleteIds, _i, _a, idStep, _b, deleteIds_1, id, params, url, axios, resp, error_1;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
-                    values = __assign(__assign({}, originalValues), values);
                     token = null;
-                    if (!(form.hasCaptcha && !internal && !customSend)) return [3 /*break*/, 2];
-                    token_1 = recaptchaRef.current.getValue();
-                    if (!!token_1) return [3 /*break*/, 2];
+                    if (!(form.hasCaptcha && !internal && !customSubmit)) return [3 /*break*/, 2];
+                    token = recaptchaRef.current.getValue();
+                    if (!!token) return [3 /*break*/, 2];
                     return [4 /*yield*/, (recaptchaRef === null || recaptchaRef === void 0 ? void 0 : recaptchaRef.current.executeAsync())];
                 case 1:
-                    token_1 = _c.sent();
+                    token = _c.sent();
                     _c.label = 2;
                 case 2:
-                    if (!apiKey && !internal && !customSend)
+                    if (!apiKey && !internal && !customSubmit)
                         return [2 /*return*/];
                     _c.label = 3;
                 case 3:
-                    _c.trys.push([3, 7, , 8]);
-                    newValues = {};
+                    _c.trys.push([3, 8, , 9]);
+                    return [4 /*yield*/, dispatch(getAppState()).unwrap()];
+                case 4:
+                    state = _c.sent();
+                    newValues = __assign({}, state.site.values.global);
                     deleteIds = [];
                     for (_i = 0, _a = Object.keys(values); _i < _a.length; _i++) {
                         idStep = _a[_i];
@@ -132,121 +131,71 @@ function FormComponent(_a) {
                         id = deleteIds_1[_b];
                         delete newValues[id];
                     }
-                    if (!customSend) return [3 /*break*/, 5];
-                    return [4 /*yield*/, customSend(newValues, others.reload)];
-                case 4:
-                    customResp = _c.sent();
-                    return [2 /*return*/, customResp];
-                case 5:
+                    if (!customSubmit) return [3 /*break*/, 6];
+                    return [4 /*yield*/, customSubmit(newValues, reload)];
+                case 5: return [2 /*return*/, _c.sent()];
+                case 6:
+                    if (customSubmitBtns)
+                        return [2 /*return*/, newValues];
                     params = new URLSearchParams();
-                    if (domain || internal)
-                        params.set('idOrganization', domain !== null && domain !== void 0 ? domain : '');
+                    if (idOrganization || internal)
+                        params.set('idOrganization', idOrganization !== null && idOrganization !== void 0 ? idOrganization : '');
                     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;
+                    axios = idOrganization || internal ? widgetInstance : axiosInstance;
                     return [4 /*yield*/, axios.post(url, newValues)];
-                case 6:
+                case 7:
                     resp = _c.sent();
                     setShowConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
-                    return [3 /*break*/, 8];
-                case 7:
+                    return [3 /*break*/, 9];
+                case 8:
                     error_1 = _c.sent();
                     console.error(error_1);
-                    return [3 /*break*/, 8];
-                case 8: return [2 /*return*/];
+                    return [3 /*break*/, 9];
+                case 9: return [2 /*return*/];
             }
         });
-    }); };
-    var _p = useState(undefined), widthStats = _p[0], setWidthStats = _p[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]);
-    var formStyle = useMemo(function () {
-        var _a;
-        return internal
-            ? InternalFormStyle
-            : __assign(__assign({}, InternalFormStyle), ((_a = form.style) !== null && _a !== void 0 ? _a : {}));
-    }, []);
-    if (!widthStats)
-        return _jsx("div", {});
+    }); }, [customSteps, internal, customSubmit, idOrganization]);
+    useWidthStats(containerRef, form, postview, internal);
+    var isResponsive = useAppSelector(function (state) { return state.widthStats.isResponsive; });
     var renderForm = function () {
-        return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { formStyle: formStyle, confirmation: showConfirmation, onClose: function () {
-                        others.reload();
+        return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { confirmation: showConfirmation, onClose: function () {
+                        reload();
                         setShowConfirmation(undefined);
-                    } })), form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormTypeComponent, __assign({}, others, { branding: branding, widthStats: widthStats, form: form, internal: internal, postview: postview, organization: organization, formStyle: formStyle, onSubmit: onSubmit, formController: formController, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore }))] }));
+                    } })), form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, __assign({}, formMethods, { children: _jsx(FormContext.Provider, __assign({ value: form }, { children: _jsx(FormTypeComponent, { onSubmit: onSubmit, customSubmitBtns: customSubmitBtns }) })) }))] }));
     };
+    if (!idOrganization)
+        return _jsx(_Fragment, {});
     //If currently displaying internal or form is standalone
-    if ((postview || internal || !form.isStandAlone) &&
-        widthStats !== undefined) {
+    if (postview || internal || !form.isStandAlone) {
         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,
+                    : (_c = (_b = form.style) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : InternalFormStyle.backgroundColor,
                 minHeight: form.isStandAlone && !isWidget ? '100vh' : '100%',
             } }, { children: _jsx("div", __assign({ className: styles.widgetFormContainer, ref: containerRef }, { children: renderForm() })) })));
     }
-    else if (organization && widthStats !== undefined) {
+    else {
         //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding === null || branding === void 0 ? void 0 : branding.images.logoUrl, color: (_f = (_e = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _e === void 0 ? void 0 : _e.navbarColor) !== null && _f !== void 0 ? _f : (_g = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _g === void 0 ? void 0 : _g.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
-                        background: (_j = (_h = form.style) === null || _h === void 0 ? void 0 : _h.standAloneBackgroundColor) !== null && _j !== void 0 ? _j : '#ffffff',
-                    } }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding === null || branding === void 0 ? void 0 : branding.images.logoUrl, color: (_e = (_d = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _d === void 0 ? void 0 : _d.navbarColor) !== null && _e !== void 0 ? _e : (_f = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _f === void 0 ? void 0 : _f.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
+                        background: (_h = (_g = form.style) === null || _g === void 0 ? void 0 : _g.standAloneBackgroundColor) !== null && _h !== void 0 ? _h : '#ffffff',
+                    } }, { children: _jsx("div", __assign({ className: isResponsive
                             ? styles.fullScreenStandAloneForm
                             : styles.standAloneFormCard, style: {
-                            backgroundColor: (_l = (_k = form.style) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : InternalFormStyle.backgroundColor,
-                            // visibility: loaded ? 'visible' : 'hidden',
+                            backgroundColor: (_k = (_j = form.style) === null || _j === void 0 ? void 0 : _j.backgroundColor) !== null && _k !== void 0 ? _k : InternalFormStyle.backgroundColor,
                         } }, { children: renderForm() })) }))] }));
     }
-    else {
-        return _jsx("div", {});
-    }
 }
 export default FormComponent;
-var muiTheme = createTheme({
-    typography: {
-        fontFamily: 'inherit',
-    },
-});
-var generateClassName = createGenerateClassName({
-    seed: SEED,
-    productionPrefix: 'efjss',
-});
-function FormTypeComponent(_a) {
-    var props = __rest(_a, []);
+function FormTypeComponent(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    var form = useContext(FormContext);
     var renderTypes = function () {
-        switch (props.form.type) {
+        switch (form.type) {
             case FormTypes.STEPPER: {
                 return _jsx(StepperForm, __assign({}, props));
             }
@@ -256,9 +205,9 @@ function FormTypeComponent(_a) {
             }
         }
     };
-    switch (props.formStyle.type) {
+    switch (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() })) })) })));
+            return _jsx(MaterialProviders, { children: renderTypes() });
         default:
             return renderTypes();
     }

package/dist/Form/FormFunctions.d.ts

@@ -1,6 +1,7 @@
 import { FormStep } from '../@Types/FormStep';
-import { CustomStep } from '../App';
 import { DependencyStore, StepDependency } from './Form';
-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 calcDependencies(steps: Record<string, FormStep>, originalValues: Record<string, any>, customSteps?: Record<string, CustomStep>, allSteps?: Record<string, FormStep>, dependencies?: DependencyStore): DependencyStore;
-export declare function calcStepDependency(idStep: string, steps: Record<string, FormStep>, originalValues: Record<string, any>, customSteps: Record<string, CustomStep>): StepDependency;
+import { CustomStep } from '../FormSteps/CustomStep';
+import { CBRFormStep } from '../@Types/CBRFormStep';
+export declare const calcValue: (idStep: string, steps: Record<string, FormStep>, values: Record<string, any>, customSteps: Record<string, CustomStep> | undefined, deleteIds: string[], value?: any) => any;
+export declare function calcDependencies(steps: Record<string, FormStep | CBRFormStep>, originalValues?: Record<string, any>, customSteps?: Record<string, CustomStep>, allSteps?: Record<string, FormStep | CBRFormStep>, dependencies?: DependencyStore): DependencyStore;
+export declare function calcStepDependency(idStep: string, steps: Record<string, FormStep | CBRFormStep>, originalValues: Record<string, any>, customSteps: Record<string, CustomStep>): StepDependency;

package/dist/Form/FormFunctions.js

@@ -26,7 +26,7 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
     var step = steps[idStep];
     if (!step)
         return value;
-    var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
+    var custom = customSteps === null || customSteps === void 0 ? void 0 : 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;
     }
@@ -114,6 +114,7 @@ function stringToDraft(text) {
 }
 export function calcDependencies(steps, originalValues, customSteps, allSteps, dependencies) {
     var _a, _b, _c;
+    if (originalValues === void 0) { originalValues = {}; }
     if (customSteps === void 0) { customSteps = {}; }
     if (allSteps === void 0) { allSteps = steps; }
     if (dependencies === void 0) { dependencies = {}; }
@@ -122,24 +123,37 @@ export function calcDependencies(steps, originalValues, customSteps, allSteps, d
         if (step.dependencies) {
             for (var _e = 0, _f = step.dependencies; _e < _f.length; _e++) {
                 var idDep = _f[_e];
-                if (dependencies[idDep] !== undefined)
+                if (dependencies[idDep] === undefined)
+                    dependencies[idDep] = calcStepDependency(idDep, allSteps, originalValues, customSteps);
+                dependencies[idDep].dependents.push(step);
+            }
+        }
+        if (step.type === StepTypes.ENTITYVALUEPICKER) {
+            for (var _g = 0, _h = __spreadArray(__spreadArray([], step.path, true), step.filters, true); _g < _h.length; _g++) {
+                var path = _h[_g];
+                if (path.type !== EntityValueDataTypes.STEP)
+                    continue;
+                if ((_a = step.dependencies) === null || _a === void 0 ? void 0 : _a.includes(path.idStep))
                     continue;
-                dependencies[idDep] = calcStepDependency(idDep, allSteps, originalValues, customSteps);
+                if (dependencies[path.idStep] === undefined) {
+                    dependencies[path.idStep] = calcStepDependency(path.idStep, allSteps, originalValues, customSteps);
+                }
+                dependencies[path.idStep].dependents.push(step);
             }
         }
         if (step.type === StepTypes.MAPPER) {
             var newSteps = {};
-            var elements = (_a = originalValues[step.id]) !== null && _a !== void 0 ? _a : [];
+            var elements = (_b = originalValues[step.id]) !== null && _b !== void 0 ? _b : [];
             var _loop_1 = function (element) {
-                for (var _m = 0, _o = Object.keys(step.steps); _m < _o.length; _m++) {
-                    var idSubStep = _o[_m];
+                for (var _k = 0, _l = Object.keys(step.steps); _k < _l.length; _k++) {
+                    var idSubStep = _l[_k];
                     var subStep = step.steps[idSubStep];
                     var mappedId = element.ids[idSubStep];
-                    newSteps[mappedId] = __assign(__assign({}, subStep), { id: mappedId, dependencies: (_b = subStep.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { var _a; return (_a = element.ids[dep]) !== null && _a !== void 0 ? _a : dep; }) });
+                    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 _g = 0, elements_2 = elements; _g < elements_2.length; _g++) {
-                var element = elements_2[_g];
+            for (var _j = 0, elements_2 = elements; _j < elements_2.length; _j++) {
+                var element = elements_2[_j];
                 _loop_1(element);
             }
             if (elements.length === 0) {
@@ -148,22 +162,6 @@ export function calcDependencies(steps, originalValues, customSteps, allSteps, d
             calcDependencies(newSteps, originalValues, customSteps, __assign(__assign({}, allSteps), newSteps), dependencies);
         }
     }
-    /** After all steps have been checked check missing entityvalue dependencies */
-    for (var _h = 0, _j = Object.values(steps); _h < _j.length; _h++) {
-        var step = _j[_h];
-        if (step.type === StepTypes.ENTITYVALUEPICKER) {
-            for (var _k = 0, _l = __spreadArray(__spreadArray([], step.path, true), step.filters, true); _k < _l.length; _k++) {
-                var path = _l[_k];
-                if (path.type !== EntityValueDataTypes.STEP)
-                    continue;
-                if ((_c = step.dependencies) === null || _c === void 0 ? void 0 : _c.includes(path.idStep))
-                    continue;
-                if (dependencies[path.idStep] === undefined) {
-                    dependencies[path.idStep] = calcStepDependency(path.idStep, allSteps, originalValues, customSteps);
-                }
-            }
-        }
-    }
     return dependencies;
 }
 export function calcStepDependency(idStep, steps, originalValues, customSteps) {
@@ -174,6 +172,7 @@ export function calcStepDependency(idStep, steps, originalValues, customSteps) {
         value: depStep
             ? calcStepDependencyValue(depStep, originalValues, customSteps)
             : (_b = originalValues[idStep]) !== null && _b !== void 0 ? _b : null,
+        dependents: [],
     };
 }
 function calcStepDependencyValue(depStep, originalValues, customSteps) {

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

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