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

package/dist/FormSteps/StepHooks.d.ts

@@ -7,27 +7,65 @@ import { FormStep } from '../@Types/FormStep';
 import { FieldError, RefCallBack, UseControllerProps, useController } from 'react-hook-form';
 import { Condition } from '../@Types/Condition';
 import { CBRFormStep } from '../@Types/CBRFormStep';
-export declare const selectOriginalValue: ((state: RootState, step: GBaseStep) => any) & import("reselect").OutputSelectorFields<(args_0: ValuesStore, args_1: GBaseStep) => any, {
-    clearCache: () => void;
-}> & {
+export declare const selectOriginalValue: ((state: RootState, step: GBaseStep) => any) & {
     clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: ValuesStore, resultFuncArgs_1: GBaseStep) => any;
+    memoizedResultFunc: ((resultFuncArgs_0: ValuesStore, resultFuncArgs_1: GBaseStep) => any) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => any;
+    dependencies: [(state: RootState) => ValuesStore, (_state: RootState, step: GBaseStep) => GBaseStep];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export interface StepDependency {
     originalValue: any;
     isDependency: boolean;
-    handleStepDep: (value: any | undefined) => void;
+    handleStepDep: (value: any) => void;
 }
 export declare const useStepDependency: (step: GBaseStep, defaultValue?: any) => StepDependency;
-export declare const selectStepDependencies: ((state: RootState, step: GBaseStep, form: Form) => {
-    invalids: string[];
-    emptyDep: boolean;
-}) & import("reselect").OutputSelectorFields<(args_0: DependencyStore, args_1: GBaseStep, args_2: Form) => {
+export declare const selectStepDependencies: ((state: RootState, _step: GBaseStep, form: Form) => {
     invalids: string[];
     emptyDep: boolean;
-}, {
-    clearCache: () => void;
-}> & {
+}) & {
     clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: DependencyStore, resultFuncArgs_1: GBaseStep, resultFuncArgs_2: Form) => {
+        invalids: string[];
+        emptyDep: boolean;
+    };
+    memoizedResultFunc: ((resultFuncArgs_0: DependencyStore, resultFuncArgs_1: GBaseStep, resultFuncArgs_2: Form) => {
+        invalids: string[];
+        emptyDep: boolean;
+    }) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => {
+        invalids: string[];
+        emptyDep: boolean;
+    };
+    dependencies: [(state: RootState) => DependencyStore, (_state: RootState, step: GBaseStep) => GBaseStep, (_state: RootState, _step: GBaseStep, form: Form) => Form];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export interface UseFormStepOptions<ValueType> {
     defaultValue: ValueType;
@@ -45,10 +83,26 @@ export interface FormStepFunctions<ValueType = unknown> {
     field: Omit<ReturnType<typeof useController>['field'], 'ref' | 'value' | 'onChange'>;
 }
 export declare const useFormStep: <ValueType = unknown>(step: GBaseStep, { rules, debounce, sizeChange, defaultValue }: UseFormStepOptions<ValueType>) => FormStepFunctions<ValueType>;
-export declare const selectDependencies: ((state: RootState, idDeps: string[] | undefined) => DependencyStore) & import("reselect").OutputSelectorFields<(args_0: DependencyStore, args_1: string[]) => DependencyStore, {
-    clearCache: () => void;
-}> & {
+export declare const selectDependencies: ((state: RootState, idDeps: string[] | undefined) => DependencyStore) & {
     clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: DependencyStore, resultFuncArgs_1: string[]) => DependencyStore;
+    memoizedResultFunc: ((resultFuncArgs_0: DependencyStore, resultFuncArgs_1: string[]) => DependencyStore) & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => DependencyStore;
+    dependencies: [(state: RootState) => DependencyStore, (_state: RootState, idDeps: string[] | undefined) => string[]];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    memoize: typeof import("reselect").weakMapMemoize;
+    argsMemoize: typeof import("reselect").weakMapMemoize;
 };
 export declare const useCondition: (condition?: Condition) => boolean;
 export declare const calcStepDeps: (step: FormStep | CBRFormStep) => string[];

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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import './DraftEditor.css';
 import { TextAreaStepProps } from '../TextAreaStep';

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;