@arquimedes.co/eureka-forms 2.0.19 → 2.0.21

package/dist/FormSteps/StepHooks.js

@@ -1,3 +1,14 @@
+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)) {
@@ -7,11 +18,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useCallback, useEffect } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useAppSelector, useAppDispatch } from '../hooks';
-import { setStepDependency } from '../States/SiteSlice';
+import { clearDependency, setStepDependency, } from '../States/SiteSlice';
 import { createSelector } from '@reduxjs/toolkit';
 import { calcDefaultValue } from './StepFunctions';
+import { useController, } from 'react-hook-form';
+import { SizeChangeContext } from './Utils/@StepFiller/StepFiller';
 var selectIsDependency = createSelector([
     function (state) { return state.site.dependencies; },
     function (state, step) { return step; },
@@ -38,6 +51,9 @@ export var useStepDependency = function (step, defaultValue) {
                 value: defaultValue,
             }));
         }
+        return function () {
+            dispatch(clearDependency(step));
+        };
     }, [isDependency]);
     var handleStepDep = useCallback(function (value) {
         if (!isDependency)
@@ -85,3 +101,43 @@ var calcDeepDependencies = function (idStep, form, deps) {
     }
     return deps;
 };
+export var useFormStep = function (step, _a) {
+    var _b = _a === void 0 ? {} : _a, rules = _b.rules, debounce = _b.debounce, sizeChange = _b.sizeChange, defaultValue = _b.defaultValue;
+    var _c = useState(), timer = _c[0], setTimer = _c[1];
+    var _d = useStepDependency(step, defaultValue), isDependency = _d.isDependency, handleStepDep = _d.handleStepDep, originalValue = _d.originalValue;
+    var _e = useController({
+        name: step.id,
+        rules: rules,
+        shouldUnregister: true,
+        defaultValue: originalValue,
+    }), _f = _e.field, ref = _f.ref, value = _f.value, fieldOnChange = _f.onChange, field = __rest(_f, ["ref", "value", "onChange"]), error = _e.fieldState.error;
+    var handleSizeChange = useContext(SizeChangeContext);
+    var onChange = useCallback(function (value) {
+        if (isDependency) {
+            if (debounce) {
+                try {
+                    clearTimeout(timer);
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+                setTimer(setTimeout(function () {
+                    handleStepDep(value);
+                    setTimer(undefined);
+                }, 1000));
+            }
+            else {
+                handleStepDep(value);
+            }
+        }
+        fieldOnChange(value);
+        if (sizeChange)
+            handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
+    }, [handleStepDep, isDependency, fieldOnChange]);
+    return {
+        ref: ref,
+        value: value,
+        onChange: onChange,
+        error: error,
+        field: field,
+    };
+};

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

@@ -114,7 +114,7 @@ function TextAreaStep(_a) {
                     }
                 } }, { children: _jsx("div", __assign({ className: postview
                         ? styles.postViewContainer + ' EF-DraftContainer'
-                        : styles.textContainer + ' EF-DraftContainer', "data-testid": step.id, style: calcStyle(), onMouseEnter: function () {
+                        : styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
                         if (canEdit) {
                             setHovering(true);
                         }
@@ -126,9 +126,9 @@ function TextAreaStep(_a) {
                         if (canEdit) {
                             setFocus(true);
                         }
-                    } }, { children: _jsx(Editor, __assign({}, field, { editorRef: ref, onFocus: function () {
+                    }, "data-testid": step.id }, { children: _jsx(Editor, __assign({}, field, { editorRef: ref, onFocus: function () {
                             setFocus(true);
-                        }, readOnly: !canEdit, stripPastedStyles: true, onEditorStateChange: handleChange, toolbarClassName: !canEdit ? ' postview-editor-toolbar' : '', "data-testid": step.id, 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' : '', editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
                             options: ['inline', 'list', 'history'],
                             inline: {
                                 options: [

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

@@ -9,60 +9,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
 import styles from './MaterialTextAreaStep.module.css';
-import { useController } from 'react-hook-form';
-import { useCallback, useState } from 'react';
 import { useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
+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 = useState(), timer = _e[0], setTimer = _e[1];
-    var _f = useStepDependency(step), handleStepDep = _f.handleStepDep, originalValue = _f.originalValue, isDependency = _f.isDependency;
-    var _g = useController({
-        name: step.id,
-        shouldUnregister: true,
+    var _e = useFormStep(step, {
+        debounce: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-        defaultValue: originalValue,
-    }), _h = _g.field, ref = _h.ref, field = __rest(_h, ["ref"]), error = _g.fieldState.error;
-    var onChange = useCallback(function (e) {
-        if (isDependency) {
-            try {
-                clearTimeout(timer);
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-            setTimer(setTimeout(function () {
-                handleStepDep(e.target.value);
-                setTimer(undefined);
-            }, 1000));
-        }
-        field.onChange(e);
-    }, [handleStepDep, isDependency, field.onChange]);
+    }), 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, { onChange: onChange, "data-testid": step.id, maxLength: maxLength, label: step.label, inputRef: ref, 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 })) })), postview && (_jsxs("div", __assign({ className: styles.print }, { children: [_jsxs("div", { children: [step.label, ":"] }), _jsx("p", __assign({ className: styles.printContainer, style: {
+        } }, { 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 })) })), postview && (_jsxs("div", __assign({ className: styles.print }, { children: [_jsxs("div", { children: [step.label, ":"] }), _jsx("p", __assign({ className: styles.printContainer, style: {
                             backgroundColor: formStyle.stepBackgroundColor,
                             borderColor: formStyle.outlineColor,
-                        } }, { children: field.value }))] })))] })));
+                        } }, { children: value }))] })))] })));
 }
 export default TextAreaStep;

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

