@arquimedes.co/eureka-forms 1.2.0 → 1.3.0-test

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

@@ -1 +1,2 @@
 export type { Organization } from './Organization';
+export type { Form } from './Form';

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

@@ -55,7 +55,6 @@ export interface DatePicker {
     pickTime: boolean;
     description: string | null;
     required: boolean;
-    showIcon: boolean;
     size: 1 | 2 | 3 | 4;
 }
 declare type FormValidation = {

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

@@ -0,0 +1 @@
+export * from './@Types';

package/dist/@Types/index.js

@@ -0,0 +1 @@
+export * from './@Types';

package/dist/App.js

@@ -127,6 +127,7 @@ function App(_a) {
                     if (!(organizationInfo && form !== undefined)) return [3 /*break*/, 4];
                     if (!(process.env.NODE_ENV === 'production' &&
                         apiKey !== 'rCgWiEfOSN1TlUmHO28Y0' &&
+                        apiKey !== 'FORMSTEST' &&
                         !internal &&
                         !postview &&
                         !preview)) return [3 /*break*/, 4];
@@ -162,7 +163,7 @@ function App(_a) {
                 case 0:
                     _b.trys.push([0, 5, , 6]);
                     if (!domain) return [3 /*break*/, 2];
-                    return [4 /*yield*/, widgetInstance.get("/organization?idOrganization=".concat(domain))];
+                    return [4 /*yield*/, widgetInstance.get("/organization?idOrganization=" + domain)];
                 case 1:
                     _a = _b.sent();
                     return [3 /*break*/, 4];
@@ -205,8 +206,8 @@ function App(_a) {
                 case 0:
                     _a.trys.push([0, 2, , 3]);
                     return [4 /*yield*/, (domain
-                            ? widgetInstance.get("/form/".concat(apiKey, "?idOrganization=").concat(domain))
-                            : axiosInstance.get("/form/".concat(apiKey)))];
+                            ? widgetInstance.get("/form/" + apiKey + "?idOrganization=" + domain)
+                            : axiosInstance.get("/form/" + apiKey))];
                 case 1:
                     response = _a.sent();
                     if (response) {

package/dist/AxiosWidget.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 var headers = {};
 var widgetInstance = axios.create({
-    baseURL: "https://api.forms.".concat(process.env.REACT_APP_DOMAIN, "/api"),
+    baseURL: "https://api.forms." + process.env.REACT_APP_DOMAIN + "/api",
     timeout: 30000,
     headers: headers,
 });

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

@@ -119,9 +119,9 @@ function ColumnForm(_a) {
                     payload = {
                         formValues: { steps: values },
                     };
-                    url = "/ticket/".concat(internal ? form.apiKey : apiKey);
+                    url = "/ticket/" + (internal ? form.apiKey : apiKey);
                     if (!(domain || internal)) return [3 /*break*/, 4];
-                    return [4 /*yield*/, widgetInstance.post("".concat(url, "?idOrganization=").concat(domain), payload)];
+                    return [4 /*yield*/, widgetInstance.post(url + "?idOrganization=" + domain, payload)];
                 case 3:
                     _b = _c.sent();
                     return [3 /*break*/, 6];
@@ -148,7 +148,7 @@ function ColumnForm(_a) {
                     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 &&
                 !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": "login__submit", className: styles.submitBtn, onClick: function () {
+                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();
                     }, style: {
                         background: formStyle.primaryColor,

package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -24,10 +24,8 @@ function ConfirmationDialog(_a) {
             },
         }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () {
                         onClose();
-                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case }), void 0), ' ', "ha sido registrado!"] }), void 0), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." }), void 0), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] }), void 0), _jsx("label", __assign({ className: styles.url, onClick: function () {
-                                var _a, _b, _c;
-                                (_c = (_b = (_a = window
-                                    .open) === null || _a === void 0 ? void 0 : _a.call(window, confirmation.url, '_blank')) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.checkContainer, style: { color: formStyle.primaryColor } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: { fontSize: '160px' } }, void 0) }), void 0), _jsxs("div", __assign({ className: styles.messageContainer }, { children: ["Tu caso n\u00FAmero", ' ', _jsx("span", __assign({ style: { fontWeight: 'bold' } }, { children: confirmation.case }), void 0), ' ', "ha sido registrado!"] }), void 0), _jsx("div", __assign({ className: styles.messageContainer }, { children: "Pronto te estaremos dando respuesta." }), void 0), _jsxs("div", __assign({ className: styles.linkContainer }, { children: ["Puedes consultar el estado aqui:", ' '] }), void 0), _jsx("a", __assign({ className: styles.url, "data-testid": "ResUrl", target: "_blank", href: confirmation.url, style: {
+                                color: formStyle.textColor,
                             } }, { children: confirmation.url }), void 0)] }), void 0)] }), void 0) }), void 0));
 }
 export default ConfirmationDialog;

