@arquimedes.co/eureka-forms 1.4.0-test → 1.4.4-test

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

@@ -0,0 +1,72 @@
+import Types from '../constants/CBRFormStepTypes';
+import { GSmartSelect, GTextArea, GTextInput, GBaseStep } from './GenericFormSteps';
+export declare type CBRFormStep = CBRFirstNameStep | CBRMiddleNameStep | CBRLastNameStep | CBRSecondLastNameStep | PostVentaStep | CBRProjectStep | CBRDocStep | CBRCelStep | CBRPhoneStep | CBRDocTypeStep | CBREmailStep | CBRRequesterTypeStep | CBRPropertyStep | CBRSpaceTypeStep | CBRElementStep | CBRCommentStep | CBRIncidentsStep;
+export interface PostVentaStep extends GBaseStep {
+    type: Types.CBR_POSTVENTA;
+}
+export interface CBRProjectStep extends GSmartSelect {
+    type: Types.CBR_PROYECTO;
+    steps: string[];
+    /** Only has maxSize if level === 0 */
+    maxSize: number;
+}
+export interface CBRDocTypeStep extends Omit<GSmartSelect, 'showIcon'> {
+    type: Types.CBR_TIPO_DOC;
+}
+export interface CBRRequesterTypeStep extends GSmartSelect {
+    type: Types.CBR_TIPO_SOLICITANTE;
+}
+export interface CBRPropertyStep extends GSmartSelect {
+    type: Types.CBR_INMUEBLE;
+}
+export interface CBRSpaceTypeStep extends GSmartSelect {
+    type: Types.CBR_TIPO_ESPACIO;
+}
+export interface CBRFirstNameStep extends GTextInput {
+    type: Types.CBR_FIRST_NAME;
+}
+export interface CBRMiddleNameStep extends GTextInput {
+    type: Types.CBR_MIDDLE_NAME;
+}
+export interface CBRLastNameStep extends GTextInput {
+    type: Types.CBR_LAST_NAME;
+}
+export interface CBRSecondLastNameStep extends GTextInput {
+    type: Types.CBR_SECOND_LAST_NAME;
+}
+export interface CBRDocStep extends GTextInput {
+    type: Types.CBR_DOC;
+    showIcon: boolean;
+}
+export interface CBRCelStep extends GTextInput {
+    type: Types.CBR_CEL;
+}
+export interface CBRPhoneStep extends GTextInput {
+    type: Types.CBR_PHONE;
+}
+export interface CBREmailStep extends GTextInput {
+    type: Types.CBR_EMAIL;
+}
+export interface CBRElementStep extends GSmartSelect {
+    type: Types.CBR_LOCATIVAS;
+    subStep: string | null;
+    parentStep: string | null;
+}
+export interface CBRCommentStep extends Omit<GTextArea, 'hasTextEditor'> {
+    type: Types.CBR_COMENTARIO;
+}
+export interface CBRIncidentsStep extends GBaseStep {
+    type: Types.CBR_INCIDENCIAS;
+    label: string;
+    description: string | null;
+    addBtnLabel: string;
+    required: boolean;
+    unitLabel: string;
+    spaceStep: Omit<CBRSpaceTypeStep, 'id' | 'type'>;
+    newLineAfterSpace: boolean;
+    elementStep: IncidentElementStep;
+    commentStep: Omit<CBRCommentStep, 'id' | 'type'>;
+}
+export interface IncidentElementStep extends Omit<CBRElementStep, 'id' | 'subStep' | 'parentStep' | 'type'> {
+    subStep?: IncidentElementStep;
+}

package/dist/@Types/CBRFormStep.js

@@ -0,0 +1 @@
+export {};

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

