@arquimedes.co/eureka-forms 3.0.30-test → 3.0.31

package/dist/@Types/FormStep.d.ts

@@ -4,7 +4,7 @@ import { Condition } from './Condition';
 import { EurekaDraft } from './Draft/Draft';
 import * as GSteps from './GenericFormSteps';
 import { Time } from './Time';
-export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper;
+export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper | DatePickerRange;
 export interface Title extends GSteps.GBaseStep {
     type: FormStepTypes.TITLE;
     title?: EurekaDraft;
@@ -48,6 +48,9 @@ export interface TextInput extends GSteps.GTextInput {
 export interface DatePicker extends GSteps.GDatePicker {
     type: FormStepTypes.DATEPICKER;
 }
+export interface DatePickerRange extends GSteps.GDatePickerRange {
+    type: FormStepTypes.DATEPICKER_RANGE;
+}
 export interface Collapsible extends GSteps.GBaseStep {
     type: FormStepTypes.COLLAPSIBLE;
     label: string;

package/dist/@Types/GenericFormSteps.d.ts

@@ -51,6 +51,12 @@ export interface GDatePicker extends GBaseStep {
     required: boolean;
     size: 1 | 2 | 3 | 4;
 }
+export interface GDatePickerRange extends GBaseStep {
+    label: string;
+    description: string | null;
+    required: boolean;
+    size: 1 | 2 | 3 | 4;
+}
 export interface GTimePicker extends GBaseStep {
     label: string;
     description: string | null;

package/dist/App/AppHooks.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { reset } from '../States/GlobalSlice';
 import { fetchOrganization } from '../Services/OrganizationService';
 import { fetchForm } from '../Services/FormService';
@@ -15,6 +15,9 @@ export const useSetupApp = (isEmbedded, props) => {
     const [form, setForm] = useState(undefined);
     const [organization, setOrganization] = useState(undefined);
     const dispatch = useAppDispatch();
+    // Create stable stringified versions that only change when content changes
+    const valuesDataKey = useMemo(() => JSON.stringify(valuesData), [valuesData]);
+    const formDataKey = useMemo(() => JSON.stringify(formData), [formData]);
     const loadOrg = async (idOrganization) => {
         const organization = await fetchOrganization(idOrganization);
         if (organization) {
@@ -119,21 +122,21 @@ export const useSetupApp = (isEmbedded, props) => {
         return () => {
             dispatch({ type: 'CLEAR' });
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // Use stringified keys for stable comparison - only changes when content changes
+        // Other object/function props (classifiers) are still
+        // intentionally excluded to prevent re-renders when parent re-creates these objects
     }, [
-        dispatch,
+        apiKey,
+        partial,
         preview,
         internal,
         postview,
-        partial,
         editable,
-        handleConfirmed,
         customSteps,
-        valuesData,
-        apiKey,
-        formData,
-        classifiers,
+        formDataKey,
+        valuesDataKey,
         idCurrentAgent,
+        handleConfirmed,
     ]);
     const reload = useCallback(() => {
         if (!form)
@@ -146,12 +149,11 @@ export const useSetupApp = (isEmbedded, props) => {
         if (handleConfirmed) {
             handleConfirmed();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [form]);
     return {
         form,
         organization,
-        branding: organization?.customBrandings ? form?.branding ?? organization.branding : organization?.branding,
+        branding: organization?.customBrandings ? (form?.branding ?? organization.branding) : organization?.branding,
         reload,
     };
 };
@@ -172,6 +174,5 @@ export const useLogRocket = (organization, form, { apiKey, internal, postview, p
     };
     useEffect(() => {
         void loadLogRocket();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [organization, form]);
 };

package/dist/Form/Form.js

@@ -34,14 +34,12 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
             formMethods.setFocus(idFocusStep);
             dispatch(focusStep(undefined));
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [idFocusStep]);
     const onSubmit = useCallback(async (values) => {
         let token = null;
         if (form.hasCaptcha && !internal && !customSubmit) {
             token = recaptchaRef.current?.getValue();
-            if (!token)
-                token = await recaptchaRef?.current.executeAsync();
+            token ?? (token = await recaptchaRef?.current.executeAsync());
         }
         const ApiKey = internal ? form.apiKey : apiKey;
         if (!ApiKey && !customSubmit && !customSubmitBtns)
@@ -78,9 +76,7 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
         catch (error) {
             console.error(error);
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [customSteps, internal, customSubmit, idOrganization, idForm]);
+    }, [customSteps, internal, customSubmit, idOrganization, idForm]);
     useWidthStats(containerRef, form, postview, internal);
     const isResponsive = useAppSelector((state) => state.widthStats.isResponsive);
     const renderForm = () => {

package/dist/Form/FormHooks.js

@@ -30,6 +30,5 @@ export function useWidthStats(containerRef, form, postview, internal) {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 }

package/dist/Form/FormTypes/ColumnForm/ColumnForm.js

@@ -25,7 +25,6 @@ function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
     useEffect(() => {
         if (props.setSubmit)
             props.setSubmit(submit);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.setSubmit]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
@@ -47,7 +46,6 @@ function ColumnForm({ onSubmit, customSubmitBtns, ...props }) {
         values = await onSubmit(values);
         setLoading(false);
         return values;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [form]);
     return (_jsxs("div", { className: styles.container, style: { color: formStyle.textColor }, children: [loading && _jsx("div", { className: styles.curtain }), previous.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), next.map((idSection) => (_jsx(Section, { idSection: idSection }, idSection))), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [customSubmitBtns === undefined && (_jsx("div", { className: styles.submitBtnContainer, children: _jsx(CustomBtn, { onClick: () => void submit(), width: "calc(100% - 70px)", label: sendLabel ?? 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) })), customSubmitBtns?.(submit, loading)] }))] }));
 }

package/dist/Form/FormTypes/StepperForm/StepperForm.js

@@ -29,7 +29,6 @@ function StepperForm({ onSubmit, scrollToTop }) {
     const handlePrevious = useCallback(() => {
         dispatch(SiteReducer.handlePrevious({ values: getValues(), form }));
         scrollToTop?.();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const handleNext = useCallback(async () => {
         setLoading('NEXT');
@@ -58,7 +57,6 @@ function StepperForm({ onSubmit, scrollToTop }) {
         const response = await onSubmit(values);
         setLoading(undefined);
         return response;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [next]);
     if (!idCurrent)
         return _jsx(_Fragment, {});

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.js

@@ -34,7 +34,6 @@ function CBRIncidentsStep({ step, editable, ...others }) {
         if (firstRender && value.length === 0 && !postview && editable) {
             handleAddIncident();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [firstRender]);
     const handleAddIncident = () => {
         const current = value.filter((incident) => !incident.deleted);

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

@@ -25,7 +25,6 @@ function ClassifierSelectorStep({ step, editable }) {
             }
         }
         return dependencies;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
     const { postview, preview } = useAppSelector((state) => state.global);
@@ -47,14 +46,11 @@ function ClassifierSelectorStep({ step, editable }) {
                 label: classifier?.clientName?.trim?.() && preview ? classifier?.clientName : classifier?.name,
             };
         });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    idDependencies.map((id) => dependencies[id].value));
+    }, idDependencies.map((id) => dependencies[id].value));
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options]);
     if (!step.idClassifier || !classifier)
         return _jsx(_Fragment, {});

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

@@ -18,9 +18,7 @@ function Collapsible({ step, open, setOpen, ...others }) {
         if (!open && step.dependencies?.find((dep) => !!errors[dep])) {
             setOpen(true);
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    step.dependencies?.map((dep) => errors[dep]) ?? []);
+    }, step.dependencies?.map((dep) => errors[dep]) ?? []);
     return (_jsxs("div", { style: { maxWidth: '100%' }, children: [_jsxs("div", { className: styles.container, style: {
                     color: formStyle.textColor,
                     borderColor: formStyle.primaryColor,

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,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import ErkDatePickerRange from '../../../Shared/ErkDatePickerRange/ErkDatePickerRange';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+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 dateRangeValue = value && value.length === 2 ? [new Date(value[0]), new Date(value[1])] : [null, null];
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkDatePickerRange, { ...field, value: dateRangeValue, inputRef: ref, error: !!error, labelMargin: 0, onChange: handleChange, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
+}
+export default MaterialDatePickerRangeStep;

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -22,7 +22,6 @@ function EntityValuePickerStep({ step, editable }) {
             ids.push(...recursivelyCalcConditionSteps(dialog.condition));
         }
         return ids;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dialogDeps = useAppSelector((state) => selectDependencies(state, dialogsIdStepDeps));
     const handleCloseDialog = useCallback(() => {

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -64,7 +64,6 @@ function FileUploadStep({ step, editable }) {
             void getLinks(filesToFetchLink);
             onChange([...value, ...filesToFetchLink]);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fileChange]);
     async function getLinks(pFiles) {
         try {

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.js

@@ -19,7 +19,6 @@ function MapperElementComponent(props) {
             ...customContext,
             customStepProps: props.calcCustomStepProps(element, customContext.customStepProps),
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [element, customContext]);
     if (element.deleted)
         return _jsx(_Fragment, {});

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.js

@@ -29,7 +29,6 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     const prevIndex = useMemo(() => {
         for (let i = page - 1; i >= 0; i--) {
@@ -39,7 +38,6 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             }
         }
         return null;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     const handleErrors = handleSubmit(() => { }, (errors) => {
@@ -70,9 +68,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
             page: index,
         });
         return;
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [elements]);
+    }, [elements]);
     const widthStats = useAppSelector((state) => state.widthStats);
     const { calcName } = customElementModifiers ?? {};
     const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -33,9 +33,7 @@ function MapperComponent({ form, step, error, value, loading, inputRef, editable
             elements: tempElements,
             page: page === index ? newPage : page,
         });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [elements, onChange]);
+    }, [elements, onChange]);
     const inputValue = useMemo(() => JSON.stringify(elements), [elements]);
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const { container } = useMemo(() => {
@@ -89,7 +87,6 @@ function MapperStep(props) {
             if (!customAdd)
                 handleAddElement();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const handleAddElement = useCallback((elementValue) => {
         const { element, steps, mappers } = addMapperStep(step, customSteps);
@@ -109,10 +106,7 @@ function MapperStep(props) {
             customSteps,
             allSteps: { ...form.steps, ...steps },
         }));
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [step, form, customSteps, value, onChange]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step, form, customSteps, value, onChange]);
     const subForm = useMemo(() => ({ ...form, steps: { ...form.steps, ...localSteps } }), [localSteps]);
     return (_jsx(MapperComponent, { ...props, error: error, inputRef: ref, onChange: onChange, value: value, handleAddElement: handleAddElement, form: subForm }));
 }
@@ -142,10 +136,7 @@ export function CustomMapperStep(props) {
             customSteps,
             allSteps: { ...form.steps, ...steps },
         }));
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [step, form, customSteps, elements, onChange]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [step, form, customSteps, elements, onChange]);
     const subForm = useMemo(() => ({ ...form, steps: { ...form.steps, ...localSteps } }), [localSteps]);
     return _jsx(MapperComponent, { ...props, form: subForm, onChange: onChange, handleAddElement: handleAddElement });
 }

package/dist/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -27,7 +27,6 @@ function SelectorStep({ step, editable }) {
             }
         }
         return dependencies;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const dependencies = useAppSelector((state) => selectDependencies(state, idDependencies));
     const mapNestedOption = () => {
@@ -54,14 +53,11 @@ function SelectorStep({ step, editable }) {
                 return true;
             return false;
         });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    idDependencies.map((id) => dependencies[id].value));
+    }, idDependencies.map((id) => dependencies[id].value));
     useEffect(() => {
         if (value && !filteredOptions.find((option) => option.value === value?.value)) {
             onChange('');
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filteredOptions]);
     return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, error: !!error, label: step.label, onChange: onChange, required: step.required, options: filteredOptions, searchable: step.searchable, readOnly: !editable || postview, helperText: error?.message?.toString() ?? step.description, getOptionSelected: (option, value) => option?.value === value?.value }) }), value && mapNestedOption()] }));
 }

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