package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -27,7 +27,7 @@ function CheckBoxStep(_a) {
                                 : undefined,
                         }, shouldUnregister: true, render: function (_a) {
                             var field = _a.field;
-                            return (_jsx(RoundedCheckBox, __assign({}, field, { inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: field.value }), void 0));
+                            return (_jsx(RoundedCheckBox, __assign({}, field, { "data-testid": step.id, inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: field.value }), void 0));
                         } }, void 0)] }), void 0), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
                     color: !!errors[step.id]
                         ? formStyle.errorColor

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

@@ -55,7 +55,7 @@ function ClassifierSelector(_a) {
             } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, errorColor: formStyle.errorColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, label: step.label ? step.label : classifier.name, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);
                     sizeChange();
-                }, inputRef: inputRef, helperText: errors[step.id]
+                }, "data-testid": step.id, inputRef: inputRef, helperText: errors[step.id]
                     ? errors[step.id].message
                     : step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), classifier.children
                         .filter(function (classifier) {

package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -27,7 +27,7 @@ function DatePickerStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
+                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, inputRef: field.ref, cantEdit: postview, "data-testid": step.id, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, error: !!errors[step.id], required: step.required }), void 0));
             } }, void 0) }), void 0));

package/dist/FormComponents/Step/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -190,7 +190,8 @@ function FileUploadStep(_a) {
         }
         return '';
     };
