@ssplib/react-components 0.0.262 → 0.0.263

package/components/form/date/GenericDatePicker.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import 'dayjs/locale/pt-br';
+export default function GenericDatePicker({ name, required, title, xs, sm, md, minDt, defaultValue, persistValue, maxDt, ...props }: {
+    minDt?: string;
+    maxDt?: string;
+    name: string;
+    title?: string;
+    required?: boolean;
+    defaultValue?: string;
+    persistValue?: boolean;
+    xs?: number;
+    sm?: number;
+    md?: number;
+}): JSX.Element;

package/components/form/date/GenericDatePicker.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
+const x_date_pickers_2 = require("@mui/x-date-pickers");
+const dayjs_1 = __importDefault(require("dayjs"));
+require("dayjs/locale/pt-br");
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const lodash_hasin_1 = __importDefault(require("lodash.hasin"));
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+function GenericDatePicker(_a) {
+    var _b;
+    var { name, required = false, title, xs = 12, sm, md, minDt, defaultValue, persistValue, maxDt } = _a, props = __rest(_a, ["name", "required", "title", "xs", "sm", "md", "minDt", "defaultValue", "persistValue", "maxDt"]);
+    const context = (0, react_hook_form_1.useFormContext)();
+    const [value, setValue] = (0, react_1.useState)(defaultValue !== undefined ? (0, dayjs_1.default)(defaultValue, 'DD/MM/YYYY') : undefined);
+    const handleChange = (newValue) => {
+        setValue(undefined);
+    };
+    (0, react_1.useEffect)(() => {
+        if (value === undefined)
+            return;
+        context.setValue(name, value ? value.format('DD/MM/YYYY') : value);
+    }, [value]);
+    (0, react_1.useEffect)(() => {
+        // Vamos executar o unregister em casos em que não queremos persistir o valor
+        if (persistValue)
+            return;
+        return () => {
+            context.unregister(name);
+        };
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
+            title && react_1.default.createElement(material_1.InputLabel, { required: required }, title),
+            react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                react_1.default.createElement(x_date_pickers_2.DatePicker, { minDate: (0, dayjs_1.default)(minDt, 'DD/MM/YYYY'), maxDate: (0, dayjs_1.default)(maxDt, 'DD/MM/YYYY'), format: 'DD/MM/YYYY', value: value, onChange: handleChange, disableHighlightToday: true, sx: {
+                        outline: (0, lodash_get_1.default)(context.formState.errors, name) ? '1px solid #a51c30' : '',
+                        backgroundColor: 'white',
+                        width: '100%',
+                        div: {
+                            input: {
+                                paddingX: 2,
+                                paddingY: 1.05,
+                            },
+                        },
+                    }, inputRef: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({ size: 'small' }, params, context === null || context === void 0 ? void 0 : context.register(name, {
+                        validate: (v, f) => {
+                            if (!(0, lodash_hasin_1.default)(f, name)) {
+                                return true;
+                            }
+                            if (!v)
+                                v = '';
+                            if (v.length <= 0 && required)
+                                return 'Este campo é obrigatório';
+                            if (v.length < 10 && required)
+                                return 'A data precisa seguir o padrão DD/MM/AAAA';
+                            if (minDt && !((0, dayjs_1.default)(minDt, 'DD/MM/YYYY').isSame((0, dayjs_1.default)(v, 'DD/MM/YYYY')) || (0, dayjs_1.default)(minDt, 'DD/MM/YYYY').isBefore((0, dayjs_1.default)(v, 'DD/MM/YYYY'))))
+                                return `A data tem que ser depois de ${minDt} e antes de ${maxDt}`;
+                            if (maxDt && !((0, dayjs_1.default)(maxDt, 'DD/MM/YYYY').isSame((0, dayjs_1.default)(v, 'DD/MM/YYYY')) || (0, dayjs_1.default)(maxDt, 'DD/MM/YYYY').isAfter((0, dayjs_1.default)(v, 'DD/MM/YYYY'))))
+                                return 'A data escolhida não é válida';
+                        },
+                        shouldUnregister: true,
+                    }), { fullWidth: true }))) }),
+                react_1.default.createElement(material_1.Typography, { sx: { color: '#a51c30', fontSize: 14, paddingLeft: 1 } }, (_b = (0, lodash_get_1.default)(context.formState.errors, name)) === null || _b === void 0 ? void 0 : _b.message)))));
+}
+exports.default = GenericDatePicker;

