@arquimedes.co/eureka-forms 2.0.32-test → 2.0.34-test

package/dist/cjs/Shared/RoundedDatePicker/RoundedDatePicker.js

@@ -0,0 +1,337 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@material-ui/core/styles");
+const CalendarTodayRounded_1 = __importDefault(require("@material-ui/icons/CalendarTodayRounded"));
+const pickers_1 = require("@material-ui/pickers");
+const Form_1 = require("../../Form/Form");
+const date_fns_1 = require("date-fns");
+const useDatePickerStyles = (props) => (0, styles_1.makeStyles)(() => ({
+    root: {
+        borderRadius: props.borderRadius,
+        cursor: props.cantEdit ? 'default' : 'pointer',
+        height: props.height,
+        backgroundColor: props.backgroundColor,
+        '& input, textarea': {
+            cursor: props.cantEdit ? 'default' : 'pointer',
+            padding: props.padding,
+            fontWeight: props.fontWeight,
+            color: props.textColor,
+            fontSize: props.fontSize,
+            '&::placeholder': {
+                fontSize: props.fontSize,
+            },
+            borderRadius: props.borderRadius,
+        },
+        '& .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: props.outlineColor,
+            '& span': {
+                fontSize: '0.75rem',
+            },
+        },
+        '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: props.outlineColor,
+        },
+        '&.Mui-focused .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: props.focusColor,
+            borderWidth: 2,
+        },
+        '&:hover .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: props.cantEdit
+                ? props.outlineColor
+                : props.focusColor,
+        },
+        '& .EF-MuiInputAdornment-root': {
+            width: 5,
+            '& button': {
+                marginLeft: -25,
+                fontSize: 18,
+                padding: 16,
+            },
+        },
+        '&.Erk-MuiOutlinedInput-adornedEnd': {
+            paddingRight: 11,
+        },
+        '& .Mui-error': {
+            color: props.errorColor,
+        },
+        '&.Mui-disabled': {
+            cursor: 'default',
+        },
+    },
+}));
+const useDatePickerLabelStyles = (props) => (0, styles_1.makeStyles)(() => ({
+    root: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        maxWidth: 'calc(100% - 50px)',
+        marginTop: props.height != '40px' ? '-4px' : '0px',
+        textOverflow: 'ellipsis',
+        fontSize: props.fontSize,
+        color: props.textColor + '8a',
+        '&.Mui-focused': {
+            color: props.focusColor,
+        },
+        '&.EF-MuiInputLabel-shrink': {
+            marginTop: '0px',
+            maxWidth: 'calc(100% - 5px)',
+        },
+        '& .Mui-error': {
+            color: props.errorColor,
+        },
+        '&.Mui-error': {
+            color: props.errorColor,
+        },
+    },
+}));
+const useDatePickerHelperTextStyles = (props) => (0, styles_1.makeStyles)(() => ({
+    root: {
+        color: props.helperTextColor,
+        '&.Mui-error': {
+            color: props.errorColor,
+        },
+    },
+}));
+const useDatePickerDialogStyles = (props) => (0, styles_1.makeStyles)(() => ({
+    datePicker: {
+        '& .EF-MuiPickersModal-dialogRoot': {
+            color: props.textColor,
+            '& .EF-MuiDialogActions-root': {
+                '& .EF-MuiButton-root:hover': {
+                    backgroundColor: props.hoverColor,
+                },
+                '& .EF-MuiButton-label': {
+                    color: props.focusColor,
+                },
+                '& .EF-MuiTouchRipple-root': {
+                    color: props.focusColor,
+                },
+            },
+        },
+        //Days labels
+        '& .EF-MuiPickersDay-day': {
+            color: props.textColor,
+        },
+        // Selected day label
+        '& .EF-MuiPickersDay-daySelected': {
+            color: props.backgroundColor,
+            backgroundColor: props.focusColor,
+        },
+        //Title
+        '& .EF-MuiPickersDatePickerRoot-toolbar': {
+            color: props.backgroundColor,
+            backgroundColor: props.focusColor,
+        },
+        //Title
+        '& .EF-MuiPickersToolbar-toolbar': {
+            color: props.backgroundColor,
+            backgroundColor: props.focusColor,
+        },
+        '& .EF-MuiPickerDTTabs-tabs': {
+            color: props.backgroundColor,
+            backgroundColor: props.focusColor,
+        },
+        '& .EF-MuiPickersYear-yearSelected, .EF-MuiPickersYear-root:focus': {
+            color: props.focusColor,
+        },
+        '& .EF-MuiTabs-indicator': {
+            backgroundColor: props.contrastColor,
+        },
+        '& .EF-MuiPickersClockNumber-clockNumber': {
+            color: props.accentColor,
+        },
+        '& .EF-MuiPickersClockNumber-clockNumberSelected': {
+            color: props.backgroundColor,
+        },
+        '& .EF-MuiPickersClock-pin, .EF-MuiPickersClockPointer-pointer': {
+            backgroundColor: props.focusColor,
+        },
+        '& .EF-MuiPickersClockPointer-noPoint': {
+            backgroundColor: props.focusColor,
+        },
+        '& .EF-MuiPickersClockPointer-thumb': {
+            borderColor: props.focusColor,
+        },
+        '& .EF-MuiPickersDay-dayDisabled': {
+            color: 'rgba(0, 0, 0, 0.38)',
+            pointerEvents: 'all',
+        },
+        '& .EF-MuiPickersDay-current': {
+            color: props.backgroundColor,
+            backgroundColor: props.secondaryColor,
+        },
+        '& .EF-MuiPickersDay-hidden': {
+            opacity: 0.4,
+            pointerEvents: 'none',
+        },
+        '& .EF-MuiPickersDay-hidden.EF-MuiPickersDay-current': {
+            opacity: 0.8,
+            pointerEvents: 'none',
+        },
+    },
+}));
+function CustomDatePicker(_a) {
+    var { ref, focusColor = '#3d5a7f', secondaryColor = '#98c1d9', outlineColor = '#0000003b', backgroundColor = '#ffffff', textColor = '#293241', contrastColor = '#ee6c4d', accentColor = '#293241', errorColor = '#cc2936', borderRadius = 10, padding = '6px 0px 6px 12px', fontSize = '1rem', shrunkenFontSize = '1rem', helperTextColor = '#989898', fontWeight = '300', height = '31px', cantEdit = false, pickTime = false, onChange, required } = _a, others = __rest(_a, ["ref", "focusColor", "secondaryColor", "outlineColor", "backgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "height", "cantEdit", "pickTime", "onChange", "required"]);
+    const classes = useDatePickerStyles({
+        padding,
+        cantEdit,
+        textColor,
+        focusColor,
+        hoverColor: focusColor + '0a',
+        outlineColor,
+        errorColor,
+        backgroundColor,
+        borderRadius,
+        fontSize,
+        shrunkenFontSize,
+        fontWeight,
+        helperTextColor,
+        height,
+    })();
+    const labelClasses = useDatePickerLabelStyles({
+        padding,
+        cantEdit,
+        textColor,
+        focusColor,
+        hoverColor: focusColor + '0a',
+        errorColor,
+        outlineColor,
+        backgroundColor,
+        borderRadius,
+        fontSize,
+        shrunkenFontSize,
+        fontWeight,
+        helperTextColor,
+        height,
+    })();
+    const { datePicker } = useDatePickerDialogStyles({
+        padding,
+        cantEdit,
+        textColor,
+        secondaryColor,
+        accentColor,
+        contrastColor,
+        focusColor,
+        hoverColor: focusColor + '0a',
+        errorColor,
+        outlineColor,
+        backgroundColor,
+        borderRadius,
+        fontSize,
+        shrunkenFontSize,
+        fontWeight,
+        helperTextColor,
+        height,
+    })();
+    const helperTextStyles = useDatePickerHelperTextStyles({
+        padding,
+        textColor,
+        focusColor,
+        errorColor,
+        outlineColor,
+        backgroundColor,
+        borderRadius,
+        fontSize,
+        shrunkenFontSize,
+        fontWeight,
+        helperTextColor,
+        height,
+    })();
+    if (pickTime) {
+        return ((0, jsx_runtime_1.jsx)(pickers_1.DateTimePicker, Object.assign({}, others, { ref: ref, inputVariant: "outlined", "data-testid": "date-picker", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: (0, date_fns_1.format)(new Date(), 'Pp', { locale: (0, Form_1.getLocale)() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
+                disableEnforceFocus: true,
+                className: datePicker,
+                cancelLabel: '',
+            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
+            , InputProps: {
+                required,
+                classes,
+                disabled: cantEdit,
+                endAdornment: ((0, jsx_runtime_1.jsx)(CalendarTodayRounded_1.default, { fontSize: "inherit", style: {
+                        color: '#757575',
+                        fontSize: 20,
+                    } })),
+            }, FormHelperTextProps: {
+                classes: helperTextStyles,
+            }, renderDay: (day, selectedDate, dayInCurrentMonth, dayComponent) => {
+                if (!day) {
+                    return dayComponent;
+                }
+                return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => {
+                        onChange(day);
+                    } }, { children: (0, react_1.cloneElement)(dayComponent) })));
+            }, variant: "dialog" })));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsx)(pickers_1.DatePicker, Object.assign({}, others, { ref: ref, "data-testid": "date-picker", inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: (0, date_fns_1.format)(new Date(), 'P', { locale: (0, Form_1.getLocale)() }), format: "P", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
+                disableEnforceFocus: true,
+                className: datePicker,
+                cancelLabel: '',
+            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
+            , InputProps: {
+                required,
+                classes,
+                disabled: cantEdit,
+                endAdornment: ((0, jsx_runtime_1.jsx)(CalendarTodayRounded_1.default, { fontSize: "inherit", style: {
+                        color: '#757575',
+                        fontSize: 20,
+                    } })),
+            }, FormHelperTextProps: {
+                classes: helperTextStyles,
+            }, renderDay: (day, selectedDate, dayInCurrentMonth, dayComponent) => {
+                if (!day) {
+                    return dayComponent;
+                }
+                return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => {
+                        onChange(day);
+                    } }, { children: (0, react_1.cloneElement)(dayComponent) })));
+            }, variant: "dialog" })));
+    }
+}
+/**
+ * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ */
+class RoundedDatePicker extends react_1.default.Component {
+    render() {
+        return (0, jsx_runtime_1.jsx)(CustomDatePicker, Object.assign({}, this.props));
+    }
+}
+exports.default = RoundedDatePicker;

