@arquimedes.co/eureka-forms 1.9.50-test → 1.9.52-test

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

@@ -1,22 +1,18 @@
 import { FormStyleTypes, FormTypes } from '../constants/FormStepTypes';
 import { FormStep } from './FormStep';
 export interface Form {
-    apiKey: string;
+    apiKey?: string;
+    name?: string;
     sections: Record<string, Section>;
     steps: Record<string, FormStep>;
-    firstSection: string;
-    name: string;
-    type: FormTypes;
-    description: string;
-    isInternal: boolean;
-    isPublic: boolean;
-    hasCaptcha: boolean;
-    url: string;
-    isStandAlone: boolean;
-    style: FormStyle;
-    classifiers: Record<string, ParentClassifier>;
-    terms: Term[];
     size: FormSize;
+    firstSection: string;
+    type?: FormTypes;
+    hasCaptcha?: boolean;
+    isStandAlone?: boolean;
+    style?: FormStyle;
+    classifiers?: Record<string, ParentClassifier>;
+    terms?: Term[];
 }
 export interface FormSize {
     blockNum: 1 | 2 | 3 | 4;

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

@@ -1,6 +1,6 @@
 import Types, { ClassifierOptionTypes, OptionTypes, RatingTypes, MapperStyleTypes } from '../constants/FormStepTypes';
 import * as GSteps from './GenericFormSteps';
-export type FormStep = Title | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | EntityValuePicker | Mapper;
+export type FormStep = Title | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | Mapper;
 export interface Title extends GSteps.GBaseStep {
     type: Types.TITLE;
     title: string;
@@ -36,6 +36,11 @@ export interface TextInput extends GSteps.GTextInput {
 export interface DatePicker extends GSteps.GDatePicker {
     type: Types.DATEPICKER;
 }
+export interface Collapsible extends GSteps.GBaseStep {
+    type: Types.COLLAPSIBLE;
+    label: string;
+    steps: string[];
+}
 export interface FormSelector extends GSteps.GBaseStep {
     type: Types.SELECTOR;
     label: string;

package/dist/App.js

@@ -161,7 +161,7 @@ function App(_a) {
                     LogRocket.default.identify(organizationInfo.idOrganization + '/' + apiKey, {
                         name: organizationInfo.name +
                             '/' +
-                            (form ? form === null || form === void 0 ? void 0 : form.name : '404'),
+                            ((form === null || form === void 0 ? void 0 : form.name) ? form === null || form === void 0 ? void 0 : form.name : '404'),
                     });
                     return [3 /*break*/, 4];
                 case 3:
@@ -406,7 +406,7 @@ var mapOriginalValues = function (originalValues, form) {
     return newValues;
 };
 var mapOriginalValue = function (step, value, form) {
-    var _a, _b;
+    var _a, _b, _c;
     switch (step === null || step === void 0 ? void 0 : step.type) {
         case StepTypes.TEXTAREA: {
             if (step.hasTextEditor) {
@@ -421,7 +421,7 @@ var mapOriginalValue = function (step, value, form) {
             return value;
         }
         case StepTypes.CLASSIFIER_SELECTOR: {
-            var classifier = form.classifiers[(_b = step.idClassifier) !== null && _b !== void 0 ? _b : ''];
+            var classifier = (_b = form.classifiers) === null || _b === void 0 ? void 0 : _b[(_c = step.idClassifier) !== null && _c !== void 0 ? _c : ''];
             if (classifier) {
                 var option = classifier.children.find(function (child) { return child._id == value; });
                 if (!(value === null || value === void 0 ? void 0 : value.value))

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

@@ -159,12 +159,12 @@ function ColumnForm(_a) {
     return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), showConfirmation !== undefined && (_jsx(ConfirmationDialog, { formStyle: formStyle, confirmation: showConfirmation, onClose: function () {
                     reload();
                     setShowConfirmation(undefined);
-                } })), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, sendLabel: sendLabel, 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, setFocus: setFocus }, others), index)); }), form.terms &&
+                } })), sections.map(function (idSection, index) { return (_jsx(SectionComponent, __assign({ form: form, sendLabel: sendLabel, 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, setFocus: setFocus }, others), idSection)); }), form.terms &&
                 (!internal || (internal && postview)) &&
                 (originalValues === null || originalValues === void 0 ? void 0 : originalValues['INTERNAL_CREATING_AGENT']) === undefined && (_jsx("div", __assign({ className: styles.termsContainer, style: {
                     width: (form.size.blockSize + form.size.spacingSize) *
                         form.size.blockNum,
-                } }, { children: 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 && others.editable && (_jsxs(React.Fragment, { children: [form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), !customSubmit && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                } }, { children: form.terms.map(function (term) { return (_jsx(TermComponent, { setValue: setValue, postview: postview, tempError: tempError, term: term, control: control, errors: errors, form: form, formStyle: formStyle }, term.id)); }) }))), !postview && others.editable && (_jsxs(React.Fragment, { children: [form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), !customSubmit && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsxs("button", __assign({ "data-testid": "form__submit", className: styles.submitBtn, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                                 var valid, captcha;
                                 return __generator(this, function (_a) {
                                     switch (_a.label) {
@@ -256,6 +256,9 @@ var calcValue = function (idStep, steps, values, customSteps, value) {
             case Types.CLASSIFIER_SELECTOR: {
                 return value.value;
             }
+            case Types.COLLAPSIBLE: {
+                return !!value;
+            }
             case Types.MAPPER: {
                 var elements = value === null || value === void 0 ? void 0 : value.filter(function (element) { return element.deleted !== true; });
                 var mappedValues = [];

package/dist/FormComponents/Form/Form.js

@@ -48,10 +48,10 @@ export var getLocale = function () {
             navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
 };
 function FormComponent(_a) {
-    var _b, _c;
+    var _b, _c, _d, _e, _f, _g;
     var form = _a.form, isWidget = _a.isWidget, internal = _a.internal, postview = _a.postview, organization = _a.organization, containerRef = _a.containerRef, others = __rest(_a, ["form", "isWidget", "internal", "postview", "organization", "containerRef"]);
-    var _d = useState(false), loaded = _d[0], setLoaded = _d[1];
-    var _e = useState(undefined), widthStats = _e[0], setWidthStats = _e[1];
+    var _h = useState(false), loaded = _h[0], setLoaded = _h[1];
+    var _j = useState(undefined), widthStats = _j[0], setWidthStats = _j[1];
     /** Calcs the currentBreakPoint and if is mobile */
     var handleResize = function () {
         var _a;
@@ -88,7 +88,7 @@ function FormComponent(_a) {
     if ((postview || internal || !form.isStandAlone) &&
         widthStats !== undefined) {
         return (_jsx("div", __assign({ style: {
-                backgroundColor: internal
+                backgroundColor: internal || !form.style
                     ? InternalFormStyle.backgroundColor
                     : form.style.backgroundColor,
                 minHeight: form.isStandAlone && !isWidget ? '100vh' : '100%',
@@ -96,16 +96,16 @@ function FormComponent(_a) {
                         setLoaded(true);
                     }, widthStats: widthStats, form: form, internal: internal, postview: postview, organization: organization, formStyle: internal
                         ? InternalFormStyle
-                        : __assign(__assign({}, InternalFormStyle), form.style) })) })) })));
+                        : __assign(__assign({}, InternalFormStyle), ((_c = form.style) !== null && _c !== void 0 ? _c : {})) })) })) })));
     }
     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 }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: organization.logoUrl, color: (_d = organization.styles) === null || _d === void 0 ? void 0 : _d.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
                             ? styles.fullScreenStandAloneForm
                             : styles.standAloneFormCard, style: {
-                            backgroundColor: form.style.backgroundColor,
+                            backgroundColor: (_f = (_e = form.style) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : InternalFormStyle.backgroundColor,
                             visibility: loaded ? 'visible' : 'hidden',
-                        } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: form.style, organization: organization, handleLoaded: function () {
+                        } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: (_g = form.style) !== null && _g !== void 0 ? _g : InternalFormStyle, organization: organization, handleLoaded: function () {
                                 setLoaded(true);
                             } })) })) }))] }));
     }