@@ -9,70 +9,44 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import RoundedTextField from '../../../Shared/RoundedTextField/RoundedTextField';
 import styles from './MaterialTextInputStep.module.css';
-import { useController } from 'react-hook-form';
 import { calcStepWidth } from '../../StepFunctions';
-import { useCallback, useContext, useState } from 'react';
+import { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
 import { selectBreakPoint, useAppSelector } from '../../../hooks';
-import { useStepDependency } from '../../StepHooks';
+import { useFormStep } from '../../StepHooks';
 function TextInputStep(_a) {
     var _b;
     var icon = _a.icon, step = _a.step, editable = _a.editable, maxLength = _a.maxLength, defaultValue = _a.defaultValue, _c = _a.validation, validation = _c === void 0 ? step.validation : _c;
     var currentBreakPoint = useAppSelector(selectBreakPoint);
     var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
     var form = useContext(FormContext);
-    var _e = useState(), timer = _e[0], setTimer = _e[1];
-    var _f = useStepDependency(step, defaultValue), isDependency = _f.isDependency, handleStepDep = _f.handleStepDep, originalValue = _f.originalValue;
-    var _g = useController({
-        name: step.id,
-        shouldUnregister: true,
+    var _e = useFormStep(step, {
+        defaultValue: defaultValue,
+        debounce: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
             pattern: validation
                 ? {
-                    value: new RegExp(validation.value),
+                    value: new RegExp(validation.type === 'EMAIL'
+                        ? // eslint-disable-next-line no-control-regex
+                            /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/
+                        : validation.value),
                     message: validation.message,
                 }
                 : undefined,
         },
-        defaultValue: originalValue,
-    }), _h = _g.field, ref = _h.ref, field = __rest(_h, ["ref"]), error = _g.fieldState.error;
-    var onChange = useCallback(function (e) {
-        if (isDependency) {
-            try {
-                clearTimeout(timer);
-                // eslint-disable-next-line no-empty
-            }
-            catch (e) { }
-            setTimer(setTimeout(function () {
-                handleStepDep(e.target.value);
-                setTimer(undefined);
-            }, 1000));
-        }
-        field.onChange(e);
-    }, [handleStepDep, isDependency, field.onChange]);
+    }), ref = _e.ref, value = _e.value, onChange = _e.onChange, error = _e.error, field = _e.field;
     return (_jsx("div", __assign({ className: styles.container, style: {
             width: currentBreakPoint <= step.size
                 ? '100%'
                 : calcStepWidth(step.size, form.size),
-            minHeight: (!postview && editable && (step.required || validation)) ||
-                step.description
+            minHeight: step.description ||
+                (!postview && editable && (step.required || validation))
                 ? '55px'
                 : '43px',
-        } }, { children: _jsx(RoundedTextField, __assign({}, field, { onChange: onChange, maxLength: maxLength, "data-testid": step.id, label: step.label, inputRef: ref, 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 })) })));
+        } }, { 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.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TitleStepProps } from '../TitleStep';
-declare function TitleStep(props: TitleStepProps): JSX.Element;
+declare function TitleStep({ step }: TitleStepProps): JSX.Element;
 export default TitleStep;

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