package/dist/cjs/Shared/RoundedDatePicker/RoundedDatePicker.stories.js

@@ -0,0 +1,153 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DifferentColors = exports.ErrorColor = exports.DateTimeTimeMenu = exports.DateTimeDateMenu = exports.Menu = exports.Error = exports.FullDateTime = exports.Full = exports.ValueAndLabel = exports.Default = exports.Empty = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const preview_api_1 = require("@storybook/preview-api");
+const RoundedDatePicker_1 = __importDefault(require("./RoundedDatePicker"));
+const testing_library_1 = require("@storybook/testing-library");
+const testing_library_2 = require("@storybook/testing-library");
+const meta = {
+    component: RoundedDatePicker_1.default,
+    tags: ['autodocs'],
+    args: {
+        focusColor: '#3d5a7f',
+        secondaryColor: '#98c1d9',
+        helperTextColor: '#989898',
+        outlineColor: '#0000003b',
+        backgroundColor: '#ffffff',
+        textColor: '#293241',
+        contrastColor: '#ee6c4d',
+        accentColor: '#293241',
+        errorColor: '#cc2936',
+        fontSize: '1rem',
+        fontWeight: '300',
+        cantEdit: false,
+    },
+    parameters: {
+        date: new Date('07-21-2021'),
+    },
+};
+exports.default = meta;
+exports.Empty = {
+    args: {
+        value: null,
+    },
+};
+exports.Default = {
+    args: {
+        label: 'Label',
+        value: new Date('07-21-2021'),
+    },
+};
+exports.ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    render: function Component(args) {
+        const [, setArgs] = (0, preview_api_1.useArgs)();
+        const onValueChange = (value) => {
+            var _a;
+            (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, value);
+            setArgs({ value });
+        };
+        return ((0, jsx_runtime_1.jsx)(RoundedDatePicker_1.default, Object.assign({}, args, { ref: args.ref, onChange: onValueChange })));
+    },
+};
+exports.Full = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+    },
+};
+exports.FullDateTime = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        pickTime: true,
+    },
+};
+exports.Error = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+exports.Menu = {
+    args: {
+        label: 'Label',
+        value: null,
+    },
+    play: ({ canvasElement }) => __awaiter(void 0, void 0, void 0, function* () {
+        const canvas = (0, testing_library_1.within)(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        yield testing_library_2.userEvent.click(selector);
+    }),
+};
+exports.DateTimeDateMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: ({ canvasElement }) => __awaiter(void 0, void 0, void 0, function* () {
+        const canvas = (0, testing_library_1.within)(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        yield testing_library_2.userEvent.click(selector);
+    }),
+};
+exports.DateTimeTimeMenu = {
+    args: {
+        label: 'Label',
+        value: null,
+        pickTime: true,
+    },
+    play: ({ canvasElement }) => __awaiter(void 0, void 0, void 0, function* () {
+        const canvas = (0, testing_library_1.within)(canvasElement);
+        const selector = canvas.getByTestId('date-picker');
+        yield testing_library_2.userEvent.click(selector);
+        const time = testing_library_1.screen.getByText('12', {
+            selector: 'h3',
+        });
+        yield testing_library_2.userEvent.click(time);
+    }),
+};
+exports.ErrorColor = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        error: true,
+        errorColor: 'blue',
+    },
+};
+exports.DifferentColors = {
+    args: {
+        label: 'Label',
+        value: null,
+        helperText: 'Helper text',
+        helperTextColor: 'green',
+        outlineColor: 'purple',
+        backgroundColor: 'red',
+        textColor: 'blue',
+    },
+    render: function Component(args) {
+        return (0, jsx_runtime_1.jsx)(RoundedDatePicker_1.default, Object.assign({}, args, { ref: args.ref }));
+    },
+};