@@ -126,12 +126,10 @@ function FormTypeComponent(_a) {
     var props = __rest(_a, []);
     var renderTypes = function () {
         switch (props.form.type) {
-            case FormTypes.COLUMN: {
-                return _jsx(ColumnForm, __assign({}, props));
-            }
             case FormTypes.STEPPER: {
                 return _jsx(StepperForm, __assign({}, props));
             }
+            case FormTypes.COLUMN:
             default: {
                 return _jsx(ColumnForm, __assign({}, props));
             }

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

@@ -34,20 +34,20 @@ function MaterialSection(_a) {
                 widthStats.currentBreakPoint < form.size.blockNum
                 ? 'center'
                 : 'normal',
-        } }, { children: section.steps.map(function (idStep, index) {
+        } }, { children: section.steps.map(function (idStep) {
             var step = form.steps[idStep];
             //If partial is active only display steps with originalValues
             if (postview &&
                 partial &&
                 originalValues[idStep] === undefined) {
-                return _jsx("div", {}, index);
+                return _jsx("div", {}, idStep);
             }
             else if (step) {
-                return (_createElement(StepComponent, __assign({}, others, { widthStats: widthStats, form: form, step: step, key: index, level: 0 })));
+                return (_createElement(StepComponent, __assign({}, others, { widthStats: widthStats, form: form, step: step, key: idStep, level: 0 })));
             }
             else {
                 console.error('Step not found:', idStep);
-                return _jsx("div", {}, index);
+                return _jsx("div", {}, idStep);
             }
         }) })));
 }

