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

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -56,89 +56,27 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes, } from '../../../constants/FormStepTypes';
 import styles from './MaterialEntityValuePickerStep.module.css';
 import StepComponent from '../../Step';
-import { Controller } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 import { calcFillerSize } from '../../StepFunctions';
 import { SmartSelect } from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
-import widgetInstance from '../../../AxiosWidget';
-import axiosInstance from '../../../AxiosAPI';
-import InputIcon from '../../../shared/InputIcon/InputIcon';
-function EntityValuePicker(_a) {
-    var _this = this;
-    var step = _a.step, form = _a.form, level = _a.level, value = _a.value, control = _a.control, editable = _a.editable, postview = _a.postview, inputRef = _a.inputRef, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "form", "level", "value", "control", "editable", "postview", "inputRef", "getValues", "widthStats", "handleSizeChange"]);
+import widgetInstance from '../../../Utils/AxiosWidget';
+import InputIcon from '../../../Shared/InputIcon/InputIcon';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { useStepDependency } from '../../StepHooks';
+function EntityValuePickerComponent(_a) {
+    var step = _a.step, error = _a.error, level = _a.level, value = _a.value, editable = _a.editable, inputRef = _a.inputRef, onBlur = _a.onBlur, onChange = _a.onChange, handleSizeChange = _a.handleSizeChange;
+    var form = useContext(FormContext);
+    var getValues = useFormContext().getValues;
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
     var _b = useState(level === 0
         ? calcFillerSize(step, form.steps, getValues(), form.size)
         : 0), fillerSize = _b[0], setFillerSize = _b[1];
-    var getEntityValueOptions = function (_a, _step, dependencyStore, domain) {
-        var idOrganization = _a.idOrganization;
-        return __awaiter(_this, void 0, void 0, function () {
-            var urlPath, _i, _b, path, idEntityValue, currentValue, params, _c, _d, filter, currentValue, url, response;
-            var _e, _f, _g, _h, _j;
-            return __generator(this, function (_k) {
-                switch (_k.label) {
-                    case 0:
-                        urlPath = '';
-                        for (_i = 0, _b = step.path; _i < _b.length; _i++) {
-                            path = _b[_i];
-                            idEntityValue = 'null';
-                            switch (path.type) {
-                                case EntityValueDataTypes.STEP:
-                                    currentValue = (_e = dependencyStore[path.idStep]) === null || _e === void 0 ? void 0 : _e.value;
-                                    if (!currentValue)
-                                        return [2 /*return*/, null];
-                                    if (typeof currentValue === 'string')
-                                        idEntityValue = currentValue;
-                                    else
-                                        idEntityValue = (_f = currentValue._id) !== null && _f !== void 0 ? _f : currentValue.id;
-                                    break;
-                                case EntityValueDataTypes.VALUE:
-                                default:
-                                    idEntityValue = (_g = path.idEntityValue) !== null && _g !== void 0 ? _g : 'null';
-                                    break;
-                            }
-                            urlPath +=
-                                '/' +
-                                    path.idEntity +
-                                    (idEntityValue ? '/' + idEntityValue : '');
-                        }
-                        params = new URLSearchParams({});
-                        for (_c = 0, _d = step.filters; _c < _d.length; _c++) {
-                            filter = _d[_c];
-                            switch (filter.type) {
-                                case EntityValueDataTypes.STEP:
-                                    currentValue = (_h = dependencyStore[filter.idStep]) === null || _h === void 0 ? void 0 : _h.value;
-                                    if (currentValue) {
-                                        if (typeof currentValue === 'string')
-                                            params.set(filter.idProperty, currentValue);
-                                        else
-                                            params.set(filter.idProperty, (_j = currentValue._id) !== null && _j !== void 0 ? _j : currentValue.id);
-                                    }
-                                    else if (filter.required) {
-                                        return [2 /*return*/, null];
-                                    }
-                                    break;
-                                case EntityValueDataTypes.VALUE:
-                                default:
-                                    params.set(filter.idProperty, filter.value);
-                                    break;
-                            }
-                        }
-                        url = "".concat(domain !== null && domain !== void 0 ? domain : idOrganization, "/entities/").concat(step.idEntity).concat(urlPath, "?").concat(params.toString());
-                        return [4 /*yield*/, (domain
-                                ? widgetInstance.get(url)
-                                : axiosInstance.get(url))];
-                    case 1:
-                        response = _k.sent();
-                        return [2 /*return*/, response.data.filter(function (option) { var _a; return ((_a = step.options[option._id]) === null || _a === void 0 ? void 0 : _a.type) !== EntityValueOptionTypes.HIDE; })];
-                }
-            });
-        });
-    };
     var sizeChange = function () {
         handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
         if (level === 0) {
@@ -146,7 +84,7 @@ function EntityValuePicker(_a) {
         }
     };
     var renderSelect = function () {
-        return (_jsx(SmartSelect, __assign({}, others, { form: form, level: level, control: control, postview: postview, getValues: getValues, widthStats: widthStats, value: value, inputRef: inputRef, editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
+        return (_jsx(SmartSelect, { onBlur: onBlur, error: error, onChange: onChange, level: level, value: value, inputRef: inputRef, editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
                 return option._id === value._id;
             }, calcDepError: function (steps) {
                 for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
@@ -156,7 +94,7 @@ function EntityValuePicker(_a) {
                     }
                 }
                 return undefined;
-            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; } })));
+            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; } }));
     };
     var mapNestedOption = function () {
         if (value) {
@@ -164,18 +102,14 @@ function EntityValuePicker(_a) {
             if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.NESTED) {
                 return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
                         var subStep = form.steps[idStep];
-                        return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, form: form, control: control, step: subStep, key: idStep, level: level + 1, handleSizeChange: function () {
-                                sizeChange();
-                            } })));
+                        return (_jsx(StepComponent, { editable: editable, step: subStep, level: level + 1, handleSizeChange: sizeChange }, idStep));
                     }) }));
             }
         }
     };
     if (level === 0 && step.maxSize && step.maxSize < form.size.blockNum) {
         return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
-                width: widthStats.currentBreakPoint <= step.size
-                    ? '100%'
-                    : 'fit-content',
+                width: currentBreakPoint <= step.size ? '100%' : 'fit-content',
             } }, { children: [renderSelect(), mapNestedOption(), level === 0 && step.maxSize < form.size.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
                         width: fillerSize,
                     } }, "SEPARATOR"))] })));