-    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
+    return (_jsxs("div", __assign({ className: styles.container +
+            (error || !!errors[step.id] ? ' EF-error' : ''), "data-testid": step.id }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label }), void 0), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }), void 0)), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
                     var files = e.target.files;
                     if (files) {
                         var filesArray = Array.from(files);

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

@@ -45,7 +45,7 @@ function Selector(_a) {
                     ? '100%'
                     : calcStepWidth(step.size, form),
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
+            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, "data-testid": step.id, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
                     onChange(event.target.value);
                     sizeChange();
                 }, helperText: errors[step.id]

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -20,10 +20,9 @@ import { convertFromRaw, EditorState } from 'draft-js';
 import { useState } from 'react';
 import { ClickAwayListener } from '@material-ui/core';
 function TextAreaStep(_a) {
-    var _b;
     var step = _a.step, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues;
-    var _c = useState(false), hovering = _c[0], setHovering = _c[1];
-    var _d = useState(false), focus = _d[0], setFocus = _d[1];
+    var _b = useState(false), hovering = _b[0], setHovering = _b[1];
+    var _c = useState(false), focus = _c[0], setFocus = _c[1];
     var calcStyle = function () {
         if (focus) {
             return {
@@ -42,6 +41,23 @@ function TextAreaStep(_a) {
             };
         }
     };
+    var calcDefaultStringValue = function (defaultValue) {
+        var _a;
+        if (typeof defaultValue === 'string') {
+            return defaultValue;
+        }
+        else {
+            return (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) !== null && _a !== void 0 ? _a : '';
+        }
+    };
+    var calcDefaultDraftValue = function (defaultValue) {
+        if (typeof defaultValue === 'string') {
+            return EditorState.createWithContent(convertFromRaw(stringToDraft(defaultValue)));
+        }
+        else {
+            return EditorState.createWithContent(convertFromRaw(getRawText(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.draft, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text)));
+        }
+    };
     if (step.hasTextEditor) {
         return (_jsxs("div", __assign({ className: styles.textEditorContainer, style: {
                 '--eureka-outline': formStyle.outlineColor,
@@ -54,7 +70,7 @@ function TextAreaStep(_a) {
                         if (!postview) {
                             setFocus(false);
                         }
-                    } }, { children: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
+                    } }, { children: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', "data-testid": step.id, style: calcStyle(), onMouseEnter: function () {
                             if (!postview) {
                                 setHovering(true);
                             }
@@ -67,7 +83,7 @@ function TextAreaStep(_a) {
                                 setFocus(true);
                             }
                         } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: originalValues[step.id]
-                                ? EditorState.createWithContent(convertFromRaw(getRawText(originalValues[step.id].draft, originalValues[step.id].text)))
+                                ? calcDefaultDraftValue(originalValues[step.id])
                                 : EditorState.createEmpty(), rules: step.required
                                 ? {
                                     validate: function (editorState) {
@@ -123,13 +139,13 @@ function TextAreaStep(_a) {
     else {
         return (_jsx("div", __assign({ className: styles.container, style: {
                 paddingBottom: step.description || !!errors[step.id] ? '0px' : '23px',
-            } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: (_b = originalValues[step.id]) !== null && _b !== void 0 ? _b : '', rules: {
+            } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: calcDefaultStringValue(originalValues[step.id]), rules: {
                     required: step.required
                         ? 'Este campo es obligatorio'
                         : undefined,
                 }, shouldUnregister: true, render: function (_a) {
                     var field = _a.field;
-                    return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, inputRef: field.ref, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
+                    return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, required: step.required, cantEdit: postview, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
                             ? errors[step.id].message
                             : step.description, error: !!errors[step.id] }), void 0));
                 } }, void 0) }), void 0));

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -35,7 +35,7 @@ function TextInputStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedTextField, __assign({}, field, { label: step.label, inputRef: field.ref, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
+                return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, cantEdit: postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!errors[step.id] }), void 0));
             } }, void 0) }), void 0));

package/dist/controllers/FileService.js

@@ -49,7 +49,7 @@ export function getUploadUrls(files, domain) {
                         extension: file.name.split('.').pop(),
                     }); });
                     if (!domain) return [3 /*break*/, 2];
-                    return [4 /*yield*/, widgetInstance.post("/uploadfile?idOrganization=".concat(domain), filesArray)];
+                    return [4 /*yield*/, widgetInstance.post("/uploadfile?idOrganization=" + domain, filesArray)];
                 case 1:
                     response = _b.sent();
                     return [3 /*break*/, 4];