package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -30,14 +30,15 @@ import { Controller } from 'react-hook-form';
 import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
 import RoundedSmartSelect from '../../../../shared/RoundedSmartSelect/RoundedSmartSelect';
 function ClassifierSelector(_a) {
+    var _b;
     var step = _a.step, form = _a.form, level = _a.level, errors = _a.errors, value = _a.value, onBlur = _a.onBlur, control = _a.control, editable = _a.editable, onChange = _a.onChange, postview = _a.postview, inputRef = _a.inputRef, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "form", "level", "errors", "value", "onBlur", "control", "editable", "onChange", "postview", "inputRef", "formStyle", "getValues", "widthStats", "handleSizeChange"]);
-    var _b = useState(level === 0
+    var _c = useState(level === 0
         ? calcFillerSize(step, form.steps, getValues(), form.size)
-        : 0), fillerSize = _b[0], setFillerSize = _b[1];
+        : 0), fillerSize = _c[0], setFillerSize = _c[1];
     if (!step.idClassifier) {
         return _jsx("div", {});
     }
-    var classifier = form.classifiers[step.idClassifier];
+    var classifier = (_b = form.classifiers) === null || _b === void 0 ? void 0 : _b[step.idClassifier];
     if (!classifier) {
         return _jsx("div", {});
     }
@@ -49,11 +50,11 @@ function ClassifierSelector(_a) {
             : classifier === null || classifier === void 0 ? void 0 : classifier._id]) === null || _a === void 0 ? void 0 : _a.type) !== ClassifierOptionTypes.HIDE;
     })
         .map(function (classifier) {
-        var _a;
+        var _a, _b;
         return typeof classifier === 'string'
             ? {
                 value: classifier,
-                label: (_a = form.classifiers[classifier]) === null || _a === void 0 ? void 0 : _a.name,
+                label: (_b = (_a = form.classifiers) === null || _a === void 0 ? void 0 : _a[classifier]) === null || _b === void 0 ? void 0 : _b.name,
             }
             : { value: classifier._id, label: classifier.name };
     });