@@ -186,34 +120,81 @@ function EntityValuePicker(_a) {
 }
 export default EntityValuePickerStep;
 function EntityValuePickerStep(props) {
-    var _a, _b;
-    var step = props.step, dependencyStore = props.dependencyStore, defaultValue = props.defaultValue, originalValues = props.originalValues;
-    useEffect(function () {
-        /** Al modificar tambien modificar en SmartSelect */
-        if (!originalValues[step.id] && defaultValue) {
-            props.setDependencyStore(function (dependencies) {
-                var _a;
-                return (__assign(__assign({}, dependencies), (_a = {}, _a[step.id] = { type: step.type, value: props.defaultValue }, _a)));
-            });
-        }
-    }, []);
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: (_b = (_a = props.originalValues[props.step.id]) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null, rules: {
-            required: props.step.required
-                ? 'Este campo es obligatorio'
-                : undefined,
-        }, shouldUnregister: true, render: function (_a) {
-            var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
-            return (_jsx(EntityValuePicker, __assign({}, props, field, { inputRef: ref, onChange: function (value) {
-                    if (dependencyStore[step.id] !== undefined) {
-                        props.setDependencyStore(function (dependencies) {
-                            var _a;
-                            return (__assign(__assign({}, dependencies), (_a = {}, _a[step.id] = {
-                                type: step.type,
-                                value: value !== null && value !== void 0 ? value : null,
-                            }, _a)));
-                        });
-                    }
-                    field.onChange(value);
-                } })));
-        } }));
+    var step = props.step, defaultValue = props.defaultValue;
+    var _a = useStepDependency(step, defaultValue), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
+    var _b = useController({
+        name: step.id,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        shouldUnregister: true,
+        defaultValue: originalValue,
+    }), _c = _b.field, ref = _c.ref, field = __rest(_c, ["ref"]), error = _b.fieldState.error;
+    var onChange = useCallback(function (value) {
+        handleStepDep(value);
+        field.onChange(value);
+    }, [handleStepDep, field]);
+    return (_jsx(EntityValuePickerComponent, __assign({}, props, field, { error: error, inputRef: ref, onChange: onChange })));
 }