@@ -16,6 +16,9 @@ export interface Form {
     style: FormStyle;
     classifiers: Record<string, ParentClassifier>;
     terms: Term[];
+    size: FormSize;
+}
+export interface FormSize {
     blockNum: 1 | 2 | 3 | 4;
     blockSize: number;
     spacingSize: number;
@@ -34,7 +37,7 @@ interface TermLink {
     type: 'LINK';
     url: string;
 }
-interface Classifier {
+export interface Classifier {
     _id: string;
     name: string;
 }

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

@@ -1,64 +1,34 @@
 import Types, { ClassifierOptionTypes, OptionTypes } from '../constants/FormStepTypes';
+import * as GSteps from './GenericFormSteps';
 export declare type FormStep = Title | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
-export interface Title {
-    id: string;
+export interface Title extends GSteps.GBaseStep {
     type: Types.TITLE;
     title: string;
     description: string | null;
 }
-export interface CheckBox {
-    label: string;
-    description: string | null;
-    id: string;
+export interface CheckBox extends GSteps.GCheckBox {
     type: Types.CHECKBOX;
-    required: boolean;
-    size: 1 | 2 | 3 | 4;
 }
-export interface FileUpload {
-    id: string;
+export interface FileUpload extends GSteps.GBaseStep {
     type: Types.FILEUPLOAD;
     label: string;
     description: string | null;
     required: boolean;
     value: string[];
 }
-export interface Separator {
-    id: string;
+export interface Separator extends GSteps.GSeparator {
     type: Types.SEPARATOR;
-    transparent: boolean;
 }
-export interface TextArea {
-    id: string;
+export interface TextArea extends GSteps.GTextArea {
     type: Types.TEXTAREA;
-    label: string;
-    description: string | null;
-    required: boolean;
-    hasTextEditor: boolean;
 }
-export interface TextInput {
-    id: string;
+export interface TextInput extends GSteps.GTextInput {
     type: Types.TEXTINPUT;
-    label: string;
-    description: string | null;
-    validation?: FormValidation;
-    required: boolean;
-    size: 1 | 2 | 3 | 4;
 }
-export interface DatePicker {
-    id: string;
+export interface DatePicker extends GSteps.GDatePicker {
     type: Types.DATEPICKER;
-    label: string;
-    pickTime: boolean;
-    description: string | null;
-    required: boolean;
-    size: 1 | 2 | 3 | 4;
 }
-declare type FormValidation = {
-    message: string;
-    value: string;
-};
-export interface FormSelector {
-    id: string;
+export interface FormSelector extends GSteps.GBaseStep {
     type: Types.SELECTOR;
     label: string;
     description: string;
@@ -85,8 +55,7 @@ interface AddSectionOption {
     type: OptionTypes.ADD_SECTION;
     idSection: string;
 }
-export interface ClassifierSelector {
-    id: string;
+export interface ClassifierSelector extends GSteps.GBaseStep {
     type: Types.CLASSIFIER_SELECTOR;
     idClassifier: string | null;
     label: string;

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

@@ -0,0 +1,58 @@
+export interface GBaseStep {
+    id: string;
+    type: string;
+    dependencies?: string[];
+}
+export interface GTitle extends GBaseStep {
+    title: string;
+    description: string | null;
+}
+export interface GCheckBox extends GBaseStep {
+    label: string;
+    description: string | null;
+    required: boolean;
+    size: 1 | 2 | 3 | 4;
+}
+export interface GSeparator extends GBaseStep {
+    transparent: boolean;
+}
+export interface GTextArea extends GBaseStep {
+    label: string;
+    description: string | null;
+    required: boolean;
+    hasTextEditor: boolean;
+}
+export interface GTextInput extends GBaseStep {
+    label: string;
+    description: string | null;
+    validation?: {
+        message: string;
+        value: string;
+        type: 'EMAIL' | 'OTHER';
+    };
+    required: boolean;
+    showIcon?: boolean;
+    size: 1 | 2 | 3 | 4;
+}
+export interface GDatePicker extends GBaseStep {
+    label: string;
+    description: string | null;
+    pickTime: boolean;
+    required: boolean;
+    size: 1 | 2 | 3 | 4;
+}
+export interface GAgentPicker extends GBaseStep {
+    label: string;
+    description: string | null;
+    required: boolean;
+    multiple: boolean;
+    size: 1 | 2 | 3 | 4;
+}
+export interface GSmartSelect extends GBaseStep {
+    label: string;
+    description: string | null;
+    showIcon: boolean;
+    required: boolean;
+    searchable: boolean;
+    size: 1 | 2 | 3 | 4;
+}

package/dist/@Types/GenericFormSteps.js

@@ -0,0 +1 @@
+export {};

package/dist/App.js

@@ -68,10 +68,18 @@ import widgetInstance from './AxiosWidget';
 function App(_a) {
     var _this = this;
     var _b, _c, _d, _e;
-    var apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, customSend = _a.customSend, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "isWidget", "internal", "valuesData", "customSend", "customSteps", "handleConfirmed"]);
-    var _f = useState(undefined), form = _f[0], setForm = _f[1];
-    var _g = useState({}), originalValues = _g[0], setOriginalValues = _g[1];
-    var _h = useState(undefined), organizationInfo = _h[0], setOrganizationInfo = _h[1];
+    var apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, _f = _a.customSend, customSend = _f === void 0 ? function (a, b) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            // eslint-disable-next-line no-console
+            console.log('HOLA', a, b);
+            return [2 /*return*/];
+        });
+    }); } : _f, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "isWidget", "internal", "valuesData", "customSend", "customSteps", "handleConfirmed"]);
+    // eslint-disable-next-line no-console
+    console.log(formData, valuesData, customSend);
+    var _g = useState(undefined), form = _g[0], setForm = _g[1];
+    var _h = useState({}), originalValues = _h[0], setOriginalValues = _h[1];
+    var _j = useState(undefined), organizationInfo = _j[0], setOrganizationInfo = _j[1];
     function fetchPreview(formData) {
         return __awaiter(this, void 0, void 0, function () {
             var response;
@@ -283,10 +291,21 @@ var migrateFormData = function (form) {
         steps[idStep] = step;
     }
     var newForm = __assign(__assign({}, form), { steps: steps });
-    if (form.spacingSize === undefined) {
-        newForm.spacingSize = 20;
-        newForm.blockNum = 4;
-        newForm.blockSize = 210;
+    if (form.size === undefined) {
+        if (form.spacingSize) {
+            newForm.size = {
+                spacingSize: form.spacingSize,
+                blockNum: form.blockNum,
+                blockSize: form.blockSize,
+            };
+        }
+        else {
+            newForm.size = {
+                spacingSize: 20,
+                blockNum: 4,
+                blockSize: 210,
+            };
+        }
     }
     return newForm;
 };

package/dist/App.module.css

@@ -7,6 +7,7 @@
     justify-content: center;
     align-items: center;
     background-color: white;
+    z-index: 5000;
 }
 
 #widget:eureka {

package/dist/FormComponents/Form/ColumnForm/ColumnForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormComponentProps } from '../Form';
-declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, widthStats, customSteps, customSend, originalValues, ...others }: FormComponentProps): JSX.Element;
+declare function ColumnForm({ form, apiKey, reload, domain, postview, internal, formStyle, widthStats, customSteps, customSend, handleLoaded, originalValues, ...others }: FormComponentProps): JSX.Element;
 export default ColumnForm;

package/dist/FormComponents/Form/ColumnForm/ColumnForm.js

@@ -70,20 +70,22 @@ import axiosInstance from '../../../AxiosAPI';
 import widgetInstance from '../../../AxiosWidget';
 function ColumnForm(_a) {
     var _this = this;
-    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, widthStats = _a.widthStats, customSteps = _a.customSteps, customSend = _a.customSend, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "widthStats", "customSteps", "customSend", "originalValues"]);
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, domain = _a.domain, postview = _a.postview, internal = _a.internal, formStyle = _a.formStyle, widthStats = _a.widthStats, customSteps = _a.customSteps, customSend = _a.customSend, handleLoaded = _a.handleLoaded, originalValues = _a.originalValues, others = __rest(_a, ["form", "apiKey", "reload", "domain", "postview", "internal", "formStyle", "widthStats", "customSteps", "customSend", "handleLoaded", "originalValues"]);
     var _b = useState(false), tempError = _b[0], setTempError = _b[1];
-    var _c = useForm({
-        defaultValues: mapOriginal(originalValues, form),
+    var _c = useState(calcDependencies(form.steps, originalValues)), dependencyStore = _c[0], setDependencyStore = _c[1];
+    var _d = useForm({
+        defaultValues: mapOriginalValues(originalValues, form),
         mode: 'onTouched',
         shouldFocusError: true,
-    }), getValues = _c.getValues, setValue = _c.setValue, clearErrors = _c.clearErrors, control = _c.control, errors = _c.formState.errors, trigger = _c.trigger;
-    var _d = useState(undefined), sections = _d[0], setSections = _d[1];
-    var _e = useState(false), loading = _e[0], setLoading = _e[1];
-    var _f = useState(), showConfirmation = _f[0], setShowConfirmation = _f[1];
+    }), getValues = _d.getValues, setValue = _d.setValue, clearErrors = _d.clearErrors, control = _d.control, errors = _d.formState.errors, trigger = _d.trigger;
+    var _e = useState(undefined), sections = _e[0], setSections = _e[1];
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
+    var _g = useState(), showConfirmation = _g[0], setShowConfirmation = _g[1];
     useEffect(function () {
         var tempSections = [];
         calcNextSection(form, form.firstSection, tempSections);
         setSections(tempSections);
+        handleLoaded();
     }, []);
     if (sections === undefined) {
         return _jsx("div", {}, void 0);
@@ -150,7 +152,7 @@ function ColumnForm(_a) {
     return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }, void 0), showConfirmation !== undefined && (_jsx(ConfirmationDialog, { formStyle: formStyle, confirmation: showConfirmation, onClose: function () {
                     reload();
                     setShowConfirmation(undefined);
-                } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps }, others), index)); }), form.terms &&
+                } }, void 0)), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, domain: domain, postview: postview, clearErrors: clearErrors, widthStats: widthStats, control: control, getValues: getValues, originalValues: originalValues, errors: errors, index: index, setSections: setSections, section: form.sections[idSection], formStyle: formStyle, customSteps: customSteps, setDependencyStore: setDependencyStore, dependencyStore: dependencyStore, trigger: trigger }, others), index)); }), form.terms &&
                 !internal &&
                 form.terms.map(function (term, index) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, index)); }), !postview && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () {
                         onSubmit();
@@ -174,15 +176,15 @@ function calcNextSection(form, idSection, sections) {
         }
     }
 }
