@arquimedes.co/eureka-forms 3.0.32 → 3.0.33-test

package/dist/Shared/ErkDatePickerRange/ErkDatePickerRange.stories.js

@@ -0,0 +1,274 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ErkDatePickerRange from './ErkDatePickerRange';
+import { useArgs } from 'storybook/internal/preview-api';
+import { useState } from 'react';
+const meta = {
+    component: ErkDatePickerRange,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+    },
+    parameters: {
+        dateRange: [new Date('2021-07-01'), new Date('2021-07-21')],
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        label: 'Seleccionar Rango',
+        value: [null, null],
+    },
+};
+export const Default = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Interactive = {
+    args: {
+        label: 'Rango Interactivo',
+        value: [null, null],
+        helperText: 'Seleccione un rango de fechas',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        const handleChange = (newValue) => {
+            setValue(newValue);
+            args.onChange?.(newValue);
+        };
+        return (_jsxs("div", { children: [_jsx(ErkDatePickerRange, { ...args, value: value, onChange: handleChange }), _jsxs("div", { style: { marginTop: '20px', fontSize: '14px' }, children: [_jsx("strong", { children: "Valor seleccionado:" }), _jsxs("div", { children: ["Inicio: ", value[0]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] }), _jsxs("div", { children: ["Fin: ", value[1]?.toLocaleDateString('es-ES') ?? 'No seleccionado'] })] })] }));
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDatePickerRange, { ...args, onChange: onValueChange });
+    },
+};
+export const Full = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Seleccione un rango de fechas',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Error = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Error: Rango de fechas inválido',
+        error: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Menu = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('date-picker');
+        await userEvent.click(selector);
+    },
+};
+export const WithSelectedRange = {
+    args: {
+        label: 'Vacaciones',
+        value: [new Date('2024-12-20'), new Date('2025-01-05')],
+        helperText: 'Período de vacaciones',
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkDatePickerRange, { ...args, onChange: onValueChange });
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        disabled: true,
+        helperText: 'Campo deshabilitado',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const ReadOnly = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        readOnly: true,
+        helperText: 'Campo de solo lectura',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithError = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [new Date('2021-07-21'), new Date('2021-07-01')],
+        helperText: 'La fecha de inicio debe ser anterior a la fecha de fin',
+        error: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const Required = {
+    args: {
+        label: 'Rango de Fechas',
+        value: [null, null],
+        helperText: 'Este campo es obligatorio',
+        required: true,
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const SmallSize = {
+    args: {
+        label: 'Rango Pequeño',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        size: 'small',
+        helperText: 'Tamaño pequeño',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const MediumSize = {
+    args: {
+        label: 'Rango Mediano',
+        value: [new Date('2021-07-01'), new Date('2021-07-21')],
+        size: 'medium',
+        helperText: 'Tamaño mediano',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const CurrentMonth = {
+    args: {
+        label: 'Mes Actual',
+        value: [new Date(2025, 10, 1), new Date(2025, 10, 30)],
+        helperText: 'Noviembre 2025',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const LastWeek = {
+    args: {
+        label: 'Última Semana',
+        value: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
+        helperText: 'Últimos 7 días',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const NextMonth = {
+    args: {
+        label: 'Próximo Mes',
+        value: [
+            new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1),
+            new Date(new Date().getFullYear(), new Date().getMonth() + 2, 0),
+        ],
+        helperText: 'Planificación del próximo mes',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const WithMinMaxDates = {
+    args: {
+        label: 'Reserva de Hotel',
+        value: [null, null],
+        helperText: 'Seleccione fechas entre hoy y 3 meses',
+        minDate: new Date(),
+        maxDate: new Date(new Date().setMonth(new Date().getMonth() + 3)),
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const YearRange = {
+    args: {
+        label: 'Período Fiscal',
+        value: [new Date('2025-01-01'), new Date('2025-12-31')],
+        helperText: 'Año fiscal 2025',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const QuarterRange = {
+    args: {
+        label: 'Trimestre Q1 2025',
+        value: [new Date('2025-01-01'), new Date('2025-03-31')],
+        helperText: 'Primer trimestre del año',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const EventDuration = {
+    args: {
+        label: 'Duración del Evento',
+        value: [new Date('2025-06-15'), new Date('2025-06-18')],
+        helperText: 'Conferencia anual (4 días)',
+    },
+    render: function Component(args) {
+        const [value, setValue] = useState(args.value ?? [null, null]);
+        return _jsx(ErkDatePickerRange, { ...args, value: value, onChange: setValue });
+    },
+};
+export const MultipleStates = {
+    render: function Component() {
+        const [range1, setRange1] = useState([null, null]);
+        const [range2, setRange2] = useState([new Date('2025-01-01'), new Date('2025-01-31')]);
+        const [range3, setRange3] = useState([null, null]);
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx(ErkDatePickerRange, { label: "Fecha de Inicio del Proyecto", value: range1, onChange: setRange1, helperText: "Seleccione el per\u00EDodo del proyecto" }), _jsx(ErkDatePickerRange, { label: "Per\u00EDodo de Pruebas", value: range2, onChange: setRange2, helperText: "Enero 2025" }), _jsx(ErkDatePickerRange, { label: "Fecha de Entrega", value: range3, onChange: setRange3, error: range3[0] === null, helperText: range3[0] === null ? 'Este campo es obligatorio' : 'Fecha confirmada', required: true })] }));
+    },
+};

package/dist/Shared/ErkMenuItem.d.ts

@@ -0,0 +1,4 @@
+declare const Styled: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "children" | "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export default Styled;

package/dist/Shared/ErkMenuItem.js

@@ -0,0 +1,18 @@
+import { MenuItem, styled } from '@mui/material';
+const Styled = styled(MenuItem)(({ theme }) => ({
+    padding: '6px 12px',
+    whiteSpace: 'normal',
+    '& .Erk-MuiMenuItem-root:has(.ErkIcon) ': {
+        paddingLeft: '40px',
+        '& .ErkIcon': {
+            left: 12,
+            top: '50%',
+            position: 'absolute',
+            transform: 'translateY(-50%)',
+            fill: theme.palette.primary.main,
+            width: '20px',
+            height: '20px',
+        },
+    },
+}));
+export default Styled;

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
+export interface ErkPhoneInputProps extends Omit<ErkTextFieldProps, 'onChange' | 'ref'> {
+    /** The value of the phoneinput */
+    value?: string;
+    onChange?: (value: string) => void;
+    inputRef?: any;
+    readOnly?: boolean;
+}
+/**
+ * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
+ */
+declare class ErkPhoneInput extends React.Component<ErkPhoneInputProps & Omit<MuiTextFieldProps, 'onChange'>> {
+    render(): JSX.Element;
+}
+export default ErkPhoneInput;

package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import parse from 'libphonenumber-js/max';
+import { defaultCountries, FlagImage, parseCountry, usePhoneInput } from 'react-international-phone';
+import isoCountries from 'i18n-iso-countries';
+import es from 'i18n-iso-countries/langs/es.json';
+import { InputAdornment, Select, styled } from '@mui/material';
+import { MenuItem } from '@mui/material';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
+import { useAppSelector } from '../../hooks';
+isoCountries.registerLocale(es);
+const StyledSelect = styled(Select)(() => ({
+    padding: 0,
+    input: {
+        padding: 0,
+    },
+    '& .Erk-MuiSelect-select': {
+        height: '20px',
+    },
+    '& .Erk-MuiSelect-select.Erk-MuiInputBase-inputSizeSmall': {
+        paddingBottom: 0,
+        borderBottom: 'none',
+    },
+    backgroundColor: 'transparent',
+    '& input': {
+        padding: 0,
+        margin: 0,
+    },
+    '&.Erk-MuiInputBase-root::before': {
+        borderBottom: 'none !important',
+    },
+    '&.Erk-MuiInput-underline::after': {
+        borderBottom: 'none',
+    },
+    '&.Mui-readOnly': {
+        '& .Erk-MuiSelect-select': {
+            paddingRight: 5,
+        },
+        '& .Erk-MuiSelect-icon': {
+            display: 'none',
+        },
+    },
+}));
+function CustomPhoneInput({ value, onChange, inputRef, IconComponent, size = 'small', readOnly = false, disabled = false, ...others }) {
+    const defaultCountry = useAppSelector((state) => state.global.countryCode);
+    const { inputValue, handlePhoneValueChange, inputRef: phoneRef, country, setCountry, } = usePhoneInput({
+        value: '+' + value,
+        inputRef,
+        defaultCountry: (defaultCountry ?? 'CO').toLowerCase(),
+        disableDialCodePrefill: true,
+        disableDialCodeAndPrefix: true,
+        onChange: (data) => onChange?.(data.phone.replace('+', '')),
+    });
+    const countries = useMemo(() => defaultCountries
+        .map((c) => {
+        const country = parseCountry(c);
+        return {
+            country,
+            name: isoCountries.getName(country.iso2.toUpperCase(), 'es') ?? country.name,
+        };
+    })
+        .sort((a, b) => a.name.localeCompare(b.name)), []);
+    return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, size: size, variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
+                const value = e.clipboardData.getData('Text');
+                if (!value.startsWith('+')) {
+                    const phone = parse('+' + value);
+                    if (phone?.isValid()) {
+                        e.preventDefault();
+                        if (phone.country)
+                            setCountry(phone.country.toLowerCase());
+                        onChange?.(phone.number);
+                    }
+                }
+            }, slotProps: {
+                input: {
+                    readOnly,
+                    disabled: readOnly || disabled,
+                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(StyledSelect, { size: 'small', variant: "standard", readOnly: readOnly, value: country.iso2, inputProps: { readOnly, disabled: readOnly || disabled }, onChange: (e) => setCountry(e.target.value), renderValue: (value) => (_jsx(FlagImage, { iso2: value, style: { display: 'flex' }, width: 20 })), children: countries.map(({ country, name }) => {
+                                return (_jsxs(MenuItem, { value: country.iso2, children: [_jsx(FlagImage, { iso2: country.iso2, size: 20 }), _jsx("span", { style: {
+                                                marginLeft: '8px',
+                                                marginRight: '8px',
+                                            }, children: name }), _jsxs("span", { style: { color: 'grey' }, children: ["+", country.dialCode] })] }, country.iso2));
+                            }) }) })),
+                    endAdornment: IconComponent,
+                },
+            } }) }));
+}
+/**
+ * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkPhoneInput extends React.Component {
+    render() {
+        return _jsx(CustomPhoneInput, { ...this.props });
+    }
+}
+export default ErkPhoneInput;

package/dist/Shared/ErkSelect/ErkSelect.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { SelectProps as MuiSelectProps } from '@mui/material';
+export interface SelectorStyleProps {
+    /** If input is readOnly */
+    readOnly?: boolean;
+}
+export declare const StyledSelect: import("@emotion/styled").StyledComponent<(import("@mui/material").FilledSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").StandardSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>) | (import("@mui/material").OutlinedSelectProps & import("@mui/material").BaseSelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>), {}, {}>;
+export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
+}, "required" | "size" | "color" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    component?: React.ElementType;
+} & {
+    open: boolean;
+}, {}, {}>;
+export declare const StyledHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLParagraphElement> | null | undefined;
+}, "required" | "children" | "className" | "style" | "classes" | "disabled" | "sx" | "margin" | "error" | "filled" | "variant" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    component?: React.ElementType;
+}, {}, {}>;
+export type ErkSelectValue<Type extends string | number, Multiple, Clearable> = Multiple extends true ? Type[] : Clearable extends true ? Type | undefined : Type;
+export interface ErkSelectProps<Type extends string | number = string, Multiple extends boolean | undefined = false, Clearable extends boolean | undefined = true> extends Omit<MuiSelectProps, 'color' | 'onChange' | 'ref'>, SelectorStyleProps {
+    /** if selecting multiple values */
+    multiple?: Multiple;
+    /** If the usar can clear the value */
+    clearable?: Clearable;
+    /** If the input is loading */
+    loading?: boolean;
+    /** children to display in the options */
+    children?: React.ReactNode;
+    /** Currently selected value */
+    value?: ErkSelectValue<Type, Multiple, Clearable>;
+    onChange?: (value: ErkSelectValue<Type, Multiple, Clearable>) => void;
+    /** String to place in the label */
+    label?: string;
+    /** The helper Text to display */
+    helperText?: string;
+    /** Label to display on clearable */
+    clearLabel?: string;
+    /** labelMargin */
+    labelMargin?: number;
+}
+export type CustomErkSelectOnChangeType<ChangeType, Multiple extends boolean | undefined, Clearable extends boolean | undefined> = Multiple extends true ? ChangeType[] : Clearable extends true ? ChangeType | undefined : ChangeType;
+export interface CustomErkSelectProps<ValueType extends string | number = string, ChangeType = any, Multiple extends boolean | undefined = false, Clearable extends boolean | undefined = true> extends Omit<ErkSelectProps<ValueType, Multiple, Clearable>, 'onChange'> {
+    onChange?: (value: CustomErkSelectOnChangeType<ChangeType, Multiple, Clearable>) => void;
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+declare class ErkSelect<Type extends string | number = string, Multiple extends boolean | undefined = false, Clearable extends boolean | undefined = true> extends React.Component<ErkSelectProps<Type, Multiple, Clearable>> {
+    render(): JSX.Element;
+}
+export default ErkSelect;

package/dist/Shared/ErkSelect/ErkSelect.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useState } from 'react';
+import { FormControl, FormHelperText as MuiFormHelperText, InputLabel as MuiInputLabel, Select as MuiSelect, styled, InputAdornment, } from '@mui/material';
+import ErkMenuItem from '../ErkMenuItem';
+export const StyledSelect = styled(MuiSelect)(({ theme, size, ...props }) => ({
+    borderRadius: 10,
+    opacity: props.disabled ? 0.5 : 1,
+    backgroundColor: theme.palette.stepBackgroundColor.default,
+    minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
+    '&.Erk-MuiInputBase-adornedEnd': {
+        paddingRight: 7,
+    },
+    '& .Erk-MuiSelect-select': {
+        fontSize: '1rem',
+        padding: '6px 12px',
+        lineHeight: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
+        height: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
+        '&.Erk-MuiInputBase-inputAdornedEnd': {
+            paddingRight: '0px !important',
+        },
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    '& .Erk-MuiOutlinedInput-notchedOutline': {
+        borderColor: theme.palette.outline.main,
+    },
+    '&:hover:not(.Mui-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
+        borderColor: props.disabled || props.readOnly ? theme.palette.outline.main : theme.palette.primary.main,
+    },
+    '&.Mui-readOnly': {
+        '& .Erk-MuiSelect-select': {
+            color: theme.palette.text.primary,
+            WebkitTextFillColor: theme.palette.text.primary,
+        },
+        '& .Erk-MuiSelect-icon': {
+            color: theme.palette.text.primary + 'a0',
+        },
+    },
+    '& .Mui-disabled, &.Mui-readOnly': {
+        cursor: 'default',
+    },
+    '&.Erk-MuiInputBase-root.Mui-focused': {
+        '& .Erk-MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.primary.main,
+            borderWidth: 2,
+        },
+    },
+    '& .Erk-MuiInputAdornment-root': {
+        marginLeft: 0,
+        marginRight: size === 'medium' ? 2 : 0,
+        color: theme.palette.text.primary + 'a0',
+        fill: theme.palette.text.primary + 'a0',
+        cursor: props.disabled || props.readOnly ? 'default' : 'pointer',
+    },
+    '& .Erk-MuiSelect-iconOpen': {
+        transform: props.IconComponent ? 'none' : undefined,
+    },
+    '& .Erk-MuiInputBase-input:has(.ErkIcon) ': {
+        paddingLeft: 40,
+        '& .ErkIcon': {
+            left: 12,
+            top: '50%',
+            position: 'absolute',
+            transform: 'translateY(-50%)',
+            fill: theme.palette.primary.main,
+            width: '20px',
+            height: '20px',
+        },
+    },
+}));
+export const StyledInputLabel = styled(MuiInputLabel)(({ theme, size = 'small', ...props }) => ({
+    color: theme.palette.text.primary + '8a',
+    '&.Erk-MuiInputLabel-root.Mui-focused': {
+        color: theme.palette.primary.main,
+    },
+    '&.Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
+        transform: `translate(12px, ${size === 'small' ? 5 : 9}px) scale(1)`,
+        maxWidth: 'calc(100% - 40px)',
+    },
+    '&.Mui-error': {
+        color: theme.palette.error.main,
+    },
+    opacity: props.disabled ? 0.5 : 1,
+}));
+export const StyledHelperText = styled(MuiFormHelperText)(({ theme, ...props }) => ({
+    color: theme.palette.helperText.primary,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    opacity: props.disabled ? 0.5 : 1,
+    '&.Mui-error': {
+        color: theme.palette.error.main,
+    },
+}));
+function CustomSelect({ label, error, value, loading, onChange, children, required, inputRef, MenuProps, helperText, IconComponent, size = 'small', labelMargin = 5, multiple = false, readOnly = false, disabled = false, clearable = true, fullWidth = true, clearLabel = 'Sin Seleccionar', ...others }) {
+    const [open, setOpen] = useState(false);
+    const handleChange = useCallback((event) => onChange?.(event.target.value), [onChange]);
+    return (_jsxs(FormControl, { size: size, error: error, variant: "outlined", required: required, fullWidth: fullWidth, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : undefined, children: label })), _jsxs(StyledSelect, { ...others, size: size, autoWidth: false, open: others.open ?? open, label: label, inputRef: inputRef, readOnly: readOnly, disabled: disabled, multiple: multiple, onChange: handleChange, value: value ?? (multiple ? [] : ''), IconComponent: IconComponent ? () => _jsx(_Fragment, {}) : undefined, endAdornment: IconComponent ? (_jsx(InputAdornment, { position: "end", onClick: (e) => {
+                        e.stopPropagation();
+                        if (!readOnly && !disabled) {
+                            if (others.open !== undefined) {
+                                if (others.open)
+                                    others.onClose?.(e);
+                                else
+                                    others.onOpen?.(e);
+                            }
+                            else
+                                setOpen((open) => !open);
+                        }
+                    }, children: _jsx(IconComponent, { size: size === 'small' ? 22 : 26 }) })) : undefined, onFocus: (e) => {
+                    if (!e.relatedTarget?.closest('.Erk-MuiPaper-root')) {
+                        setOpen(true);
+                    }
+                    others.onFocus?.(e);
+                }, MenuProps: {
+                    disablePortal: true,
+                    sx: (theme) => ({
+                        '& .Erk-MuiMenuItem-root:has(.ErkIcon) ': {
+                            gap: '10px',
+                            padding: '6px 12px',
+                            display: 'flex',
+                            maxWidth: '100%',
+                            alignItems: 'center',
+                            '& .ErkIcon': {
+                                width: '20px',
+                                fill: theme.palette.primary.main,
+                            },
+                        },
+                    }),
+                    ...MenuProps,
+                }, onOpen: others.onOpen ?? (() => setOpen(true)), onClose: others.onClose ?? (() => setOpen(false)), inputProps: { disabled: readOnly || disabled }, children: [((clearable && !multiple) || loading) && (_jsx(ErkMenuItem, { value: '', "data-testid": 'smart-select-empty', style: { whiteSpace: 'normal' }, children: _jsx("em", { children: loading ? 'Cargando...' : clearLabel }) }, 'EMPTY')), children] }), helperText && _jsx(StyledHelperText, { disabled: disabled, children: helperText })] }));
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkSelect extends React.Component {
+    render() {
+        return _jsx(CustomSelect, { ...this.props });
+    }
+}
+export default ErkSelect;

package/dist/Shared/ErkSelect/ErkSelect.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ErkSelect from './ErkSelect';
+declare const meta: {
+    component: typeof ErkSelect;
+    tags: string[];
+    args: {
+        readOnly: false;
+        MenuProps: {
+            disablePortal: false;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const ValueAndLabel: Story;
+export declare const Full: Story;
+export declare const Error: Story;
+export declare const ErrorColor: Story;
+export declare const DifferentColors: Story;