@arquimedes.co/eureka-forms 3.0.39 → 3.0.42-test

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -1,17 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialCheckBoxStep.module.css';
-import RoundedCheckBox from '../../../Shared/RoundedCheckBox/RoundedCheckBox';
+import ErkCheckBox from '../../../Shared/ErkCheckbox/ErkCheckBox';
 import React, { useContext } from 'react';
 import StepComponent from '../../Step';
 import FormContext from '../../../Contexts/FormContext';
@@ -20,41 +9,34 @@ import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 import { calcStepWidth } from '../../StepFunctions';
-function CheckBoxStep(_a) {
-    var _b;
-    var step = _a.step, editable = _a.editable;
-    var _c = useFormStep(step, {
-        defaultValue: (_b = step.defaultValue) !== null && _b !== void 0 ? _b : false,
+function CheckBoxStep({ step, editable }) {
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? false,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
         sizeChange: true,
-    }), ref = _c.ref, value = _c.value, onChange = _c.onChange, error = _c.error, field = _c.field;
-    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
-    var form = useContext(FormContext);
-    var renderNested = function () {
-        var steps = value ? step.steps : step.uncheckedSteps;
-        return (_jsx(React.Fragment, { children: steps === null || steps === void 0 ? void 0 : steps.map(function (idStep) {
-                var subStep = form.steps[idStep];
-                return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+    });
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const renderNested = () => {
+        const steps = value ? step.steps : step.uncheckedSteps;
+        return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
+                const subStep = form.steps[idStep];
+                return _jsx(StepComponent, { editable: editable, step: subStep }, idStep);
             }) }));
     };
-    var renderLabel = function (colon) {
-        if (colon === void 0) { colon = false; }
-        return (_jsxs("div", __assign({ className: step.size === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
+    const renderLabel = (colon = false) => {
+        return (_jsxs("div", { className: step.size === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
                 maxWidth: calcStepWidth(step.size, form.size) - 45,
-            } }, { children: [step.label, step.required ? ' *' : '', colon ? ':' : ''] })));
+            }, children: [step.label, step.required ? ' *' : '', colon ? ':' : ''] }));
     };
-    return (_jsxs(StepFillerContainer, __assign({ step: step }, { children: [_jsx(MaterialInputContainer, __assign({ step: step, editable: editable, maxHeight: step.size < 4 }, { children: _jsxs("div", __assign({ className: styles.container }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer, style: {
+    return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, maxHeight: step.size < 4, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.labelCheckBoxContainer, style: {
                                 height: step.size < 4 ? 31 : undefined,
                                 minHeight: 31,
                                 alignItems: step.isList ? 'start' : 'center',
-                            } }, { children: [step.label && !step.isList && renderLabel(true), _jsx(RoundedCheckBox, __assign({}, field, { inputRef: ref, onChange: onChange, "data-testid": step.id, padding: "0px", size: "1.6rem", error: !!error, cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: value })), step.label && step.isList && renderLabel()] })), (step.description || !!error) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
-                                color: error
-                                    ? formStyle.errorColor
-                                    : formStyle.descriptionTextColor,
-                            } }, { children: error
-                                ? 'Este campo es obligatorio'
-                                : step.description })))] })) })), renderNested()] })));
+                            }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {
+                                color: error ? formStyle.errorColor : formStyle.descriptionTextColor,
+                            }, children: error ? 'Este campo es obligatorio' : step.description }))] }) }), renderNested()] }));
 }
 export default CheckBoxStep;

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ClassifierSelector } from '../../@Types/FormStep';
 import { StepProps } from '../Step';
 export interface ClassifierSelectorStepProps extends StepProps {

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.js

@@ -1,24 +1,13 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialClassifierSelectorStep from './MaterialClassifierSelectorStep/MaterialClassifierSelectorStep';
 import { useAppSelector } from '../../hooks';
 function ClassifierSelectorStep(props) {
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    const { formStyle } = useAppSelector((state) => state.global);
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialClassifierSelectorStep, __assign({}, props));
+            return _jsx(MaterialClassifierSelectorStep, { ...props });
         }
     }
 }

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.d.ts

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

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -1,107 +1,75 @@
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useEffect, useMemo } from 'react';
 import { ClassifierOptionTypes } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