package/dist/cjs/Shared/RoundedSelect/RoundedSelect.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@material-ui/core/styles");
+const InputLabel_1 = __importDefault(require("@material-ui/core/InputLabel"));
+const FormControl_1 = __importDefault(require("@material-ui/core/FormControl"));
+const OutlinedInput_1 = __importDefault(require("@material-ui/core/OutlinedInput"));
+const Select_1 = __importDefault(require("@material-ui/core/Select"));
+const core_1 = require("@material-ui/core");
+const useStyles = (0, styles_1.makeStyles)((theme) => ({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 120,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}));
+const useOutlinedInputStyles = (props) => {
+    var _a;
+    return (0, styles_1.makeStyles)({
+        root: {
+            cursor: props.cantEdit ? 'default' : 'default',
+            height: props.height,
+            borderRadius: props.borderRadius,
+            backgroundColor: props.backgroundColor,
+            fontSize: props.fontSize,
+            '& $notchedOutline': {
+                borderColor: props.outlineColor,
+                '& legend': {
+                    fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                },
+            },
+            '&:hover $notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& .Mui-disabled': {
+                cursor: 'default',
+                color: props.color,
+                pointerEvents: 'none',
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+            },
+            '&.Mui-disabled .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+            },
+            '& .EF-MuiSelect-root': {
+                paddingLeft: props.paddingLeft,
+                paddingRight: props.paddingRight,
+            },
+            '&$focused $notchedOutline': {
+                borderColor: props.focusColor,
+            },
+            '& .EF-MuiSelect-icon': {
+                color: ((_a = props.color) === null || _a === void 0 ? void 0 : _a.startsWith('#'))
+                    ? props.color + '8a'
+                    : props.color,
+            },
+            '& .EF-MuiSelect-icon.Mui-disabled': {
+                color: props.outlineColor,
+            },
+            '& .EF-MuiSelect-icon.iconOutlined': {
+                right: 8,
+            },
+            '& .EF-MuiSelect-iconOpen': {
+                transform: props.showIcon ? 'none' : 'rotate(180deg)',
+            },
+            color: props.color,
+        },
+        focused: {},
+        notchedOutline: {},
+    });
+};
+const useLabelInputStyles = (props) => (0, styles_1.makeStyles)(() => {
+    var _a;
+    return ({
+        focused: {
+            color: props.focusColor + ' !important',
+        },
+        root: {
+            color: ((_a = props.color) === null || _a === void 0 ? void 0 : _a.startsWith('#'))
+                ? props.color + '8a'
+                : props.color,
+            fontWeight: props.fontWeight,
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            maxWidth: 'calc(100% - 45px)',
+            textOverflow: 'ellipsis',
+            marginTop: props.height != '40px' ? '-4px' : '0px',
+            '&.EF-MuiInputLabel-shrink': {
+                marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '&.Mui-error': {
+                color: props.errorColor,
+            },
+        },
+    });
+});
+const useHelperTextStyles = (props) => (0, styles_1.makeStyles)(() => ({
+    root: {
+        color: props.helperTextColor,
+        '&.Mui-error': {
+            color: props.errorColor,
+        },
+    },
+}));
+function CustomSelect(_a) {
+    var { children, value = '', handleUpdate, label, minWidth, helperText, color = '#293241', errorColor = '#cc2936', focusColor = '#3d5a7f', outlineColor = '#0000003b', helperTextColor = '#989898', backgroundColor = '#ffffff', readOnly = false, borderRadius = 10, paddingLeft = 14, paddingRight = 32, cantEdit = false, showIcon = true, containerMargin = '8px', height = '40px', fontSize = '1rem', required, iconComponent, error } = _a, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "paddingLeft", "paddingRight", "cantEdit", "showIcon", "containerMargin", "height", "fontSize", "required", "iconComponent", "error"]);
+    const styleProps = {
+        color,
+        height,
+        readOnly,
+        fontSize,
+        cantEdit,
+        errorColor,
+        focusColor,
+        paddingLeft,
+        paddingRight,
+        outlineColor,
+        borderRadius,
+        helperTextColor,
+        backgroundColor,
+        showIcon: showIcon && iconComponent !== undefined,
+    };
+    const classes = useStyles();
+    const outlinedInputClasses = useOutlinedInputStyles(styleProps)();
+    const labelClasses = useLabelInputStyles(styleProps)();
+    const helperTextClasses = useHelperTextStyles(styleProps)();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(FormControl_1.default, Object.assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
+            ? { minWidth, outlineColor, margin: containerMargin }
+            : {
+                margin: containerMargin,
+            }, fullWidth: true, required: required, error: error }, { children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.default, Object.assign({ classes: labelClasses }, { children: label })), (0, jsx_runtime_1.jsx)(Select_1.default, Object.assign({}, others, { value: value, MenuProps: {}, onChange: handleUpdate }, (showIcon && iconComponent
+                ? { IconComponent: iconComponent }
+                : {}), { open: open, onFocus: (e) => {
+                    var _a;
+                    if (!((_a = e.relatedTarget) === null || _a === void 0 ? void 0 : _a.closest('.EF-MuiPaper-root'))) {
+                        setOpen(true);
+                    }
+                }, onClose: () => {
+                    setOpen(false);
+                }, onOpen: () => {
+                    setOpen(true);
+                }, input: (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { disabled: cantEdit, name: label, label: label ? label + (required ? ' *' : '') : undefined, classes: outlinedInputClasses }) }, { children: children })), helperText !== undefined && ((0, jsx_runtime_1.jsx)(core_1.FormHelperText, Object.assign({ classes: helperTextClasses }, { children: helperText })))] })));
+}
+/**
+ * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library
+ */
+class RoundedSelect extends react_1.default.Component {
+    render() {
+        return (0, jsx_runtime_1.jsx)(CustomSelect, Object.assign({}, this.props));
+    }
+}
+exports.default = RoundedSelect;