@@ -83,9 +84,9 @@ function ClassifierSelector(_a) {
         if (value) {
             var currentOption = step.options[value.value];
             if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
-                return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep, index) {
+                return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
                         var subStep = form.steps[idStep];
-                        return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, formStyle: formStyle, errors: errors, form: form, control: control, step: subStep, key: index, level: level + 1, handleSizeChange: function () {
+                        return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, formStyle: formStyle, errors: errors, form: form, control: control, step: subStep, key: idStep, level: level + 1, handleSizeChange: function () {
                                 sizeChange();
                             } })));
                     }) }));

package/dist/FormComponents/Step/CollapsibleStep/CollapsibleStep.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Collapsible } from '../../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface CollapsibleStepProps extends StepProps {
+    /** The CollapsibleStep to display */
+    step: Collapsible;
+}
+declare function CollapsibleStep({ step, formStyle, ...others }: CollapsibleStepProps): JSX.Element;
+export default CollapsibleStep;

package/dist/FormComponents/Step/CollapsibleStep/CollapsibleStep.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../../constants/FormStepTypes';
+import MaterialCollapsibleStep from './MaterialTitleStep/MaterialCollapsibleStep';
+function CollapsibleStep(_a) {
+    var step = _a.step, formStyle = _a.formStyle, others = __rest(_a, ["step", "formStyle"]);
+    if (step.steps.length === 0)
+        return _jsx(_Fragment, {});
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return (_jsx(MaterialCollapsibleStep, __assign({ step: step, formStyle: formStyle }, others)));
+        }
+    }
+}
+export default CollapsibleStep;

package/dist/FormComponents/Step/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.d.ts

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

package/dist/FormComponents/Step/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import styles from './MaterialCollapsibleStep.module.css';
+import { Controller } from 'react-hook-form';
+import StepComponent from '../../Step';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
+function Collapsible(_a) {
+    var _b, _c, _d, _e;
+    var step = _a.step, open = _a.open, setOpen = _a.setOpen, formStyle = _a.formStyle, widthStats = _a.widthStats, form = _a.form, errors = _a.errors, clearErrors = _a.clearErrors, others = __rest(_a, ["step", "open", "setOpen", "formStyle", "widthStats", "form", "errors", "clearErrors"]);
+    var contentRef = React.useRef(null);
+    useEffect(function () {
+        var _a;
+        if (!open && ((_a = step.dependencies) === null || _a === void 0 ? void 0 : _a.find(function (dep) { return !!errors[dep]; }))) {
+            setOpen('TRUE');
+        }
+    }, (_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { return errors[dep]; })) !== null && _c !== void 0 ? _c : []);
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: styles.container, style: {
+                    color: formStyle.textColor,
+                    borderColor: formStyle.primaryColor,
+                } }, { children: [_jsx("div", __assign({ className: styles.collapsibleLabel, onClick: function () {
+                            setOpen(!open);
+                        } }, { children: step.label })), _jsx("div", __assign({ className: styles.expand, onClick: function () {
+                            setOpen(!open);
+                        } }, { children: _jsx("div", __assign({ className: styles.expandIcon }, { children: open ? (_jsx(ExpandLessRoundedIcon, { fontSize: "inherit" })) : (_jsx(ExpandMoreRoundedIcon, { fontSize: "inherit" })) })) }))] })), _jsx("div", __assign({ className: styles.content, style: {
+                    height: open === 'TRUE'
+                        ? 'auto'
+                        : open
+                            ? (_e = (_d = contentRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) !== null && _e !== void 0 ? _e : 'auto'
+                            : 0,
+                } }, { children: _jsx("div", __assign({ className: styles.contentContainer, ref: contentRef }, { children: step.steps.map(function (idSubStep) {
+                        var subStep = form.steps[idSubStep];
+                        return (_createElement(StepComponent, __assign({}, others, { clearErrors: clearErrors, errors: errors, formStyle: formStyle, form: form, widthStats: widthStats, step: subStep, key: idSubStep, handleSizeChange: function () { } })));
+                    }) })) })), _jsx("div", { className: styles.separator, style: {
+                    backgroundColor: formStyle.primaryColor,
+                } })] }));
+}
+function CollapsibleStep(props) {
+    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: props.postview ? false : true, render: function (_a) {
+            var _b = _a.field, value = _b.value, onChange = _b.onChange;
+            return (_jsx(Collapsible, __assign({}, props, { open: value, setOpen: function (open) {
+                    var _a;
+                    if (!open) {
+                        var deps = (_a = props.step.dependencies) === null || _a === void 0 ? void 0 : _a.filter(function (dep) { return !!props.errors[dep]; });
+                        if (deps)
+                            props.clearErrors(deps);
+                    }
+                    onChange(open);
+                } })));
+        } }));
+}
+export default CollapsibleStep;