-import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
+import ErkSmartSelect from '../../../Shared/ErkSmartSelect/ErkSmartSelect';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
-import { recursivelyCalcConditionSteps, selectDependencies, useFormStep, } from '../../StepHooks';
+import { recursivelyCalcConditionSteps, selectDependencies, useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
 import { calcDefaultValue, evaluateCondition } from '../../StepFunctions';
-function ClassifierSelectorStep(_a) {
-    var _b, _c, _d, _e;
-    var step = _a.step, editable = _a.editable;
-    var _f = useFormStep(step, {
+function ClassifierSelectorStep({ step, editable }) {
+    const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: calcDefaultValue(step),
         sizeChange: true,
         rules: {
             required: step.required ? 'Este campo es obligatorio' : undefined,
         },
-    }), ref = _f.ref, value = _f.value, onChange = _f.onChange, error = _f.error, field = _f.field;
-    var idDependencies = useMemo(function () {
-        var _a;
-        var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
-        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));
+    });
+    const idDependencies = useMemo(() => {
+        const dependencies = [...(step.dependencies ?? [])];
+        for (const option of Object.values(step.options)) {
+            if (option.type !== ClassifierOptionTypes.HIDE && option.condition) {
+                dependencies.push(...recursivelyCalcConditionSteps(option.condition));
             }
         }
         return dependencies;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    var dependencies = useAppSelector(function (state) {
-        return selectDependencies(state, idDependencies);
-    });
-    var _g = useAppSelector(function (state) { return state.global; }), formStyle = _g.formStyle, postview = _g.postview, preview = _g.preview;
-    var form = useContext(FormContext);
-    if (!step.idClassifier)
-        return _jsx("div", {});
-    var classifier = (_b = form.classifiers) === null || _b === void 0 ? void 0 : _b[step.idClassifier];
-    if (!classifier)
-        return _jsx("div", {});
-    var options = useMemo(function () {
-        var _a, _b;
-        return ((_b = (_a = classifier.children) === null || _a === void 0 ? void 0 : _a.filter(function (idClassifier) {
-            var _a;
-            var option = step.options[idClassifier];
-            if ((option === null || option === void 0 ? void 0 : option.type) === ClassifierOptionTypes.HIDE ||
-                !((_a = form.classifiers) === null || _a === void 0 ? void 0 : _a[idClassifier])) {
+    const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
+    const dependenciesValues = useMemo(() => idDependencies.map((id) => dependencies[id].value), [dependencies, idDependencies]);
+    const { postview, preview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const classifier = form.classifiers?.[step.idClassifier ?? ''];
+    const options = useMemo(() => {
+        return classifier?.children
+            ?.filter((idClassifier) => {
+            const option = step.options[idClassifier];
+            if (option?.type === ClassifierOptionTypes.HIDE || !form.classifiers?.[idClassifier]) {
                 return false;
             }
-            return (!option ||
-                !(option === null || option === void 0 ? void 0 : option.condition) ||
-                evaluateCondition(option.condition, dependencies));
-        }).map(function (idClassifier) {
-            var _a, _b, _c;
-            var classifier = (_a = form.classifiers) === null || _a === void 0 ? void 0 : _a[idClassifier];
+            return !option?.condition || evaluateCondition(option.condition, dependencies);
+        })
+            .map((idClassifier) => {
+            const classifier = form.classifiers?.[idClassifier];
             return {
-                value: classifier === null || classifier === void 0 ? void 0 : classifier._id,
-                label: ((_c = (_b = classifier === null || classifier === void 0 ? void 0 : classifier.clientName) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) && preview
-                    ? classifier === null || classifier === void 0 ? void 0 : classifier.clientName
-                    : classifier === null || classifier === void 0 ? void 0 : classifier.name,
+                value: classifier?._id,
+                label: classifier?.clientName?.trim?.() && preview ? classifier?.clientName : classifier?.name,
             };
-        })) !== null && _b !== void 0 ? _b : []);
-    }, idDependencies.map(function (id) { return dependencies[id].value; }));
-    var mapNestedOption = function () {
-        if (value) {
-            var currentOption = step.options[value.value];
-            if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
-                return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
-                        var subStep = form.steps[idStep];
-                        return (_jsx(StepComponent, { step: subStep, editable: editable }, idStep));
-                    }) }));
-            }
-        }
-    };
-    useEffect(function () {
-        if (value && !options.find(function (option) { return option.value === (value === null || value === void 0 ? void 0 : value.value); })) {
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dependenciesValues]);
+    useEffect(() => {
+        if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options]);
-    return (_jsxs(StepFillerContainer, __assign({ step: step }, { children: [_jsx(MaterialInputContainer, __assign({ step: step, editable: editable }, { children: _jsx(RoundedSmartSelect, __assign({}, field, { inputRef: ref, value: value, disabled: false, loading: false, options: options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_c = formStyle.stepBackgroundColor) !== null && _c !== void 0 ? _c : 'white', label: step.label ? step.label : classifier.name, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: onChange, getOptionSelected: function (option, value) {
-                        return option.value === (value === null || value === void 0 ? void 0 : value.value);
-                    }, helperText: (_e = (_d = error === null || error === void 0 ? void 0 : error.message) === null || _d === void 0 ? void 0 : _d.toString()) !== null && _e !== void 0 ? _e : step.description, error: !!error })) })), mapNestedOption()] })));
+    if (!step.idClassifier || !classifier)
+        return _jsx(_Fragment, {});
+    const mapNestedOption = () => {
+        if (!value)
+            return null;
+        const currentOption = step.options[value.value];
+        if (currentOption?.type !== ClassifierOptionTypes.NESTED)
+            return null;
+        return (_jsx(React.Fragment, { children: currentOption.steps.map((idStep) => {
+                const subStep = form.steps[idStep];
+                return _jsx(StepComponent, { step: subStep, editable: editable }, idStep);
+            }) }));
+    };
+    return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, error: !!error, options: options, onChange: onChange, readOnly: !editable || postview, label: step.label ? step.label : classifier.name, required: step.required, searchable: step.searchable, helperText: error?.message?.toString() ?? step.description, getOptionSelected: (option, value) => option.value === value?.value }) }), mapNestedOption()] }));
 }
 export default ClassifierSelectorStep;