+var getEntityValueOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {
+    var urlPath, _i, _a, path, idEntityValue, currentValue, params, _b, _c, filter, currentValue, url, response;
+    var _d, _e, _f, _g, _h;
+    return __generator(this, function (_j) {
+        switch (_j.label) {
+            case 0:
+                if (!idOrganization)
+                    return [2 /*return*/, null];
+                urlPath = '';
+                for (_i = 0, _a = step.path; _i < _a.length; _i++) {
+                    path = _a[_i];
+                    idEntityValue = 'null';
+                    switch (path.type) {
+                        case EntityValueDataTypes.STEP: {
+                            currentValue = (_d = dependencyStore[path.idStep]) === null || _d === void 0 ? void 0 : _d.value;
+                            if (!currentValue)
+                                return [2 /*return*/, null];
+                            if (typeof currentValue === 'string')
+                                idEntityValue = currentValue;
+                            else
+                                idEntityValue = (_e = currentValue._id) !== null && _e !== void 0 ? _e : currentValue.id;
+                            break;
+                        }
+                        case EntityValueDataTypes.VALUE:
+                        default:
+                            idEntityValue = (_f = path.idEntityValue) !== null && _f !== void 0 ? _f : 'null';
+                            break;
+                    }
+                    urlPath +=
+                        '/' + path.idEntity + (idEntityValue ? '/' + idEntityValue : '');
+                }
+                params = new URLSearchParams({});
+                for (_b = 0, _c = step.filters; _b < _c.length; _b++) {
+                    filter = _c[_b];
+                    switch (filter.type) {
+                        case EntityValueDataTypes.STEP: {
+                            currentValue = (_g = dependencyStore[filter.idStep]) === null || _g === void 0 ? void 0 : _g.value;
+                            if (currentValue) {
+                                if (typeof currentValue === 'string')
+                                    params.set(filter.idProperty, currentValue);
+                                else
+                                    params.set(filter.idProperty, (_h = currentValue._id) !== null && _h !== void 0 ? _h : currentValue.id);
+                            }
+                            else if (filter.required) {
+                                return [2 /*return*/, null];
+                            }
+                            break;
+                        }
+                        case EntityValueDataTypes.VALUE:
+                        default:
+                            params.set(filter.idProperty, filter.value);
+                            break;
+                    }
+                }
+                url = "".concat(idOrganization, "/entities/").concat(step.idEntity).concat(urlPath, "?").concat(params.toString());
+                return [4 /*yield*/, widgetInstance.get(url)];
+            case 1:
+                response = _j.sent();
+                return [2 /*return*/, response.data.filter(function (option) { var _a; return ((_a = step.options[option._id]) === null || _a === void 0 ? void 0 : _a.type) !== EntityValueOptionTypes.HIDE; })];
+        }
+    });
+}); };

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.module.css