package/dist/FormComponents/Step/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.module.css

@@ -0,0 +1,62 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    width: 900px;
+    max-width: 100%;
+    margin-top: 5px;
+}
+
+.collapsibleLabel {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 600;
+    cursor: default;
+    text-align: start;
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    -o-user-select: none;
+    user-select: none; /* Non-prefixed version, currently */
+}
+
+.content {
+    width: 100%;
+    overflow: hidden;
+    transition: height ease 0.9s;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+.expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 2px;
+}
+.expandIcon {
+    height: 24px;
+    width: 24px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.separator {
+    height: 1px;
+    width: calc(100% - 20px);
+    margin-left: 10px;
+    border-radius: 20px;
+}

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/MapperElement.js

@@ -29,11 +29,11 @@ function MapperElementComponent(_a) {
     if (element.deleted) {
         return _jsx("div", {});
     }
-    return (_jsx(PillElementContainer, __assign({ handleDelete: handleDelete }, others, { step: step, size: form.size }, { children: step.rootSteps.map(function (idSubStep, index) {
+    return (_jsx(PillElementContainer, __assign({ handleDelete: handleDelete }, others, { step: step, size: form.size }, { children: step.rootSteps.map(function (idSubStep) {
             var subStep = form.steps[element.ids[idSubStep]];
             if (!subStep)
                 return _jsx("div", {});
-            return (_createElement(StepComponent, __assign({}, others, { form: form, step: subStep, key: index, level: level + 1 })));
+            return (_createElement(StepComponent, __assign({}, others, { form: form, step: subStep, key: idSubStep, level: level + 1 })));
         }) })));
 }
 export default MapperElementComponent;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -112,11 +112,11 @@ function Elements(_a) {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
-                } }, { children: step.description }))), elements.map(function (incident, index) { return (_jsx(MapperElementComponent, __assign({ num: index, element: incident, formStyle: formStyle, step: step, form: __assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) }), editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
+                } }, { children: step.description }))), elements.map(function (element, index) { return (_jsx(MapperElementComponent, __assign({ num: index, element: element, formStyle: formStyle, step: step, form: __assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) }), editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
                     var tempElements = __spreadArray([], elements, true);
                     tempElements[index].deleted = true;
                     onChange(tempElements);
-                } }, others), index)); }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: styles.hiddenInput }), step.creatable !== false && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel, color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                } }, others), element.id)); }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: btnRef, className: styles.hiddenInput }), step.creatable !== false && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel, color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 handleAddElement();
                             }
@@ -187,6 +187,14 @@ function calcRecursiveData(element, newSteps, deps, originalValues) {
                     }
                 }
                 break;
