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

package/dist/FormSteps/StepHooks.js

@@ -1,139 +1,99 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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 { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useAppSelector, useAppDispatch } from '../hooks';
-import { clearDependency, setStepDependency, } from '../States/SiteSlice';
+import { clearDependency, setStepDependency } from '../States/SiteSlice';
 import { createSelector } from '@reduxjs/toolkit';
 import { calcDefaultValue, evaluateCondition } from './StepFunctions';
-import { useController, } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import { SizeChangeContext } from './Utils/@StepFiller/StepFiller';
 import ConditionTypes from '../constants/ConditionTypes';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueOptionTypes, } from '../constants/FormStepTypes';
-var selectIsDependency = createSelector([
-    function (state) { return state.site.dependencies; },
-    function (state, step) { return step; },
-], function (dependencies, step) {
+const selectIsDependency = createSelector([
+    (state) => state.site.dependencies,
+    (_state, step) => step,
+], (dependencies, step) => {
     return dependencies[step.id] !== undefined;
 });
-export var selectOriginalValue = createSelector([
-    function (state) { return state.site.values; },
-    function (state, step) { return step; },
-], function (values, step) { var _a; return (_a = values.sections[step.idSection]) === null || _a === void 0 ? void 0 : _a[step.id]; });
-export var useStepDependency = function (step, defaultValue) {
-    var _a;
-    var isDependency = useAppSelector(function (state) {
-        return selectIsDependency(state, step);
-    });
-    var originalValue = useAppSelector(function (state) {
-        return selectOriginalValue(state, step);
-    });
-    var dispatch = useAppDispatch();
-    useEffect(function () {
+export const selectOriginalValue = createSelector([(state) => state.site.values, (_state, step) => step], (values, step) => values.sections[step?.idSection]?.[step?.id]);
+export const useStepDependency = (step, defaultValue) => {
+    const isDependency = useAppSelector((state) => selectIsDependency(state, step));
+    const originalValue = useAppSelector((state) => selectOriginalValue(state, step));
+    const dispatch = useAppDispatch();
+    useEffect(() => {
         if (isDependency && !originalValue && defaultValue) {
             dispatch(setStepDependency({
-                step: step,
+                step,
                 value: defaultValue,
             }));
         }
-        return function () {
+        return () => {
             dispatch(clearDependency(step));
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isDependency]);
-    var handleStepDep = useCallback(function (value) {
+    const handleStepDep = useCallback((value) => {
         if (!isDependency)
             return;
         dispatch(setStepDependency({
-            step: step,
-            value: value !== null && value !== void 0 ? value : null,
+            step,
+            value: value ?? null,
         }));
-    }, [step.id, step.type, isDependency]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [step.id, step.type, isDependency]);
     return {
-        handleStepDep: handleStepDep,
-        isDependency: isDependency,
-        originalValue: (_a = originalValue !== null && originalValue !== void 0 ? originalValue : defaultValue) !== null && _a !== void 0 ? _a : calcDefaultValue(step),
+        handleStepDep,
+        isDependency,
+        originalValue: originalValue ?? defaultValue ?? calcDefaultValue(step),
     };
 };
-export var selectStepDependencies = createSelector([
-    function (state) { return state.site.dependencies; },
-    function (state, step) { return step; },
-    function (state, step, form) { return form; },
-], function (dependencies, step, form) {
-    var invalids = [];
-    var emptyDep = false;
+export const selectStepDependencies = createSelector([
+    (state) => state.site.dependencies,
+    (_state, step) => step,
+    (_state, _step, form) => form,
+], (dependencies, step, form) => {
+    const invalids = [];
+    let emptyDep = false;
     /** Show deep error changes even if not in dependencies */
-    for (var _i = 0, _a = calcDeepDependencies(step.id, form); _i < _a.length; _i++) {
-        var idDep = _a[_i];
-        var dependency = dependencies[idDep];
-        if ((dependency === null || dependency === void 0 ? void 0 : dependency.value) === null && form.steps[idDep]) {
+    for (const idDep of calcDeepDependencies(step.id, form)) {
+        const dependency = dependencies[idDep];
+        if (dependency?.value === null && form.steps[idDep]) {
             invalids.push(idDep);
         }
-        if (dependency === null || dependency === void 0 ? void 0 : dependency.empty)
+        if (dependency?.empty)
             emptyDep = true;
     }
-    return { invalids: invalids, emptyDep: emptyDep };
+    return { invalids, emptyDep };
 });
-var calcDeepDependencies = function (idStep, form, deps) {
-    if (deps === void 0) { deps = []; }
-    var step = form.steps[idStep];
-    if (step === null || step === void 0 ? void 0 : step.dependencies) {
-        for (var _i = 0, _a = step.dependencies; _i < _a.length; _i++) {
-            var dep = _a[_i];
+const calcDeepDependencies = (idStep, form, deps = []) => {
+    const step = form.steps[idStep];
+    if (step?.dependencies) {
+        for (const dep of step.dependencies) {
             if (!deps.includes(dep)) {
-                deps.push.apply(deps, __spreadArray(__spreadArray([], calcDeepDependencies(dep, form, deps), false), [dep], false));
+                deps.push(...calcDeepDependencies(dep, form, deps), dep);
             }
         }
     }
     return deps;
 };
-export var useFormStep = function (step, _a) {
-    var rules = _a.rules, debounce = _a.debounce, sizeChange = _a.sizeChange, defaultValue = _a.defaultValue;
-    var _b = useState(), timer = _b[0], setTimer = _b[1];
-    var _c = useStepDependency(step, defaultValue), isDependency = _c.isDependency, handleStepDep = _c.handleStepDep, originalValue = _c.originalValue;
-    var _d = useController({
+export const useFormStep = (step, { rules, debounce, sizeChange, defaultValue }) => {
+    const [timer, setTimer] = useState();
+    const { isDependency, handleStepDep, originalValue } = useStepDependency(step, defaultValue);
+    const { field: { ref, value, onChange: fieldOnChange, ...field }, fieldState: { error }, } = useController({
         name: step.id,
-        rules: rules,
+        rules,
         shouldUnregister: true,
         defaultValue: originalValue,
-    }), _e = _d.field, ref = _e.ref, value = _e.value, fieldOnChange = _e.onChange, field = __rest(_e, ["ref", "value", "onChange"]), error = _d.fieldState.error;
-    var handleSizeChange = useContext(SizeChangeContext);
-    var onChange = useCallback(function (value) {
+    });
+    const handleSizeChange = useContext(SizeChangeContext);
+    const onChange = useCallback((value) => {
         if (isDependency) {
             if (debounce) {
                 try {
                     clearTimeout(timer);
-                    // eslint-disable-next-line no-empty
+                    // eslint-disable-next-line no-empty, @typescript-eslint/no-unused-vars
                 }
                 catch (e) { }
-                setTimer(setTimeout(function () {
+                setTimer(setTimeout(() => {
                     handleStepDep(value);
                     setTimer(undefined);
                 }, 1000));
@@ -144,88 +104,78 @@ export var useFormStep = function (step, _a) {
         }
         fieldOnChange(value);
         if (sizeChange)
-            handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
-    }, [handleStepDep, isDependency, fieldOnChange]);
+            handleSizeChange?.();
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleStepDep, isDependency, fieldOnChange]);
     return {
-        ref: ref,
-        value: value,
-        onChange: onChange,
-        error: error,
-        field: field,
+        ref,
+        value,
+        onChange,
+        error,
+        field,
     };
 };
-var EMPTY_ARRAY = [];
-export var selectDependencies = createSelector([
-    function (state) { return state.site.dependencies; },
-    function (state, idDeps) {
-        return idDeps !== null && idDeps !== void 0 ? idDeps : EMPTY_ARRAY;
-    },
-], function (dependencies, idDeps) {
-    return idDeps.reduce(function (acc, idDep) {
-        var _a;
-        return (__assign(__assign({}, acc), (_a = {}, _a[idDep] = dependencies[idDep], _a)));
-    }, {});
-});
-export var useCondition = function (condition) {
-    var ids = useMemo(function () { return recursivelyCalcConditionSteps(condition); }, []);
-    var dependencies = useAppSelector(function (state) {
-        return selectDependencies(state, ids);
-    });
-    return useMemo(function () {
+const EMPTY_ARRAY = [];
+export const selectDependencies = createSelector([
+    (state) => state.site.dependencies,
+    (_state, idDeps) => idDeps ?? EMPTY_ARRAY,
+], (dependencies, idDeps) => idDeps.reduce((acc, idDep) => ({
+    ...acc,
+    [idDep]: dependencies[idDep],
+}), {}));
+export const useCondition = (condition) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const ids = useMemo(() => recursivelyCalcConditionSteps(condition), []);
+    const dependencies = useAppSelector((state) => selectDependencies(state, ids));
+    return useMemo(() => {
         return !condition || evaluateCondition(condition, dependencies);
-    }, ids.map(function (id) { return dependencies[id].value; }));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ids.map((id) => dependencies[id].value));
 };
-export var calcStepDeps = function (step) {
-    var _a;
-    var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
+export const calcStepDeps = (step) => {
+    const dependencies = [...(step.dependencies ?? [])];
     if (step.condition) {
-        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(step.condition));
+        dependencies.push(...recursivelyCalcConditionSteps(step.condition));
     }
     switch (step.type) {
         case FormStepTypes.CLASSIFIER_SELECTOR:
             {
-                for (var _i = 0, _b = Object.values(step.options); _i < _b.length; _i++) {
-                    var option = _b[_i];
-                    if (option.type !== ClassifierOptionTypes.HIDE &&
-                        option.condition) {
-                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                for (const option of Object.values(step.options)) {
+                    if (option.type !== ClassifierOptionTypes.HIDE && option.condition) {
+                        dependencies.push(...recursivelyCalcConditionSteps(option.condition));
                     }
                 }
             }
             break;
         case FormStepTypes.ENTITYVALUEPICKER:
             {
-                for (var _c = 0, _d = Object.values(step.options); _c < _d.length; _c++) {
-                    var option = _d[_c];
-                    if (option.type !== EntityValueOptionTypes.HIDE &&
-                        option.condition) {
-                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                for (const option of Object.values(step.options)) {
+                    if (option.type !== EntityValueOptionTypes.HIDE && option.condition) {
+                        dependencies.push(...recursivelyCalcConditionSteps(option.condition));
                     }
                 }
                 if (step.dialogs)
-                    for (var _e = 0, _f = Object.values(step.dialogs); _e < _f.length; _e++) {
-                        var dialog = _f[_e];
-                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(dialog.condition));
+                    for (const dialog of Object.values(step.dialogs)) {
+                        dependencies.push(...recursivelyCalcConditionSteps(dialog.condition));
                     }
             }
             break;
         case FormStepTypes.API_SELECTOR:
             {
-                for (var _g = 0, _h = Object.values(step.options); _g < _h.length; _g++) {
-                    var option = _h[_g];
-                    if (option.type !== ApiSelectorOptionTypes.HIDE &&
-                        option.condition) {
-                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                for (const option of Object.values(step.options)) {
+                    if (option.type !== ApiSelectorOptionTypes.HIDE && option.condition) {
+                        dependencies.push(...recursivelyCalcConditionSteps(option.condition));
                     }
                 }
             }
             break;
         case FormStepTypes.SELECTOR:
             {
-                for (var _j = 0, _k = Object.values(step.options); _j < _k.length; _j++) {
-                    var option = _k[_j];
+                for (const option of Object.values(step.options)) {
                     if (option.condition) {
-                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                        dependencies.push(...recursivelyCalcConditionSteps(option.condition));
                     }
                 }
             }
@@ -235,14 +185,12 @@ export var calcStepDeps = function (step) {
     }
     return dependencies;
 };
-export var recursivelyCalcConditionSteps = function (condition) {
+export const recursivelyCalcConditionSteps = (condition) => {
     if (!condition)
         return [];
     switch (condition.type) {
         case ConditionTypes.EXPRESSION: {
-            return condition.conditions
-                .map(function (condition) { return recursivelyCalcConditionSteps(condition); })
-                .flat();
+            return condition.conditions.map((condition) => recursivelyCalcConditionSteps(condition)).flat();
         }
         case ConditionTypes.FORM_STEP: {
             return [condition.idStep];

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import styles from './MaterialTextAreaStep.module.css';
 import { useController } from 'react-hook-form';
@@ -27,124 +5,110 @@ import { Editor } from 'react-draft-wysiwyg'; //Load programatically only if ste
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import './DraftEditor.css';
 import { useCallback, useState } from 'react';
-import { ClickAwayListener } from '@material-ui/core';
 import { useAppSelector } from '../../../hooks';
 import { useStepDependency } from '../../StepHooks';
 import { EditorState, convertFromRaw } from 'draft-js';
 import { getRawText } from '../../../Utils/DraftFunctions';
-function TextAreaStep(_a) {
-    var _b;
-    var step = _a.step, editable = _a.editable;
-    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
-    var _d = useState(false), hovering = _d[0], setHovering = _d[1];
-    var _e = useState(false), focus = _e[0], setFocus = _e[1];
-    var _f = useState(), timer = _f[0], setTimer = _f[1];
-    var _g = useStepDependency(step, getRawText()), handleStepDep = _g.handleStepDep, originalValue = _g.originalValue, isDependency = _g.isDependency;
-    var _h = useController({
+import { ClickAwayListener } from '@mui/material';
+function TextAreaStep({ step, editable }) {
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const [hovering, setHovering] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [timer, setTimer] = useState();
+    const { handleStepDep, originalValue, isDependency } = useStepDependency(step, getRawText());
+    const { field: { ref, onChange, ...field }, fieldState: { error }, } = useController({
         name: step.id,
         shouldUnregister: true,
         rules: step.required
             ? {
-                validate: function (editorState) {
-                    return editorState.getCurrentContent().hasText();
-                },
+                validate: (editorState) => editorState.getCurrentContent().hasText(),
             }
             : {},
         defaultValue: EditorState.createWithContent(convertFromRaw(originalValue)),
-    }), _j = _h.field, ref = _j.ref, onChange = _j.onChange, field = __rest(_j, ["ref", "onChange"]), error = _h.fieldState.error;
-    var handleChange = useCallback(function (value) {
+    });
+    const handleChange = useCallback((value) => {
         if (isDependency) {
-            try {
-                clearTimeout(timer);
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-            setTimer(setTimeout(function () {
+            clearTimeout(timer);
+            setTimer(setTimeout(() => {
                 handleStepDep(value.getCurrentContent().getPlainText());
                 setTimer(undefined);
             }, 1000));
         }
         onChange(value);
-    }, [handleStepDep, isDependency, onChange]);
-    var calcStyle = function () {
-        var backgroundColor = formStyle.stepBackgroundColor;
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleStepDep, isDependency, onChange]);
+    const calcStyle = () => {
+        const backgroundColor = formStyle.stepBackgroundColor;
         if (focus) {
             return {
                 border: '2px solid ' + formStyle.primaryColor,
                 marginTop: -1,
                 marginLeft: -1,
                 marginBottom: 0,
-                backgroundColor: backgroundColor,
+                backgroundColor,
             };
         }
         else if (hovering) {
             return {
                 border: '1px solid ' + formStyle.primaryColor,
-                backgroundColor: backgroundColor,
+                backgroundColor,
             };
         }
         else {
             return {
                 border: '1px solid ' + formStyle.outlineColor,
-                backgroundColor: backgroundColor,
+                backgroundColor,
             };
         }
     };
-    var canEdit = editable && !postview;
-    var value = field.value;
-    var editorClassName = styles.editor;
+    const canEdit = editable && !postview;
+    const value = field.value;
+    let editorClassName = styles.editor;
     if (!value.getCurrentContent().hasText()) {
-        if (value.getCurrentContent().getBlockMap().first().getType() !==
-            'unstyled') {
+        if (value.getCurrentContent().getBlockMap().first().getType() !== 'unstyled') {
             editorClassName += ' RichEditor-hidePlaceholder';
         }
     }
     if (!canEdit) {
         editorClassName += ' postview-editor';
     }
-    return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
+    return (_jsxs("div", { className: styles.textEditorContainer, style: {
             '--eureka-outline': formStyle.outlineColor,
             '--eureka-primary': formStyle.primaryColor,
-        } }, { children: [step.label && (_jsxs("div", __assign({ className: styles.textEditorLabel, style: {
-                    color: error
-                        ? formStyle.errorColor
-                        : formStyle.textColor,
-                } }, { children: [step.label, " ", step.required ? ' *' : ''] }))), _jsx(ClickAwayListener, __assign({ mouseEvent: "onMouseDown", onClickAway: function () {
+        }, children: [step.label && (_jsxs("div", { className: styles.textEditorLabel, style: {
+                    color: error ? formStyle.errorColor : formStyle.textColor,
+                }, children: [step.label, " ", step.required ? ' *' : ''] })), _jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: () => {
                     if (canEdit) {
                         setFocus(false);
                     }
-                } }, { children: _jsx("div", __assign({ className: postview
+                }, children: _jsx("div", { className: postview
                         ? styles.postViewContainer + ' EF-DraftContainer'
-                        : styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
+                        : styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: () => {
                         if (canEdit) {
                             setHovering(true);
                         }
-                    }, onMouseLeave: function () {
+                    }, onMouseLeave: () => {
                         if (canEdit) {
                             setHovering(false);
                         }
-                    }, onClick: function () {
+                    }, onClick: () => {
                         if (canEdit) {
                             setFocus(true);
                         }
-                    }, "data-testid": step.id }, { children: _jsx(Editor, __assign({}, field, { editorRef: ref, onFocus: function () {
+                    }, "data-testid": step.id, children: _jsx(Editor, { ...field, editorRef: ref, onFocus: () => {
                             setFocus(true);
-                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', editorState: value, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
+                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', editorState: value, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: step.description ?? '', toolbar: {
                             options: ['inline', 'list', 'history'],
                             inline: {
-                                options: [
-                                    'bold',
-                                    'italic',
-                                    'underline',
-                                    'strikethrough',
-                                ],
+                                options: ['bold', 'italic', 'underline', 'strikethrough'],
                             },
                             list: {
                                 options: ['unordered'],
                             },
-                        } })) })) })), _jsx("div", __assign({ className: styles.errorMsg, style: {
+                        } }) }) }), _jsx("div", { className: styles.errorMsg, style: {
                     color: formStyle.errorColor,
                     height: !postview && editable ? '0.75rem' : 0,
-                } }, { children: !!error && 'Este campo es obligatorio' }))] })));
+                }, children: !!error && 'Este campo es obligatorio' })] }));
 }
 export default TextAreaStep;

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -1,47 +1,31 @@
-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 RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
+import ErkTextField from '../../../Shared/ErkTextField/ErkTextField';
 import styles from './MaterialTextAreaStep.module.css';
 import React from 'react';
 import { useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
-function TextAreaStep(_a) {
-    var _b, _c;
-    var step = _a.step, editable = _a.editable, maxLength = _a.maxLength;
-    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview, partial = _d.partial;
-    var _e = useFormStep(step, {
+function TextAreaStep({ step, editable, maxLength }) {
+    const { formStyle, postview, partial } = useAppSelector((state) => state.global);
+    const { ref, value, onChange, error, field } = useFormStep(step, {
         debounce: true,
         defaultValue: '',
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
-    var canEdit = editable && !postview;
-    return (_jsxs("div", __assign({ className: styles.container, style: {
-            paddingBottom: step.required || step.description || !!error
-                ? '0px'
-                : '5px',
-        } }, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { inputRef: ref, value: value, onChange: function (e) { return onChange(e.target.value); }, "data-testid": step.id, maxLength: maxLength, label: step.label, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: (_c = (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description) !== null && _c !== void 0 ? _c : (step.required ? ' ' : null), error: !!error })) })), _jsxs("div", __assign({ className: styles.print }, { children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.printLbl, style: {
+    });
+    return (_jsxs("div", { className: styles.container, style: {
+            paddingBottom: step.required || step.description || !!error ? '0px' : '5px',
+        }, children: [_jsx("div", { className: styles.erkTextArea, children: _jsx(ErkTextField, { ...field, multiline: true, value: value, inputRef: ref, error: !!error, label: step.label, onChange: onChange, "data-testid": step.id, maxLength: maxLength, required: step.required, disabled: !editable || postview, minRows: postview && partial ? undefined : 4, helperText: error?.message ?? step.description ?? (step.required ? ' ' : null) }) }), _jsxs("div", { className: styles.print, children: [value && (_jsxs(React.Fragment, { children: [_jsx("div", { className: styles.printLbl, style: {
                                     color: formStyle.descriptionTextColor,
-                                } }, { children: step.label })), _jsx("div", __assign({ className: styles.printLine, style: {
+                                }, children: step.label }), _jsx("div", { className: styles.printLine, style: {
                                     color: formStyle.stepBackgroundColor,
                                     backgroundColor: formStyle.stepBackgroundColor,
-                                } }, { children: step.label }))] })), !value && (_jsx("div", __assign({ className: styles.emptyPrintLbl, style: {
+                                }, children: step.label })] })), !value && (_jsx("div", { className: styles.emptyPrintLbl, style: {
                             color: formStyle.textColor + '8a',
-                        } }, { children: step.label }))), _jsx("p", __assign({ className: styles.printContainer, style: {
+                        }, children: step.label })), _jsx("p", { className: styles.printContainer, style: {
                             backgroundColor: formStyle.stepBackgroundColor,
                             borderColor: formStyle.outlineColor,
                             whiteSpace: 'pre-wrap',
-                        } }, { children: value }))] }))] })));
+                        }, children: value })] })] }));
 }
 export default TextAreaStep;

package/dist/FormSteps/TextAreaStep/TextAreaStep.js

@@ -1,28 +1,17 @@
-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 { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialTextAreaStep from './MaterialTextAreaStep/MaterialTextAreaStep';
 import MaterialTextAreaEditorStep from './MaterialTextAreaStep/MaterialTextAreaEditorStep';
 function TextAreaStep(props) {
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    const { formStyle } = useAppSelector((state) => state.global);
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
             if (props.step.hasTextEditor)
-                return _jsx(MaterialTextAreaEditorStep, __assign({}, props));
+                return _jsx(MaterialTextAreaEditorStep, { ...props });
             else
-                return _jsx(MaterialTextAreaStep, __assign({}, props));
+                return _jsx(MaterialTextAreaStep, { ...props });
         }
     }
 }