@@ -32,9 +32,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
     const idDependencies = useMemo(() => getOptionsConditionsIdSteps(step), [getOptionsConditionsIdSteps, step]);
     const dependencies = useAppSelector((state) => selectDependencies(state, allDeps));
     const deps = useAppSelector((state) => selectDependencies(state, idDependencies));
-    const conditionDependencies = useMemo(() => deps, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    idDependencies.map((id) => deps[id]));
+    const conditionDependencies = useMemo(() => deps, idDependencies.map((id) => deps[id]));
     const { emptyDep, invalids } = useAppSelector((state) => selectStepDependencies(state, step, form));
     const { getValues, setFocus } = useFormContext();
     const isEmpty = useAppSelector((state) => state.site.dependencies[step.id]?.empty);
@@ -47,9 +45,7 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         else if (value && !step.searchable) {
             setOptions([value]);
         }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    allDeps.map((dep) => dependencies[dep]?.value) ?? []);
+    }, allDeps.map((dep) => dependencies[dep]?.value) ?? []);
     const calcOptions = async (firstTime) => {
         if (!firstTime)
             setOptions(undefined);
@@ -114,13 +110,11 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
         }
         if (!touched)
             setTouched(true);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options, emptyDep, postview, editable, invalids, touched]);
     const filteredOptions = useMemo(() => {
         if (!options || !filterOptions)
             return options;
         return filterOptions(options, conditionDependencies);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [options, conditionDependencies]);
     const errorMsg = useMemo(() => {
         if (postview || loading)
@@ -138,7 +132,6 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
             return 'Error al cargar las opciones';
         }
         return undefined;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [invalids, touched, value, filteredOptions]);
     return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, onClick: onFocus, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, onFocus: onFocus, loading: loading, label: step.label, onChange: onChange, required: step.required, searchable: step.searchable, getValueString: getValueString, disabled: emptyDep, getOptionSelected: getOptionSelected, options: filteredOptions ?? undefined, IconComponent: step.showIcon ? IconComponent : undefined, error: !!errorMsg || !!warning || !!error, readOnly: !editable || postview || emptyDep || filteredOptions === null, helperText: errorMsg ?? warning ?? error?.message?.toString() ?? step.description ?? undefined }) }), renderNestedSteps?.(value)] }));
 }