package/dist/FormSteps/CollapsibleStep/CollapsibleStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Collapsible } from '../../@Types/FormStep';
 import { StepProps } from '../Step';
 export interface CollapsibleStepProps extends StepProps {

package/dist/FormSteps/CollapsibleStep/CollapsibleStep.js

@@ -1,38 +1,15 @@
-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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useAppSelector } from '../../hooks';
 import { FormStyleTypes } from '../../constants/FormStepTypes';
 import MaterialCollapsibleStep from './MaterialTitleStep/MaterialCollapsibleStep';
-function CollapsibleStep(_a) {
-    var step = _a.step, others = __rest(_a, ["step"]);
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+function CollapsibleStep({ step, ...others }) {
+    const { formStyle } = useAppSelector((state) => state.global);
     if (step.steps.length === 0)
         return _jsx(_Fragment, {});
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialCollapsibleStep, __assign({ step: step }, others));
+            return _jsx(MaterialCollapsibleStep, { step: step, ...others });
         }
     }
 }

package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.d.ts

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

package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.js

@@ -1,88 +1,57 @@
-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 { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import styles from './MaterialCollapsibleStep.module.css';
 import { Controller, useFormContext } from 'react-hook-form';
 import StepComponent from '../../Step';
-import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
-import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppSelector } from '../../../hooks';
-function Collapsible(_a) {
-    var _b, _c, _d;
-    var step = _a.step, open = _a.open, setOpen = _a.setOpen, others = __rest(_a, ["step", "open", "setOpen"]);
-    var _e = useState(true), firstTime = _e[0], setFirstTime = _e[1];
-    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
-    var form = useContext(FormContext);
-    var errors = useFormContext().formState.errors;
-    var contentRef = React.useRef(null);
-    useEffect(function () {
-        var _a;
-        if (!open && ((_a = step.dependencies) === null || _a === void 0 ? void 0 : _a.find(function (dep) { return !!errors[dep]; }))) {
+import ExpandLessIcon from '../../../Icons/ExpandLessIcon';
+import ExpandMoreIcon from '../../../Icons/ExpandMoreIcon';
+function Collapsible({ step, open, setOpen, ...others }) {
+    const [firstTime, setFirstTime] = useState(true);
+    const { formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const { formState: { errors }, } = useFormContext();
+    const contentRef = React.useRef(null);
+    const depsErrors = useMemo(() => step.dependencies?.map((dep) => errors[dep]) ?? [], [step.dependencies, errors]);
+    useEffect(() => {
+        //TODO: review this
+        if (!open && depsErrors.find((dep) => !!dep)) {
             setOpen(true);
         }
-    }, (_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { return errors[dep]; })) !== null && _c !== void 0 ? _c : []);
-    return (_jsxs("div", __assign({ style: { maxWidth: '100%' } }, { children: [_jsxs("div", __assign({ className: styles.container, style: {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [depsErrors]);
+    return (_jsxs("div", { style: { maxWidth: '100%' }, children: [_jsxs("div", { className: styles.container, style: {
                     color: formStyle.textColor,
                     borderColor: formStyle.primaryColor,
-                } }, { children: [_jsx("div", __assign({ className: styles.collapsibleLabel, onClick: function () {
+                }, children: [_jsx("div", { className: styles.collapsibleLabel, onClick: () => {
                             if (firstTime)
                                 setFirstTime(false);
                             setOpen(!open);
-                        } }, { children: step.label })), _jsx("div", __assign({ className: styles.expand, onClick: function () {
+                        }, children: step.label }), _jsx("div", { className: styles.expand, onClick: () => {
                             if (firstTime)
                                 setFirstTime(false);
                             setOpen(!open);
-                        } }, { children: _jsx("div", __assign({ className: styles.expandIcon }, { children: open ? (_jsx(ExpandLessRoundedIcon, { fontSize: "inherit" })) : (_jsx(ExpandMoreRoundedIcon, { fontSize: "inherit" })) })) }))] })), _jsx("div", __assign({ className: styles.content, style: {
-                    height: open
-                        ? firstTime
-                            ? 'auto'
-                            : (_d = contentRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight
-                        : 0,
-                } }, { children: _jsx("div", __assign({ className: styles.contentContainer, ref: contentRef }, { children: step.steps.map(function (idSubStep) {
-                        var subStep = form.steps[idSubStep];
-                        return (_createElement(StepComponent, __assign({}, others, { step: subStep, key: idSubStep })));
-                    }) })) })), _jsx("div", { className: styles.separator, style: {
+                        }, children: _jsx("div", { className: styles.expandIcon, children: open ? (_jsx(ExpandLessIcon, { style: { fontSize: 'inherit' } })) : (_jsx(ExpandMoreIcon, { style: { fontSize: 'inherit' } })) }) })] }), _jsx("div", { className: styles.content, style: {
+                    height: open ? (firstTime ? 'auto' : contentRef.current?.offsetHeight) : 0,
+                }, children: _jsx("div", { className: styles.contentContainer, ref: contentRef, children: step.steps.map((idSubStep) => {
+                        const subStep = form.steps[idSubStep];
+                        return _createElement(StepComponent, { ...others, step: subStep, key: idSubStep });
+                    }) }) }), _jsx("div", { className: styles.separator, style: {
                     backgroundColor: formStyle.primaryColor,
-                } })] })));
+                } })] }));
 }
 function CollapsibleStep(props) {
-    var _a;
-    var postview = useAppSelector(function (state) { return state.global; }).postview;
-    var _b = useFormContext(), clearErrors = _b.clearErrors, errors = _b.formState.errors;
-    return (_jsx(Controller, { name: props.step.id, defaultValue: (_a = props.step.defaultValue) !== null && _a !== void 0 ? _a : (postview ? false : true), render: function (_a) {
-            var _b = _a.field, value = _b.value, onChange = _b.onChange;
-            return (_jsx(Collapsible, __assign({}, props, { open: value, setOpen: function (open) {
-                    var _a;
-                    if (!open) {
-                        var deps = (_a = props.step.dependencies) === null || _a === void 0 ? void 0 : _a.filter(function (dep) { return !!errors[dep]; });
-                        if (deps)
-                            clearErrors(deps);
-                    }
-                    onChange(open);
-                } })));
-        } }));
+    const { postview } = useAppSelector((state) => state.global);
+    const { clearErrors, formState: { errors }, } = useFormContext();
+    return (_jsx(Controller, { name: props.step.id, defaultValue: props.step.defaultValue ?? (postview ? false : true), render: ({ field: { value, onChange } }) => (_jsx(Collapsible, { ...props, open: value, setOpen: (open) => {
+                if (!open) {
+                    const deps = props.step.dependencies?.filter((dep) => !!errors[dep]);
+                    if (deps)
+                        clearErrors(deps);
+                }
+                onChange(open);
+            } })) }));
 }
 export default CollapsibleStep;

package/dist/FormSteps/CustomStep.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StepProps } from './Step';
 import { Form } from '../@Types';
 import { GlobalState } from '../States/GlobalSlice';

package/dist/FormSteps/CustomStep.js

@@ -1,38 +1,24 @@
-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 FormContext from '../Contexts/FormContext';
 import { useAppSelector } from '../hooks';
 import CustomStepPropsContext from '../Contexts/CustomContext';
 import { useContext } from 'react';
 import { useStepDependency } from './StepHooks';
-function CustomStepComponent(_a) {
-    var customComponent = _a.customComponent, _b = _a.customProps, customProps = _b === void 0 ? {} : _b, props = __rest(_a, ["customComponent", "customProps"]);
-    var form = useContext(FormContext);
-    var global = useAppSelector(function (state) { return state.global; });
-    var customStepProps = useContext(CustomStepPropsContext).customStepProps;
-    var dependencyStore = useAppSelector(function (state) { return state.site.dependencies; });
-    var widthStats = useAppSelector(function (state) { return state.widthStats; });
-    var dependencyInfo = useStepDependency(props.step, undefined);
-    return customComponent(__assign(__assign(__assign(__assign(__assign({}, global), dependencyInfo), props), { dependencyStore: dependencyStore, widthStats: widthStats, form: form, customStepProps: customStepProps }), customProps));
+function CustomStepComponent({ customComponent, customProps = {}, ...props }) {
+    const form = useContext(FormContext);
+    const global = useAppSelector((state) => state.global);
+    const { customStepProps } = useContext(CustomStepPropsContext);
+    const dependencyStore = useAppSelector((state) => state.site.dependencies);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const dependencyInfo = useStepDependency(props.step, undefined);
+    return customComponent({
+        ...global,
+        ...dependencyInfo,
+        ...props,
+        dependencyStore,
+        widthStats,
+        form,
+        customStepProps,
+        ...customProps,
+    });
 }
 export default CustomStepComponent;

package/dist/FormSteps/DatePickerRangeStep/DatePickerRangeStep.d.ts

@@ -0,0 +1,10 @@
+import { DatePickerRange } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface DatePickerRangeStepProps extends StepProps {
+    /** The DatePickerRangeStep to display */
+    step: DatePickerRange;
+    /** Default value to display */
+    defaultValue?: string[] | null;
+}
+declare function DatePickerRangeStep(props: DatePickerRangeStepProps): JSX.Element;
+export default DatePickerRangeStep;

package/dist/FormSteps/DatePickerRangeStep/DatePickerRangeStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialDatePickerRangeStep from './MaterialDatePickerRangeStep/MaterialDatePickerRangeStep';
+import { useAppSelector } from '../../hooks';
+function DatePickerRangeStep(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialDatePickerRangeStep, { ...props });
+        }
+    }
+}
+export default DatePickerRangeStep;

package/dist/FormSteps/DatePickerRangeStep/MaterialDatePickerRangeStep/MaterialDatePickerRangeStep.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerRangeStepProps } from '../DatePickerRangeStep';
+declare function MaterialDatePickerRangeStep({ step, editable, defaultValue }: DatePickerRangeStepProps): JSX.Element;
+export default MaterialDatePickerRangeStep;

