@arquimedes.co/eureka-forms 2.0.8-test → 2.0.10-test

package/dist/App/App.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Classifier, Form } from '../@Types/Form';
 import './App.css';
 import { CustomStep } from '../FormSteps/CustomStep';
@@ -40,5 +40,6 @@ export interface AppProps {
     /** Function to call after the confimation dialog has been closed */
     handleConfirmed?: () => void;
 }
+export declare const IdFormContext: React.Context<string>;
 declare function AppComponent({ formData, valuesData, ...props }: AppProps): JSX.Element;
 export default AppComponent;

package/dist/App/App.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import React, { createContext, useRef } from 'react';
 import Loader from '../Shared/Loader/Loader';
 import styles from './App.module.css';
 import './App.css';
@@ -31,9 +31,12 @@ import { store } from '../Utils/store';
 import { useLogRocket, useSetupApp } from './AppHooks';
 import { useAppSelector } from '../hooks';
 import CustomContext from '../Contexts/CustomContext';
+import { nanoid } from '@reduxjs/toolkit';
+export var IdFormContext = createContext('');
 function AppComponent(_a) {
     var formData = _a.formData, valuesData = _a.valuesData, props = __rest(_a, ["formData", "valuesData"]);
-    return (_jsx(Provider, __assign({ store: store }, { children: _jsx(App, __assign({ formData: formData, valuesData: valuesData }, props)) })));
+    var idForm = React.useState(nanoid(6))[0];
+    return (_jsx(IdFormContext.Provider, __assign({ value: idForm }, { children: _jsx(Provider, __assign({ store: store }, { children: _jsx(App, __assign({ formData: formData, valuesData: valuesData }, props)) })) })));
 }
 export default AppComponent;
 function App(_a) {

package/dist/App/AppFunctions.d.ts

@@ -1,6 +1,6 @@
 import { Form } from '../@Types';
 import { FormStep, Mapper } from '../@Types/FormStep';
-import { SiteState, ValuesStore } from '../States/SiteStateReducer';
+import { SiteState, ValuesStore } from '../States/SiteSlice';
 import { DependencyStore } from '../Form/Form';
 import { CustomStep } from '../FormSteps/CustomStep';
 import { MapperElement } from '../@Types/MapperElement';

package/dist/App/AppHooks.js

@@ -57,7 +57,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { useCallback, useEffect, useState } from 'react';
-import { reset } from '../States/GlobalStateReducer';
+import { reset } from '../States/GlobalSlice';
 import { fetchOrganization } from '../Services/OrganizationService';
 import { fetchForm } from '../Services/FormService';
 import { calcCbrForm } from '../Utils/CBRFunctions';
@@ -181,6 +181,9 @@ export var useSetupApp = function (isEmbedded, _a) {
     }); };
     useEffect(function () {
         loadData();
+        return function () {
+            dispatch({ type: 'CLEAR' });
+        };
     }, []);
     var reload = useCallback(function () {
         if (!form)

package/dist/Form/Form.js

@@ -62,11 +62,12 @@ import axiosInstance from '../Utils/AxiosAPI';
 import ReCAPTCHA from 'react-google-recaptcha';
 import ConfirmationDialog from './ConfirmationDialog/ConfirmationDialog';
 import MaterialProviders from '../Utils/MaterialProviders';
-import { useWidthStats } from '../States/WidthStatsStateReducer';
+import { useWidthStats } from './Hooks';
+import { IdFormContext } from '../App/App';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import FormContext from '../Contexts/FormContext';
 import { getAppState } from '../Utils/store';
-import { focusStep } from '../States/SiteStateReducer';
+import { focusStep } from '../States/SiteSlice';
 var localeMap = {
     en: enLocale,
     'en-US': enLocale,
@@ -89,6 +90,7 @@ function FormComponent(_a) {
         mode: 'onTouched',
         shouldFocusError: true,
     });
+    var idForm = useContext(IdFormContext);
     var recaptchaRef = useRef();
     var dispatch = useAppDispatch();
     var _m = useState(), showConfirmation = _m[0], setShowConfirmation = _m[1];
@@ -118,7 +120,7 @@ function FormComponent(_a) {
                     _c.label = 3;
                 case 3:
                     _c.trys.push([3, 8, , 9]);
-                    return [4 /*yield*/, dispatch(getAppState()).unwrap()];
+                    return [4 /*yield*/, dispatch(getAppState({ idForm: idForm })).unwrap()];
                 case 4:
                     state = _c.sent();
                     newValues = __assign({}, state.site.values.global);
@@ -159,7 +161,7 @@ function FormComponent(_a) {
                 case 9: return [2 /*return*/];
             }
         });
-    }); }, [customSteps, internal, customSubmit, idOrganization]);
+    }); }, [customSteps, internal, customSubmit, idOrganization, idForm]);
     useWidthStats(containerRef, form, postview, internal);
     var isResponsive = useAppSelector(function (state) { return state.widthStats.isResponsive; });
     var renderForm = function () {

package/dist/Form/FormFunctions.d.ts

@@ -2,6 +2,6 @@ import { FormStep } from '../@Types/FormStep';
 import { DependencyStore } from './Form';
 import { CustomStep } from '../FormSteps/CustomStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
-import { ValuesStore } from '../States/SiteStateReducer';
+import { ValuesStore } from '../States/SiteSlice';
 export declare const calcValue: (idStep: string, steps: Record<string, FormStep>, values: Record<string, any>, customSteps: Record<string, CustomStep> | undefined, deleteIds: string[], value?: any) => any;
 export declare function calcDependencies(steps: Record<string, FormStep | CBRFormStep>, customSteps?: Record<string, CustomStep>, allSteps?: Record<string, FormStep | CBRFormStep>, dependencies?: DependencyStore, values?: ValuesStore): DependencyStore;

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

@@ -54,8 +54,9 @@ import { useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
 import Section from '../../Section/Section';
 import CustomContext from '../../../Contexts/CustomContext';
-import * as SiteReducer from '../../../States/SiteStateReducer';
+import * as SiteReducer from '../../../States/SiteSlice';
 import { getAppState } from '../../../Utils/store';
+import { IdFormContext } from '../../../App/App';
 function StepperForm(_a) {
     var _this = this;
     var onSubmit = _a.onSubmit;
@@ -66,6 +67,7 @@ function StepperForm(_a) {
     var dispatch = useAppDispatch();
     var previous = useAppSelector(function (state) { return state.site.previousSections; });
     var idCurrent = useAppSelector(function (state) { return state.site.idCurrentSection; });
+    var idForm = useContext(IdFormContext);
     var next = useAppSelector(function (state) { return state.site.nextSections; });
     /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
     var handleErrors = handleSubmit(function () { }, function (errors) {
@@ -92,7 +94,7 @@ function StepperForm(_a) {
                         dispatch(SiteReducer.handleNext(getValues()));
                         return [2 /*return*/, setLoading(undefined)];
                     }
-                    return [4 /*yield*/, dispatch(getAppState()).unwrap()];
+                    return [4 /*yield*/, dispatch(getAppState({ idForm: idForm })).unwrap()];
                 case 2:
                     state = _a.sent();
                     values = state.site.previousSections.reduce(function (v, idSection) { return (__assign(__assign({}, v), state.site.values.sections[idSection])); }, {});

package/dist/Form/Hooks.d.ts

@@ -1,9 +1,9 @@
-export declare const selectCurrentValues: ((state: {
-    global: import("../States/GlobalStateReducer").GlobalState;
-    site: import("../States/SiteStateReducer").SiteState;
-    widthStats: import("./Form").WidthStats;
-}) => Record<string, any>) & import("reselect").OutputSelectorFields<(args_0: string | null, args_1: Record<string, Record<string, any>>) => Record<string, any>, {
+/// <reference types="react" />
+import { RootState } from '../Utils/store';
+import { Form } from '../@Types';
+export declare const selectCurrentValues: ((state: RootState) => Record<string, any>) & import("reselect").OutputSelectorFields<(args_0: string | null, args_1: Record<string, Record<string, any>>) => Record<string, any>, {
     clearCache: () => void;
 }> & {
     clearCache: () => void;
 };
+export declare function useWidthStats(containerRef: React.RefObject<HTMLDivElement>, form: Form, postview: boolean, internal: boolean): void;

package/dist/Form/Hooks.js

@@ -1,7 +1,49 @@
 import { createSelector } from 'reselect';
+import { useCallback, useLayoutEffect } from 'react';
+import { updateWidthStats } from '../States/WidthStatsSlice';
+import { useAppDispatch } from '../hooks';
 export var selectCurrentValues = createSelector([
     function (state) { return state.site.idCurrentSection; },
     function (state) {
         return state.site.values.sections;
     },
 ], function (idCurrent, values) { var _a; return (_a = values[idCurrent !== null && idCurrent !== void 0 ? idCurrent : '']) !== null && _a !== void 0 ? _a : {}; });
+export function useWidthStats(containerRef, form, postview, internal) {
+    var calcWidthStats = useCallback(function (currentWidth) {
+        var currentBreakPoint = form.size.blockNum;
+        var padding = postview || internal || !form.isStandAlone ? 0 : 40;
+        while (currentWidth <
+            (form.size.blockSize + form.size.spacingSize) *
+                currentBreakPoint +
+                padding) {
+            currentBreakPoint--;
+        }
+        return {
+            isResponsive: currentWidth <
+                (form.size.blockSize + form.size.spacingSize) *
+                    form.size.blockNum +
+                    padding,
+            isMobile: currentWidth <
+                (form.size.blockSize + form.size.spacingSize) * 2 + padding,
+            currentBreakPoint: currentBreakPoint,
+        };
+    }, [form, postview, internal]);
+    var dispatch = useAppDispatch();
+    /** Calcs the currentBreakPoint and if is mobile */
+    useLayoutEffect(function () {
+        var handleResize = function () {
+            var _a;
+            var currentWidth = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+            if (currentWidth !== undefined) {
+                var current = calcWidthStats(currentWidth);
+                dispatch(updateWidthStats(current));
+            }
+        };
+        /** On load add a resize listener to calc the currentBreakpoint */
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+}

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

@@ -38,7 +38,7 @@ import styles from './MaterialCBRIncidentsStep.module.css';
 import { nanoid } from 'nanoid';
 import RoundedButton from '../../../../Shared/RoundedButton/RoundedButton';
 import FormContext from '../../../../Contexts/FormContext';
-import { addStepsDependencies } from '../../../../States/SiteStateReducer';
+import { addStepsDependencies } from '../../../../States/SiteSlice';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import CustomContext from '../../../../Contexts/CustomContext';
 import { Controller } from 'react-hook-form';

package/dist/FormSteps/CustomStep.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { StepProps } from './Step';
 import { Form } from '../@Types';
-import { GlobalState } from '../States/GlobalStateReducer';
+import { GlobalState } from '../States/GlobalSlice';
 import { WidthStats } from '../Form/Form';
 import { StepDependency } from './StepHooks';
-import { SiteState } from '../States/SiteStateReducer';
+import { SiteState } from '../States/SiteSlice';
 export interface CustomStepProps extends StepProps, GlobalState, StepDependency {
     form: Form;
     dependencyStore: SiteState['dependencies'];

package/dist/FormSteps/CustomStep.js

@@ -30,7 +30,7 @@ function CustomStepComponent(_a) {
     var customStep = _a.customStep, props = __rest(_a, ["customStep"]);
     var form = useContext(FormContext);
     var global = useAppSelector(function (state) { return state.global; });
-    var customStepProps = useContext(CustomStepPropsContext);
+    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);

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

@@ -37,7 +37,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { MapperStyleTypes } from '../../../constants/FormStepTypes';
 import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
 import MapperElementComponent from './Element/MapperElementComponent';
-import { addStepsDependencies } from '../../../States/SiteStateReducer';
+import { addStepsDependencies } from '../../../States/SiteSlice';
 import FormContext from '../../../Contexts/FormContext';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
 import CustomContext from '../../../Contexts/CustomContext';

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

@@ -65,7 +65,7 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import React from 'react';
 import FormContext from '../../../Contexts/FormContext';
 import { selectBreakPoint, useAppDispatch, useAppSelector, } from '../../../hooks';
-import { focusStep, setEmptyDependency, } from '../../../States/SiteStateReducer';
+import { focusStep, setEmptyDependency } from '../../../States/SiteSlice';
 import { selectDependencies, useStepDependency } from '../../StepHooks';
 export function SmartSelect(_a) {
     var _this = this;

package/dist/FormSteps/StepHooks.d.ts

@@ -1,4 +1,5 @@
 import { GBaseStep } from '../@Types/GenericFormSteps';
+import { RootState } from '../Utils/store';
 import { Form } from '../@Types';
 import { DependencyStore } from '../Form/Form';
 export interface StepDependency {
@@ -7,11 +8,7 @@ export interface StepDependency {
     handleStepDep: (value: any | undefined) => void;
 }
 export declare const useStepDependency: (step: GBaseStep, defaultValue?: any) => StepDependency;
-export declare const selectDependencies: ((state: {
-    global: import("../States/GlobalStateReducer").GlobalState;
-    site: import("../States/SiteStateReducer").SiteState;
-    widthStats: import("../Form/Form").WidthStats;
-}, step: GBaseStep, form: Form) => {
+export declare const selectDependencies: ((state: RootState, step: GBaseStep, form: Form) => {
     invalids: string[];
     emptyDep: boolean;
 }) & import("reselect").OutputSelectorFields<(args_0: DependencyStore, args_1: GBaseStep, args_2: Form) => {

package/dist/FormSteps/StepHooks.js

@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { useCallback, useEffect } from 'react';
 import { useAppSelector, useAppDispatch } from '../hooks';
-import { setStepDependency } from '../States/SiteStateReducer';
+import { setStepDependency } from '../States/SiteSlice';
 import { createSelector } from '@reduxjs/toolkit';
 import { calcDefaultValue } from './StepFunctions';
 var selectIsDependency = createSelector([

package/dist/States/{GlobalStateReducer.d.ts → GlobalSlice.d.ts}

@@ -1,6 +1,6 @@
 import { FormStyle } from '../@Types/Form';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import { SiteState } from './SiteStateReducer';
+import { SiteState } from './SiteSlice';
 export interface GlobalState {
     idOrganization: string;
     formStyle: FormStyle;
@@ -15,15 +15,15 @@ export interface GlobalState {
 export declare const GlobalSlice: import("@reduxjs/toolkit").Slice<GlobalState, {
     reset: (state: import("immer/dist/internal").WritableDraft<GlobalState>, action: PayloadAction<Omit<GlobalState, 'loaded'> & SiteState>) => {
         loaded: true;
-        idOrganization: string;
-        formStyle: FormStyle;
         editable: boolean;
-        preview: boolean;
-        postview: boolean;
         partial: boolean;
+        postview: boolean;
+        formStyle: FormStyle;
+        preview: boolean;
+        idOrganization: string;
         internal: boolean;
         dependencies: import("../Form/Form").DependencyStore;
-        values: import("./SiteStateReducer").ValuesStore;
+        values: import("./SiteSlice").ValuesStore;
         idCurrentSection: string | null;
         previousSections: string[];
         nextSections: string[];
@@ -31,5 +31,4 @@ export declare const GlobalSlice: import("@reduxjs/toolkit").Slice<GlobalState,
     };
 }, "global">;
 export declare const reset: import("@reduxjs/toolkit").ActionCreatorWithPayload<Omit<GlobalState, "loaded"> & SiteState, "global/reset">;
-declare const _default: import("redux").Reducer<GlobalState, import("redux").AnyAction>;
-export default _default;
+export default GlobalSlice;

package/dist/States/{GlobalStateReducer.js → GlobalSlice.js}

@@ -31,4 +31,4 @@ export var GlobalSlice = createSlice({
     },
 });
 export var reset = GlobalSlice.actions.reset;
-export default GlobalSlice.reducer;
+export default GlobalSlice;

package/dist/States/{SiteStateReducer.d.ts → SiteSlice.d.ts}

@@ -59,5 +59,4 @@ export declare const focusStep: import("@reduxjs/toolkit").ActionCreatorWithOpti
     step: GBaseStep;
     empty: StepDependency['empty'];
 }, "site/setEmptyDependency">, handlePrevious: import("@reduxjs/toolkit").ActionCreatorWithPayload<Record<string, any>, "site/handlePrevious">, handleNext: import("@reduxjs/toolkit").ActionCreatorWithPayload<Record<string, any>, "site/handleNext">;
-declare const _default: import("redux").Reducer<SiteState, import("redux").AnyAction>;
-export default _default;
+export default SiteSlice;

package/dist/States/{SiteStateReducer.js → SiteSlice.js}

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 var _a;
 import { createSlice } from '@reduxjs/toolkit';
-import { reset } from './GlobalStateReducer';
+import { reset } from './GlobalSlice';
 import { calcDependencies } from '../Form/FormFunctions';
 import { calcDefaultValue } from '../FormSteps/StepFunctions';
 var initialState = {
@@ -107,4 +107,4 @@ 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 default SiteSlice.reducer;
+export default SiteSlice;

package/dist/States/WidthStatsSlice.d.ts

@@ -0,0 +1,7 @@
+import { WidthStats } from '../Form/Form';
+import type { PayloadAction } from '@reduxjs/toolkit';
+export declare const WidthStatsSlice: import("@reduxjs/toolkit").Slice<WidthStats, {
+    updateWidthStats: (state: import("immer/dist/internal").WritableDraft<WidthStats>, { payload }: PayloadAction<WidthStats>) => WidthStats;
+}, "widthStats">;
+export declare const updateWidthStats: import("@reduxjs/toolkit").ActionCreatorWithPayload<WidthStats, "widthStats/updateWidthStats">;
+export default WidthStatsSlice;

package/dist/States/WidthStatsSlice.js

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+var initialState = {
+    currentBreakPoint: 0,
+    isMobile: false,
+    isResponsive: false,
+};
+export var WidthStatsSlice = createSlice({
+    name: 'widthStats',
+    initialState: initialState,
+    reducers: {
+        updateWidthStats: function (state, _a) {
+            var payload = _a.payload;
+            if (payload.isMobile !== (state === null || state === void 0 ? void 0 : state.isMobile) ||
+                payload.isResponsive !== (state === null || state === void 0 ? void 0 : state.isResponsive) ||
+                payload.currentBreakPoint !== (state === null || state === void 0 ? void 0 : state.currentBreakPoint))
+                return payload;
+            else
+                return state;
+        },
+    },
+});
+export var updateWidthStats = WidthStatsSlice.actions.updateWidthStats;
+export default WidthStatsSlice;

package/dist/Utils/store.d.ts

@@ -1,21 +1,21 @@
-export declare const store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<{
-    global: import("../States/GlobalStateReducer").GlobalState;
-    site: import("../States/SiteStateReducer").SiteState;
-    widthStats: import("../Form/Form").WidthStats;
-}, import("redux").AnyAction, [import("@reduxjs/toolkit").ThunkMiddleware<{
-    global: import("../States/GlobalStateReducer").GlobalState;
-    site: import("../States/SiteStateReducer").SiteState;
-    widthStats: import("../Form/Form").WidthStats;
-}, import("redux").AnyAction, undefined>]>;
-export type RootState = ReturnType<typeof store.getState>;
+import { AnyAction } from '@reduxjs/toolkit';
+import { GlobalState } from '../States/GlobalSlice';
+import { SiteState } from '../States/SiteSlice';
+import { WidthStats } from '../Form/Form';
+export interface RootState {
+    global: GlobalState;
+    site: SiteState;
+    widthStats: WidthStats;
+}
+export declare const defaultRootState: RootState;
+export type EurekaFormsState = Record<string, RootState>;
+export declare const store: import("@reduxjs/toolkit/dist/configureStore").ToolkitStore<EurekaFormsState, AnyAction, [import("@reduxjs/toolkit").ThunkMiddleware<EurekaFormsState, AnyAction, undefined>]>;
 export type AppDispatch = typeof store.dispatch;
-export declare const getAppState: import("@reduxjs/toolkit").AsyncThunk<{
-    global: import("../States/GlobalStateReducer").GlobalState;
-    site: import("../States/SiteStateReducer").SiteState;
-    widthStats: import("../Form/Form").WidthStats;
-}, void, {
+export declare const getAppState: import("@reduxjs/toolkit").AsyncThunk<RootState, {
+    idForm: string;
+}, {
     state?: unknown;
-    dispatch?: import("redux").Dispatch<import("redux").AnyAction> | undefined;
+    dispatch?: import("redux").Dispatch<AnyAction> | undefined;
     extra?: unknown;
     rejectValue?: unknown;
     serializedErrorType?: unknown;

package/dist/Utils/store.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -34,19 +45,40 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { configureStore, createAsyncThunk } from '@reduxjs/toolkit';
-import GlobalStateReducer from '../States/GlobalStateReducer';
-import SiteStateReducer from '../States/SiteStateReducer';
-import WidthStatsStateReducer from '../States/WidthStatsStateReducer';
+import { combineReducers, configureStore, createAsyncThunk, } from '@reduxjs/toolkit';
+import GlobalSlice from '../States/GlobalSlice';
+import SiteSlice from '../States/SiteSlice';
+import WidthStatsSlice from '../States/WidthStatsSlice';
+export var defaultRootState = {
+    global: GlobalSlice.getInitialState(),
+    site: SiteSlice.getInitialState(),
+    widthStats: WidthStatsSlice.getInitialState(),
+};
+var FormReducer = combineReducers({
+    global: GlobalSlice.reducer,
+    site: SiteSlice.reducer,
+    widthStats: WidthStatsSlice.reducer,
+});
+function EurekaFormsReducer(state, action) {
+    var _a, _b;
+    var _c;
+    if (state === void 0) { state = {}; }
+    var idForm = (_c = action.meta) === null || _c === void 0 ? void 0 : _c.idForm;
+    if (!idForm)
+        return state;
+    if (action.type === 'CLEAR') {
+        return __assign(__assign({}, state), (_a = {}, _a[idForm] = undefined, _a));
+    }
+    return __assign(__assign({}, state), (_b = {}, _b[idForm] = FormReducer(state[idForm], action), _b));
+}
 export var store = configureStore({
-    reducer: {
-        global: GlobalStateReducer,
-        site: SiteStateReducer,
-        widthStats: WidthStatsStateReducer,
-    },
+    reducer: EurekaFormsReducer,
 });
-export var getAppState = createAsyncThunk('get/state', function (payload, thunkAPI) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, thunkAPI.getState()];
+export var getAppState = createAsyncThunk('get/state', function (_a, thunkAPI) {
+    var idForm = _a.idForm;
+    return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_b) {
+            return [2 /*return*/, thunkAPI.getState()[idForm]];
+        });
     });
-}); });
+});

package/dist/hooks.d.ts

@@ -1,5 +1,5 @@
 import type { TypedUseSelectorHook } from 'react-redux';
-import type { RootState, AppDispatch } from './Utils/store';
+import { type RootState, type AppDispatch } from './Utils/store';
 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,21 @@
 import { useDispatch, useSelector } from 'react-redux';
+import { defaultRootState, } from './Utils/store';
+import { useContext } from 'react';
+import { IdFormContext } from './App/App';
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export var useAppDispatch = useDispatch;
-export var useAppSelector = useSelector;
+export var useAppDispatch = function () {
+    var idForm = useContext(IdFormContext);
+    var dispatch = useDispatch();
+    var appDispatch = function (action) {
+        action.meta = { idForm: idForm };
+        return dispatch(action);
+    };
+    return appDispatch;
+};
+export var useAppSelector = function (selector, options) {
+    var idForm = useContext(IdFormContext);
+    return useSelector(function (state) { var _a; return selector((_a = state[idForm]) !== null && _a !== void 0 ? _a : defaultRootState); }, options);
+};
 export var selectBreakPoint = function (state) {
     return state.widthStats.currentBreakPoint;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"2.0.8-test",
+    "version":"2.0.10-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",

package/dist/States/WidthStatsStateReducer.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { WidthStats } from '../Form/Form';
-import { Form } from '../@Types';
-import type { PayloadAction } from '@reduxjs/toolkit';
-export declare const WidthStatsSlice: import("@reduxjs/toolkit").Slice<WidthStats, {
-    updateWidthStats: (state: import("immer/dist/internal").WritableDraft<WidthStats>, { payload }: PayloadAction<WidthStats>) => WidthStats;
-}, "widthstats">;
-export declare const updateWidthStats: import("@reduxjs/toolkit").ActionCreatorWithPayload<WidthStats, "widthstats/updateWidthStats">;
-declare const _default: import("redux").Reducer<WidthStats, import("redux").AnyAction>;
-export default _default;
-export declare function useWidthStats(containerRef: React.RefObject<HTMLDivElement>, form: Form, postview: boolean, internal: boolean): void;

package/dist/States/WidthStatsStateReducer.js

@@ -1,64 +0,0 @@
-import { useCallback, useLayoutEffect } from 'react';
-import { createSlice } from '@reduxjs/toolkit';
-import { useDispatch } from 'react-redux';
-var initialState = {
-    currentBreakPoint: 0,
-    isMobile: false,
-    isResponsive: false,
-};
-export var WidthStatsSlice = createSlice({
-    name: 'widthstats',
-    initialState: initialState,
-    reducers: {
-        updateWidthStats: function (state, _a) {
-            var payload = _a.payload;
-            if (payload.isMobile !== (state === null || state === void 0 ? void 0 : state.isMobile) ||
-                payload.isResponsive !== (state === null || state === void 0 ? void 0 : state.isResponsive) ||
-                payload.currentBreakPoint !== (state === null || state === void 0 ? void 0 : state.currentBreakPoint))
-                return payload;
-            else
-                return state;
-        },
-    },
-});
-export var updateWidthStats = WidthStatsSlice.actions.updateWidthStats;
-export default WidthStatsSlice.reducer;
-export function useWidthStats(containerRef, form, postview, internal) {
-    var calcWidthStats = useCallback(function (currentWidth) {
-        var currentBreakPoint = form.size.blockNum;
-        var padding = postview || internal || !form.isStandAlone ? 0 : 40;
-        while (currentWidth <
-            (form.size.blockSize + form.size.spacingSize) *
-                currentBreakPoint +
-                padding) {
-            currentBreakPoint--;
-        }
-        return {
-            isResponsive: currentWidth <
-                (form.size.blockSize + form.size.spacingSize) *
-                    form.size.blockNum +
-                    padding,
-            isMobile: currentWidth <
-                (form.size.blockSize + form.size.spacingSize) * 2 + padding,
-            currentBreakPoint: currentBreakPoint,
-        };
-    }, [form, postview, internal]);
-    var dispatch = useDispatch();
-    /** Calcs the currentBreakPoint and if is mobile */
-    useLayoutEffect(function () {
-        var handleResize = function () {
-            var _a;
-            var currentWidth = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-            if (currentWidth !== undefined) {
-                var current = calcWidthStats(currentWidth);
-                dispatch(updateWidthStats(current));
-            }
-        };
-        /** On load add a resize listener to calc the currentBreakpoint */
-        window.addEventListener('resize', handleResize);
-        handleResize();
-        return function () {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-}