@producteca/producteca-ui-kit 1.20.0 → 1.21.1-beta.0

package/dist/components/inputs/datePicker/datePickerCustomStyles.js

@@ -0,0 +1,145 @@
+export var datePickerLayoutStyles = {
+    '& .MuiDayCalendar-slideTransition': {
+        minHeight: '200px'
+    },
+    '& .MuiDialogActions-root': {
+        display: 'none'
+    },
+    '& .MuiPickersLayout-actionBar': {
+        display: 'none'
+    },
+    '& .MuiDateCalendar-root': {
+        height: 'min-content !important'
+    },
+    '& .MuiPickersCalendarHeader-label': {
+        fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
+        fontSize: '14px',
+        color: '#797979',
+        fontWeight: 600,
+        textTransform: 'capitalize'
+    },
+    '& .MuiDayCalendar-weekDayLabel': {
+        fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
+        fontSize: '12px',
+        color: '#797979',
+        fontWeight: 600
+    }
+};
+export var datePickerInputStyles = {
+    '& .MuiOutlinedInput-root': {
+        '&:hover': {
+            '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: '#ACACAC'
+            }
+        },
+        '&.Mui-focused': {
+            '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: '#252525'
+            }
+        },
+        '&.Mui-disabled': {
+            '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: '#D7D7D7'
+            }
+        }
+    }
+};
+export var datePickerDayStyles = {
+    fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
+    fontSize: '12px',
+    backgroundColor: 'white',
+    color: '#252525',
+    borderRadius: '4px',
+    '&.MuiPickersDay-root': {
+        fontSize: '14px',
+        textTransform: 'capitalize'
+    },
+    '&.MuiPickersDay-today': {
+        backgroundColor: 'white',
+        color: '#252525',
+        border: '1px solid #252525'
+    },
+    '&.Mui-selected': {
+        backgroundColor: '#0066ff',
+        color: 'white',
+        border: 'none',
+        '&:hover': {
+            backgroundColor: '#0066ff',
+            borderColor: 'none'
+        },
+        '&:focus': {
+            backgroundColor: '#0066ff',
+            borderColor: 'none'
+        }
+    },
+    '&:hover:not(.Mui-selected)': {
+        color: '#252525',
+        backgroundColor: '#EDEDED',
+        borderColor: 'none'
+    }
+};
+export var datePickerDigitalClockStyles = {
+    '& .MuiMultiSectionDigitalClock-root': {
+        '& .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root': {
+            '&::after': {
+                display: 'none'
+            }
+        },
+        '& .MuiButtonBase-root.MuiMenuItem-root.MuiMenuItem-gutters': {
+            fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
+            backgroundColor: 'white',
+            color: '#252525',
+            borderRadius: '4px',
+            width: '32px',
+            height: '32px',
+            margin: '4px 0 0 4px',
+            fontSize: ' 14px',
+            '&.Mui-selected': {
+                backgroundColor: '#0066ff',
+                color: 'white',
+                '&:hover': {
+                    backgroundColor: '#0066ff'
+                },
+                '&:focus': {
+                    backgroundColor: '#0066ff'
+                }
+            },
+            '&:hover:not(.Mui-selected)': {
+                color: '#252525',
+                backgroundColor: '#EDEDED'
+            }
+        }
+    }
+};
+export var datePickerYearStyles = {
+    '& .MuiYearCalendar-root': {
+        '& .MuiPickersYear-root': {
+            '& .MuiPickersYear-yearButton': {
+                fontFamily: "Poppins, Open Sans, Helvetica, Arial, sans-serif",
+                fontSize: '14px',
+                backgroundColor: 'white',
+                color: '#252525',
+                borderRadius: '4px',
+                '&.Mui-selected': {
+                    backgroundColor: '#0066ff',
+                    color: 'white',
+                    '&:hover': {
+                        backgroundColor: '#0066ff'
+                    },
+                    '&:focus': {
+                        backgroundColor: '#0066ff'
+                    }
+                },
+                '&:hover:not(.Mui-selected)': {
+                    backgroundColor: '#EDEDED',
+                    color: '#252525'
+                }
+            }
+        }
+    }
+};
+export var datePickerPopperStyles = {
+    '& .MuiPickersPopper-paper': {
+        boxShadow: '0px 5px 5px -3px rgb(205 205 205 / 20%), 0px 8px 14px 1px rgb(165 165 165 / 14%), 0px 3px 14px 2px rgb(219 219 219 / 6%)'
+    }
+};