-var mapOriginal = function (values, form) {
-    var newValues = __assign({}, values);
-    for (var _i = 0, _a = Object.keys(values); _i < _a.length; _i++) {
+var mapOriginalValues = function (originalValues, form) {
+    var newValues = __assign({}, originalValues);
+    for (var _i = 0, _a = Object.keys(originalValues); _i < _a.length; _i++) {
         var val = _a[_i];
         var step = form.steps[val];
         if (step) {
             switch (step === null || step === void 0 ? void 0 : step.type) {
                 case Types.TEXTAREA: {
-                    var value = values[step.id];
+                    var value = originalValues[step.id];
                     if (step.hasTextEditor) {
                         delete newValues[step.id];
                     }
@@ -254,3 +256,34 @@ function stringToDraft(text) {
     });
     return draftStructure;
 }
+function calcDependencies(steps, originalValues) {
+    var dependencies = {};
+    for (var _i = 0, _a = Object.values(steps); _i < _a.length; _i++) {
+        var step = _a[_i];
+        if (step.dependencies) {
+            for (var _b = 0, _c = step.dependencies; _b < _c.length; _b++) {
+                var idDep = _c[_b];
+                var depStep = steps[idDep];
+                if (depStep && dependencies[idDep] === undefined) {
+                    switch (depStep === null || depStep === void 0 ? void 0 : depStep.type) {
+                        case Types.TEXTAREA: {
+                            if (depStep.hasTextEditor) {
+                                dependencies[idDep] = null;
+                            }
+                            else {
+                                dependencies[idDep] =
+                                    originalValues[idDep].value;
+                            }
+                            break;
+                        }
+                        default:
+                            dependencies[idDep] = originalValues[idDep];
+                            break;
+                    }
+                }
+            }
+        }
+    }
+    dependencies['CBR_PROYECTO'] = null; //REMOVE
+    return dependencies;
+}

package/dist/FormComponents/Form/Form.d.ts

@@ -5,6 +5,7 @@ import { CustomStep } from '../../App';
 export declare const getLocale: () => any;
 export interface WidthStats {
     currentBreakPoint: number;
+    isResponsive: boolean;
     isMobile: boolean;
 }
 export interface FormComponentProps {
@@ -21,8 +22,10 @@ export interface FormComponentProps {
     apiKey: string | undefined;
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+    /** Function to call when the form has loaded */
+    handleLoaded: () => void;
 }
-declare function FormComponent({ form, internal, postview, organization, containerRef, ...others }: Omit<FormComponentProps, 'widthStats' | 'formStyle'> & {
+declare function FormComponent({ form, internal, postview, organization, containerRef, ...others }: Omit<FormComponentProps, 'widthStats' | 'formStyle' | 'handleLoaded'> & {
     containerRef: any;
     organization: Organization | null;
 }): JSX.Element;

package/dist/FormComponents/Form/Form.js

@@ -47,25 +47,30 @@ export var getLocale = function () {
             navigator.language ||
             navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
 };
-var blockSize = 210;
-var spacingSize = 20;
-var blockNum = 4;
 function FormComponent(_a) {
     var _b, _c;
     var form = _a.form, internal = _a.internal, postview = _a.postview, organization = _a.organization, containerRef = _a.containerRef, others = __rest(_a, ["form", "internal", "postview", "organization", "containerRef"]);
-    var _d = useState(undefined), widthStats = _d[0], setWidthStats = _d[1];
+    var _d = useState(false), loaded = _d[0], setLoaded = _d[1];
+    var _e = useState(undefined), widthStats = _e[0], setWidthStats = _e[1];
     /** Calcs the currentBreakPoint and if is mobile */
     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 currentBreakPoint = blockNum;
+            var currentBreakPoint = form.size.blockNum;
             while (currentWidth <
-                (blockSize + spacingSize) * currentBreakPoint) {
+                (form.size.blockSize + form.size.spacingSize) *
+                    currentBreakPoint +
+                    40) {
                 currentBreakPoint--;
             }
             setWidthStats({
-                isMobile: currentWidth < (blockSize + spacingSize) * blockNum + 40,
+                isResponsive: currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) *
+                        form.size.blockNum +
+                        40,
+                isMobile: currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) * 2 + 40,
                 currentBreakPoint: currentBreakPoint,
             });
         }
@@ -85,13 +90,20 @@ function FormComponent(_a) {
                 backgroundColor: internal
                     ? InternalFormStyle.backgroundColor
                     : form.style.backgroundColor,
-            } }, { children: _jsx(FormTypeComponent, __assign({}, others, { widthStats: widthStats, form: form, internal: internal, postview: postview, formStyle: internal ? InternalFormStyle : form.style }), void 0) }), void 0));
+            } }, { children: _jsx(FormTypeComponent, __assign({}, others, { handleLoaded: function () {
+                    setLoaded(true);
+                }, widthStats: widthStats, form: form, internal: internal, postview: postview, formStyle: internal ? InternalFormStyle : form.style }), void 0) }), void 0));
     }
     else if (organization && widthStats !== undefined) {
         //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: organization.logoUrl, color: (_c = organization.styles) === null || _c === void 0 ? void 0 : _c.primaryColor }, void 0), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef }, { children: _jsx("div", __assign({ className: widthStats.isMobile
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: organization.logoUrl, color: (_c = organization.styles) === null || _c === void 0 ? void 0 : _c.primaryColor }, void 0), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
                             ? styles.fullScreenStandAloneForm