@@ -9,32 +9,20 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Controller } from 'react-hook-form';
 import { calcStepWidth } from '../../StepFunctions';
 import styles from './MaterialTitleStep.module.css';
 import { useAppSelector } from '../../../hooks';
 import FormContext from '../../../Contexts/FormContext';
 import { useContext } from 'react';
-import { useStepDependency } from '../../StepHooks';
-function Title(_a) {
+import { useFormStep } from '../../StepHooks';
+function TitleStep(_a) {
     var _b;
-    var step = _a.step, value = _a.value;
+    var step = _a.step;
+    var _c = useFormStep(step).value, title = _c.title, description = _c.description;
     var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
     var form = useContext(FormContext);
     var widthStats = useAppSelector(function (state) { return state.widthStats; });
-    var _c = value !== null && value !== void 0 ? value : {}, title = _c.title, description = _c.description;
     var size = (_b = step.size) !== null && _b !== void 0 ? _b : form.size.blockNum;
     return (_jsxs("div", __assign({ className: styles.container, style: {
             color: formStyle.textColor,
@@ -50,12 +38,4 @@ function Title(_a) {
                     margin: title ? '10px 0px' : '0px 0px 5px 0px',
                 } }, { children: description })))] })));
 }
-function TitleStep(props) {
-    var step = props.step;
-    var originalValue = useStepDependency(step).originalValue;
-    return (_jsx(Controller, { name: step.id, defaultValue: originalValue, render: function (_a) {
-            var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
-            return (_jsx(Title, __assign({}, props, field, { inputRef: ref })));
-        } }));
-}
 export default TitleStep;

package/dist/FormSteps/Utils/@StepFiller/StepFiller.d.ts

@@ -0,0 +1,9 @@
+import { FillerSteps } from '../../StepFunctions';
+import React from 'react';
+export declare const SizeChangeContext: React.Context<(() => void) | undefined>;
+export interface StepFillerContainerProps {
+    step: FillerSteps;
+    children: React.ReactNode;
+}
+declare function StepFillerContainer({ step, children, }: StepFillerContainerProps): JSX.Element;
+export default StepFillerContainer;

package/dist/FormSteps/Utils/@StepFiller/StepFiller.js

@@ -0,0 +1,48 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { calcFillerSize } from '../../StepFunctions';
+import FormContext from '../../../Contexts/FormContext';
+import styles from './StepFiller.module.css';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+export var SizeChangeContext = createContext(undefined);
+function StepFiller(_a) {
+    var step = _a.step, children = _a.children;
+    var getValues = useFormContext().getValues;
+    var form = useContext(FormContext);
+    var _b = useState(calcFillerSize(step, form.steps, getValues(), form.size)), fillerSize = _b[0], setFillerSize = _b[1];
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
+    var handleSizeChange = useCallback(function () {
+        setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
+    }, []);
+    if (step.maxSize && step.maxSize < form.size.blockNum) {
+        return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
+                width: currentBreakPoint <= step.size ? '100%' : 'fit-content',
+            } }, { children: [_jsx(SizeChangeContext.Provider, __assign({ value: handleSizeChange }, { children: children })), _jsx("div", { className: styles.smallSeparator, style: {
+                        width: fillerSize,
+                    } })] })));
+    }
+    else {
+        return (_jsxs(SizeChangeContext.Provider, __assign({ value: handleSizeChange }, { children: [children, step.maxSize && _jsx("div", { className: styles.separator })] })));
+    }
+}
+function StepFillerContainer(_a) {
+    var step = _a.step, children = _a.children;
+    var handleSizeChange = useContext(SizeChangeContext);
+    if (handleSizeChange)
+        return _jsx(_Fragment, { children: children });
+    else
+        return _jsx(StepFiller, { step: step, children: children });
+}
+export default StepFillerContainer;

package/dist/FormSteps/{EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.module.css → Utils/@StepFiller/StepFiller.module.css}

@@ -1,16 +1,16 @@
-.separator {
-    flex-basis: 100%;
-    height: 0;
-}
-
-.firstLvlContainer {
-    max-width: 100%;
-    display: flex;
-    flex-flow: row wrap;
-}
-
-.smallSeparator {
-    height: 0;
-    max-width: 100%;
-    flex-basis: 0;
-}
+.firstLvlContainer {
+    max-width: 100%;
+    display: flex;
+    flex-flow: row wrap;
+}
+
+.smallSeparator {
+    height: 0;
+    max-width: 100%;
+    flex-basis: 0;
+}
+
+.separator {
+    flex-basis: 100%;
+    height: 0;
+}

