@arquimedes.co/eureka-forms 2.0.99 → 3.0.0-refactor

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

@@ -1,63 +1,7 @@
-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 __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 styles from './MaterialFileUploadStep.module.css';
 import { useFormContext } from 'react-hook-form';
-import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
+import ErkButton from '../../../Shared/ErkButton/ErkButton';
 import { useContext, useEffect, useRef, useState } from 'react';
 import { getAcceptedExtensions } from '../../../constants/Files/FileExtensions';
 import { getUploadUrls, postFile } from '../../../Services/FileService';
@@ -66,45 +10,37 @@ import maxSize from '../../../constants/Files/FileMaxSize';
 import { useAppSelector } from '../../../hooks';
 import CustomContext from '../../../Contexts/CustomContext';
 import { useFormStep } from '../../StepHooks';
-export function isUploadedFileObject(file) {
-    return file.state === undefined && file.S3Key !== undefined;
-}
-function FileUploadStep(_a) {
-    var step = _a.step, editable = _a.editable;
-    var _b = useFormStep(step, {
+function FileUploadStep({ step, editable }) {
+    const { ref, value, onChange, error: fieldError, } = useFormStep(step, {
         defaultValue: [],
         rules: {
-            validate: function (array) {
-                return ((step.required && array.length > 0) || !step.required) &&
-                    array.find(function (file) { return !file.S3Key; }) === undefined;
-            },
+            validate: (array) => ((step.required && array.length > 0) || !step.required) &&
+                array.find((file) => !file.S3Key) === undefined,
         },
-    }), ref = _b.ref, value = _b.value, onChange = _b.onChange, fieldError = _b.error;
-    var fetchDownloadUrl = useContext(CustomContext).fetchDownloadUrl;
-    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, idOrganization = _c.idOrganization, postview = _c.postview;
-    var clearErrors = useFormContext().clearErrors;
-    var _d = useState(undefined), error = _d[0], setError = _d[1];
-    var _e = useState([]), fileChange = _e[0], setFileChange = _e[1];
-    var inputRef = useRef();
-    useEffect(function () {
-        var filesToFetchLink = [];
-        var filesChanged = [];
-        for (var _i = 0, fileChange_1 = fileChange; _i < fileChange_1.length; _i++) {
-            var file = fileChange_1[_i];
+    });
+    const { fetchDownloadUrl } = useContext(CustomContext);
+    const { formStyle, idOrganization, postview } = useAppSelector((state) => state.global);
+    const { clearErrors } = useFormContext();
+    const [error, setError] = useState(undefined);
+    const [fileChange, setFileChange] = useState([]);
+    const inputRef = useRef();
+    useEffect(() => {
+        const filesToFetchLink = [];
+        const filesChanged = [];
+        for (const file of fileChange) {
             if (file.state === 'STARTING') {
                 filesToFetchLink.push(file);
             }
             if (file.state === 'UPLOADING') {
-                uploadFile(file);
+                void uploadFile(file);
                 filesChanged.push(file);
             }
-            if (file.state === 'DONE' ||
-                file.state === 'ERROR') {
+            if (file.state === 'DONE' || file.state === 'ERROR') {
                 filesChanged.push(file);
             }
             if (file.state === 'CANCEL') {
-                var newValue = __spreadArray([], value, true);
-                for (var i = 0; i < value.length; i++) {
+                const newValue = [...value];
+                for (let i = 0; i < value.length; i++) {
                     if (value[i].file === file.file) {
                         newValue.splice(i, 1);
                         break;
@@ -114,10 +50,9 @@ function FileUploadStep(_a) {
             }
         }
         if (filesChanged.length > 0) {
-            var newValue = __spreadArray([], value, true);
-            for (var _a = 0, filesChanged_1 = filesChanged; _a < filesChanged_1.length; _a++) {
-                var file = filesChanged_1[_a];
-                for (var i = 0; i < value.length; i++) {
+            const newValue = [...value];
+            for (const file of filesChanged) {
+                for (let i = 0; i < value.length; i++) {
                     if (value[i].file === file.file) {
                         newValue[i] = file;
                     }
@@ -126,76 +61,54 @@ function FileUploadStep(_a) {
             onChange(newValue);
         }
         if (filesToFetchLink.length > 0) {
-            getLinks(filesToFetchLink);
-            onChange(__spreadArray(__spreadArray([], value, true), filesToFetchLink, true));
+            void getLinks(filesToFetchLink);
+            onChange([...value, ...filesToFetchLink]);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fileChange]);
-    function getLinks(pFiles) {
-        return __awaiter(this, void 0, void 0, function () {
-            var fileLinks_1, errorsExt_1, error_1;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, getUploadUrls(pFiles.map(function (file) { return file.file; }), idOrganization)];
-                    case 1:
-                        fileLinks_1 = _a.sent();
-                        errorsExt_1 = [];
-                        setFileChange(pFiles.map(function (file, index) {
-                            var _a;
-                            if (fileLinks_1[index] === 'ERROR:INVALIDEXTENSION') {
-                                errorsExt_1.push((_a = file.file.name.split('.').pop()) !== null && _a !== void 0 ? _a : '');
-                                return __assign(__assign({}, file), { state: 'ERROR' });
-                            }
-                            else {
-                                return __assign(__assign({}, file), { state: 'UPLOADING', postInfo: fileLinks_1[index] });
-                            }
-                        }));
-                        if (errorsExt_1.length === 1) {
-                            setError('La extención .' + errorsExt_1[0] + ' no es válida');
-                        }
-                        else if (errorsExt_1.length > 1) {
-                            setError('Las extenciónes .' +
-                                errorsExt_1.join(',.') +
-                                ' no son válidas');
-                        }
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_1 = _a.sent();
-                        console.error(error_1);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
+    async function getLinks(pFiles) {
+        try {
+            const fileLinks = await getUploadUrls(pFiles.map((file) => file.file), idOrganization);
+            const errorsExt = [];
+            setFileChange(pFiles.map((file, index) => {
+                if (fileLinks[index] === 'ERROR:INVALIDEXTENSION') {
+                    errorsExt.push(file.file.name.split('.').pop() ?? '');
+                    return { ...file, state: 'ERROR' };
                 }
-            });
-        });
-    }
-    function uploadFile(pFile) {
-        return __awaiter(this, void 0, void 0, function () {
-            var resp, error_2;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, Promise.all([
-                                postFile(pFile.file, pFile.postInfo),
-                                new Promise(function (resolve) { return setTimeout(resolve, 1000); }),
-                            ])];
-                    case 1:
-                        resp = _a.sent();
-                        setFileChange([__assign(__assign(__assign({}, pFile), { state: 'DONE' }), resp[0])]);
-                        return [3 /*break*/, 3];
-                    case 2:
-                        error_2 = _a.sent();
-                        console.error(error_2);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
+                else {
+                    return {
+                        ...file,
+                        state: 'UPLOADING',
+                        postInfo: fileLinks[index],
+                    };
                 }
-            });
-        });
+            }));
+            if (errorsExt.length === 1) {
+                setError('La extención .' + errorsExt[0] + ' no es válida');
+            }
+            else if (errorsExt.length > 1) {
+                setError('Las extenciónes .' + errorsExt.join(',.') + ' no son válidas');
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    async function uploadFile(pFile) {
+        try {
+            const resp = await Promise.all([
+                postFile(pFile.file, pFile.postInfo),
+                new Promise((resolve) => setTimeout(resolve, 1000)),
+            ]);
+            setFileChange([{ ...pFile, state: 'DONE', ...resp[0] }]);
+        }
+        catch (error) {
+            console.error(error);
+        }
     }
-    var calcErrorMsg = function () {
+    const calcErrorMsg = () => {
         if (fieldError) {
-            var errNum = value.filter(function (val) { return val.state === 'ERROR'; }).length;
+            const errNum = value.filter((val) => val.state === 'ERROR').length;
             if (errNum === 1) {
                 return 'Este archivo no es válido';
             }
@@ -208,55 +121,48 @@ function FileUploadStep(_a) {
         }
         return '';
     };
-    return (_jsxs("div", __assign({ className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: {
+    return (_jsxs("div", { className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: {
             minHeight: editable === false || postview ? undefined : '100px',
-        }, "data-testid": step.id }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label })), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }))), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
-                    var files = e.target.files;
+        }, "data-testid": step.id, children: [_jsx("div", { className: styles.labelLabel, children: step.label }), step.description && (_jsx("div", { className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor }, children: step.description })), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: (e) => {
+                    const files = e.target.files;
                     if (files) {
-                        var filesArray = Array.from(files);
-                        var maxFiles = filesArray.filter(function (file) { return file.size > maxSize; });
+                        const filesArray = Array.from(files);
+                        const maxFiles = filesArray.filter((file) => file.size > maxSize);
                         if (maxFiles.length > 0) {
                             setError('El tamaño máximo de carga es de 30Mb.');
                         }
                         else {
                             setFileChange(filesArray
-                                .filter(function (file) {
-                                return value.find(function (val) {
-                                    return val.file ===
-                                        file;
-                                }) === undefined;
-                            })
-                                .map(function (file) {
-                                return ({
-                                    state: 'STARTING',
-                                    file: file,
-                                    postInfo: null,
-                                });
-                            }));
+                                .filter((file) => value.find((val) => val.file === file) === undefined)
+                                .map((file) => ({
+                                state: 'STARTING',
+                                file,
+                                postInfo: null,
+                            })));
                         }
                         inputRef.current.value = '';
                     }
-                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: ref, 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 () {
+                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
                             if (editable && !postview) {
-                                var input = inputRef.current;
+                                const input = inputRef.current;
                                 if (input !== null) {
                                     clearErrors(step.id);
                                     setError(undefined);
                                     input.click();
                                 }
                             }
-                        } })] })), _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', editable: editable && !postview, handleRemove: function () {
-                        if (value.filter(function (val) {
-                            return val.state === 'ERROR';
-                        }).length === 1) {
+                        } })] }), _jsx("div", { className: styles.filesContainer, children: value.map((file, index) => (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!fieldError && file.state !== 'DONE') ||
+                        file.state === 'ERROR', editable: editable && !postview, handleRemove: () => {
+                        if (value.filter((val) => val.state === 'ERROR').length === 1) {
                             clearErrors(step.id);
                             setError(undefined);
                         }
                         setFileChange([
-                            __assign(__assign({}, file), { state: 'CANCEL' }),
+                            {
+                                ...file,
+                                state: 'CANCEL',
+                            },
                         ]);
-                    }, fetchDownloadUrl: fetchDownloadUrl }, index)); }) })), _jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: error !== null && error !== void 0 ? error : calcErrorMsg() }))] })));
+                    }, fetchDownloadUrl: fetchDownloadUrl }, index))) }), _jsx("div", { className: styles.errorMsg, style: { color: formStyle.errorColor }, children: error ?? calcErrorMsg() })] }));
 }
 export default FileUploadStep;