package/dist/FormSteps/Step.js

@@ -7,6 +7,7 @@ import TitleStep from './TitleStep/TitleStep';
 import ClassifierSelectorStep from './ClassifierSelectorStep/ClassifierSelectorStep';
 import TextAreaStep from './TextAreaStep/TextAreaStep';
 import DatePickerStep from './DatePickerStep/DatePickerStep';
+import DatePickerRangeStep from './DatePickerRangeStep/DatePickerRangeStep';
 import FileUploadStep from './FileUploadStep/FileUploadStep';
 import CheckBoxStep from './CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep';
 import CBRStepMapper from './CBRStepMapper';
@@ -73,6 +74,9 @@ function StepComponent({ step, ...props }) {
         case FormStepTypes.DATEPICKER: {
             return _jsx(DatePickerStep, { ...props, step: step, editable: editable });
         }
+        case FormStepTypes.DATEPICKER_RANGE: {
+            return _jsx(DatePickerRangeStep, { ...props, step: step, editable: editable });
+        }
         case FormStepTypes.SEPARATOR: {
             return _jsx(SeparatorStep, { ...props, step: step, editable: editable });
         }

package/dist/FormSteps/StepFunctions.js

@@ -119,6 +119,7 @@ export const calcDefaultValue = (step) => {
                 return '';
         case FormStepTypes.RATING:
         case FormStepTypes.DATEPICKER:
+        case FormStepTypes.DATEPICKER_RANGE:
         case FormStepTypes.API_SELECTOR:
         case FormStepTypes.ENTITYVALUEPICKER:
             return null;

package/dist/FormSteps/StepFunctions.test.js

@@ -489,6 +489,13 @@ describe('StepFunctions', function () {
             expect(defaultValue3).toBe(null);
             expect(defaultValue4).toBe(null);
         });
+        test('DatePickerRange step type', async () => {
+            const step = {
+                type: FormStepTypes.DATEPICKER_RANGE,
+            };
+            const defaultValue = calcDefaultValue(step);
+            expect(defaultValue).toBe(null);
+        });
         test('Mapper, FileUpload, CBRFormStep types', async () => {
             const step1 = {
                 type: FormStepTypes.MAPPER,

package/dist/FormSteps/StepHooks.js

@@ -28,7 +28,6 @@ export const useStepDependency = (step, defaultValue) => {
         return () => {
             dispatch(clearDependency(step));
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isDependency]);
     const handleStepDep = useCallback((value) => {
         if (!isDependency)
@@ -37,9 +36,7 @@ export const useStepDependency = (step, defaultValue) => {
             step,
             value: value ?? null,
         }));
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [step.id, step.type, isDependency]);
+    }, [step.id, step.type, isDependency]);
     return {
         handleStepDep,
         isDependency,
@@ -105,9 +102,7 @@ export const useFormStep = (step, { rules, debounce, sizeChange, defaultValue })
         fieldOnChange(value);
         if (sizeChange)
             handleSizeChange?.();
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleStepDep, isDependency, fieldOnChange]);
+    }, [handleStepDep, isDependency, fieldOnChange]);
     return {
         ref,
         value,
@@ -125,14 +120,11 @@ export const selectDependencies = createSelector([
     [idDep]: dependencies[idDep],
 }), {}));
 export const useCondition = (condition) => {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const ids = useMemo(() => recursivelyCalcConditionSteps(condition), []);
     const dependencies = useAppSelector((state) => selectDependencies(state, ids));
     return useMemo(() => {
         return !condition || evaluateCondition(condition, dependencies);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ids.map((id) => dependencies[id].value));
+    }, ids.map((id) => dependencies[id].value));
 };
 export const calcStepDeps = (step) => {
     const dependencies = [...(step.dependencies ?? [])];

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

@@ -63,7 +63,7 @@
     margin-left: -5px;
 }
 .Erk-DraftContainer .rdw-editing-image {
-    border: 1px solid var(--secondary);
+    border: 1px solid var(--eureka-primary);
 }
 
 .Erk-DraftContainer .DraftEditor-root figure {
@@ -80,7 +80,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--light-grey);
+    border: 1px solid var(--eureka-outline);
 }
 
 .Erk-DraftContainer .rdw-image-alignment-options-popup {

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

@@ -35,9 +35,7 @@ function TextAreaStep({ step, editable }) {
             }, 1000));
         }
         onChange(value);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [handleStepDep, isDependency, onChange]);