package/dist/components/inputs/datePicker/datePickerTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/datePicker/datePickerUtils.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField } from '@mui/material';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import CustomIcon from '../../icons/customIcon/customIcon';
+import styles from './datePicker.module.scss';
+import { datePickerLayoutStyles, datePickerDayStyles, datePickerDigitalClockStyles, datePickerYearStyles, datePickerInputStyles, datePickerPopperStyles } from './datePickerCustomStyles';
+import { omit, includes } from "lodash";
+import locale from '../../../locales';
+dayjs.extend(customParseFormat);
+export var ActionComponent = function ActionComponent(_ref) {
+    var showClearIcon = _ref.showClearIcon,
+        onClear = _ref.onClear,
+        onOpen = _ref.onOpen;
+    return _jsxs("div", { className: styles['calendar-icon-container'], children: [showClearIcon && _jsx("div", { onClick: onClear, className: styles['clear-icon'], children: _jsx(CustomIcon, { children: _jsx(CloseRoundedIcon, {}) }) }), _jsx("div", { className: styles['divider-line'] }), _jsx("div", { onClick: onOpen, className: styles['calendar-icon'], children: _jsx(CustomIcon, { size: "12", children: _jsx(CalendarTodayIcon, {}) }) })] });
+};
+export var getPickerTypeFromFormat = function getPickerTypeFromFormat(format) {
+    if (!format) {
+        return 'date';
+    }
+    if (/^Y+$/.test(format)) {
+        return 'year';
+    }
+    if (/^[Hhms:]+$/.test(format)) {
+        return 'time';
+    }
+    if (includes(format, 'H') || includes(format, 'h') || includes(format, 'm') || includes(format, 's')) {
+        return 'dateTime';
+    }
+    return 'date';
+};
+export var getFinalFormat = function getFinalFormat(format) {
+    if (format) return format;
+    return 'DD/MM/YYYY';
+};
+export var getPlaceholderByFormat = function getPlaceholderByFormat(format, customPlaceholder) {
+    if (customPlaceholder) return customPlaceholder;
+    var pickerType = getPickerTypeFromFormat(format);
+    switch (pickerType) {
+        case 'year':
+            return locale("datePicker.selectYear");
+        case 'time':
+            return locale("datePicker.selectTime");
+        case 'dateTime':
+            return locale("datePicker.selectDateTime");
+        case 'date':
+        default:
+            return locale("datePicker.selectDate");
+    }
+};
+export var convertToDate = function convertToDate(val, format) {
+    if (!val) return null;
+    if (typeof val === 'string') {
+        var parsed = dayjs(val, format, true);
+        return parsed.isValid() ? parsed : null;
+    }
+    if (val instanceof Date) {
+        return dayjs(val);
+    }
+    if (typeof val === 'number') {
+        return dayjs(val);
+    }
+    return null;
+};
+export var getPickerProps = function getPickerProps(_ref2) {
+    var currentValue = _ref2.currentValue,
+        finalFormat = _ref2.finalFormat,
+        onChange = _ref2.onChange,
+        disabled = _ref2.disabled,
+        minDate = _ref2.minDate,
+        maxDate = _ref2.maxDate,
+        placeholder = _ref2.placeholder,
+        name = _ref2.name,
+        otherProps = _ref2.otherProps,
+        onClear = _ref2.onClear,
+        onOpen = _ref2.onOpen,
+        onClose = _ref2.onClose,
+        open = _ref2.open;
+    return {
+        open: open,
+        value: convertToDate(currentValue, finalFormat),
+        onAccept: onChange,
+        onClose: onClose,
+        disabled: disabled,
+        minDate: minDate ? dayjs(minDate) : undefined,
+        maxDate: maxDate ? dayjs(maxDate) : undefined,
+        format: finalFormat,
+        slots: {
+            textField: TextField
+        },
+        slotProps: {
+            textField: Object.assign({ placeholder: getPlaceholderByFormat(finalFormat, placeholder), name: name, onClick: onOpen, variant: 'outlined', fullWidth: true, className: styles['date-input'], sx: datePickerInputStyles, InputProps: {
+                    style: { cursor: 'pointer' },
+                    endAdornment: _jsx(ActionComponent, { showClearIcon: !!currentValue, onClear: onClear, onOpen: onOpen })
+                } }, omit(otherProps, "type")),
+            layout: {
+                sx: Object.assign(Object.assign(Object.assign({}, datePickerLayoutStyles), datePickerDigitalClockStyles), datePickerYearStyles)
+            },
+            day: {
+                sx: datePickerDayStyles
+            },
+            popper: {
+                sx: datePickerPopperStyles
+            }
+        }
+    };
+};