package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { GSmartSelect } from '../../../@Types/GenericFormSteps';
+import { CheckBox, DatePicker, ClassifierSelector, FormSelector } from '../../../@Types/FormStep';
+interface MaterialInputProps {
+    step: GSmartSelect | CheckBox | ClassifierSelector | DatePicker | FormSelector;
+    editable: boolean;
+    onClick?: () => void;
+    children: React.ReactNode;
+}
+declare function MaterialInputContainer({ step, editable, children, onClick, }: MaterialInputProps): JSX.Element;
+export default MaterialInputContainer;

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

@@ -0,0 +1,32 @@
+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 { useContext } from 'react';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector, selectBreakPoint } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import styles from './MaterialInputContainer.module.css';
+function MaterialInputContainer(_a) {
+    var step = _a.step, editable = _a.editable, children = _a.children, onClick = _a.onClick;
+    var form = useContext(FormContext);
+    var currentBreakPoint = useAppSelector(selectBreakPoint);
+    var postview = useAppSelector(function (state) { return state.global.postview; });
+    return (_jsx("div", __assign({ className: styles.container, style: {
+            width: currentBreakPoint <= step.size
+                ? '100%'
+                : calcStepWidth(step.size, form.size),
+            minHeight: step.description || (!postview && editable && step.required)
+                ? '55px'
+                : '43px',
+        }, onClick: onClick, "data-testid": step.id }, { children: children })));
+}
+export default MaterialInputContainer;

package/dist/FormSteps/{DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.module.css → Utils/MaterialInputContainer/MaterialInputContainer.module.css}

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

package/dist/Shared/RoundedCheckBox/RoundedCheckBox.d.ts

@@ -11,14 +11,14 @@ interface StyleProps {
     size?: number | string;
     cantEdit?: boolean;
 }