package/dist/FormSteps/MapperStep/MapperStep.js

@@ -1,24 +1,13 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialMapperStep from './MaterialMapperStep/MaterialMapperStep';
 import { useAppSelector } from '../../hooks';
 function MapperStep(props) {
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    const { formStyle } = useAppSelector((state) => state.global);
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialMapperStep, __assign({}, props));
+            return _jsx(MaterialMapperStep, { ...props });
         }
     }
 }

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

@@ -1,52 +1,30 @@
-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);
-};
 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, 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)
-        : step.unitLabel
-            ? step.unitLabel + ' ' + (num + 1)
-            : '';
-    return (_jsxs("div", __assign({ className: widthStats.isMobile ? styles.mobileContainer : styles.container }, { children: [_jsx("div", __assign({ className: styles.bulletContainer, style: {
+import DeleteIcon from '../../../../../Icons/DeleteIcon';
+function ListMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, }) {
+    const { size } = useContext(FormContext);
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const { calcName } = customElementModifiers ?? {};
+    const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
+    return (_jsxs("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, children: [_jsx("div", { className: styles.bulletContainer, style: {
                     height: name ? 28 : 40,
-                } }, { children: _jsx("div", { className: styles.bullet, style: {
+                }, children: _jsx("div", { className: styles.bullet, style: {
                         backgroundColor: formStyle.outlineColor,
                         borderColor: formStyle.descriptionTextColor,
-                    } }) })), _jsxs("div", __assign({ className: styles.contentContainer, style: {
-                    width: (size.blockSize + size.spacingSize) *
-                        ((_c = (_b = step.style) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : size.blockNum - 1),
-                } }, { children: [name && (_jsxs("div", __assign({ className: styles.title, style: { color: formStyle.textColor } }, { children: [(name || loading) && (_jsx("label", __assign({ className: styles.titleLbl }, { children: loading ? 'Cargando...' : name + ':' }))), step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
-                                    ? styles.disabledDeleteBtn
-                                    : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
+                    } }) }), _jsxs("div", { className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
+                }, children: [name && (_jsxs("div", { className: styles.title, style: { color: formStyle.textColor }, children: [(name || loading) && (_jsx("label", { className: styles.titleLbl, children: loading ? 'Cargando...' : name + ':' })), step.deletable !== false && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
                                     if (editable && !postview) {
-                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                                        handleDelete?.();
                                     }
-                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] }))), children] })), !name && step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
-                    ? styles.disabledDeleteBtn
-                    : styles.deleteBtn, style: { color: formStyle.textColor, marginTop: 7 }, onClick: function () {
+                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] })), children] }), !name && step.deletable !== false && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor, marginTop: 7 }, onClick: () => {
                     if (editable && !postview) {
-                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                        handleDelete?.();
                     }
-                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })));
+                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }));
 }
 export default ListMapperElement;

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