package/dist/components/inputs/datePicker/index.js

@@ -0,0 +1,2 @@
+export * from './datePicker';
+export * from './datePickerCustomStyles';

package/dist/components/inputs/dateRangePicker/dateFormater.js

@@ -0,0 +1,28 @@
+import _ from "lodash";
+export var formatDate = function formatDate(date, format) {
+    var _pad = function _pad(n) {
+        return _.padStart(String(n), 2, "0");
+    };
+    var map = {
+        YYYY: String(date.getFullYear()),
+        MM: _pad(date.getMonth() + 1),
+        DD: _pad(date.getDate()),
+        HH: _pad(date.getHours()),
+        mm: _pad(date.getMinutes()),
+        ss: _pad(date.getSeconds())
+    };
+    return _.reduce(map, function (acc, value, token) {
+        return _.replace(acc, token, value);
+    }, format);
+};
+export var formatRangeLimits = function formatRangeLimits(range) {
+    if (!range) return undefined;
+    var from = new Date(range.from);
+    from.setHours(0, 0, 0);
+    var to = new Date(range.to);
+    to.setHours(23, 59, 59);
+    return {
+        from: from,
+        to: to
+    };
+};

package/dist/components/inputs/dateRangePicker/dateRangePicker.js

@@ -0,0 +1,118 @@
+import _slicedToArray from "babel-runtime/helpers/slicedToArray";
+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 { useState } from 'react';
+import { DayPicker } from 'react-day-picker';
+import * as Popover from '@radix-ui/react-popover';
+import { es } from "react-day-picker/locale";
+import { ErrorMessage, formValidation } from '../../../validators';
+import { useReduxFormField } from '../../../hooks/useReduxFormField';
+import styles from './dateRangePicker.module.scss';
+import errorStyles from '../../../validators/errorMessage.module.scss';
+import { FormField } from "../formField/formField";
+import clsx from 'clsx';
+import 'react-day-picker/dist/style.css';
+import { CustomWeekday, fromInputValue, getDisplayRange, getDisabledDays } from './dateRangePickerUtils';
+import { ActionComponent } from '../datePicker/datePickerUtils';
+import { formatRangeLimits } from "./dateFormater";
+export var DateRangePickerInput = function DateRangePickerInput(props) {
+    var _a;
+
+    var meta = props.meta,
+        name = props.name,
+        _props$value = props.value,
+        value = _props$value === undefined ? null : _props$value,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === undefined ? false : _props$disabled,
+        _props$required = props.required,
+        required = _props$required === undefined ? false : _props$required,
+        placeholder = props.placeholder,
+        _props$size = props.size,
+        size = _props$size === undefined ? 'md' : _props$size,
+        _props$noErrors = props.noErrors,
+        noErrors = _props$noErrors === undefined ? false : _props$noErrors,
+        label = props.label,
+        _props$format = props.format,
+        format = _props$format === undefined ? 'DD/MM/YYYY' : _props$format,
+        isValid = props.isValid,
+        onChange = props.onChange,
+        input = props.input,
+        minDate = props.minDate,
+        maxDate = props.maxDate,
+        otherProps = __rest(props, ["meta", "name", "value", "disabled", "required", "placeholder", "size", "noErrors", "label", "format", "isValid", "onChange", "input", "minDate", "maxDate"]);
+
+    var currentValue = (_a = input === null || input === void 0 ? void 0 : input.value) !== null && _a !== void 0 ? _a : value;
+    var validationProps = { meta: meta, value: currentValue, isValid: isValid, required: props.required };
+    var validated = formValidation(validationProps);
+
+    var _useReduxFormField = useReduxFormField({
+        input: input,
+        onChange: onChange ? function (range) {
+            var syntheticEvent = {
+                target: {
+                    value: formatRangeLimits(range),
+                    name: name
+                }
+            };
+            onChange(syntheticEvent);
+        } : undefined
+    }),
+        fieldHandleChange = _useReduxFormField.handleChange,
+        handleBlur = _useReduxFormField.handleBlur;
+
+    var handleSelect = function handleSelect(range) {
+        fieldHandleChange(range);
+        if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to) && (range === null || range === void 0 ? void 0 : range.from) !== (range === null || range === void 0 ? void 0 : range.to)) {
+            setIsOpen(false);
+        }
+    };
+    var handleClear = function handleClear() {
+        fieldHandleChange(undefined);
+    };
+    var selectedRange = fromInputValue(currentValue);
+    var displayValue = getDisplayRange(selectedRange, format);
+
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        isOpen = _useState2[0],
+        setIsOpen = _useState2[1];
+
+    var getInitialMonth = function getInitialMonth() {
+        return (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) || (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) || new Date();
+    };
+    return _jsxs("div", { className: clsx(styles['date-range-picker'], styles[size], validated ? errorStyles[validated] : '', disabled ? styles['disabled'] : '', isOpen ? styles['focused'] : ''), children: [_jsxs(Popover.Root, { open: isOpen && !disabled, onOpenChange: setIsOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs("div", { className: styles['input-wrapper'], children: [_jsx("input", Object.assign({ type: "text", name: name, value: displayValue, placeholder: placeholder || format, readOnly: true, onBlur: handleBlur }, otherProps)), _jsx(ActionComponent, { onOpen: function onOpen() {
+                            return setIsOpen(!isOpen);
+                        }, showClearIcon: !!displayValue, onClear: handleClear })] }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { className: styles['popover-content'], sideOffset: 4, align: "start", side: "bottom", avoidCollisions: true, collisionPadding: 8, children: _jsx(DayPicker, { mode: "range", locale: es, selected: selectedRange, onSelect: handleSelect, numberOfMonths: 2, defaultMonth: getInitialMonth(), disabled: getDisabledDays(disabled, minDate, maxDate), className: styles['day-picker'], animate: true, classNames: {
+                            months: styles['months'],
+                            month: styles['month'],
+                            month_caption: styles['month-caption'],
+                            nav: styles['nav'],
+                            weekdays: styles['weekdays'],
+                            weekday: styles['weekday'],
+                            week: styles['week'],
+                            day: styles['day'],
+                            selected: styles['selected'],
+                            range_start: styles['range-start'],
+                            range_middle: styles['range-middle'],
+                            range_end: styles['range-end'],
+                            disabled: styles['disabled']
+                        }, components: {
+                            Weekday: CustomWeekday
+                        } }) }) })] }), !noErrors && _jsx(ErrorMessage, { validationProps: validationProps })] });
+};
+export var DateRangePicker = function DateRangePicker(_a) {
+    var label = _a.label,
+        rightAdornment = _a.rightAdornment,
+        value = _a.value,
+        props = __rest(_a, ["label", "rightAdornment", "value"]);
+
+    return _jsx(FormField, Object.assign({ type: "dateRange", label: label, rightAdornment: rightAdornment, value: value }, props));
+};