package/dist/FormSteps/DatePickerRangeStep/MaterialDatePickerRangeStep/MaterialDatePickerRangeStep.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import ErkDateRangePicker from '../../../Shared/ErkDateRangePicker/ErkDateRangePicker';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+const safeDate = (dateString) => {
+    if (!dateString)
+        return undefined;
+    const date = new Date(dateString);
+    return isNaN(date.getTime()) ? undefined : date;
+};
+function MaterialDatePickerRangeStep({ step, editable, defaultValue }) {
+    const postview = useAppSelector((state) => state.global.postview);
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const handleChange = useCallback((dateRange) => {
+        const [start, end] = dateRange;
+        if (start && end) {
+            onChange([start.toISOString(), end.toISOString()]);
+        }
+        else {
+            onChange(null);
+        }
+    }, [onChange]);
+    const [minDate, maxDate] = [safeDate(step.minDate), safeDate(step.maxDate)];
+    const dateRangeValue = value?.length === 2 ? [safeDate(value[0]) ?? null, safeDate(value[1]) ?? null] : [null, null];
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDateRangePicker, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, minDate: minDate, maxDate: maxDate, labelMargin: 0, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+}
+export default MaterialDatePickerRangeStep;

package/dist/FormSteps/DatePickerStep/DatePickerStep.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { DatePicker } from '../../@Types/FormStep';
 import { StepProps } from '../Step';
 export interface DatePickerStepProps extends StepProps {
     /** The DatePickerStep to display */
     step: DatePicker;
     /** Default value to display */
-    defaultValue?: Date | null;
+    defaultValue?: string | null;
 }
 declare function DatePickerStep(props: DatePickerStepProps): JSX.Element;
 export default DatePickerStep;