@@ -1,16 +1,5 @@
-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);
-};
 import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import StepComponent from '../../../Step';
 import { MapperStyleTypes } from '../../../../constants/FormStepTypes';
 import ListMapperElement from './ListMapperElement/ListMapperElement';
@@ -20,35 +9,36 @@ import FormContext from '../../../../Contexts/FormContext';
 import CustomContext from '../../../../Contexts/CustomContext';
 import PagedMapperElement from './PagedMapperElement/PagedMapperElement';
 function MapperElementComponent(props) {
-    var _a;
-    var step = props.step, element = props.element, editable = props.editable;
-    var customContext = useContext(CustomContext);
-    var form = useContext(FormContext);
-    if (element.deleted) {
-        return _jsx("div", {});
-    }
-    var nestedCustomContext = useMemo(function () {
+    const { step, element, editable } = props;
+    const customContext = useContext(CustomContext);
+    const form = useContext(FormContext);
+    const nestedCustomContext = useMemo(() => {
         if (!props.calcCustomStepProps)
             return customContext;
-        return __assign(__assign({}, customContext), { customStepProps: props.calcCustomStepProps(element, customContext.customStepProps) });
+        return {
+            ...customContext,
+            customStepProps: props.calcCustomStepProps(element, customContext.customStepProps),
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [element, customContext]);
-    var mapSubSteps = function () {
-        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] })));
-            }) })));
+    if (element.deleted)
+        return _jsx(_Fragment, {});
+    const mapSubSteps = () => {
+        return (_jsx(CustomContext.Provider, { value: nestedCustomContext, children: step.rootSteps.map((idSubStep) => {
+                const subStep = form.steps[element.ids[idSubStep]];
+                return (_createElement(StepComponent, { ...props, editable: editable ? (step.editable ?? true) : false, step: subStep, key: element.ids[idSubStep] }));
+            }) }));
     };
-    switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
+    switch (step.style?.type) {
         case MapperStyleTypes.INLINE:
             return _jsx(React.Fragment, { children: mapSubSteps() });
         case MapperStyleTypes.LIST:
-            return (_jsx(ListMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
+            return (_jsx(ListMapperElement, { ...props, step: step, children: mapSubSteps() }));
         case MapperStyleTypes.PAGED:
-            return (_jsx(PagedMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
+            return (_jsx(PagedMapperElement, { ...props, step: step, children: mapSubSteps() }));
         case MapperStyleTypes.PILL:
         default:
-            return (_jsx(PillMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
+            return (_jsx(PillMapperElement, { ...props, step: step, children: mapSubSteps() }));
     }
 }
 export default MapperElementComponent;