@arquimedes.co/eureka-forms 1.9.19-test → 1.9.20-test

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -1,3 +1,40 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
@@ -6,7 +43,7 @@ import FormControl from '@material-ui/core/FormControl';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import Select from '@material-ui/core/Select';
 import { FormHelperText } from '@material-ui/core';
-const useStyles = makeStyles((theme) => ({
+var useStyles = makeStyles(function (theme) { return ({
     root: {
         display: 'flex',
         flexWrap: 'wrap',
@@ -18,121 +55,133 @@ const useStyles = makeStyles((theme) => ({
     selectEmpty: {
         marginTop: theme.spacing(2),
     },
-}));
-const useOutlinedInputStyles = (props) => makeStyles({
-    root: {
-        cursor: props.cantEdit ? 'default' : 'default',
-        height: props.height,
-        borderRadius: props.borderRadius,
-        backgroundColor: props.innerBackgroundColor,
-        fontSize: props.fontSize,
-        '& $notchedOutline': {
-            borderColor: props.outlineColor,
-            '& legend': {
-                fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+}); });
+var useOutlinedInputStyles = function (props) {
+    return makeStyles({
+        root: {
+            cursor: props.cantEdit ? 'default' : 'default',
+            height: props.height,
+            borderRadius: props.borderRadius,
+            backgroundColor: props.innerBackgroundColor,
+            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,
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+            },
+            '& .EF-MuiSelect-root': {
+                paddingLeft: props.paddingLeft,
+            },
+            '&$focused $notchedOutline': {
+                borderColor: props.focusColor,
+            },
+            '& .EF-MuiSelect-icon.Mui-disabled': {
+                color: props.outlineColor,
+            },
+            '& .EF-MuiSelect-icon.iconOutlined': {
+                right: 8,
+            },
+            '& .EF-MuiSelect-iconOpen': {
+                transform: props.showIcon ? 'none' : 'rotate(180deg)',
             },
-        },
-        '&:hover $notchedOutline': {
-            borderColor: props.cantEdit
-                ? props.outlineColor
-                : props.focusColor,
-        },
-        '& .Mui-disabled': {
-            cursor: 'default',
             color: props.color,
         },
-        '& .Mui-error': {
-            color: props.errorColor,
-        },
-        '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.outlineColor,
-        },
-        '& .EF-MuiSelect-root': {
-            paddingLeft: props.paddingLeft,
-        },
-        '&$focused $notchedOutline': {
-            borderColor: props.focusColor,
+        focused: {},
+        notchedOutline: {},
+    });
+};
+var useLabelInputStyles = function (props) {
+    return makeStyles(function () { return ({
+        focused: {
+            color: props.focusColor + ' !important',
         },
-        '& .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) => makeStyles(() => ({
-    focused: {
-        color: props.focusColor + ' !important',
-    },
-    root: {
-        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,
+        root: {
+            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) => makeStyles(() => ({
-    root: {
-        color: props.helperTextColor,
-        '&.Mui-error': {
-            color: props.errorColor,
+    }); });
+};
+var useHelperTextStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            color: props.helperTextColor,
+            '&.Mui-error': {
+                color: props.errorColor,
+            },
         },
-    },
-}));
-function CustomSelect({ children, value = '', handleUpdate, label, minWidth, helperText, color = '#293241', errorColor = '#cc2936', focusColor = '#3d5a7f', outlineColor = '#0000003b', helperTextColor = '#989898', backgroundColor = '#ffffff', readOnly = false, borderRadius = 10, innerBackgroundColor, paddingLeft = 14, cantEdit = false, showIcon = true, containerMargin = '8px', height = '40px', fontSize = '1rem', required, iconComponent, error, ...others }) {
-    const styleProps = {
-        color,
-        height,
-        readOnly,
-        fontSize,
-        cantEdit,
-        errorColor,
-        focusColor,
-        paddingLeft,
-        outlineColor,
-        borderRadius,
-        helperTextColor,
-        backgroundColor,
+    }); });
+};
+function CustomSelect(_a) {
+    var children = _a.children, _b = _a.value, value = _b === void 0 ? '' : _b, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _c = _a.color, color = _c === void 0 ? '#293241' : _c, _d = _a.errorColor, errorColor = _d === void 0 ? '#cc2936' : _d, _e = _a.focusColor, focusColor = _e === void 0 ? '#3d5a7f' : _e, _f = _a.outlineColor, outlineColor = _f === void 0 ? '#0000003b' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#ffffff' : _h, _j = _a.readOnly, readOnly = _j === void 0 ? false : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, innerBackgroundColor = _a.innerBackgroundColor, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 14 : _l, _m = _a.cantEdit, cantEdit = _m === void 0 ? false : _m, _o = _a.showIcon, showIcon = _o === void 0 ? true : _o, _p = _a.containerMargin, containerMargin = _p === void 0 ? '8px' : _p, _q = _a.height, height = _q === void 0 ? '40px' : _q, _r = _a.fontSize, fontSize = _r === void 0 ? '1rem' : _r, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "innerBackgroundColor", "paddingLeft", "cantEdit", "showIcon", "containerMargin", "height", "fontSize", "required", "iconComponent", "error"]);
+    var styleProps = {
+        color: color,
+        height: height,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        cantEdit: cantEdit,
+        errorColor: errorColor,
+        focusColor: focusColor,
+        paddingLeft: paddingLeft,
+        outlineColor: outlineColor,
+        borderRadius: borderRadius,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
         showIcon: showIcon && iconComponent !== undefined,
-        innerBackgroundColor: innerBackgroundColor ?? backgroundColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
     };
-    const classes = useStyles();
-    const outlinedInputClasses = useOutlinedInputStyles(styleProps)();
-    const labelClasses = useLabelInputStyles(styleProps)();
-    const helperTextClasses = useHelperTextStyles(styleProps)();
-    return (_jsxs(FormControl, { variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
-            ? { minWidth, outlineColor, margin: containerMargin }
+    var classes = useStyles();
+    var outlinedInputClasses = useOutlinedInputStyles(styleProps)();
+    var labelClasses = useLabelInputStyles(styleProps)();
+    var helperTextClasses = useHelperTextStyles(styleProps)();
+    return (_jsxs(FormControl, __assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
+            ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
             : {
                 margin: containerMargin,
-            }, fullWidth: true, required: required, error: error, children: [label && _jsx(InputLabel, { classes: labelClasses, children: label }), _jsx(Select, { ...others, value: value, onChange: handleUpdate, ...(showIcon && iconComponent
-                    ? { IconComponent: iconComponent }
-                    : {}), input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? label + (required ? ' *' : '') : undefined, classes: outlinedInputClasses }), children: children }), helperText !== undefined && (_jsx(FormHelperText, { classes: helperTextClasses, children: helperText }))] }));
+            }, fullWidth: true, required: required, error: error }, { children: [label && _jsx(InputLabel, __assign({ classes: labelClasses }, { children: label })), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate }, (showIcon && iconComponent
+                ? { IconComponent: iconComponent }
+                : {}), { input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? label + (required ? ' *' : '') : undefined, classes: outlinedInputClasses }) }, { children: children })), helperText !== undefined && (_jsx(FormHelperText, __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.Component {
-    render() {
-        return _jsx(CustomSelect, { ...this.props });
+var RoundedSelect = /** @class */ (function (_super) {
+    __extends(RoundedSelect, _super);
+    function RoundedSelect() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-}
+    RoundedSelect.prototype.render = function () {
+        return _jsx(CustomSelect, __assign({}, this.props));
+    };
+    return RoundedSelect;
+}(React.Component));
 export default RoundedSelect;

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -1,3 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Autocomplete, { createFilterOptions, } from '@material-ui/lab/Autocomplete';
 import { makeStyles } from '@material-ui/core/styles';
@@ -6,174 +28,187 @@ import { cloneElement } from 'react';
 import { MenuItem, Popper } from '@material-ui/core';
 import RoundedSelect from '../RoundedSelect/RoundedSelect';
 import CircularProgress from '@material-ui/core/CircularProgress';
-const filter = createFilterOptions();
-const useTextfieldStyles = (props) => makeStyles(() => ({
-    root: {
-        borderRadius: props.borderRadius,
-        backgroundColor: props.backgroundColor,
-        '& input, textarea': {
-            cursor: props.cantEdit ? 'default' : 'text',
-            fontWeight: props.fontWeight,
-            color: props.color,
-            fontSize: props.fontSize,
-            '&::placeholder': {
+var filter = createFilterOptions();
+var useTextfieldStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            borderRadius: props.borderRadius,
+            backgroundColor: props.backgroundColor,
+            '& input, textarea': {
+                cursor: props.cantEdit ? 'default' : 'text',
+                fontWeight: props.fontWeight,
+                color: props.color,
                 fontSize: props.fontSize,
+                '&::placeholder': {
+                    fontSize: props.fontSize,
+                },
+                backgroundColor: props.innerBackgroundColor,
+                borderRadius: props.borderRadius,
+                height: props.height,
+                marginTop: '0px !important',
+                padding: '0px 38px 0px 12px !important',
             },
-            backgroundColor: props.innerBackgroundColor,
-            borderRadius: props.borderRadius,
-            height: props.height,
-            marginTop: '0px !important',
-            padding: '0px 38px 0px 12px !important',
-        },
-        '& .EF-MuiInputBase-root': {
-            padding: '0px !important',
-            pointerEvents: 'all',
-        },
-        '& label': {
-            marginTop: '-4px',
-            fontSize: props.fontSize,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            maxWidth: 'calc(100% - 22px)',
-        },
-        '& label.EF-MuiInputLabel-shrink': {
-            marginTop: '0px',
-            maxWidth: 'calc(100% - 5px)',
-        },
-        '& input + fieldset': {
-            borderRadius: props.borderRadius,
-        },
-        '& .EF-MuiInput-underline:after': {
-            borderBottomColor: props.outlineColor,
-        },
-        '& .EF-MuiOutlinedInput-root': {
-            borderRadius: props.borderRadius,
-            '&.Mui-focused fieldset': {
-                borderColor: props.focusColor,
-                borderWidth: props.readOnly ? 1 : 2,
+            '& .EF-MuiInputBase-root': {
+                padding: '0px !important',
+                pointerEvents: 'all',
             },
-            '& .EF-MuiOutlinedInput-notchedOutline': {
-                borderColor: props.outlineColor,
+            '& label': {
+                marginTop: '-4px',
+                fontSize: props.fontSize,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                maxWidth: 'calc(100% - 22px)',
+            },
+            '& label.EF-MuiInputLabel-shrink': {
+                marginTop: '0px',
+                maxWidth: 'calc(100% - 5px)',
             },
-            height: props.height,
-            '& .EF-MuiAutocomplete-input': {
+            '& input + fieldset': {
+                borderRadius: props.borderRadius,
+            },
+            '& .EF-MuiInput-underline:after': {
+                borderBottomColor: props.outlineColor,
+            },
+            '& .EF-MuiOutlinedInput-root': {
+                borderRadius: props.borderRadius,
+                '&.Mui-focused fieldset': {
+                    borderColor: props.focusColor,
+                    borderWidth: props.readOnly ? 1 : 2,
+                },
+                '& .EF-MuiOutlinedInput-notchedOutline': {
+                    borderColor: props.outlineColor,
+                },
                 height: props.height,
-                marginTop: -10,
+                '& .EF-MuiAutocomplete-input': {
+                    height: props.height,
+                    marginTop: -10,
+                },
+                '& .EF-MuiAutocomplete-input::placeholder': {
+                    color: '#787878',
+                    opacity: 1,
+                },
             },
-            '& .EF-MuiAutocomplete-input::placeholder': {
-                color: '#787878',
-                opacity: 1,
+            '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& label.Mui-focused': {
+                color: props.focusColor,
+            },
+            '& .Mui-error': {
+                color: props.errorColor + ' !important',
+            },
+            '& .EF-MuiFormHelperText-root': {
+                color: props.helperTextColor,
+            },
+            '& .EF-MuiFormLabel-root.Mui-disabled': {
+                color: '#0000008a',
+            },
+            '& .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: '#0000003b',
+            },
+            '.EF-MuiAutocomplete-popupIndicator': {
+                padding: 0,
+            },
+            '& .EF-MuiAutocomplete-popupIndicatorOpen': {
+                transform: props.showIcon ? 'none' : 'rotate(180deg)',
+            },
+            '& .EF-MuiAutocomplete-clearIndicator': {
+                display: 'none',
+            },
+            '& .EF-MuiAutocomplete-endAdornment': {
+                top: 'calc(50% - 13px)',
             },
         },
-        '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: props.cantEdit
-                ? props.outlineColor
-                : props.focusColor,
-        },
-        '& label.Mui-focused': {
-            color: props.focusColor,
-        },
-        '& .Mui-error': {
-            color: props.errorColor + ' !important',
-        },
-        '& .EF-MuiFormHelperText-root': {
-            color: props.helperTextColor,
-        },
-        '& .EF-MuiFormLabel-root.Mui-disabled': {
-            color: '#0000008a',
-        },
-        '& .EF-MuiOutlinedInput-notchedOutline': {
-            borderColor: '#0000003b',
-        },
-        '.EF-MuiAutocomplete-popupIndicator': {
-            padding: 0,
-        },
-        '& .EF-MuiAutocomplete-popupIndicatorOpen': {
-            transform: props.showIcon ? 'none' : 'rotate(180deg)',
-        },
-        '& .EF-MuiAutocomplete-clearIndicator': {
-            display: 'none',
-        },
-        '& .EF-MuiAutocomplete-endAdornment': {
-            top: 'calc(50% - 13px)',
-        },
-    },
-}));
-export default function RoundedSmartSelect({ options = [], value = '', handleUpdate, label, getValueString = (value) => value.value, color = '#293241', errorColor = '#cc2936', focusColor = '#3d5a7f', helperTextColor = '#989898', outlineColor = '#b8b8b8', backgroundColor = '#ffffff', cantEdit = false, loading = false, height = '31px', fontSize = '1rem', required, changeListener, error, innerBackgroundColor, getOptionSelected, helperText, readOnly = false, borderRadius = 10, fontWeight = '400', icon, searchable = false, containerMargin = '0px', showIcon = true, inputRef, disabled, creatable = false, onBlur, name, }) {
-    const props = {
-        color,
-        height,
-        errorColor,
-        focusColor,
-        outlineColor,
-        innerBackgroundColor: innerBackgroundColor ?? backgroundColor,
-        helperTextColor,
-        backgroundColor,
-        borderRadius,
-        readOnly,
-        fontSize,
-        fontWeight,
-        cantEdit,
+    }); });
+};
+export default function RoundedSmartSelect(_a) {
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.value, value = _c === void 0 ? '' : _c, handleUpdate = _a.handleUpdate, label = _a.label, _d = _a.getValueString, getValueString = _d === void 0 ? function (value) { return value.value; } : _d, _e = _a.color, color = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.focusColor, focusColor = _g === void 0 ? '#3d5a7f' : _g, _h = _a.helperTextColor, helperTextColor = _h === void 0 ? '#989898' : _h, _j = _a.outlineColor, outlineColor = _j === void 0 ? '#b8b8b8' : _j, _k = _a.backgroundColor, backgroundColor = _k === void 0 ? '#ffffff' : _k, _l = _a.cantEdit, cantEdit = _l === void 0 ? false : _l, _m = _a.loading, loading = _m === void 0 ? false : _m, _o = _a.height, height = _o === void 0 ? '31px' : _o, _p = _a.fontSize, fontSize = _p === void 0 ? '1rem' : _p, required = _a.required, changeListener = _a.changeListener, error = _a.error, innerBackgroundColor = _a.innerBackgroundColor, getOptionSelected = _a.getOptionSelected, helperText = _a.helperText, _q = _a.readOnly, readOnly = _q === void 0 ? false : _q, _r = _a.borderRadius, borderRadius = _r === void 0 ? 10 : _r, _s = _a.fontWeight, fontWeight = _s === void 0 ? '400' : _s, icon = _a.icon, _t = _a.searchable, searchable = _t === void 0 ? false : _t, _u = _a.containerMargin, containerMargin = _u === void 0 ? '0px' : _u, _v = _a.showIcon, showIcon = _v === void 0 ? true : _v, inputRef = _a.inputRef, disabled = _a.disabled, _w = _a.creatable, creatable = _w === void 0 ? false : _w, onBlur = _a.onBlur, name = _a.name;
+    var props = {
+        color: color,
+        height: height,
+        errorColor: errorColor,
+        focusColor: focusColor,
+        outlineColor: outlineColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        fontWeight: fontWeight,
+        cantEdit: cantEdit,
         showIcon: showIcon && icon !== undefined,
     };
-    const textFieldClasses = useTextfieldStyles(props)();
+    var textFieldClasses = useTextfieldStyles(props)();
     if (searchable) {
-        return (_jsx(Autocomplete, { size: "small", fullWidth: true, openOnFocus: true, freeSolo: creatable, disabled: cantEdit || disabled, popupIcon: loading ? (_jsx(CircularProgress, { size: 22, style: { color: '#757575' } })) : showIcon && icon ? (icon) : undefined, onOpen: () => { }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options, getOptionLabel: (option) => {
+        return (_jsx(Autocomplete, { size: "small", fullWidth: true, openOnFocus: true, freeSolo: creatable, disabled: cantEdit || disabled, popupIcon: loading ? (_jsx(CircularProgress, { size: 22, style: { color: '#757575' } })) : showIcon && icon ? (icon) : undefined, onOpen: function () { }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options, getOptionLabel: function (option) {
+                var _a, _b;
                 // Value selected with enter, right from the input
                 if (typeof option === 'string') {
                     return option;
                 }
-                else if (option?.inputValue) {
-                    return option.inputValue ?? '';
+                else if (option === null || option === void 0 ? void 0 : option.inputValue) {
+                    return (_a = option.inputValue) !== null && _a !== void 0 ? _a : '';
                 }
                 else {
                     // Regular option
-                    return option.label ?? '';
+                    return (_b = option.label) !== null && _b !== void 0 ? _b : '';
                 }
-            }, getOptionSelected: getOptionSelected, PopperComponent: ({ style, ...props }) => (_jsx(Popper, { ...props, style: { ...style, zIndex: 1305 } })), value: value ? value : null, onChange: (event, newValue) => {
+            }, getOptionSelected: getOptionSelected, PopperComponent: function (_a) {
+                var style = _a.style, props = __rest(_a, ["style"]);
+                return (_jsx(Popper, __assign({}, props, { style: __assign(__assign({}, style), { zIndex: 1305 }) })));
+            }, value: value ? value : null, onChange: function (event, newValue) {
                 if (creatable) {
                     if (typeof newValue === 'string') {
-                        changeListener?.(newValue);
-                        handleUpdate?.(newValue);
+                        changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue);
+                        handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue);
                     }
                     else if (newValue && newValue.inputValue) {
-                        changeListener?.(newValue.inputValue);
-                        handleUpdate?.(newValue.inputValue); // Create a new value from the user input
+                        changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue.inputValue);
+                        handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue.inputValue); // Create a new value from the user input
                     }
                     else {
-                        changeListener?.(newValue?.label);
-                        handleUpdate?.(newValue?.label);
+                        changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue === null || newValue === void 0 ? void 0 : newValue.label);
+                        handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue === null || newValue === void 0 ? void 0 : newValue.label);
                     }
                 }
                 else {
-                    changeListener?.(newValue);
-                    handleUpdate?.(newValue);
+                    changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue);
+                    handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue);
                 }
-            }, filterOptions: (options, params) => {
-                if (value && value.label === params?.inputValue) {
+            }, filterOptions: function (options, params) {
+                if (value && value.label === (params === null || params === void 0 ? void 0 : params.inputValue)) {
                     return options;
                 }
                 else {
-                    const filtered = filter(options, params);
+                    var filtered = filter(options, params);
                     // Suggest the creation of a new value
                     if (creatable && params.inputValue !== '') {
                         filtered.push({
                             inputValue: params.inputValue,
-                            label: `Crear "${params.inputValue}"`,
+                            label: "Crear \"".concat(params.inputValue, "\""),
                         });
                     }
                     return filtered;
                 }
-            }, renderOption: (option) => typeof option === 'string' ? option : option.label, renderInput: (params) => (_jsx(TextField, { classes: textFieldClasses, ...params, inputRef: inputRef, onBlur: onBlur, name: name, variant: "outlined", label: label, required: required, error: error, helperText: helperText })), style: { pointerEvents: 'none' }, noOptionsText: "No hay opciones" }));
+            }, renderOption: function (option) {
+                return typeof option === 'string' ? option : option.label;
+            }, renderInput: function (params) { return (_jsx(TextField, __assign({ classes: textFieldClasses }, params, { inputRef: inputRef, onBlur: onBlur, name: name, variant: "outlined", label: label, required: required, error: error, helperText: helperText }))); }, style: { pointerEvents: 'none' }, noOptionsText: "No hay opciones" }));
     }
     else {
-        return (_jsxs(RoundedSelect, { onBlur: onBlur, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: (event) => {
-                handleUpdate?.(options.find((option) => getValueString(option) == event.target.value));
-            }, onOpen: () => {
+        return (_jsxs(RoundedSelect, __assign({ onBlur: onBlur, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: function (event) {
+                handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(options.find(function (option) {
+                    return getValueString(option) == event.target.value;
+                }));
+            }, onOpen: function () {
                 //Show loading icon if loading
             }, value: getValueString(value), color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, backgroundColor: backgroundColor, outlineColor: outlineColor, innerBackgroundColor: innerBackgroundColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, fontSize: fontSize, error: error, iconComponent: icon
-                ? (props) => cloneElement(icon, props)
-                : undefined, showIcon: showIcon, children: [_jsx(MenuItem, { value: '', style: { whiteSpace: 'normal' }, children: _jsx("em", { children: "Sin Seleccionar" }) }, 'EMPTY'), options.map((option) => (_jsx(MenuItem, { value: getValueString(option), style: { whiteSpace: 'normal' }, children: option.label }, getValueString(option))))] }));
+                ? function (props) {
+                    return cloneElement(icon, props);
+                }
+                : undefined, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }) }), 'EMPTY'), options.map(function (option) { return (_jsx(MenuItem, __assign({ value: getValueString(option), style: { whiteSpace: 'normal' } }, { children: option.label }), getValueString(option))); })] })));
     }
 }