package/dist/components/inputs/dateRangePicker/dateRangePickerTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/dateRangePicker/dateRangePickerUtils.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "babel-runtime/helpers/slicedToArray";
+import _typeof from "babel-runtime/helpers/typeof";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import head from "lodash/head";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { formatDate } from "./dateFormater";
+dayjs.extend(customParseFormat);
+export var fromInputValue = function fromInputValue(inputValue) {
+    if (!inputValue) return undefined;
+    if ((typeof inputValue === "undefined" ? "undefined" : _typeof(inputValue)) === 'object' && 'from' in inputValue && 'to' in inputValue) {
+        var rangeValue = inputValue;
+        return {
+            from: convertToDate(rangeValue.from),
+            to: convertToDate(rangeValue.to)
+        };
+    }
+    if (typeof inputValue === 'string' && inputValue.includes(' - ')) {
+        var _inputValue$split = inputValue.split(' - '),
+            _inputValue$split2 = _slicedToArray(_inputValue$split, 2),
+            fromStr = _inputValue$split2[0],
+            toStr = _inputValue$split2[1];
+
+        return {
+            from: convertToDate(fromStr.trim()),
+            to: convertToDate(toStr.trim())
+        };
+    }
+    return undefined;
+};
+export var getDisplayRange = function getDisplayRange(range) {
+    var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'DD/MM/YYYY';
+
+    if (!(range === null || range === void 0 ? void 0 : range.from)) return '';
+    var fromFormatted = formatDate(range.from, format);
+    var toFormatted = range.to ? formatDate(range.to, format) : '';
+    if (range.from && range.to) {
+        return fromFormatted + " - " + toFormatted;
+    }
+    return fromFormatted;
+};
+export var convertToDate = function convertToDate(val) {
+    if (!val) return undefined;
+    if (val instanceof Date) {
+        return val;
+    }
+    if (typeof val === 'string') {
+        var parsed = dayjs(val);
+        return parsed.isValid() ? parsed.toDate() : undefined;
+    }
+    if (typeof val === 'number') {
+        return dayjs(val).toDate();
+    }
+    return undefined;
+};
+export var CustomWeekday = function CustomWeekday(props) {
+    return _jsx("th", Object.assign({}, props, { children: head(props.children) }));
+};
+export var getDisabledDays = function getDisabledDays(disabled, minDate, maxDate) {
+    if (disabled) return true;
+    var min = convertToDate(minDate);
+    var max = convertToDate(maxDate);
+    if (min && max) return [{ before: min }, { after: max }];
+    if (min) return { before: min };
+    if (max) return { after: max };
+    return undefined;
+};