+            case StepTypes.COLLAPSIBLE: {
+                for (var i = 0; i < step.steps.length; i++) {
+                    var idStep_4 = step.steps[i];
+                    var newId = element.ids[idStep_4];
+                    step.steps[i] = newId;
+                }
+                break;
+            }
             case StepTypes.ENTITYVALUEPICKER:
                 for (var _h = 0, _j = step.filters; _h < _j.length; _h++) {
                     var filter = _j[_h];

package/dist/FormComponents/Step/RatingStep/MaterialRatingStep/MaterialRatingStep.js

@@ -41,9 +41,9 @@ function MaterialRatingStep(_a) {
                 currentOption = step.nestedSteps[value - 1];
             }
             if (currentOption && currentOption.length > 0) {
-                return (_jsx(React.Fragment, { children: currentOption.map(function (idSubStep, index) {
+                return (_jsx(React.Fragment, { children: currentOption.map(function (idSubStep) {
                         var subStep = form.steps[idSubStep];
-                        return (_createElement(StepComponent, __assign({}, others, { form: form, postview: postview, editable: editable, formStyle: formStyle, errors: errors, widthStats: widthStats, step: subStep, key: index, level: level + 1 })));
+                        return (_createElement(StepComponent, __assign({}, others, { form: form, postview: postview, editable: editable, formStyle: formStyle, errors: errors, widthStats: widthStats, step: subStep, key: idSubStep, level: level + 1 })));
                     }) }));
             }
         }

package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -67,9 +67,9 @@ function Selector(_a) {
         }
         if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === OptionTypes.NESTED &&
             currentOptionIndex !== null) {
-            return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idSubStep, index) {
+            return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idSubStep) {
                     var subStep = form.steps[idSubStep];
-                    return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, formStyle: formStyle, form: form, getValues: getValues, errors: errors, control: control, widthStats: widthStats, step: subStep, key: index, level: level + 1, handleSizeChange: function () {
+                    return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, formStyle: formStyle, form: form, getValues: getValues, errors: errors, control: control, widthStats: widthStats, step: subStep, key: idSubStep, level: level + 1, handleSizeChange: function () {
                             sizeChange();
                         } })));
                 }) }));

package/dist/FormComponents/Step/Step.js

@@ -36,6 +36,7 @@ import RatingStep from './RatingStep/RatingStep';
 import AYFStepMapper from './AYFStepMapper';
 import EntityValuePickerStep from './EntityValueStep/EntityValueStep';
 import MapperStep from './MapperStep/MapperStep';
+import CollapsibleStep from './CollapsibleStep/CollapsibleStep';
 function StepComponent(_a) {
     var _b;
     var step = _a.step, props = __rest(_a, ["step"]);
@@ -74,6 +75,9 @@ function StepComponent(_a) {
         case Types.RATING: {
             return _jsx(RatingStep, __assign({ step: step }, props));
         }
+        case Types.COLLAPSIBLE: {
+            return _jsx(CollapsibleStep, __assign({ step: step }, props));
+        }
         case Types.ENTITYVALUEPICKER: {
             return (_jsx(EntityValuePickerStep, __assign({ step: step }, props)));
         }

package/dist/constants/FormStepTypes.d.ts

@@ -16,6 +16,7 @@ export declare enum StepTypes {
     SEPARATOR = "SEPARATOR",
     SELECTOR = "SELECTOR",
     CLASSIFIER_SELECTOR = "CLASSIFIER_SELECTOR",
+    COLLAPSIBLE = "COLLAPSIBLE",
     MAPPER = "MAPPER",
     ENTITYVALUEPICKER = "ENTITYVALUEPICKER"
 }

package/dist/constants/FormStepTypes.js

@@ -19,6 +19,7 @@ export var StepTypes;
     StepTypes["SEPARATOR"] = "SEPARATOR";
     StepTypes["SELECTOR"] = "SELECTOR";
     StepTypes["CLASSIFIER_SELECTOR"] = "CLASSIFIER_SELECTOR";
+    StepTypes["COLLAPSIBLE"] = "COLLAPSIBLE";
     StepTypes["MAPPER"] = "MAPPER";
     StepTypes["ENTITYVALUEPICKER"] = "ENTITYVALUEPICKER";
 })(StepTypes || (StepTypes = {}));

package/package.json

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