+    }, [handleStepDep, isDependency, onChange]);
     const calcStyle = () => {
         const backgroundColor = formStyle.stepBackgroundColor;
         if (focus) {

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

@@ -13,7 +13,6 @@ function StepFiller({ step, children }) {
     const currentBreakPoint = useAppSelector(selectBreakPoint);
     const handleSizeChange = useCallback(() => {
         setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     if (step.maxSize && step.maxSize < form.size.blockNum) {
         return (_jsxs("div", { className: styles.firstLvlContainer, style: {

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

@@ -1,7 +1,7 @@
 import { GSmartSelect } from '../../../@Types/GenericFormSteps';
-import { CheckBox, DatePicker, ClassifierSelector, FormSelector, TimePicker } from '../../../@Types/FormStep';
+import { CheckBox, DatePicker, ClassifierSelector, FormSelector, TimePicker, DatePickerRange } from '../../../@Types/FormStep';
 interface MaterialInputProps {
-    step: GSmartSelect | CheckBox | ClassifierSelector | DatePicker | TimePicker | FormSelector;
+    step: GSmartSelect | CheckBox | ClassifierSelector | DatePicker | TimePicker | FormSelector | DatePickerRange;
     editable: boolean;
     onClick?: () => void;
     children: React.ReactNode;

package/dist/Shared/CustomBtn/CustomBtn.js

@@ -9,7 +9,6 @@ function CustomBtn({ label, onClick, backgroundColor, color, loading = false, di
         if (coords)
             setCoords(undefined);
         return () => setMounted(false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [label]);
     return (_jsxs("button", { className: styles.customBtn, style: {
             width,

package/dist/Shared/ErkButton/ErkButton.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkButton from './ErkButton';
 declare const meta: {
     component: typeof ErkButton;
@@ -6,6 +6,7 @@ declare const meta: {
     args: {
         text: string;
         disabled: false;
+        onClick: import("vitest").Mock<(...args: any[]) => any>;
     };
 };
 export default meta;

package/dist/Shared/ErkButton/ErkButton.stories.js

@@ -1,3 +1,4 @@
+import { fn } from 'storybook/test';
 import ErkButton from './ErkButton';
 const meta = {
     component: ErkButton,
@@ -5,6 +6,7 @@ const meta = {
     args: {
         text: 'Label',
         disabled: false,
+        onClick: fn(),
     },
 };
 export default meta;

package/dist/Shared/ErkCheckbox/ErkCheckBox.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkCheckBox from './ErkCheckBox';
 declare const meta: {
     component: typeof ErkCheckBox;

package/dist/Shared/ErkDatePicker/ErkDatePicker.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/react';
+import type { StoryObj } from '@storybook/react-vite';
 import ErkDatePicker from './ErkDatePicker';
 declare const meta: {
     component: typeof ErkDatePicker;