@arquimedes.co/eureka-forms 2.0.36-test → 2.0.37

package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js

@@ -53,34 +53,41 @@ import React from 'react';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
 import { focusStep, setEmptyDependency } from '../../../States/SiteSlice';
-import { selectDependencies, useFormStep } from '../../StepHooks';
+import { selectDependencies, selectStepDependencies, useFormStep, } from '../../StepHooks';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 function SmartSelectStep(_a) {
     var _this = this;
     var _b, _c, _d, _e, _f, _g, _h;
-    var icon = _a.icon, step = _a.step, editable = _a.editable, getOptions = _a.getOptions, calcDepError = _a.calcDepError, defaultValue = _a.defaultValue, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, changeListener = _a.changeListener, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, renderNestedSteps = _a.renderNestedSteps;
-    var _j = useFormStep(step, {
+    var icon = _a.icon, step = _a.step, editable = _a.editable, getOptions = _a.getOptions, calcDepError = _a.calcDepError, defaultValue = _a.defaultValue, filterOptions = _a.filterOptions, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, changeListener = _a.changeListener, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, _j = _a.getOptionsConditionsIdSteps, getOptionsConditionsIdSteps = _j === void 0 ? function () { return []; } : _j, renderNestedSteps = _a.renderNestedSteps;
+    var _k = useFormStep(step, {
         sizeChange: true,
         defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-    }), ref = _j.ref, value = _j.value, error = _j.error, field = _j.field, handleChange = _j.onChange;
+    }), ref = _k.ref, value = _k.value, error = _k.error, field = _k.field, handleChange = _k.onChange;
     var onChange = useCallback(function (value) {
         return handleChange(valueOverwrite ? valueOverwrite(value) : value);
     }, [handleChange, valueOverwrite]);
-    var _k = useAppSelector(function (state) { return state.global; }), postview = _k.postview, formStyle = _k.formStyle, idOrganization = _k.idOrganization;
+    var _l = useAppSelector(function (state) { return state.global; }), postview = _l.postview, formStyle = _l.formStyle, idOrganization = _l.idOrganization;
     var form = useContext(FormContext);
-    var _l = useState(), options = _l[0], setOptions = _l[1];
-    var _m = useState(false), loading = _m[0], setLoading = _m[1];
-    var _o = useState(true), firstTime = _o[0], setFirstTime = _o[1];
-    var _p = useState(false), touched = _p[0], setTouched = _p[1];
+    var _m = useState(), options = _m[0], setOptions = _m[1];
+    var _o = useState(false), loading = _o[0], setLoading = _o[1];
+    var _p = useState(true), firstTime = _p[0], setFirstTime = _p[1];
+    var _q = useState(false), touched = _q[0], setTouched = _q[1];
     var dispatch = useAppDispatch();
-    var dependencyStore = useAppSelector(function (state) { return state.site.dependencies; });
-    var _q = useAppSelector(function (state) {
-        return selectDependencies(state, step, form);
-    }), emptyDep = _q.emptyDep, invalids = _q.invalids;
-    var _r = useFormContext(), getValues = _r.getValues, setFocus = _r.setFocus;
+    var idDependencies = useMemo(function () { return getOptionsConditionsIdSteps(step); }, []);
+    var dependencies = useAppSelector(function (state) {
+        return selectDependencies(state, step.dependencies);
+    });
+    var deps = useAppSelector(function (state) {
+        return selectDependencies(state, idDependencies);
+    });
+    var conditionDependencies = useMemo(function () { return deps; }, idDependencies.map(function (id) { return deps[id]; }));
+    var _r = useAppSelector(function (state) {
+        return selectStepDependencies(state, step, form);
+    }), emptyDep = _r.emptyDep, invalids = _r.invalids;
+    var _s = useFormContext(), getValues = _s.getValues, setFocus = _s.setFocus;
     var isEmpty = useAppSelector(function (state) { var _a; return (_a = state.site.dependencies[step.id]) === null || _a === void 0 ? void 0 : _a.empty; });
     var disabled = emptyDep;
     useEffect(function () {
@@ -92,7 +99,7 @@ function SmartSelectStep(_a) {
         else if (value && !step.searchable) {
             setOptions([value]);
         }
-    }, (_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { var _a; return (_a = dependencyStore[dep]) === null || _a === void 0 ? void 0 : _a.value; })) !== null && _c !== void 0 ? _c : []);
+    }, (_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { var _a; return (_a = dependencies[dep]) === null || _a === void 0 ? void 0 : _a.value; })) !== null && _c !== void 0 ? _c : []);
     var calcOptions = function (firstTime) { return __awaiter(_this, void 0, void 0, function () {
         var resp, newValue, empty, error_1;
         return __generator(this, function (_a) {
@@ -105,7 +112,7 @@ function SmartSelectStep(_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, (getOptions === null || getOptions === void 0 ? void 0 : getOptions(idOrganization, step, dependencyStore))];
+                    return [4 /*yield*/, (getOptions === null || getOptions === void 0 ? void 0 : getOptions(idOrganization, step, dependencies))];
                 case 2:
                     resp = _a.sent();
                     if (value) {
@@ -171,25 +178,30 @@ function SmartSelectStep(_a) {
         if (!touched)
             setTouched(true);
     }, [options, disabled, postview, editable, invalids, touched]);
+    var filteredOptions = useMemo(function () {
+        if (!options || !filterOptions)
+            return options;
+        return filterOptions(options, conditionDependencies);
+    }, [options, conditionDependencies]);
     var errorMsg = useMemo(function () {
         if (postview || loading)
             return undefined;
         if (invalids.length > 0 && touched) {
             return calcDepError === null || calcDepError === void 0 ? void 0 : calcDepError(invalids.map(function (idDep) { return form.steps[idDep]; }));
         }
-        else if (value && options) {
-            var currentOption = options.find(function (option) {
+        else if (value && filteredOptions) {
+            var currentOption = filteredOptions.find(function (option) {
                 return getOptionSelected(option, value);
             });
             if (!currentOption) {
                 return 'Este campo es obligatorio';
             }
         }
-        else if (options === null && invalids.length === 0) {
+        else if (filteredOptions === null && invalids.length === 0) {
             return 'Error al cargar las opciones';
         }
         return undefined;
-    }, [invalids, touched, value, options]);
-    return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, __assign({ step: step, onClick: onFocus, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { inputRef: ref, value: value, handleUpdate: onChange, onFocus: onFocus, disabled: options === null || disabled, hidden: disabled, loading: loading, options: options !== null && options !== void 0 ? options : undefined, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", getOptionSelected: getOptionSelected, getValueString: getValueString, helperText: (_h = (_g = (_e = errorMsg !== null && errorMsg !== void 0 ? errorMsg : warning) !== null && _e !== void 0 ? _e : (_f = error === null || error === void 0 ? void 0 : error.message) === null || _f === void 0 ? void 0 : _f.toString()) !== null && _g !== void 0 ? _g : step.description) !== null && _h !== void 0 ? _h : undefined, error: !!errorMsg || !!warning || !!error })) })), renderNestedSteps === null || renderNestedSteps === void 0 ? void 0 : renderNestedSteps(value)] }));
+    }, [invalids, touched, value, filteredOptions]);
+    return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, __assign({ step: step, onClick: onFocus, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { inputRef: ref, value: value, handleUpdate: onChange, onFocus: onFocus, disabled: filteredOptions === null || disabled, hidden: disabled, loading: loading, options: filteredOptions !== null && filteredOptions !== void 0 ? filteredOptions : undefined, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", getOptionSelected: getOptionSelected, getValueString: getValueString, helperText: (_h = (_g = (_e = errorMsg !== null && errorMsg !== void 0 ? errorMsg : warning) !== null && _e !== void 0 ? _e : (_f = error === null || error === void 0 ? void 0 : error.message) === null || _f === void 0 ? void 0 : _f.toString()) !== null && _g !== void 0 ? _g : step.description) !== null && _h !== void 0 ? _h : undefined, error: !!errorMsg || !!warning || !!error })) })), renderNestedSteps === null || renderNestedSteps === void 0 ? void 0 : renderNestedSteps(value)] }));
 }
 export default SmartSelectStep;

package/dist/FormSteps/SmartSelectStep/SmartSelectStep.d.ts

@@ -10,12 +10,16 @@ export interface SmartSelectStepProps<StepType extends GSmartSelect = GSmartSele
     icon?: React.ReactNode;
     /** Function to call to get the options of the selector, return null if dependency is not met */
     getOptions: (idOrganization: string | undefined, step: StepType, dependencyStore: DependencyStore) => Promise<any[] | null>;
+    /** Function to call to filter the options of the selector */
+    filterOptions?: (options: any[], dependencyStore: DependencyStore) => any[];
     /** Function to determine the currently selected option */
     getOptionSelected: (option: any, value: any) => boolean;
     /** Function to determine the current value in string format */
     getValueString: (value: any | undefined) => string;
     /** Function to if currently selected option has warning */
     getValueWarning?: (value: any | undefined) => string | null;
+    /** Function called to get the idSteps of the step's conditions for better refreshing */
+    getOptionsConditionsIdSteps?: (step: StepType) => string[];
     /** Function that returns the error message based on the steps of the missing Dependencies, undefined if no error msg */
     calcDepError?: (steps: FormStep[]) => string | undefined;
     /** Function that overwrites the value before setting it */

package/dist/FormSteps/Step.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import Types from '../constants/FormStepTypes';
 import SelectorStep from './SelectorStep/SelectorStep';
 import SeparatorStep from './SeparatorStep/SeparatorStep';
@@ -42,7 +42,7 @@ import CustomStep from './CustomStep';
 import { useAppSelector } from '../hooks';
 import { useContext } from 'react';
 import CustomContext from '../Contexts/CustomContext';
-import { selectOriginalValue } from './StepHooks';
+import { selectOriginalValue, useCondition } from './StepHooks';
 function StepComponent(_a) {
     var _b;
     var step = _a.step, props = __rest(_a, ["step"]);
@@ -55,6 +55,9 @@ function StepComponent(_a) {
     var originalValue = useAppSelector(function (state) {
         return selectOriginalValue(state, step);
     });
+    var showStep = useCondition(step.condition);
+    if (!showStep)
+        return _jsx(_Fragment, {});
     var customStep = customSteps[step.type];
     var editable = props.editable ? (_b = step.editable) !== null && _b !== void 0 ? _b : true : false;
     if ((postview || !editable) &&

package/dist/FormSteps/StepFunctions.d.ts

@@ -2,6 +2,8 @@ import { FormSize } from '../@Types/Form';
 import { ApiSelector, CheckBox, ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../@Types/FormStep';
 import { AYFFormStep } from '../@Types/AYFFormStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
+import { Condition } from '../@Types/Condition';
+import { DependencyStore } from '../Form/Form';
 export type FillerSteps = FormSelector | ClassifierSelector | EntityValuePicker | ApiSelector | CheckBox;
 export declare function calcFillerSize(step: FillerSteps, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
 export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;
@@ -14,3 +16,4 @@ export declare const iterateNestedSteps: (idStep: string, steps: Record<string,
  * @returns list of the ids of the substeps of the step, if modifier returns modified steps
  */
 export declare const calcSubSteps: (idStep: string, allSteps: Record<string, FormStep | CBRFormStep | AYFFormStep>, idModifier?: ((idSubStep: string) => string) | undefined) => string[];
+export declare const evaluateCondition: (condition: Condition, dependencies: DependencyStore) => boolean;

package/dist/FormSteps/StepFunctions.js

@@ -7,10 +7,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, StepTypes, } from '../constants/FormStepTypes';
+import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, StepTypes, } from '../constants/FormStepTypes';
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import AYFFormStepTypes from '../constants/AYFFormStepTypes';
 import { getRawText } from '../Utils/DraftFunctions';
+import ConditionTypes, { ExpressionTypes, OperatorTypes, } from '../constants/ConditionTypes';
 export function calcFillerSize(step, steps, values, size) {
     var _a;
     var maxSize = (_a = step.maxSize) !== null && _a !== void 0 ? _a : size.blockNum;
@@ -266,3 +267,160 @@ export var calcSubSteps = function (idStep, allSteps, idModifier) {
     }
     return subSteps;
 };
+export var evaluateCondition = function (condition, dependencies) {
+    var _a, _b;
+    switch (condition.type) {
+        case ConditionTypes.EXPRESSION: {
+            if (condition.expression === ExpressionTypes.OR) {
+                for (var _i = 0, _c = condition.conditions; _i < _c.length; _i++) {
+                    var subCondition = _c[_i];
+                    if (evaluateCondition(subCondition, dependencies))
+                        return true;
+                }
+                return false;
+            }
+            else {
+                for (var _d = 0, _e = condition.conditions; _d < _e.length; _d++) {
+                    var subCondition = _e[_d];
+                    if (!evaluateCondition(subCondition, dependencies))
+                        return false;
+                }
+                return condition.conditions.length > 0;
+            }
+        }
+        case ConditionTypes.FORM_STEP: {
+            if (isFormStepExistance(condition)) {
+                var boolFactor = condition.operator === OperatorTypes.EXISTS;
+                var value_1 = dependencies[condition.idStep].value;
+                if (value_1)
+                    return boolFactor;
+                return !boolFactor;
+            }
+            var value = dependencies[condition.idStep].value;
+            switch (condition.stepType) {
+                // case FormStepTypes.AGENTPICKER:
+                //     return await evaluateAgentCondition(
+                //         condition,
+                //         value as string[]
+                //     );
+                case FormStepTypes.CHECKBOX: {
+                    var boolFactor = condition.operator === OperatorTypes.EQUAL;
+                    return value === condition.value ? boolFactor : !boolFactor;
+                }
+                case FormStepTypes.DATEPICKER: {
+                    if (!(value instanceof Date) || isNaN(value.getTime())) {
+                        return condition.operator === OperatorTypes.NOTEQUAL;
+                    }
+                    var propertyDate = new Date(condition.value);
+                    switch (condition.operator) {
+                        case OperatorTypes.EQUAL:
+                            return (value.toUTCString().split('T')[0] ===
+                                propertyDate.toUTCString().split('T')[0]);
+                        case OperatorTypes.NOTEQUAL:
+                            return (value.toUTCString().split('T')[0] !==
+                                propertyDate.toUTCString().split('T')[0]);
+                        case OperatorTypes.LESS:
+                            return value.getTime() < propertyDate.getTime();
+                        case OperatorTypes.MORE:
+                            return value.getTime() > propertyDate.getTime();
+                        default:
+                            return false;
+                    }
+                }
+                case FormStepTypes.SELECTOR: {
+                    if (condition.operator === OperatorTypes.EQUAL) {
+                        return condition.value === (value === null || value === void 0 ? void 0 : value.value);
+                    }
+                    else {
+                        return !(condition.value === (value === null || value === void 0 ? void 0 : value.value));
+                    }
+                }
+                case FormStepTypes.TEXTINPUT: {
+                    if (condition.operator === OperatorTypes.INCLUDES) {
+                        return (_a = value === null || value === void 0 ? void 0 : value.toLowerCase()) === null || _a === void 0 ? void 0 : _a.includes(condition.value.toLowerCase());
+                    }
+                    else if (condition.operator === OperatorTypes.NOTINCLUDES) {
+                        return !((_b = value === null || value === void 0 ? void 0 : value.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(condition.value.toLowerCase()));
+                    }
+                    else if (condition.operator === OperatorTypes.EQUAL) {
+                        return (condition.value.toLowerCase() ===
+                            (value === null || value === void 0 ? void 0 : value.toLowerCase()));
+                    }
+                    else if (condition.operator === OperatorTypes.NOTEQUAL) {
+                        return !(condition.value.toLowerCase() ===
+                            (value === null || value === void 0 ? void 0 : value.toLowerCase()));
+                    }
+                    else {
+                        return false;
+                    }
+                }
+                case FormStepTypes.TEXTAREA: {
+                    var words = condition.values;
+                    var regx = "\\b(".concat(words[0].toLowerCase());
+                    for (var i = 1; i < words.length; i++) {
+                        regx += "|".concat(words[i].toLowerCase());
+                    }
+                    regx += ')\\b';
+                    if (condition.operator === OperatorTypes.INCLUDES) {
+                        return (value && new RegExp(regx).test(value.toLowerCase()));
+                    }
+                    else {
+                        return (!value ||
+                            !new RegExp(regx).test(value.toLowerCase()));
+                    }
+                }
+                case FormStepTypes.RATING: {
+                    if (!value || isNaN(value)) {
+                        return condition.operator === OperatorTypes.NOTEQUAL;
+                    }
+                    switch (condition.operator) {
+                        case OperatorTypes.EQUAL:
+                        case OperatorTypes.NOTEQUAL: {
+                            var boolFactor = condition.operator === OperatorTypes.EQUAL;
+                            if (value === condition.value)
+                                return boolFactor;
+                            return !boolFactor;
+                        }
+                        case OperatorTypes.LESS:
+                            return value < condition.value;
+                        case OperatorTypes.MORE:
+                            return value > condition.value;
+                        default:
+                            return false;
+                    }
+                }
+                case FormStepTypes.CLASSIFIER_SELECTOR: {
+                    var boolFactor = condition.operator === OperatorTypes.EQUAL;
+                    if ((value === null || value === void 0 ? void 0 : value.value) === condition.idValue) {
+                        //Si op es EQUALS (boolfactor true) evaluará a true
+                        //Si op es NOTEQUALS (boolfactor false) evaluará a false
+                        return boolFactor;
+                    }
+                    //Si op es EQUALS (boolfactor true) evaluará a false.
+                    //Si op es NOTEQUALS (boolfactor false) evaluará a true
+                    return !boolFactor;
+                }
+                case FormStepTypes.ENTITYVALUEPICKER: {
+                    var boolFactor = condition.operator === OperatorTypes.EQUAL;
+                    for (var _f = 0, _g = condition.values; _f < _g.length; _f++) {
+                        var idEntityValue = _g[_f];
+                        if ((value === null || value === void 0 ? void 0 : value._id) === idEntityValue) {
+                            return boolFactor;
+                        }
+                    }
+                    return !boolFactor;
+                }
+                default:
+                    break;
+            }
+            break;
+        }
+        default:
+            return false;
+    }
+    return false;
+};
+function isFormStepExistance(condition) {
+    return (condition.operator === OperatorTypes.EXISTS ||
+        condition.operator === OperatorTypes.NOTEXISTS);
+}

package/dist/FormSteps/StepHooks.d.ts

@@ -3,7 +3,10 @@ import { ValuesStore } from '../States/SiteSlice';
 import { RootState } from '../Utils/store';
 import { Form } from '../@Types';
 import { DependencyStore } from '../Form/Form';
+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;
 }> & {
@@ -15,7 +18,7 @@ export interface StepDependency {
     handleStepDep: (value: any | undefined) => void;
 }
 export declare const useStepDependency: (step: GBaseStep, defaultValue?: any) => StepDependency;
-export declare const selectDependencies: ((state: RootState, step: GBaseStep, form: Form) => {
+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) => {
@@ -41,3 +44,11 @@ export declare const useFormStep: <ValueType = unknown>(step: GBaseStep, { rules
     error: FieldError | undefined;
     field: Omit<ReturnType<typeof useController>['field'], 'ref' | 'value' | 'onChange'>;
 };
+export declare const selectDependencies: ((state: RootState, idDeps: string[] | undefined) => DependencyStore) & import("reselect").OutputSelectorFields<(args_0: DependencyStore, args_1: string[]) => DependencyStore, {
+    clearCache: () => void;
+}> & {
+    clearCache: () => void;
+};
+export declare const useCondition: (condition?: Condition) => boolean;
+export declare const calcStepDeps: (step: FormStep | CBRFormStep) => string[];
+export declare const recursivelyCalcConditionSteps: (condition: Condition | undefined) => string[];

package/dist/FormSteps/StepHooks.js

@@ -1,3 +1,14 @@
+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)
@@ -18,13 +29,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useAppSelector, useAppDispatch } from '../hooks';
 import { clearDependency, setStepDependency, } from '../States/SiteSlice';
 import { createSelector } from '@reduxjs/toolkit';
-import { calcDefaultValue } from './StepFunctions';
+import { calcDefaultValue, evaluateCondition } from './StepFunctions';
 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; },
@@ -69,7 +82,7 @@ export var useStepDependency = function (step, defaultValue) {
         originalValue: (_a = originalValue !== null && originalValue !== void 0 ? originalValue : defaultValue) !== null && _a !== void 0 ? _a : calcDefaultValue(step),
     };
 };
-export var selectDependencies = createSelector([
+export var selectStepDependencies = createSelector([
     function (state) { return state.site.dependencies; },
     function (state, step) { return step; },
     function (state, step, form) { return form; },
@@ -141,3 +154,93 @@ export var useFormStep = function (step, _a) {
         field: 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 () {
+        return !condition || evaluateCondition(condition, dependencies);
+    }, ids.map(function (id) { return dependencies[id].value; }));
+};
+export var calcStepDeps = function (step) {
+    var _a;
+    var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
+    if (step.condition) {
+        dependencies.push.apply(dependencies, 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));
+                    }
+                }
+            }
+            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));
+                    }
+                }
+            }
+            break;
+        case FormStepTypes.API_SELECTOR:
+            {
+                for (var _e = 0, _f = Object.values(step.options); _e < _f.length; _e++) {
+                    var option = _f[_e];
+                    if (option.type !== ApiSelectorOptionTypes.HIDE &&
+                        option.condition) {
+                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                    }
+                }
+            }
+            break;
+        case FormStepTypes.SELECTOR:
+            {
+                for (var _g = 0, _h = Object.values(step.options); _g < _h.length; _g++) {
+                    var option = _h[_g];
+                    if (option.condition) {
+                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                    }
+                }
+            }
+            break;
+        default:
+            break;
+    }
+    return dependencies;
+};
+export var recursivelyCalcConditionSteps = function (condition) {
+    if (!condition)
+        return [];
+    switch (condition.type) {
+        case ConditionTypes.EXPRESSION: {
+            return condition.conditions
+                .map(function (condition) { return recursivelyCalcConditionSteps(condition); })
+                .flat();
+        }
+        case ConditionTypes.FORM_STEP: {
+            return [condition.idStep];
+        }
+    }
+};

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

@@ -104,6 +104,7 @@ function TextAreaStep(_a) {
     }
     return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
             breakInside: 'avoid',
+            pageBreakAfter: 'auto',
             '--eureka-outline': formStyle.outlineColor,
             '--eureka-primary': formStyle.primaryColor,
         } }, { children: [step.label && (_jsxs("div", __assign({ className: styles.textEditorLabel, style: {

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

@@ -31,7 +31,6 @@ function TextAreaStep(_a) {
             paddingBottom: step.required || step.description || !!error
                 ? '0px'
                 : '5px',
-            breakAfter: 'auto',
         } }, { 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: {
                                     color: formStyle.descriptionTextColor,
                                 } }, { children: step.label })), _jsx("div", __assign({ className: styles.printLine, style: {

package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css

@@ -72,12 +72,13 @@
     position: absolute;
     top: 9px;
     left: 14px;
+    font-size: 1rem;
 }
 .printLine {
     top: 0px;
     padding: 0px 5px;
     left: 9px;
-    height: 1px;
+    height: 2px;
     font-size: 0.75rem;
     position: absolute;
     overflow: hidden;
@@ -87,7 +88,8 @@
     border-radius: 10px;
     border: 1px solid black;
     padding: 5px 11px;
-    width: calc(100% - 2);
+    width: 100%;
+    max-width: 100%;
     font-size: 1rem;
     min-height: 76px;
     line-height: 1.2rem;
@@ -101,7 +103,9 @@
 
 @media print {
     .print {
-        display: block;
+        display: flex;
+        width: 100%;
+        max-width: 100%;
     }
     .erkTextArea {
         display: none !important;

package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -47,7 +47,6 @@ function TextInputStep(_a) {
                 (!postview && editable && (step.required || validation))
                 ? '55px'
                 : '43px',
-            breakInside: 'avoid',
         } }, { children: _jsx(RoundedTextField, __assign({}, field, { inputRef: ref, value: value, onChange: function (e) { return onChange(e.target.value); }, maxLength: maxLength, "data-testid": step.id, label: step.label, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperText: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!error, icon: step.showIcon ? icon : undefined })) })));
 }
 export default TextInputStep;

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -33,7 +33,6 @@ function TitleStep(_a) {
             width: widthStats.currentBreakPoint <= size
                 ? '100%'
                 : calcStepWidth(size, form.size),
-            breakInside: 'avoid',
         } }, { children: [title && (_jsx("div", __assign({ className: styles.titleLbl, style: {
                     textAlign: widthStats.isMobile &&
                         widthStats.currentBreakPoint <= size

package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.js

@@ -21,7 +21,6 @@ function MaterialInputContainer(_a) {
     var currentBreakPoint = useAppSelector(selectBreakPoint);
     var postview = useAppSelector(function (state) { return state.global.postview; });
     return (_jsx("div", __assign({ className: styles.container, style: {
-            breakInside: 'avoid',
             width: currentBreakPoint <= step.size
                 ? '100%'
                 : calcStepWidth(step.size, form.size),

package/dist/Shared/RoundedCheckBox/RoundedCheckBox.js

@@ -83,7 +83,7 @@ function CustomCheckBox(_a) {
         uncheckedColor: uncheckedColor,
         checkedHoverColor: checkedColor + '0a',
     })();
-    return (_jsx(Checkbox, __assign({}, others, { disabled: cantEdit, classes: classes, checked: checked, onChange: onChange, required: true, icon: _jsx(CheckBoxOutlineBlankRoundedIcon, { fontSize: "inherit" }), checkedIcon: _jsx(CheckBoxRoundedIcon, { fontSize: "inherit" }) })));
+    return (_jsx(Checkbox, __assign({}, others, { disabled: cantEdit, classes: classes, checked: checked, onChange: function (event) { return onChange === null || onChange === void 0 ? void 0 : onChange(event.target.checked); }, required: true, icon: _jsx(CheckBoxOutlineBlankRoundedIcon, { fontSize: "inherit" }), checkedIcon: _jsx(CheckBoxRoundedIcon, { fontSize: "inherit" }) })));
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library

package/dist/Shared/RoundedDatePicker/RoundedDatePicker.js

@@ -307,7 +307,10 @@ function CustomDatePicker(_a) {
             }, variant: "dialog" })));
     }
     else {
-        return (_jsx(DatePicker, __assign({}, others, { ref: ref, "data-testid": "date-picker", inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DatePicker, __assign({}, others, { ref: ref, "data-testid": "date-picker", inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: function (date) {
+                if (!date || (!others.value && date))
+                    onChange(date);
+            }, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',

package/dist/constants/ConditionTypes.d.ts

@@ -0,0 +1,22 @@
+export declare enum ConditionTypes {
+    EXPRESSION = "EXPRESSION",
+    FORM_STEP = "FORM_STEP"
+}
+export default ConditionTypes;
+export declare enum ExpressionTypes {
+    'OR' = "OR",
+    'AND' = "AND"
+}
+/**
+ * Operators available to all conditions
+ */
+export declare enum OperatorTypes {
+    EQUAL = "EQUAL",
+    NOTEQUAL = "NOTEQUAL",
+    INCLUDES = "INCLUDES",
+    NOTINCLUDES = "NOTINCLUDES",
+    LESS = "LESS",
+    MORE = "MORE",
+    EXISTS = "EXISTS",
+    NOTEXISTS = "NOTEXISTS"
+}