package/components/form/input/GenericFetchAutoComplete.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export default function GenericFetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch, required, defaultValue, route, onChange, xs, sm, watchValue, md, disabled, }: {
+    name: string;
+    url: string;
+    title: string;
+    watchValue?: {
+        id: number | string;
+        label: string;
+    };
+    customLoadingText?: string;
+    defaultValue?: number;
+    required?: boolean;
+    route?: string;
+    onChange?: (id: number | undefined) => void;
+    shouldRefetch?: boolean;
+    xs?: number;
+    sm?: number;
+    md?: number;
+    disabled?: boolean;
+}): JSX.Element;

package/components/form/input/GenericFetchAutoComplete.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const react_1 = __importStar(require("react"));
+const auth_1 = require("../../../context/auth");
+const react_hook_form_1 = require("react-hook-form");
+let useDefault = true;
+function GenericFetchAutoComplete({ name, url, title, customLoadingText, shouldRefetch = true, required = false, defaultValue, route = '', onChange = () => { }, xs = 12, sm, watchValue, md, disabled = false, }) {
+    const context = (0, react_hook_form_1.useFormContext)();
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [list, setList] = (0, react_1.useState)([]);
+    const [loadingText, setLoadingText] = (0, react_1.useState)('Carregando...');
+    const [dValue, setDValue] = (0, react_1.useState)(null);
+    const [value, setValue] = (0, react_1.useState)(null);
+    const { user } = (0, react_1.useContext)(auth_1.AuthContext);
+    (0, react_1.useEffect)(() => {
+        if (defaultValue) {
+            fetch(url, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${user === null || user === void 0 ? void 0 : user.token}`,
+                },
+            }).then((res) => {
+                if (res.ok) {
+                    console.log('llll');
+                    res.json().then((j) => {
+                        let value = (0, lodash_get_1.default)(j, route, j).filter((x) => x.id === defaultValue);
+                        if (value.length > 0) {
+                            setList((0, lodash_get_1.default)(j, route, j));
+                            setLoading(false);
+                            context.setValue(name, defaultValue);
+                            setDValue(value[0]);
+                        }
+                        else {
+                            setLoadingText('Erro ao carregar dados. Valor inválido');
+                        }
+                    });
+                }
+                else {
+                    setLoadingText('Erro ao carregar dados');
+                }
+            });
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (watchValue && useDefault) {
+            setValue(watchValue);
+            context.setValue(name, watchValue.id);
+            onChange(watchValue.id);
+        }
+    }, [watchValue]);
+    function onFocus() {
+        if ((defaultValue || !shouldRefetch) && list.length > 0)
+            return;
+        setLoading(true);
+        setList([]);
+        customLoadingText && setLoadingText(customLoadingText);
+        fetch(url, {
+            method: 'GET',
+            headers: {
+                Authorization: `Bearer ${user === null || user === void 0 ? void 0 : user.token}`,
+            },
+        }).then((res) => {
+            if (res.ok) {
+                res.json().then((j) => {
+                    setList((0, lodash_get_1.default)(j, route, j));
+                    setLoading(false);
+                });
+            }
+            else {
+                setLoadingText('Erro ao carregar dados');
+            }
+        });
+    }
+    function handleAutoCompleteChange(value) {
+        useDefault = false;
+        if (value) {
+            setValue(value);
+            context.setValue(name, value.id);
+            onChange(value.id);
+            return;
+        }
+        setValue(null);
+        context.setValue(name, '');
+        onChange(undefined);
+    }
+    if (defaultValue && list.length <= 0 && !dValue)
+        return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
+            react_1.default.createElement(material_1.TextField, { size: 'small', fullWidth: true, placeholder: loadingText, disabled: true })));
+    return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && react_1.default.createElement(material_1.InputLabel, { required: required }, title),
+        react_1.default.createElement("input", Object.assign({ type: 'text' }, context === null || context === void 0 ? void 0 : context.register(name, {
+            validate: (v, f) => {
+                if (v.length <= 0 && required)
+                    return 'Este campo é obrigatório';
+            },
+        }), { hidden: true })),
+        react_1.default.createElement(material_1.Autocomplete, { value: value, loading: loading, loadingText: loadingText, options: list, defaultValue: dValue, getOptionDisabled: (option) => { var _a; return (_a = option === null || option === void 0 ? void 0 : option.disabled) !== null && _a !== void 0 ? _a : false; }, isOptionEqualToValue: (op, value) => op.id === value.id, onChange: (e, v) => handleAutoCompleteChange(v), renderInput: (params) => {
+                var _a;
+                return (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { size: 'small', fullWidth: true, placeholder: title, onFocus: onFocus, error: (0, lodash_get_1.default)(context.formState.errors, name) ? true : false, helperText: (_a = (0, lodash_get_1.default)(context.formState.errors, name)) === null || _a === void 0 ? void 0 : _a.message })));
+            }, sx: {
+                bgcolor: 'white',
+            }, size: 'small', fullWidth: true, disabled: disabled })));
+}
+exports.default = GenericFetchAutoComplete;

package/components/form/input/GenericInput.d.ts

@@ -1,16 +1,19 @@
-import { TextFieldProps } from '@mui/material';
 import React from 'react';
-type GenericInputProps = {
-    type?: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'number' | 'rg' | 'password' | 'cep' | 'sei';
+export declare function Input({ type, numberMask, xs, sm, inputMinLength, inputMaxLength, defaultValue, md, disabled, watchValue, ...props }: {
+    type: 'cnpj' | 'cpf' | 'input' | 'email' | 'cpf_cnpj' | 'phone' | 'input' | 'number' | 'rg' | 'password' | 'cep' | 'sei';
+    name: string;
+    watchValue?: string;
     title?: string;
+    required?: boolean;
     numberMask?: string;
     customPlaceholder?: string;
+    defaultValue?: string;
     inputMinLength?: number;
     inputMaxLength?: number;
     xs?: number;
     sm?: number;
     md?: number;
-    helperText?: string;
-} & Omit<TextFieldProps, 'type'>;
-declare const _default: React.NamedExoticComponent<GenericInputProps>;
+    disabled?: boolean;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Input>;
 export default _default;

package/components/form/input/GenericInput.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -14,36 +37,132 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
 const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const react_1 = __importStar(require("react"));
 const MaskInput_1 = __importDefault(require("./MaskInput"));
-const GenericInput = (_a) => {
-    var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 1, inputMaxLength = 255, defaultValue = '', md, disabled = false, title, customPlaceholder, helperText } = _a, inputProps = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "defaultValue", "md", "disabled", "title", "customPlaceholder", "helperText"]);
-    const renderInputField = () => {
-        const commonProps = Object.assign({ variant: 'outlined', fullWidth: true, placeholder: customPlaceholder || title, defaultValue,
-            disabled,
-            helperText, sx: { backgroundColor: 'white' } }, inputProps);
-        const masks = {
-            number: numberMask,
-            cep: '00000-000',
-            phone: '(00) [#]0000-0000',
-            sei: '00000-00000000/0000-00',
-            cpf_cnpj: '000.000.000-00[0]',
-            cpf: '000.000.000-00',
-            cnpj: '00.000.000/0000-00',
-            rg: '00000[000000]',
+const react_hook_form_1 = require("react-hook-form");
+function Input(_a) {
+    var { type = 'input', numberMask = '000000000000000', xs = 12, sm, inputMinLength = 1, inputMaxLength = 255, defaultValue = '', md, disabled = false, watchValue } = _a, props = __rest(_a, ["type", "numberMask", "xs", "sm", "inputMinLength", "inputMaxLength", "defaultValue", "md", "disabled", "watchValue"]);
+    const methods = (0, react_hook_form_1.useFormContext)();
+    (0, react_1.useEffect)(() => {
+        if (watchValue !== undefined)
+            methods.setValue(props.name, watchValue);
+    }, [watchValue]);
+    const chooseInput = () => {
+        const inputConfig = {
+            fullWidth: true,
+            size: 'small',
+            placeholder: props.customPlaceholder ? props.customPlaceholder : props.title,
         };
-        if (['input', 'email', 'password'].includes(type)) {
-            return react_1.default.createElement(material_1.TextField, Object.assign({}, commonProps, { type: type === 'password' ? 'password' : 'text' }));
+        const name = props.name;
+        const errorData = (0, lodash_get_1.default)(methods === null || methods === void 0 ? void 0 : methods.formState.errors, props.name);
+        const helperText = errorData === null || errorData === void 0 ? void 0 : errorData.message;
+        const error = errorData ? true : false;
+        const formConfig = Object.assign(Object.assign(Object.assign(Object.assign({}, methods === null || methods === void 0 ? void 0 : methods.register(name, {
+            validate: (v, f) => {
+                const value = v !== null && v !== void 0 ? v : '';
+                if (value.length <= 0 && props.required)
+                    return 'Este campo é obrigatório';
+                if (type === 'cnpj') {
+                    if (value.length < 18 && props.required)
+                        return 'O CNPJ precisa ter no mínimo 14 dígitos';
+                }
+                //
+                else if (type === 'cpf') {
+                    if (value.length < 14 && props.required)
+                        return 'O CPF precisa ter no mínimo 11 dígitos';
+                } //
+                else if (type === 'sei') {
+                    if (value.length < 22 && props.required)
+                        return 'O Número SEI precisa ter no mínimo 19 dígitos';
+                }
+                //
+                else if (type === 'cep') {
+                    if (value.length < 9 && props.required)
+                        return 'O CPF precisa ter no mínimo 8 dígitos';
+                }
+                //
+                else if (type === 'input' || type === 'password' || type === 'number') {
+                    if (value.length > inputMaxLength)
+                        return `Limite máximo de ${inputMaxLength} caracteres`;
+                    if (value.length < inputMinLength && props.required)
+                        return `Limite mínimo de ${inputMinLength} caracteres`;
+                }
+                //
+                else if (type === 'email') {
+                    if (value.length > 50)
+                        return 'Limite máximo de 50 caracteres';
+                    if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) && props.required)
+                        return 'O e-mail inserido não é valido';
+                }
+                //
+                else if (type === 'cpf_cnpj') {
+                    if ((value.length < 14 || (value.length > 14 && value.length < 18)) && props.required)
+                        return 'O CPF/CNPJ precisa ter no mínimo 11/14 dígitos';
+                }
+                //
+                else if (type === 'phone') {
+                    if (value.length < 14 && props.required)
+                        return 'O número precisa ter pelo menos 10 dígitos';
+                }
+            },
+        })), { error,
+            helperText }), inputConfig), { sx: {
+                backgroundColor: 'white',
+            } });
+        switch (type) {
+            case 'input':
+            case 'email':
+                return react_1.default.createElement(material_1.TextField, Object.assign({}, formConfig, { defaultValue: defaultValue, disabled: disabled }));
+            case 'password':
+                return react_1.default.createElement(material_1.TextField, Object.assign({}, formConfig, { type: 'password', disabled: disabled }));
+            case 'number':
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                        mask: numberMask,
+                    }, watchValue: watchValue, disabled: disabled }));
+            case 'cep':
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                        mask: '00000-000',
+                    }, watchValue: watchValue, disabled: disabled }));
+            case 'phone':
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                        mask: '(00) [#]0000-0000',
+                        definitions: {
+                            '#': /^9$/,
+                        },
+                    }, watchValue: watchValue, disabled: disabled }));
+            case 'sei':
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                        mask: '00000-00000000/0000-00',
+                    }, watchValue: watchValue, disabled: disabled }));
+            case 'cpf_cnpj':
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                        mask: '000.000.000-00[0]',
+                    }, onMask: (value, setMask) => {
+                        if (value.length > 14)
+                            setMask('00.000.000/0000-00');
+                        else
+                            setMask('000.000.000-00[0]');
+                    }, watchValue: watchValue, disabled: disabled }));
+            case 'cpf':
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                        mask: '000.000.000-00',
+                    }, watchValue: watchValue, disabled: disabled }));
+            case 'cnpj':
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                        mask: '00.000.000/0000-00',
+                    }, watchValue: watchValue, disabled: disabled }));
+            case 'rg':
+                return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
+                        mask: '00000[000000]',
+                    }, watchValue: watchValue, disabled: disabled }));
         }
-        return (react_1.default.createElement(MaskInput_1.default, { formConfig: commonProps, maskProps: Object.assign({ mask: masks[type] }, (type === 'cpf_cnpj' && {
-                onMask: (value, setMask) => {
-                    setMask((value === null || value === void 0 ? void 0 : value.length) > 14 ? '00.000.000/0000-00' : '000.000.000-00[0]');
-                },
-            })) }));
     };
     return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
-        title && react_1.default.createElement(material_1.InputLabel, { htmlFor: inputProps.id || inputProps.name }, title),
-        renderInputField()));
-};
-exports.default = react_1.default.memo(GenericInput);
+        props.title && (react_1.default.createElement(material_1.InputLabel, { htmlFor: 'campo', required: props.required }, props.title)),
+        chooseInput()));
+}
+exports.Input = Input;
+exports.default = react_1.default.memo(Input);

package/components/form/input/GenericMaskInput.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export default function GenericMaskInput(props: {
+    formConfig: object;
+    defaultValue?: string;
+    maskProps: {
+        mask: string | RegExp;
+        definitions?: {
+            [key: string]: string | RegExp;
+        };
+    };
+    disabled?: boolean;
+    watchValue?: string;
+    onMask?: (value: string, setMask: React.Dispatch<React.SetStateAction<string>>) => void;
+}): JSX.Element;

package/components/form/input/GenericMaskInput.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const react_imask_1 = require("react-imask");
+const form_1 = require("../../../context/form");
+const react_hook_form_1 = require("react-hook-form");
+const TextMaskCustom = react_1.default.forwardRef(function TextMaskCustom(props, ref) {
+    const { onChange, maskProps, onMask, maskValue, setMaskValue, watchValue } = props, prop = __rest(props, ["onChange", "maskProps", "onMask", "maskValue", "setMaskValue", "watchValue"]);
+    const [mask, setMask] = (0, react_1.useState)(maskProps.mask);
+    delete prop.value;
+    const myRef = (0, react_1.useRef)(null);
+    const [myValue, setMyValue] = (0, react_1.useState)('');
+    const context = (0, react_hook_form_1.useFormContext)();
+    (0, react_1.useEffect)(() => {
+        if (watchValue) {
+            setMyValue(watchValue);
+        }
+    }, [watchValue]);
+    (0, react_1.useEffect)(() => {
+        context.setValue(prop.name, myRef.current.element.value);
+    }, [myValue]);
+    delete prop.watchValue;
+    return (react_1.default.createElement(react_imask_1.IMaskInput, Object.assign({}, prop, maskProps, { mask: mask, value: myValue, ref: myRef, inputRef: ref, onChange: (e) => { }, onAccept: (value, mask) => {
+            setMyValue(value);
+            mask.updateValue();
+            if (!onMask)
+                return;
+            onMask(value, setMask);
+        } })));
+});
+function GenericMaskInput(props) {
+    const context = (0, react_1.useContext)(form_1.FormContext);
+    const [maskValue, setMaskValue] = (0, react_1.useState)('');
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.TextField, Object.assign({}, props.formConfig, { onInput: (e) => {
+                const name = props.formConfig.name;
+                const value = e.target.value;
+                context.formSetValue(name, value);
+            }, InputProps: {
+                inputComponent: TextMaskCustom,
+                inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue, watchValue: props.watchValue },
+            }, disabled: props.disabled, fullWidth: true }))));
+}
+exports.default = GenericMaskInput;

package/components/form/input/GenericMultInput.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export default function MultInput({ name, required, title, customPlaceholder, defaultValue, xs, sm, watchValue, inputMinLength, inputMaxLength, md, ...props }: {
+    name: string;
+    title?: string;
+    watchValue?: string;
+    customPlaceholder?: string;
+    required?: boolean;
+    defaultValue?: string;
+    inputMinLength?: number;
+    inputMaxLength?: number;
+    xs?: number;
+    sm?: number;
+    md?: number;
+}): JSX.Element;

package/components/form/input/GenericMultInput.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+function MultInput(_a) {
+    var _b;
+    var { name, required = false, title, customPlaceholder, defaultValue = '', xs = 12, sm, watchValue = '', inputMinLength = 3, inputMaxLength = 255, md } = _a, props = __rest(_a, ["name", "required", "title", "customPlaceholder", "defaultValue", "xs", "sm", "watchValue", "inputMinLength", "inputMaxLength", "md"]);
+    const context = (0, react_hook_form_1.useFormContext)();
+    (0, react_1.useEffect)(() => {
+        context.setValue(name, watchValue);
+    }, [watchValue]);
+    return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
+        title && (react_1.default.createElement(InputLabel_1.default, { required: required, sx: { textTransform: 'capitalize' } }, title)),
+        react_1.default.createElement(material_1.TextField, Object.assign({ multiline: true, fullWidth: true, minRows: 3, defaultValue: defaultValue }, context.register(name, {
+            validate: (v, f) => {
+                if (required && v.length <= 0)
+                    return 'Este campo é obrigatório';
+                if (v.length > inputMaxLength)
+                    return `Limite máximo de ${inputMaxLength} caracteres`;
+                if (v.length < inputMinLength && required)
+                    return `Limite mínimo de ${inputMinLength} caracteres`;
+            },
+        }), { error: (0, lodash_get_1.default)(context.formState.errors, name) ? true : false, helperText: (_b = (0, lodash_get_1.default)(context.formState.errors, name)) === null || _b === void 0 ? void 0 : _b.message, sx: {
+                bgcolor: 'white',
+            }, placeholder: customPlaceholder ? customPlaceholder : title }))));
+}
+exports.default = MultInput;

package/index.d.ts

@@ -1,14 +1,16 @@
 import CheckBox from './components/form/checkbox/CheckBox';
 import CheckBoxWarning from './components/form/checkbox/CheckBoxWarning';
 import DatePicker from './components/form/date/DatePicker';
+import GenericDatePicker from './components/form/date/GenericDatePicker';
 import TimePicker from './components/form/date/TimePicker';
 import FileUpload from './components/form/file/FileUpload';
 import ActiveInput from './components/form/input/ActiveInput';
 import AutoComplete from './components/form/input/AutoComplete';
 import FetchAutoComplete from './components/form/input/FetchAutoComplete';
+import GenericFetchAutoComplete from './components/form/input/GenericFetchAutoComplete';
 import Input from './components/form/input/Input';
 import MaskInput from './components/form/input/MaskInput';
-import MultInput from './components/form/input/MultInput';
+import GenericMaskInput from './components/form/input/GenericMaskInput';
 import OtherCheckBox from './components/form/input/OtherCheckBox';
 import Stepper from './components/form/stepper/Stepper';
 import StepperBlock from './components/form/stepper/StepperBlock';
@@ -35,4 +37,4 @@ import { SspComponentsProvider } from './components/providers/SspComponentsProvi
 import Button from './components/utils/Bt';
 import Menu from './components/utils/CustomMenu';
 import GenericInput from './components/form/input/GenericInput';
-export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, GenericInput, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, KeycloakAuthProvider, CheckBoxAdditional, RequiredCheckBoxGroup, FixedAutoComplete, Category, Field, FieldLabel, File, DropFileUpload, MODAL, SspComponentsProvider, TabNavBar, Button, Menu, };
+export { CheckBox, CheckBoxWarning, DatePicker, GenericDatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, GenericFetchAutoComplete, Input, GenericInput, MaskInput, GenericMaskInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, KeycloakAuthProvider, CheckBoxAdditional, RequiredCheckBoxGroup, FixedAutoComplete, Category, Field, FieldLabel, File, DropFileUpload, MODAL, SspComponentsProvider, TabNavBar, Button, Menu, };

package/index.js

@@ -3,13 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = exports.Button = exports.TabNavBar = exports.SspComponentsProvider = exports.MODAL = exports.DropFileUpload = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.FixedAutoComplete = exports.RequiredCheckBoxGroup = exports.CheckBoxAdditional = exports.KeycloakAuthProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.GenericInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
+exports.Menu = exports.Button = exports.TabNavBar = exports.SspComponentsProvider = exports.MODAL = exports.DropFileUpload = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.FixedAutoComplete = exports.RequiredCheckBoxGroup = exports.CheckBoxAdditional = exports.KeycloakAuthProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.GenericMaskInput = exports.MaskInput = exports.GenericInput = exports.Input = exports.GenericFetchAutoComplete = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.GenericDatePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
 const CheckBox_1 = __importDefault(require("./components/form/checkbox/CheckBox"));
 exports.CheckBox = CheckBox_1.default;
 const CheckBoxWarning_1 = __importDefault(require("./components/form/checkbox/CheckBoxWarning"));
 exports.CheckBoxWarning = CheckBoxWarning_1.default;
 const DatePicker_1 = __importDefault(require("./components/form/date/DatePicker"));
 exports.DatePicker = DatePicker_1.default;
+const GenericDatePicker_1 = __importDefault(require("./components/form/date/GenericDatePicker"));
+exports.GenericDatePicker = GenericDatePicker_1.default;
 const TimePicker_1 = __importDefault(require("./components/form/date/TimePicker"));
 exports.TimePicker = TimePicker_1.default;
 const FileUpload_1 = __importDefault(require("./components/form/file/FileUpload"));
@@ -20,12 +22,14 @@ const AutoComplete_1 = __importDefault(require("./components/form/input/AutoComp
 exports.AutoComplete = AutoComplete_1.default;
 const FetchAutoComplete_1 = __importDefault(require("./components/form/input/FetchAutoComplete"));
 exports.FetchAutoComplete = FetchAutoComplete_1.default;
+const GenericFetchAutoComplete_1 = __importDefault(require("./components/form/input/GenericFetchAutoComplete"));
+exports.GenericFetchAutoComplete = GenericFetchAutoComplete_1.default;
 const Input_1 = __importDefault(require("./components/form/input/Input"));
 exports.Input = Input_1.default;
 const MaskInput_1 = __importDefault(require("./components/form/input/MaskInput"));
 exports.MaskInput = MaskInput_1.default;
-const MultInput_1 = __importDefault(require("./components/form/input/MultInput"));
-exports.MultInput = MultInput_1.default;
+const GenericMaskInput_1 = __importDefault(require("./components/form/input/GenericMaskInput"));
+exports.GenericMaskInput = GenericMaskInput_1.default;
 const OtherCheckBox_1 = __importDefault(require("./components/form/input/OtherCheckBox"));
 exports.OtherCheckBox = OtherCheckBox_1.default;
 const Stepper_1 = __importDefault(require("./components/form/stepper/Stepper"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ssplib/react-components",
-    "version": "0.0.262",
+    "version": "0.0.263",
     "description": "SSP React Components",
     "main": "index.js",
     "author": "Pedro Henrique <sr.hudrick@gmail.com>",