-interface ComponentProps extends StyleProps {
-    onChange?: CheckboxProps['onChange'];
+interface ComponentProps extends StyleProps, Omit<CheckboxProps, 'size' | 'onChange'> {
+    onChange?: (checked: boolean) => void;
     checked: boolean;
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
  */
-declare class RoundedCheckBox extends React.Component<ComponentProps & Omit<CheckboxProps, 'size'>> {
+declare class RoundedCheckBox extends React.Component<ComponentProps> {
     render(): JSX.Element;
 }
 export default RoundedCheckBox;

package/dist/Shared/RoundedSmartSelect/RoundedSmartSelect.d.ts

@@ -38,10 +38,7 @@ export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color' |
     /** If the input is loading */
     loading?: boolean;
     /** function called when value changes */
-    handleUpdate?: (event: React.ChangeEvent<{
-        name?: string | undefined;
-        value: any;
-    }> | string, child?: React.ReactNode) => void;
+    handleUpdate?: (value: any) => void;
     /** Strig to place in the label */
     label: string;
     /** Minimum width in px of the component */

package/dist/Shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -218,10 +218,8 @@ export default function RoundedSmartSelect(_a) {
     else {
         return (_jsxs(RoundedSelect, __assign({ onBlur: onBlur, onFocus: onFocus, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: function (event) {
                 handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(options === null || options === void 0 ? void 0 : options.find(function (option) {
-                    return getValueString(option) == event.target.value;
+                    return getValueString(option) === event.target.value;
                 }));
-            }, onOpen: function () {
-                //Show loading icon if loading
             }, value: loading ? '' : getValueString(value), color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, backgroundColor: backgroundColor, outlineColor: outlineColor, cantEdit: cantEdit, disabled: cantEdit || disabled, label: label, required: required, readOnly: readOnly, helperText: hidden ? undefined : helperText, containerMargin: containerMargin, height: height, fontSize: fontSize, error: !hidden && error, iconComponent: loading
                 ? function () { return (_jsx("div", __assign({ style: {
                         marginTop: 3,

package/dist/States/SiteSlice.d.ts

@@ -25,6 +25,7 @@ export declare const SiteSlice: import("@reduxjs/toolkit").Slice<SiteState, {
         };
         type: string;
     }) => void;
+    clearDependency: (state: import("immer/dist/internal").WritableDraft<SiteState>, { payload: { id, idSection } }: PayloadAction<GBaseStep>) => void;
     setEmptyDependency: (state: import("immer/dist/internal").WritableDraft<SiteState>, { payload: { step: { id }, empty, }, }: {
         payload: {
             step: GBaseStep;
@@ -50,7 +51,7 @@ export declare const SiteSlice: import("@reduxjs/toolkit").Slice<SiteState, {
 export declare const focusStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<{
     step: FormStep;
     values: FieldValues;
-} | undefined, "site/focusStep">, setStepDependency: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+} | undefined, "site/focusStep">, clearDependency: import("@reduxjs/toolkit").ActionCreatorWithPayload<GBaseStep, "site/clearDependency">, setStepDependency: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     step: GBaseStep;
     value: StepDependency['value'];
 }, "site/setStepDependency">, addStepsDependencies: import("@reduxjs/toolkit").ActionCreatorWithPayload<{

package/dist/States/SiteSlice.js

@@ -33,11 +33,30 @@ export var SiteSlice = createSlice({
             var old = state.dependencies[id];
             if (old && (old.type !== type || old.value !== value)) {
                 state.dependencies[id] = __assign(__assign({}, state.dependencies[id]), { type: type, value: value });
-                for (var _i = 0, _d = old.dependents; _i < _d.length; _i++) {
-                    var dependent = _d[_i];
-                    if (state.idCurrentSection !== null &&
-                        dependent.idSection !== idSection) {
-                        state.values.sections[dependent.idSection][dependent.id] = calcDefaultValue(dependent);
+                if (state.idCurrentSection !== null) {
+                    for (var _i = 0, _d = old.dependents; _i < _d.length; _i++) {
+                        var dependent = _d[_i];
+                        if (dependent.idSection !== idSection) {
+                            state.values.sections[dependent.idSection][dependent.id] = calcDefaultValue(dependent);
+                        }
+                    }
+                }
+            }
+        },
+        clearDependency: function (state, _a) {
+            var _b = _a.payload, id = _b.id, idSection = _b.idSection;
+            if (state.idCurrentSection === null ||
+                state.idCurrentSection === idSection) {
+                var old = state.dependencies[id];
+                if (old && old.value !== null) {
+                    state.dependencies[id] = __assign(__assign({}, state.dependencies[id]), { value: null, empty: false });
+                    if (state.idCurrentSection !== null) {
+                        for (var _i = 0, _c = old.dependents; _i < _c.length; _i++) {
+                            var dependent = _c[_i];
+                            if (dependent.idSection !== idSection) {
+                                state.values.sections[dependent.idSection][dependent.id] = calcDefaultValue(dependent);
+                            }
+                        }
                     }
                 }
             }
@@ -106,5 +125,5 @@ export var SiteSlice = createSlice({
         });
     },
 });
-export var focusStep = (_a = SiteSlice.actions, _a.focusStep), setStepDependency = _a.setStepDependency, addStepsDependencies = _a.addStepsDependencies, setEmptyDependency = _a.setEmptyDependency, handlePrevious = _a.handlePrevious, handleNext = _a.handleNext;
+export var focusStep = (_a = SiteSlice.actions, _a.focusStep), clearDependency = _a.clearDependency, setStepDependency = _a.setStepDependency, addStepsDependencies = _a.addStepsDependencies, setEmptyDependency = _a.setEmptyDependency, handlePrevious = _a.handlePrevious, handleNext = _a.handleNext;
 export default SiteSlice;

package/dist/hooks.d.ts

@@ -1,5 +1,7 @@
 import type { TypedUseSelectorHook } from 'react-redux';
 import { type RootState, type AppDispatch } from './Utils/store';
+import React from 'react';
+export declare const StoreContext: React.Context<any>;
 export declare const useAppDispatch: () => AppDispatch;
 export declare const useAppSelector: TypedUseSelectorHook<RootState>;
 export declare const selectBreakPoint: (state: RootState) => number;

package/dist/hooks.js

@@ -1,7 +1,11 @@
-import { useDispatch, useSelector } from 'react-redux';
+import { createDispatchHook, createSelectorHook } from 'react-redux';
 import { defaultRootState, } from './Utils/store';
 import { useContext } from 'react';
 import { IdFormContext } from './App/App';
+import React from 'react';
+export var StoreContext = React.createContext({});
+var useSelector = createSelectorHook(StoreContext);
+var useDispatch = createDispatchHook(StoreContext);
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export var useAppDispatch = function () {
     var idForm = useContext(IdFormContext);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "2.0.19",
+    "version": "2.0.21",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -9,7 +9,7 @@
         "test": "react-scripts test",
         "test-ci": "react-scripts test --reporters=default --reporters=jest-junit --coverage --coverageReporters cobertura html",
         "tsc-build": "tsc --noEmit false --outDir ./dist --incremental false",
-        "watch": "tsc -w --preserveWatchOutput",
+        "watch": "tsc -w --noEmit false --outDir ./dist --preserveWatchOutput",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
         "cypress": "DISPLAY=:0 cypress open"