-                            : styles.standAloneFormCard, style: { backgroundColor: form.style.backgroundColor } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: form.style }), void 0) }), void 0) }), void 0)] }, void 0));
+                            : styles.standAloneFormCard, style: {
+                            backgroundColor: form.style.backgroundColor,
+                            visibility: loaded ? 'visible' : 'hidden',
+                        } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: form.style, handleLoaded: function () {
+                                setLoaded(true);
+                            } }), void 0) }), void 0) }), void 0)] }, void 0));
     }
     else {
         return _jsx("div", {}, void 0);

package/dist/FormComponents/Section/MaterialSection/MaterialSection.js

@@ -27,7 +27,8 @@ import styles from './MaterialSection.module.css';
 function MaterialSection(_a) {
     var section = _a.section, form = _a.form, others = __rest(_a, ["section", "form"]);
     return (_jsx("div", __assign({ className: styles.container, style: {
-            width: (form.blockSize + form.spacingSize) * form.blockNum,
+            width: (form.size.blockSize + form.size.spacingSize) *
+                form.size.blockNum,
         } }, { children: section.steps.map(function (idStep, index) {
             var step = form.steps[idStep];
             if (step) {

package/dist/FormComponents/Section/Section.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Control, FieldValues, UseFormGetValues } from 'react-hook-form';
+import { Control, FieldValues, UseFormGetValues, UseFormTrigger } from 'react-hook-form';
 import { Form, FormStyle, Section } from '../../@Types/Form';
 import { CustomStep } from '../../App';
 import { WidthStats } from '../Form/Form';
@@ -17,6 +17,9 @@ export interface RecursiveData {
     customSteps: Record<string, CustomStep>;
     /** Function to call on postview to fetch the download url of a file */
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+    dependencyStore: Record<string, any>;
+    setDependencyStore: (values: Record<string, any>) => void;
+    trigger: UseFormTrigger<any>;
 }
 export interface SectionComponentProps extends RecursiveData {
     section: Section;

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/CBRIncidentsStep.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CBRIncidentsStep as CBRIncidentsStepType } from '../../../../@Types/CBRFormStep';
+import { StepProps } from '../../Step';
+export interface CBRIncidentsStepProps extends Omit<StepProps, 'step'> {
+    /** The CBRIncidentsStep to display */
+    step: CBRIncidentsStepType;
+}
+declare function CBRIncidentsStep(props: CBRIncidentsStepProps): JSX.Element;
+export default CBRIncidentsStep;

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/CBRIncidentsStep.js

@@ -0,0 +1,25 @@
+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 MaterialCBRIncidentsStep from './MaterialCBRIncidentsStep/MaterialCBRIncidentsStep';
+function CBRIncidentsStep(props) {
+    switch (props.formStyle.type) {
+        case FormStyleTypes.MATERIAL: {
+            return _jsx(MaterialCBRIncidentsStep, __assign({}, props), void 0);
+        }
+        default: {
+            return _jsx(MaterialCBRIncidentsStep, __assign({}, props), void 0);
+        }
+    }
+}
+export default CBRIncidentsStep;

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CBRIncidentsStepProps } from '../../CBRIncidentsStep';
+import { Incident } from '../MaterialCBRIncidentsStep';
+declare function IncidentComponent({ step, form, level, incident, formStyle, handleDelete, ...others }: CBRIncidentsStepProps & {
+    incident: Incident;
+    handleDelete: Function;
+}): JSX.Element;
+export default IncidentComponent;

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.js

@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './Incident.module.css';
+import StepComponent from '../../../../Step';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+function IncidentComponent(_a) {
+    var step = _a.step, form = _a.form, level = _a.level, incident = _a.incident, formStyle = _a.formStyle, handleDelete = _a.handleDelete, others = __rest(_a, ["step", "form", "level", "incident", "formStyle", "handleDelete"]);
+    var spaceStep = form.steps[incident.idSpaceStep];
+    var elementStep = form.steps[incident.idElementStep];
+    var commentStep = form.steps[incident.idCommentStep];
+    if (incident.deleted) {
+        return _jsx("div", {}, void 0);
+    }
+    return (_jsx("div", __assign({ className: others.widthStats.isMobile
+            ? styles.mobileContainer
+            : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
+                width: (form.size.blockSize + form.size.spacingSize) *
+                    (form.size.blockNum - 1),
+            } }, { children: [_jsxs("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: [step.unitLabel + ' ' + incident.num, ":"] }), void 0), _jsx("div", __assign({ className: others.postview
+                        ? styles.disabledDeleteBtn
+                        : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
+                        if (!others.postview) {
+                            handleDelete();
+                        }
+                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsx(StepComponent, __assign({}, others, { formStyle: formStyle, form: form, step: spaceStep, handleSizeChange: function () { }, level: level + 1 }), void 0), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: elementStep, handleSizeChange: function () { }, level: level + 1 }), void 0), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: commentStep, handleSizeChange: function () { }, level: level + 1 }), void 0)] }), void 0) }), void 0));
+}
+export default IncidentComponent;