package/dist/components/inputs/dateRangePicker/index.js

@@ -0,0 +1,2 @@
+export { DateRangePicker, DateRangePickerInput } from './dateRangePicker';
+export { formatDate } from "./dateFormater";

package/dist/components/inputs/formField/formField.js

@@ -0,0 +1,35 @@
+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 { TextInput } from './textInput';
+import { PasswordInput } from './passwordInput';
+import { DatePickerInput } from '../datePicker';
+import { DateRangePickerInput } from '../dateRangePicker';
+import styles from './textInput.module.scss';
+var inputByType = function inputByType(type) {
+    var inputs = {
+        password: PasswordInput,
+        text: TextInput,
+        number: TextInput,
+        date: DatePickerInput,
+        dateRange: DateRangePickerInput
+    };
+    return !!type ? inputs[type] : TextInput;
+};
+export var FormField = function FormField(_a) {
+    var label = _a.label,
+        rightAdornment = _a.rightAdornment,
+        children = _a.children,
+        props = __rest(_a, ["label", "rightAdornment", "children"]);
+
+    var InputComponent = inputByType(props.type);
+    return _jsxs("div", { className: styles['form-field'], children: [label && _jsx("label", { htmlFor: props.name, children: label }), _jsxs("div", { className: "" + styles['input-container'], children: [_jsx(InputComponent, Object.assign({}, props, { children: children })), !!rightAdornment && _jsx("div", { className: "" + styles['right-modifier'], children: rightAdornment })] })] });
+};
+export default FormField;

package/dist/components/inputs/formField/passwordInput.js

@@ -0,0 +1,22 @@
+import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { TextInput } from './textInput';
+export var PasswordInput = function PasswordInput(props) {
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        showPassword = _useState2[0],
+        setShowPassword = _useState2[1];
+
+    var type = showPassword ? 'text' : 'password';
+    return _jsx(TextInput, Object.assign({}, props, { type: type, "data-testid": "password-input", rightIcon: _jsx(VisibilityIcon, { showPassword: showPassword, setShowPassword: setShowPassword }) }));
+};
+var VisibilityIcon = function VisibilityIcon(_ref) {
+    var showPassword = _ref.showPassword,
+        setShowPassword = _ref.setShowPassword;
+
+    return _jsx("div", { "data-testid": "visibility-toggle", onClick: function onClick() {
+            return setShowPassword(!showPassword);
+        }, children: showPassword ? _jsx(Visibility, {}) : _jsx(VisibilityOff, {}) });
+};