package/dist/shared/RoundedDatePicker/RoundedDatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { KeyboardDatePickerProps } from '@material-ui/pickers';
+import { DatePickerProps } from '@material-ui/pickers';
 interface StyleProps {
     /** The color of the text */
     textColor?: string;
@@ -38,13 +38,11 @@ interface StyleProps {
     helperTextColor?: string;
 }
 interface RoundedDatePickerProps extends StyleProps {
-    /** If the calendar icon should be shown */
-    showIcon?: boolean;
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
  */
-declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps & KeyboardDatePickerProps> {
+declare class RoundedDatePicker extends React.Component<RoundedDatePickerProps & DatePickerProps> {
     render(): JSX.Element;
 }
 export default RoundedDatePicker;

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -39,7 +39,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { cloneElement } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
-import { KeyboardDatePicker, KeyboardDateTimePicker, } from '@material-ui/pickers';
+import { DatePicker, DateTimePicker, } from '@material-ui/pickers';
 import { getLocale } from '../../FormComponents/Form/Form';
 import { format } from 'date-fns';
 var useDatePickerStyles = function (props) {
@@ -47,8 +47,9 @@ var useDatePickerStyles = function (props) {
         root: {
             borderRadius: props.borderRadius,
             backgroundColor: props.backgroundColor,
+            cursor: props.cantEdit ? 'default' : 'pointer',
             '& input, textarea': {
-                cursor: props.cantEdit ? 'default' : 'text',
+                cursor: props.cantEdit ? 'default' : 'pointer',
                 padding: props.padding,
                 fontWeight: props.fontWeight,
                 color: props.textColor,
@@ -210,7 +211,7 @@ var useDatePickerDialogStyles = function (props) {
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.showIcon, showIcon = _r === void 0 ? true : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "showIcon", "cantEdit", "pickTime", "onChange", "required"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.cantEdit, cantEdit = _r === void 0 ? false : _r, _s = _a.pickTime, pickTime = _s === void 0 ? false : _s, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "cantEdit", "pickTime", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -277,7 +278,7 @@ function CustomDatePicker(_a) {
         helperTextColor: helperTextColor,
     })();
     if (pickTime) {
-        return (_jsx(KeyboardDateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
@@ -286,6 +287,7 @@ function CustomDatePicker(_a) {
                 required: required,
                 classes: classes,
                 disabled: cantEdit,
+                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: { color: '#757575' } }, void 0)),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
             }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
@@ -298,7 +300,7 @@ function CustomDatePicker(_a) {
             }, variant: "dialog" }), void 0));
     }
     else {
-        return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+        return (_jsx(DatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
                 disableEnforceFocus: true,
                 className: datePicker,
                 cancelLabel: '',
@@ -307,6 +309,7 @@ function CustomDatePicker(_a) {
                 required: required,
                 classes: classes,
                 disabled: cantEdit,
+                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: { color: '#757575' } }, void 0)),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
             }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "1.2.0",
+    "version":"1.3.0-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
+        "e2e": "percy exec -- cypress run",
         "lint": "eslint 'src/**/*.ts'",
         "tsc-build": "tsc --noEmit false --outDir ./dist"
     },
@@ -17,11 +18,11 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
-        "axios": "^0.21.1",
-        "date-fns": "^2.23.0",
-        "draft-js": "^0.11.7",
-        "react-draft-wysiwyg": "^1.14.7",
-        "react-hook-form": "7.18.1",
+        "axios": "^0.21.x",
+        "date-fns": "^2.23.x",
+        "draft-js": "^0.11.x",
+        "react-draft-wysiwyg": "^1.14.x",
+        "react-hook-form": "^7.6.4",
         "react-router-dom": "^5.2.0",
         "react-scripts": "5.0.0-next.37",
         "typescript": "^4.4.3"
@@ -46,35 +47,37 @@
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",
+        "@percy/cli": "^1.0.0-beta.76",
+        "@percy/cypress": "^3.1.1",
         "@types/draft-js": "^0.11.5",
         "@types/jest": "^26.0.24",
-        "@types/node": "^12.20.25",
         "@types/react": "^17.0.21",
         "@types/react-dom": "^17.0.9",
         "@types/react-draft-wysiwyg": "^1.13.3",
         "@types/react-router-dom": "^5.1.7",
         "@typescript-eslint/eslint-plugin": "^4.24.0",
         "@typescript-eslint/parser": "^4.24.0",
+        "cypress": "^9.5.2",
         "eslint": "^7.27.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^3.4.0",
         "jest-junit": "^12.2.0",
+        "local-web-server": "^5.2.0",
         "postcss-normalize": "^10.0.1",
         "prettier": "^2.3.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2"
     },
     "peerDependencies": {
-        "react": "^17.x.x",
-        "react-dom": "^17.x.x",
         "axios": "^0.21.x",
+        "babel-plugin-add-react-displayname": "0.0.x",
         "date-fns": "^2.23.x",
         "draft-js": "^0.11.x",
+        "logrocket": "^2.x.x",
+        "react": "^17.x.x",
+        "react-dom": "^17.x.x",
         "react-draft-wysiwyg": "^1.14.x",
-        "react-hook-form": "^7.6.4",
-        "react-router-dom": "^5.2.0",
-        "babel-plugin-add-react-displayname": "0.0.x",
-        "logrocket": "^2.x.x"
+        "react-hook-form": "^7.6.4"
     },
     "publishConfig": {
         "access": "public"