@@ -1,12 +1,3 @@
-.container {
-    width: fit-content;
-    max-width: calc(100% - 20px);
-    display: flex;
-    padding: 10px;
-    padding-bottom: 0px;
-    padding-top: 5px;
-    margin-bottom: 0px;
-}
 .separator {
     flex-basis: 100%;
     height: 0;

package/dist/FormSteps/FileUploadStep/FileUploadStep.js

@@ -10,10 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialFileUploadStep from './MaterialFileUploadStep/MaterialFileUploadStep';
 function FileUploadStep(props) {
-    switch (props.formStyle.type) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
             return _jsx(MaterialFileUploadStep, __assign({}, props));

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.d.ts

@@ -5,7 +5,7 @@ interface FileComponentProps {
     file: FileObject | UploadedFileObject;
     formStyle: FormStyle;
     error: boolean;
-    handleRemove: Function;
+    handleRemove: () => void;
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
 }

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.js

@@ -51,7 +51,7 @@ import styles from './FileComponent.module.css';
 import ClearRoundedIcon from '@material-ui/icons/ClearRounded';
 import DescriptionRoundedIcon from '@material-ui/icons/DescriptionRounded';
 import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
-import Loader from '../../../../shared/Loader/Loader';
+import Loader from '../../../../Shared/Loader/Loader';
 import { useState } from 'react';
 function FileUploadComponent(_a) {
     var _this = this;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.module.css

@@ -42,13 +42,6 @@
     height: 26px;
     width: 26px;
 }
-.waitingForUpload {
-    height: 22px;
-    width: 22px;
-    border: 2px solid #787878;
-    border-radius: 20px;
-    margin-left: 0px;
-}
 
 .iconContainer {
     height: 30px;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -67,20 +67,26 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialFileUploadStep.module.css';
-import { Controller } from 'react-hook-form';
-import RoundedButton from '../../../shared/RoundedButton/RoundedButton';
-import { useEffect, useRef, useState } from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { getAcceptedExtensions } from '../../../constants/Files/FileExtensions';
-import { getUploadUrls, postFile } from '../../../controllers/FileService';
+import { getUploadUrls, postFile } from '../../../Services/FileService';
 import FileComponent from './FileComponent/FileComponent';
 import maxSize from '../../../constants/Files/FileMaxSize';
+import { useAppSelector } from '../../../hooks';
+import CustomContext from '../../../Contexts/CustomContext';
+import { useStepDependency } from '../../StepHooks';
 export function isUploadedFileObject(file) {
     return file.state === undefined && file.S3Key !== undefined;
 }
 function FileUploadStep(_a) {
-    var step = _a.step, errors = _a.errors, value = _a.value, domain = _a.domain, btnRef = _a.btnRef, postview = _a.postview, onChange = _a.onChange, editable = _a.editable, formStyle = _a.formStyle, clearErrors = _a.clearErrors, fetchDownloadUrl = _a.fetchDownloadUrl;
-    var _b = useState(undefined), error = _b[0], setError = _b[1];
-    var _c = useState([]), fileChange = _c[0], setFileChange = _c[1];
+    var step = _a.step, value = _a.value, btnRef = _a.btnRef, onChange = _a.onChange, editable = _a.editable, fieldError = _a.fieldError;
+    var fetchDownloadUrl = useContext(CustomContext).fetchDownloadUrl;
+    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, idOrganization = _b.idOrganization, postview = _b.postview;
+    var clearErrors = useFormContext().clearErrors;
+    var _c = useState(undefined), error = _c[0], setError = _c[1];
+    var _d = useState([]), fileChange = _d[0], setFileChange = _d[1];
     var inputRef = useRef();
     useEffect(function () {
         var filesToFetchLink = [];
@@ -133,7 +139,7 @@ function FileUploadStep(_a) {
                 switch (_a.label) {
                     case 0:
                         _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, getUploadUrls(pFiles.map(function (file) { return file.file; }), domain)];
+                        return [4 /*yield*/, getUploadUrls(pFiles.map(function (file) { return file.file; }), idOrganization)];
                     case 1:
                         fileLinks_1 = _a.sent();
                         errorsExt_1 = [];
@@ -190,7 +196,7 @@ function FileUploadStep(_a) {
         });
     }
     var calcErrorMsg = function () {
-        if (!!errors[step.id]) {
+        if (fieldError) {
             var errNum = value.filter(function (val) { return val.state === 'ERROR'; }).length;
             if (errNum === 1) {
                 return 'Este archivo no es válido';
@@ -204,8 +210,7 @@ function FileUploadStep(_a) {
         }
         return '';
     };
-    return (_jsxs("div", __assign({ className: styles.container +
-            (error || !!errors[step.id] ? ' EF-error' : ''), style: editable == false || postview
+    return (_jsxs("div", __assign({ className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: editable == false || postview
             ? {}
             : {
                 minHeight: '100px',
@@ -235,7 +240,7 @@ function FileUploadStep(_a) {
                         }
                         inputRef.current.value = '';
                     }
-                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: styles.hiddenInput }), _jsx(RoundedButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: 'hidden-input' }), _jsx(RoundedButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 var input = inputRef.current;
                                 if (input !== null) {
@@ -244,7 +249,7 @@ function FileUploadStep(_a) {
                                     input.click();
                                 }
                             }
-                        } })] })), _jsx("div", __assign({ className: styles.filesContainer }, { children: value.map(function (file, index) { return (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!errors[step.id] &&
+                        } })] })), _jsx("div", __assign({ className: styles.filesContainer }, { children: value.map(function (file, index) { return (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!fieldError &&
                         file.state !== 'DONE') ||
                         file.state === 'ERROR', handleRemove: function () {
                         if (value.filter(function (val) {
@@ -261,15 +266,24 @@ function FileUploadStep(_a) {
                     }, fetchDownloadUrl: fetchDownloadUrl }, index)); }) })), _jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: error !== null && error !== void 0 ? error : calcErrorMsg() }))] })));
 }
 function UploadStepComponent(props) {
-    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: [], rules: {
+    var step = props.step;
+    var _a = useStepDependency(step), handleStepDep = _a.handleStepDep, originalValue = _a.originalValue;
+    var _b = useController({
+        name: step.id,
+        rules: {
             validate: function (array) {
                 return ((props.step.required && array.length > 0) ||
                     !props.step.required) &&
                     array.find(function (file) { return !file.S3Key; }) === undefined;
             },
-        }, shouldUnregister: true, render: function (_a) {
-            var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
-            return (_jsx(FileUploadStep, __assign({}, props, field, { btnRef: ref })));
-        } }));
+        },
+        shouldUnregister: true,
+        defaultValue: originalValue,
+    }), _c = _b.field, ref = _c.ref, field = __rest(_c, ["ref"]), error = _b.fieldState.error;
+    var onChange = useCallback(function (value) {
+        handleStepDep(value);
+        field.onChange(value);
+    }, [handleStepDep, field]);
+    return (_jsx(FileUploadStep, __assign({}, props, field, { btnRef: ref, fieldError: error, onChange: onChange })));
 }
 export default UploadStepComponent;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.module.css