package/dist/components/inputs/formField/textInput.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "babel-runtime/helpers/slicedToArray";
+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 { useEffect, useState } from 'react';
+import { formValidation, ErrorMessage } from '../../../validators';
+import styles from './textInput.module.scss';
+import errorStyles from '../../../validators/errorMessage.module.scss';
+import clsx from 'clsx';
+import _ from 'lodash';
+import { ClearRounded } from '@mui/icons-material';
+import CustomIcon from '../../icons/customIcon/customIcon';
+import { useReduxFormField } from '../../../hooks/useReduxFormField';
+export var TextInput = function TextInput(props) {
+    var _a;
+
+    var isValid = props.isValid,
+        onChange = props.onChange,
+        meta = props.meta,
+        _props$value = props.value,
+        value = _props$value === undefined ? '' : _props$value,
+        _props$noErrors = props.noErrors,
+        noErrors = _props$noErrors === undefined ? false : _props$noErrors,
+        _props$size = props.size,
+        size = _props$size === undefined ? 'md' : _props$size,
+        _props$type = props.type,
+        type = _props$type === undefined ? 'text' : _props$type,
+        isClearable = props.isClearable,
+        max = props.max,
+        min = props.min,
+        leftIcon = props.leftIcon,
+        rightIcon = props.rightIcon,
+        input = props.input,
+        inputRef = props.inputRef,
+        otherProps = __rest(props, ["isValid", "onChange", "meta", "value", "noErrors", "size", "type", "isClearable", "max", "min", "leftIcon", "rightIcon", "input", "inputRef"]);
+
+    var inputValue = (_a = input === null || input === void 0 ? void 0 : input.value) !== null && _a !== void 0 ? _a : value;
+
+    var _useState = useState(''),
+        _useState2 = _slicedToArray(_useState, 2),
+        currentValue = _useState2[0],
+        setCurrentValue = _useState2[1];
+
+    var validationProps = { meta: meta, value: inputValue, isValid: isValid, required: props.required };
+    var validated = formValidation(validationProps);
+    var numericLimits = type === 'number' ? { max: max, min: min } : {};
+    useEffect(function () {
+        setCurrentValue(inputValue);
+    }, [inputValue]);
+
+    var _useReduxFormField = useReduxFormField({
+        input: input,
+        onChange: onChange,
+        transformValue: function transformValue(event) {
+            var value = event.target.value;
+            setCurrentValue(value);
+            return value;
+        }
+    }),
+        fieldHandleChange = _useReduxFormField.handleChange,
+        handleBlur = _useReduxFormField.handleBlur;
+
+    var handleChange = function handleChange(event) {
+        fieldHandleChange(event);
+    };
+    var rightModifier = isClearable && !rightIcon && currentValue ? _jsx(CustomIcon, { "data-testid": "clear-icon", children: _jsx(ClearRounded, {}) }) : rightIcon;
+    var onClickRightModifier = isClearable && !rightIcon ? function () {
+        return handleChange({ target: { name: props.name, value: '' } });
+    } : _.identity;
+    var isSmall = size == 'sm';
+    return _jsxs("div", { "data-testid": "text-input-container", className: clsx(styles[size], styles['text-input-container'], validated ? errorStyles[validated] : '', !!leftIcon && !isSmall ? styles['with-left-icon'] : '', !!rightModifier && !isSmall ? styles['with-right-icon'] : ''), children: [!!leftIcon && !isSmall && _jsx("div", { className: "" + styles['left-icon'], children: leftIcon }), _jsx("input", Object.assign({ className: "text-input", "data-testid": "text-input", value: currentValue ? String(currentValue) : '', type: type, onChange: handleChange, onBlur: handleBlur, ref: inputRef }, numericLimits, otherProps)), !!rightModifier && !isSmall && _jsx("div", { className: "" + styles['right-icon'], onClick: onClickRightModifier, children: rightModifier }), !noErrors && _jsx(ErrorMessage, { validationProps: validationProps })] });
+};

package/dist/components/inputs/{index.d.ts → index.js}

@@ -5,4 +5,4 @@ export * from './checkboxInput';
 export * from './searcher/searcher';
 export * from './switchInput';
 export * from './datePicker';
-export * from './dateRangePicker';
+export * from './dateRangePicker';