@arquimedes.co/eureka-forms 1.7.8 → 1.7.9-test

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

@@ -24,6 +24,7 @@ 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';
+import TextAreaStep from '../../../../TextAreaStep/TextAreaStep';
 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];
@@ -43,6 +44,6 @@ function IncidentComponent(_a) {
                         if (others.editable && !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));
+                    } }, { 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(TextAreaStep, __assign({}, others, { form: form, backgroundColor: 'transparent', formStyle: formStyle, step: commentStep, maxLength: 200, handleSizeChange: function () { }, level: level + 1 }), void 0)] }), void 0) }), void 0));
 }
 export default IncidentComponent;

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.d.ts

@@ -3,7 +3,7 @@ import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import './DraftEditor.css';
 import { RawDraftContentState } from 'draft-js';
 import { TextAreaStepProps } from '../TextAreaStep';
-declare function TextAreaStep({ step, errors, control, editable, postview, formStyle, originalValues, }: TextAreaStepProps): JSX.Element;
+declare function TextAreaStep({ step, errors, control, editable, postview, formStyle, maxLength, originalValues, backgroundColor, }: TextAreaStepProps): JSX.Element;
 export default TextAreaStep;
 export declare function stringToDraft(text: string): RawDraftContentState;
 export declare const getRawText: (draft?: RawDraftContentState | undefined, text?: string | undefined) => RawDraftContentState;

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

@@ -20,7 +20,7 @@ import { convertFromRaw, EditorState } from 'draft-js';
 import { useState } from 'react';
 import { ClickAwayListener } from '@material-ui/core';
 function TextAreaStep(_a) {
-    var step = _a.step, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues;
+    var step = _a.step, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, maxLength = _a.maxLength, originalValues = _a.originalValues, backgroundColor = _a.backgroundColor;
     var _b = useState(false), hovering = _b[0], setHovering = _b[1];
     var _c = useState(false), focus = _c[0], setFocus = _c[1];
     var calcStyle = function () {
@@ -149,7 +149,7 @@ function TextAreaStep(_a) {
                 }, shouldUnregister: true, render: function (_a) {
                     var _b;
                     var field = _a.field;
-                    return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, required: step.required, cantEdit: !canEdit, 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, maxLength: maxLength, label: step.label, inputRef: field.ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
                             ? errors[step.id].message
                             : (_b = step.description) !== null && _b !== void 0 ? _b : (step.required ? ' ' : null), error: !!errors[step.id] }), void 0));
                 } }, void 0) }), void 0));

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

@@ -4,6 +4,8 @@ import { StepProps } from '../Step';
 export interface TextAreaStepProps extends StepProps {
     /** The TextAreaStep to display */
     step: TextArea;
+    maxLength?: number;
+    backgroundColor?: string;
 }
 declare function TextAreaStep(props: TextAreaStepProps): JSX.Element;
 export default TextAreaStep;

package/dist/shared/RoundedTextField/RoundedTextField.d.ts

@@ -31,8 +31,12 @@ interface StyleProps {
     helperTextColor?: string;
     /** The icon to display */
     icon?: React.ReactNode;
+    /** The max length of the string */
+    maxLength?: number;
 }
 interface RoundedTextFieldProps extends StyleProps {
+    /** The value of the textfield */
+    value?: any;
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedTextField/RoundedTextField.js

@@ -35,7 +35,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
@@ -82,6 +82,9 @@ var useTextfieldStyles = function (props) {
                 },
                 '& .EF-MuiOutlinedInput-notchedOutline': {
                     borderColor: props.outlineColor,
+                    '& legend': {
+                        fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                    },
                 },
             },
             '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
@@ -100,12 +103,17 @@ var useTextfieldStyles = function (props) {
             },
             '& .EF-MuiFormHelperText-root': {
                 color: props.helperTextColor,
+                marginRight: props.maxLength ? 40 : 14,
+            },
+            '& .EF-MuiOutlinedInput-multiline': {
+                padding: props.padding,
+                backgroundColor: props.innerBackgroundColor,
             },
         },
     }); });
 };
 function CustomTextfield(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _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.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.borderRadius, borderRadius = _h === void 0 ? 10 : _h, _j = _a.padding, padding = _j === void 0 ? '6px 12px' : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '1rem' : _k, _l = _a.errorColor, errorColor = _l === void 0 ? '#cc2936' : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? '300' : _m, _o = _a.multiline, multiline = _o === void 0 ? false : _o, _p = _a.cantEdit, cantEdit = _p === void 0 ? false : _p, inputProps = _a.inputProps, value = _a.value, icon = _a.icon, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "inputProps", "value", "icon"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'transparent' : _e, _f = _a.innerBackgroundColor, innerBackgroundColor = _f === void 0 ? 'white' : _f, _g = _a.textColor, textColor = _g === void 0 ? '#293241' : _g, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.borderRadius, borderRadius = _j === void 0 ? 10 : _j, _k = _a.padding, padding = _k === void 0 ? '6px 12px' : _k, _l = _a.fontSize, fontSize = _l === void 0 ? '1rem' : _l, _m = _a.errorColor, errorColor = _m === void 0 ? '#cc2936' : _m, _o = _a.fontWeight, fontWeight = _o === void 0 ? '300' : _o, _p = _a.multiline, multiline = _p === void 0 ? false : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, maxLength = _a.maxLength, value = _a.value, icon = _a.icon, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "maxLength", "value", "icon"]);
     var classes = useTextfieldStyles({
         padding: padding,
         textColor: textColor,
@@ -121,13 +129,33 @@ function CustomTextfield(_a) {
         fontWeight: fontWeight,
         multiline: multiline,
         cantEdit: cantEdit,
+        maxLength: maxLength,
     })();
-    return (_jsx(TextField, __assign({ classes: classes }, others, { value: value !== null && value !== void 0 ? value : '', multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: {
-            readOnly: readOnly,
-            disabled: cantEdit,
-            inputProps: inputProps,
-            endAdornment: icon,
-        } }), void 0));
+    var length = maxLength ? value.length : null;
+    var inputProps = {
+        readOnly: readOnly,
+        disabled: cantEdit,
+        endAdornment: icon,
+    };
+    if (maxLength) {
+        inputProps.inputProps = { maxLength: maxLength };
+    }
+    return (_jsxs("div", __assign({ style: { position: 'relative', width: '100%', maxWidth: '100%' } }, { children: [_jsx(TextField, __assign({ classes: classes }, others, { value: value !== null && value !== void 0 ? value : '', multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: inputProps }), void 0), length !== null && (_jsxs("div", __assign({ style: others.helperText
+                    ? {
+                        position: 'absolute',
+                        bottom: '3px',
+                        right: '8px',
+                        fontSize: '12px',
+                        color: helperTextColor,
+                    }
+                    : {
+                        fontSize: '12px',
+                        color: helperTextColor,
+                        textAlign: 'right',
+                        paddingRight: '8px',
+                        paddingTop: '2px',
+                        paddingBottom: '2px',
+                    } }, { children: [length, "/", maxLength] }), void 0))] }), void 0));
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/package.json

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