@@ -50,10 +50,3 @@
 .filesContainer {
     padding-top: 5px;
 }
-
-.hiddenInput {
-    height: 0;
-    width: 0;
-    padding: 0;
-    border-width: 0;
-}

package/dist/FormSteps/MapperStep/MapperStep.d.ts

@@ -8,10 +8,10 @@ interface CustomMapperElementModifiers<Type> {
 export interface MapperStepProps<Type> extends StepProps {
     /** The MapperStep to display */
     step: Mapper;
-    customAdd?: JSX.Element;
+    customAdd?: (ref: React.RefObject<HTMLDivElement>, disabled: boolean, handleAddElement: (value?: any) => void) => JSX.Element;
     customElementRender?: (element: MapperElement<Type>, index: number, renderElement: (renderElementButtons?: (element: MapperElement<any>) => JSX.Element) => JSX.Element) => JSX.Element;
     customElementModifiers?: CustomMapperElementModifiers<Type>;
     calcCustomStepProps?: (element: MapperElement<Type>, customStepProps: Record<string, any>) => Record<string, any>;
 }
-declare function MapperStep<Type>({ step, formStyle, ...others }: MapperStepProps<Type>): JSX.Element;
+declare function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element;
 export default MapperStep;

package/dist/FormSteps/MapperStep/MapperStep.js

@@ -9,26 +9,16 @@ var __assign = (this && this.__assign) || function () {
     };
     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 } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialMapperStep from './MaterialMapperStep/MaterialMapperStep';
-function MapperStep(_a) {
-    var step = _a.step, formStyle = _a.formStyle, others = __rest(_a, ["step", "formStyle"]);
+import { useAppSelector } from '../../hooks';
+function MapperStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return (_jsx(MaterialMapperStep, __assign({ step: step, formStyle: formStyle }, others)));
+            return _jsx(MaterialMapperStep, __assign({}, props));
         }
     }
 }

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.d.ts

@@ -1,13 +1,5 @@
 /// <reference types="react" />
 import { MapperStepProps } from '../../../MapperStep';
 import { MapperElementComponentProps } from '../MapperElement';
-declare function ListMapperElement<Type = any>({ step, form, num, loading, element, children, editable, postview, formStyle, handleDelete, widthStats, customElementModifiers, }: MapperStepProps<Type> & MapperElementComponentProps<Type> & {
-    num: number;
-    formStyle: {
-        textColor: string;
-    };
-    handleDelete?: Function;
-    /** children to render */
-    children?: any;
-}): JSX.Element;
+declare function ListMapperElement<Type = any>({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
 export default ListMapperElement;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.js

@@ -10,12 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
 import styles from './ListMapperElement.module.css';
 import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import FormContext from '../../../../../Contexts/FormContext';
+import { useAppSelector } from '../../../../../hooks';
 function ListMapperElement(_a) {
     var _b, _c;
-    var step = _a.step, form = _a.form, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, handleDelete = _a.handleDelete, widthStats = _a.widthStats, customElementModifiers = _a.customElementModifiers;
-    var size = form.size;
+    var step = _a.step, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, handleDelete = _a.handleDelete, customElementModifiers = _a.customElementModifiers;
+    var size = useContext(FormContext).size;
+    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
     var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
     var name = calcName
         ? calcName(element)

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElement.d.ts

@@ -1,11 +1,12 @@
-/// <reference types="react" />
 import { MapperStepProps } from '../../MapperStep';
 import { MapperElement } from '../MaterialMapperStep';
+import React from 'react';
 export interface MapperElementComponentProps<Type> {
     num: number;
     loading: boolean;
     element: MapperElement<Type>;
-    handleDelete: Function;
+    handleDelete: () => void;
+    children?: React.ReactNode;
 }
 declare function MapperElementComponent<Type = any>(props: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
 export default MapperElementComponent;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElement.js

@@ -15,22 +15,30 @@ import StepComponent from '../../../Step';
 import { MapperStyleTypes } from '../../../../constants/FormStepTypes';
 import ListMapperElement from './ListMapperElement/ListMapperElement';
 import PillMapperElement from './PillMapperElement/PillMapperElement';
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
+import FormContext from '../../../../Contexts/FormContext';
+import CustomContext from '../../../../Contexts/CustomContext';
 function MapperElementComponent(props) {
-    var _a, _b, _c;
-    var level = props.level, form = props.form, step = props.step, element = props.element, editable = props.editable;
+    var _a;
+    var level = props.level, step = props.step, element = props.element, editable = props.editable;
+    var customContext = useContext(CustomContext);
+    var form = useContext(FormContext);
     if (element.deleted) {
         return _jsx("div", {});
     }
-    var customStepProps = (_b = (_a = props.calcCustomStepProps) === null || _a === void 0 ? void 0 : _a.call(props, element, props.customStepProps)) !== null && _b !== void 0 ? _b : props.customStepProps;
+    var nestedCustomContext = useMemo(function () {
+        if (!props.calcCustomStepProps)
+            return customContext;
+        return __assign(__assign({}, customContext), { customStepProps: props.calcCustomStepProps(element, customContext.customStepProps) });
+    }, [element, customContext]);
     var mapSubSteps = function () {
-        return step.rootSteps.map(function (idSubStep) {
-            var _a;
-            var subStep = form.steps[element.ids[idSubStep]];
-            return (_createElement(StepComponent, __assign({}, props, { customStepProps: customStepProps, globalEditable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: element.ids[idSubStep], level: level + 1 })));
-        });
+        return (_jsx(CustomContext.Provider, __assign({ value: nestedCustomContext }, { children: step.rootSteps.map(function (idSubStep) {
+                var _a;
+                var subStep = form.steps[element.ids[idSubStep]];
+                return (_createElement(StepComponent, __assign({}, props, { editable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: element.ids[idSubStep], level: level + 1 })));
+            }) })));
     };
-    switch ((_c = step.style) === null || _c === void 0 ? void 0 : _c.type) {
+    switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
         case MapperStyleTypes.INLINE:
             return _jsx(React.Fragment, { children: mapSubSteps() });
         case MapperStyleTypes.LIST:

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.d.ts

@@ -1,13 +1,5 @@
 /// <reference types="react" />
 import { MapperStepProps } from '../../../MapperStep';
 import { MapperElementComponentProps } from '../MapperElement';
-declare function PillMapperElement<Type = any>({ step, form, num, loading, element, children, editable, postview, formStyle, handleDelete, widthStats, customElementModifiers, customElementRender, }: MapperStepProps<Type> & MapperElementComponentProps<Type> & {
-    num: number;
-    formStyle: {
-        textColor: string;
-    };
-    handleDelete?: Function;
-    /** children to render */
-    children?: any;
-}): JSX.Element;
+declare function PillMapperElement<Type = any>({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
 export default PillMapperElement;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.js

@@ -10,13 +10,18 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
 import styles from './PillMapperElement.module.css';
 import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import FormContext from '../../../../../Contexts/FormContext';
+import { useAppSelector } from '../../../../../hooks';
 function PillMapperElement(_a) {
     var _b;
-    var step = _a.step, form = _a.form, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, handleDelete = _a.handleDelete, widthStats = _a.widthStats, customElementModifiers = _a.customElementModifiers, customElementRender = _a.customElementRender;
+    var step = _a.step, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, handleDelete = _a.handleDelete, customElementModifiers = _a.customElementModifiers, customElementRender = _a.customElementRender;
     var deletable = (_b = step.deletable) !== null && _b !== void 0 ? _b : true;
-    var size = form.size;
+    var size = useContext(FormContext).size;
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
     var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
     var name = calcName
         ? calcName(element)

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts

@@ -8,7 +8,7 @@ export interface MapperElement<Type> {
     originalValues: Record<string, any>;
     isOriginal: boolean;
 }
-export declare function ElementsComponent<Type = any>({ step, form, errors, inputRef, editable, postview, elements, formStyle, customAdd, loading, dependencyStore, setDependencyStore, ...others }: MapperStepProps<Type> & {
+export declare function ElementsComponent<Type = any>({ step, inputRef, editable, elements, customAdd, loading, ...others }: MapperStepProps<Type> & {
     loading?: boolean;
     onChange: (elements: MapperElement<Type>[]) => void;
     elements: MapperElement<Type>[];