@bluemarble/bm-components 0.0.8 → 0.0.9

package/dist/esm/index.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import React__default, { useRef, useState, useCallback, useEffect, memo, useMemo } from 'react';
-import { TableHead, TableRow, TableCell, TableSortLabel, Chip, Tooltip, IconButton, TextField, Paper, LinearProgress, TableContainer, Table, TableBody, TablePagination, Popover, Box as Box$2, Typography, Autocomplete, Button } from '@mui/material';
+import React__default, { memo, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { TableHead, TableRow, TableCell, TableSortLabel, Chip, Tooltip, IconButton, Paper, LinearProgress, TableContainer, Table, TableBody, TablePagination, Popover, Box as Box$2, Typography, Autocomplete as Autocomplete$1, TextField, Button, FormControl, Select as Select$1, InputLabel, FormControlLabel, Checkbox as Checkbox$1, Switch as Switch$1, FormLabel, RadioGroup, Radio as Radio$1 } from '@mui/material';
 import emStyled from '@emotion/styled';
 import '@emotion/react';
+import { useTable } from 'react-table';
+import { Field, useField } from 'formik';
 
 const GridHeader = ({ setOrder, setOrderBy, order, orderBy, titles = [], }) => {
     function onRequestSort(title) {
@@ -3834,6 +3836,227 @@ function __rest(s, e) {
     return t;
 }
 
+const CustomTableCell = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React__default.createElement(TableCell, Object.assign({}, props), children);
+};
+const Td = memo(CustomTableCell);
+
+const CustomTableRow = (props) => {
+    const { children, sx, striped = true, bordered = false, onSave, rowData } = props, rest = __rest(props, ["children", "sx", "striped", "bordered", "onSave", "rowData"]);
+    return (React__default.createElement(TableRow, Object.assign({ sx: Object.assign({ "&:nth-of-type(even)": { bgcolor: striped ? "action.selected" : "" } }, sx) }, rest), React__default.Children.map(children, (child) => React__default.cloneElement(child, {
+        bordered,
+        rowData,
+        rowIndex: props.index,
+        onSave,
+    }))));
+};
+const Tr = memo(CustomTableRow);
+
+const AutoCreatedRows = ({ tableData, columns, primaryKey, }) => {
+    return (React__default.createElement(React__default.Fragment, null, tableData.map((row) => (React__default.createElement(Tr, { key: row[primaryKey] }, columns.map((column) => {
+        const cellValue = column.transformer
+            ? column.transformer(row[column.name])
+            : row[column.name];
+        return React__default.createElement(Td, { key: column.name }, cellValue);
+    }))))));
+};
+
+const Grid = (props) => {
+    const { columnTitles, isLoading, footer, noFilterButtons = false, selectedFilters, customButtons, setSelectedFilters, defaultData, setTableData, updateFilters, tableData, rowOptions = [60, 100, 150], noPagination, primaryKey, } = props;
+    const [order, setOrder] = useState(undefined);
+    const [orderBy, setOrderBy] = useState("");
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(rowOptions[0]);
+    const [selectedTitle, setSelectedTitle] = useState(undefined);
+    const [selectedFilterValue, setSelectedFilterValue] = useState(undefined);
+    const [valuesToFilter, setValuesToFilter] = useState([]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [searchText, setSearchText] = useState("");
+    const [openSearch, setOpenSearch] = useState(false);
+    const searchAnchorEl = useRef(null);
+    const countRows = useMemo(() => {
+        if (searchText.length > 0) {
+            const array = handleFilterBySearch(searchText);
+            return array.length;
+        }
+        else {
+            return defaultData.length;
+        }
+    }, [searchText, tableData]);
+    const handleChangeRowsPerPage = ({ target, }) => {
+        setRowsPerPage(parseInt(target.value));
+        const maxPage = Math.floor(countRows / rowsPerPage);
+        if (page > maxPage)
+            setPage(maxPage);
+    };
+    function handleSort(data) {
+        const sortable = data.slice(0);
+        if (order === undefined)
+            return sortable;
+        sortable.sort((a, b) => {
+            const x = a[orderBy];
+            const y = b[orderBy];
+            return x < y ? -1 : x > y ? 1 : 0;
+        });
+        return order === "asc" ? sortable : sortable.reverse();
+    }
+    function handleAddFilter() {
+        const [column] = columnTitles.filter((item) => item.label === selectedTitle);
+        const newFilter = {
+            column: column.name,
+            value: selectedFilterValue || "",
+            transformer: column.transformer,
+        };
+        const filterAlreadyExists = selectedFilters.some((filter) => filter.column === column.name && filter.value === selectedFilterValue);
+        if (filterAlreadyExists)
+            return;
+        setSelectedFilters([...selectedFilters, newFilter]);
+    }
+    function handleCloseFilter(item) {
+        const filterToDelete = selectedFilters.find((filter) => filter.column === item.column && filter.value === item.value);
+        if (!filterToDelete)
+            return;
+        const filteredSelectedFilters = selectedFilters.filter((_, index) => selectedFilters.indexOf(filterToDelete) !== index);
+        setSelectedFilters([...filteredSelectedFilters]);
+    }
+    function handleFilterBySearch(text) {
+        const newArray = defaultData.filter((item) => {
+            for (const [, value] of Object.entries(item)) {
+                if (`${value}`.includes(text))
+                    return true;
+            }
+            return false;
+        });
+        return newArray;
+    }
+    useEffect(() => {
+        const maxPage = Math.floor(countRows / rowsPerPage);
+        if (page > maxPage)
+            setPage(maxPage - 1);
+    }, [countRows]);
+    useEffect(() => {
+        if (order) {
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            const sortedArray = handleSort(newArray);
+            const data = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(data);
+        }
+        else {
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            const data = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(data);
+        }
+    }, [defaultData]);
+    useEffect(() => {
+        const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+        const sortedArray = handleSort(newArray);
+        const paginatedArray = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+        setTableData(paginatedArray);
+    }, [order, orderBy]);
+    useEffect(() => {
+        if (order) {
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            const sortedArray = handleSort(newArray);
+            const dados = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(dados);
+        }
+        else {
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            const dados = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(dados);
+        }
+    }, [page, rowsPerPage]);
+    useEffect(() => {
+        setValuesToFilter([]);
+        setSelectedFilterValue(undefined);
+        if (selectedTitle) {
+            const values = [];
+            const [prop] = columnTitles.filter((item) => item.label === selectedTitle);
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            newArray.forEach((item) => {
+                const value = prop.transformer
+                    ? prop.transformer(getPropertyValue(item, prop.name))
+                    : String(getPropertyValue(item, prop.name));
+                if (!values.includes(value))
+                    values.push(value);
+            });
+            setValuesToFilter(values);
+        }
+    }, [selectedTitle]);
+    useEffect(() => {
+        if (order) {
+            const newArray = handleFilterBySearch(searchText);
+            const sortedArray = handleSort(newArray);
+            const dados = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(dados);
+        }
+        else {
+            const newArray = handleFilterBySearch(searchText);
+            const dados = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(dados);
+        }
+    }, [searchText]);
+    useEffect(() => {
+        updateFilters(selectedFilters);
+    }, [selectedFilters]);
+    return (React__default.createElement(Paper, null,
+        isLoading && React__default.createElement(LinearProgress, null),
+        React__default.createElement(FiltersBar, { setAnchorEl: setAnchorEl, setOpenSearch: setOpenSearch, searchAnchorEl: searchAnchorEl, noFilterButtons: noFilterButtons, selectedFilters: selectedFilters, customButtons: customButtons, handleCloseFilter: handleCloseFilter }),
+        React__default.createElement(TableContainer, null,
+            React__default.createElement(Table, { size: "small" },
+                React__default.createElement(GridHeader, { titles: columnTitles, order: order, orderBy: orderBy, setOrder: setOrder, setOrderBy: setOrderBy }),
+                React__default.createElement(TableBody, null,
+                    props.children ? (props.children) : primaryKey ? (React__default.createElement(AutoCreatedRows, { tableData: tableData, columns: columnTitles, primaryKey: primaryKey })) : null,
+                    footer))),
+        !noPagination && (React__default.createElement(TablePagination, { page: page, component: "div", rowsPerPage: rowsPerPage, labelRowsPerPage: "Linhas por p\u00E1gina", rowsPerPageOptions: rowOptions, count: countRows, labelDisplayedRows: ({ page }) => `${page + 1} de ${Math.floor(countRows / rowsPerPage) + 1}`, onPageChange: (_, newPage) => {
+                setPage(newPage);
+            }, onRowsPerPageChange: handleChangeRowsPerPage })),
+        React__default.createElement(Popover, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
+                vertical: "top",
+                horizontal: "right",
+            }, transformOrigin: {
+                vertical: "top",
+                horizontal: "right",
+            } },
+            React__default.createElement(Box$2, { sx: { minWidth: 300, padding: 2 } },
+                React__default.createElement(Typography, { fontWeight: "bold", variant: "body2" }, "Filtrar por:"),
+                React__default.createElement(Autocomplete$1, { value: selectedTitle || "", onChange: ({ target }) => {
+                        !target.innerHTML.includes("path")
+                            ? setSelectedTitle(target.innerHTML)
+                            : setSelectedTitle(undefined);
+                    }, options: columnTitles.map((title) => title.label), renderInput: (params) => (React__default.createElement(TextField, Object.assign({ variant: "standard", margin: "dense" }, params, { label: "Coluna" }))) }),
+                React__default.createElement(Autocomplete$1, { value: selectedFilterValue || "", onChange: ({ target }) => {
+                        !target.innerHTML.includes("path")
+                            ? setSelectedFilterValue(target.innerHTML)
+                            : setSelectedFilterValue(undefined);
+                    }, disabled: valuesToFilter.length < 1, options: valuesToFilter.map((title) => title), renderInput: (params) => (React__default.createElement(TextField, Object.assign({ variant: "standard", margin: "dense" }, params, { label: "Valor" }))) }),
+                React__default.createElement(Box$2, { sx: { py: 1 } }),
+                React__default.createElement(Button, { disabled: !selectedFilterValue, onClick: handleAddFilter, fullWidth: true }, "Adicionar filtro"))),
+        React__default.createElement(Popover, { anchorEl: searchAnchorEl.current, open: openSearch, onClose: () => setOpenSearch(false), anchorOrigin: {
+                vertical: "top",
+                horizontal: "left",
+            }, transformOrigin: {
+                vertical: "top",
+                horizontal: "left",
+            } },
+            React__default.createElement(Box$2, { sx: {
+                    minWidth: 300,
+                    px: 2,
+                    pb: 1,
+                    display: "grid",
+                    gridTemplateColumns: "1fr 30px",
+                    alignItems: "flex-end",
+                } },
+                React__default.createElement(TextField, { variant: "standard", margin: "dense", label: "Buscar", value: searchText, onChange: ({ currentTarget }) => setSearchText(currentTarget.value) }),
+                React__default.createElement(Box$2, null,
+                    React__default.createElement(IconButton, { onClick: () => {
+                            setSearchText("");
+                            setOpenSearch(false);
+                        } },
+                        React__default.createElement(MdClose, { size: 8 * 3 })))))));
+};
+
 var moment$1 = {exports: {}};
 
 (function (module, exports) {
@@ -9517,6 +9740,48 @@ var moment$1 = {exports: {}};
 
 var moment = moment$1.exports;
 
+const DefaultInput = (allProps) => {
+    var _a;
+    const { TextFieldProps, onSave, name, onUpdateValue, rowData, type = "text", fullWidth = true, isEditing, formatInputDefautvalue, setIsEditing, handleCancelEditing, } = allProps;
+    const formatDefaultValue = (value) => {
+        if (formatInputDefautvalue)
+            return formatInputDefautvalue(value);
+        switch (type) {
+            case "date":
+                return moment(value).format("YYYY-MM-DD");
+            case "datetime-local":
+                return moment(value).format("YYYY-MM-DDTHH:mm:ss");
+            default:
+                return String(value);
+        }
+    };
+    const handleSave = (event) => {
+        var _a, _b, _c;
+        onUpdateValue(String((_a = event.target) === null || _a === void 0 ? void 0 : _a.value));
+        setIsEditing(false);
+        const response = {
+            name,
+            event,
+            value: (_b = event.target) === null || _b === void 0 ? void 0 : _b.value,
+            data: Object.assign(Object.assign({}, rowData), { [name]: (_c = event.target) === null || _c === void 0 ? void 0 : _c.value }),
+        };
+        onSave(response);
+    };
+    const onKeyDown = (ev) => {
+        if (ev.code === "Enter")
+            handleSave(ev);
+        if (ev.code === "Escape")
+            handleCancelEditing();
+    };
+    return (React__default.createElement(TextField, Object.assign({ name: name, focused: isEditing, onBlur: (ev) => handleSave(ev), autoFocus: true, type: type, size: "small", defaultValue: formatDefaultValue(rowData === null || rowData === void 0 ? void 0 : rowData[name]), sx: Object.assign({ width: fullWidth ? "100%" : "intial" }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.sx), inputProps: {
+            style: {
+                paddingBottom: 6,
+                paddingTop: 6,
+            },
+            onKeyDown,
+        }, InputProps: Object.assign(Object.assign({}, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), { sx: Object.assign({ fontSize: 14, pl: 0.2 }, (_a = TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx) }) }, TextFieldProps)));
+};
+
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -12611,7 +12876,7 @@ IMask.HTMLContenteditableMaskElement = HTMLContenteditableMaskElement;
 var _excluded$2 = ["mask"];
 /** Listens to element events and controls changes between element and {@link Masked} */
 
-var InputMask$1 = /*#__PURE__*/function () {
+var InputMask$2 = /*#__PURE__*/function () {
   /**
     View element
     @readonly
@@ -13016,7 +13281,7 @@ var InputMask$1 = /*#__PURE__*/function () {
 
   return InputMask;
 }();
-IMask.InputMask = InputMask$1;
+IMask.InputMask = InputMask$2;
 
 /** Pattern which validates enum values */
 
@@ -14442,30 +14707,9 @@ function useIMask(opts) {
   };
 }
 
-const CustomTableCell = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return React__default.createElement(TableCell, Object.assign({}, props), children);
-};
-const EditableTableCell = (allProps) => {
-    const { TextFieldProps, onSave, onCancel, name, data, mask, fullWidth = true, formatCellValue = (value) => value, formatInputDefautvalue } = allProps, props = __rest(allProps, ["TextFieldProps", "onSave", "onCancel", "name", "data", "mask", "fullWidth", "formatCellValue", "formatInputDefautvalue"]);
-    const [isEditing, setIsEditing] = useState(false);
-    const [value, setValue] = useState(data === null || data === void 0 ? void 0 : data[name]);
-    const handleCancelEditing = () => {
-        setIsEditing(false);
-        if (onCancel)
-            onCancel();
-    };
-    return (React__default.createElement(TableCell, Object.assign({}, props, { sx: Object.assign(Object.assign({}, props.sx), { p: isEditing ? 0 : "intial" }), onDoubleClick: () => setIsEditing(true) }), isEditing ? (React__default.createElement(React__default.Fragment, null, mask ? (React__default.createElement(InputMask, Object.assign({}, allProps, { mask: mask, isEditing: isEditing, setIsEditing: setIsEditing, onSave: (props) => {
-            setValue(props.value);
-            onSave(props);
-        }, handleCancelEditing: handleCancelEditing, formatInputDefautvalue: formatInputDefautvalue }))) : (React__default.createElement(DefaultInput, Object.assign({}, allProps, { onUpdateValue: (newValue) => {
-            setValue(newValue);
-        }, mask: mask, isEditing: isEditing, handleCancelEditing: handleCancelEditing, setIsEditing: setIsEditing, formatInputDefautvalue: formatInputDefautvalue }))))) : (React__default.createElement(React__default.Fragment, null, formatCellValue(value)))));
-};
-const Td = memo(CustomTableCell);
-const InputMask = (allProps) => {
+const InputMask$1 = (allProps) => {
     var _a;
-    const { TextFieldProps, onSave, name, data, mask, fullWidth = true, isEditing, handleCancelEditing, setIsEditing, } = allProps;
+    const { TextFieldProps, onSave, name, rowData, mask, fullWidth = true, isEditing, handleCancelEditing, setIsEditing, } = allProps;
     const { ref, unmaskedValue, setValue } = useIMask(mask);
     const handleSave = (event) => {
         var _a, _b, _c;
@@ -14476,7 +14720,7 @@ const InputMask = (allProps) => {
             event,
             value: (_b = event.target) === null || _b === void 0 ? void 0 : _b.value,
             unmaskedValue,
-            data: Object.assign(Object.assign({}, data), { [name]: (_c = event.target) === null || _c === void 0 ? void 0 : _c.value }),
+            data: Object.assign(Object.assign({}, rowData), { [name]: (_c = event.target) === null || _c === void 0 ? void 0 : _c.value }),
         };
         onSave(response);
     };
@@ -14487,9 +14731,9 @@ const InputMask = (allProps) => {
             handleCancelEditing();
     };
     useEffect(() => {
-        if (data === null || data === void 0 ? void 0 : data[name])
-            setValue(String(data === null || data === void 0 ? void 0 : data[name]));
-    }, [data === null || data === void 0 ? void 0 : data[name]]);
+        if (rowData === null || rowData === void 0 ? void 0 : rowData[name])
+            setValue(String(rowData === null || rowData === void 0 ? void 0 : rowData[name]));
+    }, [rowData === null || rowData === void 0 ? void 0 : rowData[name]]);
     return (React__default.createElement(TextField, Object.assign({ inputRef: ref, name: name, focused: isEditing, onBlur: (ev) => handleSave(ev), autoFocus: true, size: "small", sx: Object.assign({ width: fullWidth ? "100%" : "intial" }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.sx), inputProps: {
             style: {
                 paddingBottom: 6,
@@ -14497,258 +14741,215 @@ const InputMask = (allProps) => {
             },
             onKeyDown,
         }, InputProps: Object.assign(Object.assign({}, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), { sx: Object.assign({ fontSize: 14, pl: 0.2 }, (_a = TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx) }) }, TextFieldProps)));
-};
-const DefaultInput = (allProps) => {
-    var _a;
-    const { TextFieldProps, onSave, name, onUpdateValue, data, type = "text", fullWidth = true, isEditing, formatInputDefautvalue, setIsEditing, handleCancelEditing, } = allProps;
-    const formatDefaultValue = (value) => {
-        if (formatInputDefautvalue)
-            return formatInputDefautvalue(value);
-        switch (type) {
-            case "date":
-                return moment(value).format("YYYY-MM-DD");
-            case "datetime-local":
-                return moment(value).format("YYYY-MM-DDTHH:mm:ss");
-            default:
-                return String(value);
-        }
-    };
-    const handleSave = (event) => {
-        var _a, _b, _c;
-        onUpdateValue(String((_a = event.target) === null || _a === void 0 ? void 0 : _a.value));
+};
+
+const EditableTableCell = (allProps) => {
+    const { TextFieldProps, onSave = () => { }, onCancel, name, rowData = {}, mask, fullWidth = true, formatCellValue = (value) => value, formatInputDefautvalue, bordered, type, rowIndex } = allProps, props = __rest(allProps, ["TextFieldProps", "onSave", "onCancel", "name", "rowData", "mask", "fullWidth", "formatCellValue", "formatInputDefautvalue", "bordered", "type", "rowIndex"]);
+    const [isEditing, setIsEditing] = useState(false);
+    const [value, setValue] = useState(rowData === null || rowData === void 0 ? void 0 : rowData[name]);
+    const handleCancelEditing = () => {
         setIsEditing(false);
-        const response = {
-            name,
-            event,
-            value: (_b = event.target) === null || _b === void 0 ? void 0 : _b.value,
-            data: Object.assign(Object.assign({}, data), { [name]: (_c = event.target) === null || _c === void 0 ? void 0 : _c.value }),
-        };
-        onSave(response);
-    };
-    const onKeyDown = (ev) => {
-        if (ev.code === "Enter")
-            handleSave(ev);
-        if (ev.code === "Escape")
-            handleCancelEditing();
+        if (onCancel)
+            onCancel();
     };
-    return (React__default.createElement(TextField, Object.assign({ name: name, focused: isEditing, onBlur: (ev) => handleSave(ev), autoFocus: true, type: type, size: "small", defaultValue: formatDefaultValue(data === null || data === void 0 ? void 0 : data[name]), sx: Object.assign({ width: fullWidth ? "100%" : "intial" }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.sx), inputProps: {
-            style: {
-                paddingBottom: 6,
-                paddingTop: 6,
-            },
-            onKeyDown,
-        }, InputProps: Object.assign(Object.assign({}, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), { sx: Object.assign({ fontSize: 14, pl: 0.2 }, (_a = TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx) }) }, TextFieldProps)));
+    return (React__default.createElement(TableCell, Object.assign({}, props, { sx: Object.assign(Object.assign({}, props.sx), { p: isEditing ? 0 : "intial", border: bordered ? "1px solid" : "initial", borderColor: "divider" }), onDoubleClick: () => setIsEditing(true) }), isEditing ? (React__default.createElement(React__default.Fragment, null, mask ? (React__default.createElement(InputMask$1, { mask: mask, isEditing: isEditing, setIsEditing: setIsEditing, name: name, rowData: rowData, onSave: (props) => {
+            setValue(props.value);
+            onSave(props);
+        }, handleCancelEditing: handleCancelEditing, formatInputDefautvalue: formatInputDefautvalue })) : (React__default.createElement(DefaultInput, { onUpdateValue: (newValue) => {
+            setValue(newValue);
+        }, isEditing: isEditing, name: name, rowData: rowData, onSave: onSave, handleCancelEditing: handleCancelEditing, setIsEditing: setIsEditing, formatInputDefautvalue: formatInputDefautvalue, type: type })))) : (React__default.createElement(React__default.Fragment, null, formatCellValue(value)))));
 };
 
-const CustomTableRow = (props) => {
-    const { children, sx, striped = true } = props, rest = __rest(props, ["children", "sx", "striped"]);
-    return (React__default.createElement(TableRow, Object.assign({ sx: Object.assign({ "&:nth-of-type(even)": { bgcolor: striped ? "action.selected" : "" } }, sx) }, rest), children));
-};
-const Tr = memo(CustomTableRow);
+function GridV2({ columns, data, }) {
+    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
+    return (React__default.createElement("table", Object.assign({}, getTableProps()),
+        React__default.createElement("thead", null, headerGroups.map((headerGroup) => (React__default.createElement("tr", Object.assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map((column) => (React__default.createElement("th", Object.assign({}, column.getHeaderProps()), column.render("Header")))))))),
+        React__default.createElement("tbody", Object.assign({}, getTableBodyProps()), rows.map((row, i) => {
+            prepareRow(row);
+            return (React__default.createElement("tr", Object.assign({}, row.getRowProps()), row.cells.map((cell) => {
+                return React__default.createElement("td", Object.assign({}, cell.getCellProps()), cell.render("Cell"));
+            })));
+        }))));
+}
 
-const AutoCreatedRows = ({ tableData, columns, primaryKey, }) => {
-    return (React__default.createElement(React__default.Fragment, null, tableData.map((row) => (React__default.createElement(Tr, { key: row[primaryKey] }, columns.map((column) => {
-        const cellValue = column.transformer
-            ? column.transformer(row[column.name])
-            : row[column.name];
-        return React__default.createElement(Td, { key: column.name }, cellValue);
-    }))))));
+const Input = (_a) => {
+    var { withFormik = true } = _a, rest = __rest(_a, ["withFormik"]);
+    if (withFormik)
+        return React__default.createElement(FormikInput, Object.assign({}, rest));
+    else
+        return React__default.createElement(BaseInput$1, Object.assign({}, rest));
+};
+const BaseInput$1 = (props) => {
+    return React__default.createElement(TextField, Object.assign({ fullWidth: true }, props));
+};
+const FormikInput = (_a) => {
+    var { name } = _a, rest = __rest(_a, ["name"]);
+    return (React__default.createElement(Field, { name: name }, (_a) => {
+        var _b = _a.field, field = __rest(_b, ["value"]);
+        return (React__default.createElement(BaseInput$1, Object.assign({}, field, rest)));
+    }));
 };
 
-const Grid = (props) => {
-    const { columnTitles, isLoading, footer, noFilterButtons = false, selectedFilters, customButtons, setSelectedFilters, defaultData, setTableData, updateFilters, tableData, rowOptions = [60, 100, 150], noPagination, primaryKey, } = props;
-    const [order, setOrder] = useState(undefined);
-    const [orderBy, setOrderBy] = useState("");
-    const [page, setPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(rowOptions[0]);
-    const [selectedTitle, setSelectedTitle] = useState(undefined);
-    const [selectedFilterValue, setSelectedFilterValue] = useState(undefined);
-    const [valuesToFilter, setValuesToFilter] = useState([]);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [searchText, setSearchText] = useState("");
-    const [openSearch, setOpenSearch] = useState(false);
-    const searchAnchorEl = useRef(null);
-    const countRows = useMemo(() => {
-        if (searchText.length > 0) {
-            const array = handleFilterBySearch(searchText);
-            return array.length;
-        }
-        else {
-            return defaultData.length;
-        }
-    }, [searchText, tableData]);
-    const handleChangeRowsPerPage = ({ target, }) => {
-        setRowsPerPage(parseInt(target.value));
-        const maxPage = Math.floor(countRows / rowsPerPage);
-        if (page > maxPage)
-            setPage(maxPage);
-    };
-    function handleSort(data) {
-        const sortable = data.slice(0);
-        if (order === undefined)
-            return sortable;
-        sortable.sort((a, b) => {
-            const x = a[orderBy];
-            const y = b[orderBy];
-            return x < y ? -1 : x > y ? 1 : 0;
-        });
-        return order === "asc" ? sortable : sortable.reverse();
-    }
-    function handleAddFilter() {
-        const [column] = columnTitles.filter((item) => item.label === selectedTitle);
-        const newFilter = {
-            column: column.name,
-            value: selectedFilterValue || "",
-            transformer: column.transformer,
-        };
-        const filterAlreadyExists = selectedFilters.some((filter) => filter.column === column.name && filter.value === selectedFilterValue);
-        if (filterAlreadyExists)
-            return;
-        setSelectedFilters([...selectedFilters, newFilter]);
-    }
-    function handleCloseFilter(item) {
-        const filterToDelete = selectedFilters.find((filter) => filter.column === item.column && filter.value === item.value);
-        if (!filterToDelete)
-            return;
-        const filteredSelectedFilters = selectedFilters.filter((_, index) => selectedFilters.indexOf(filterToDelete) !== index);
-        setSelectedFilters([...filteredSelectedFilters]);
-    }
-    function handleFilterBySearch(text) {
-        const newArray = defaultData.filter((item) => {
-            for (const [, value] of Object.entries(item)) {
-                if (`${value}`.includes(text))
-                    return true;
-            }
-            return false;
-        });
-        return newArray;
-    }
-    useEffect(() => {
-        const maxPage = Math.floor(countRows / rowsPerPage);
-        if (page > maxPage)
-            setPage(maxPage - 1);
-    }, [countRows]);
-    useEffect(() => {
-        if (order) {
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            const sortedArray = handleSort(newArray);
-            const data = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(data);
-        }
-        else {
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            const data = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(data);
-        }
-    }, [defaultData]);
-    useEffect(() => {
-        const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-        const sortedArray = handleSort(newArray);
-        const paginatedArray = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-        setTableData(paginatedArray);
-    }, [order, orderBy]);
+function InputMask(_a) {
+    var { withFormik = true } = _a, rest = __rest(_a, ["withFormik"]);
+    if (withFormik)
+        return React__default.createElement(FormikInputMask, Object.assign({}, rest));
+    else
+        return React__default.createElement(BaseInputMask, Object.assign({}, rest));
+}
+const BaseInputMask = (_a) => {
+    var { mask, defaultValue, onChangeValue } = _a, rest = __rest(_a, ["mask", "defaultValue", "onChangeValue"]);
+    const { ref, value, unmaskedValue, setValue } = useIMask(mask);
     useEffect(() => {
-        if (order) {
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            const sortedArray = handleSort(newArray);
-            const dados = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(dados);
-        }
-        else {
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            const dados = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(dados);
-        }
-    }, [page, rowsPerPage]);
+        if (!value)
+            setValue(String(defaultValue));
+    }, [defaultValue]);
     useEffect(() => {
-        setValuesToFilter([]);
-        setSelectedFilterValue(undefined);
-        if (selectedTitle) {
-            const values = [];
-            const [prop] = columnTitles.filter((item) => item.label === selectedTitle);
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            newArray.forEach((item) => {
-                const value = prop.transformer
-                    ? prop.transformer(getPropertyValue(item, prop.name))
-                    : String(getPropertyValue(item, prop.name));
-                if (!values.includes(value))
-                    values.push(value);
-            });
-            setValuesToFilter(values);
-        }
-    }, [selectedTitle]);
+        if (onChangeValue)
+            onChangeValue(value, unmaskedValue);
+    }, [value]);
+    return React__default.createElement(BaseInput$1, Object.assign({ inputRef: ref }, rest));
+};
+function FormikInputMask(_a) {
+    var { mask, defaultValue, name } = _a, rest = __rest(_a, ["mask", "defaultValue", "name"]);
+    const { ref, value, unmaskedValue, setValue } = useIMask(mask);
     useEffect(() => {
-        if (order) {
-            const newArray = handleFilterBySearch(searchText);
-            const sortedArray = handleSort(newArray);
-            const dados = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(dados);
-        }
-        else {
-            const newArray = handleFilterBySearch(searchText);
-            const dados = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(dados);
+        if (!value && defaultValue)
+            setValue(String(defaultValue));
+    }, [defaultValue]);
+    const onChange = (setFieldValue) => {
+        setFieldValue(name, unmaskedValue);
+    };
+    return (React__default.createElement(Field, { name: name }, (_a) => {
+        var _b = _a.field, field = __rest(_b, ["value"]), { form: { setFieldValue } } = _a;
+        return (React__default.createElement(BaseInput$1, Object.assign({}, rest, field, { onChange: () => onChange(setFieldValue), inputRef: ref })));
+    }));
+}
+
+const CustomInputLabel = InputLabel;
+const Select = (_a) => {
+    var { withFormik = true } = _a, rest = __rest(_a, ["withFormik"]);
+    if (withFormik)
+        return React__default.createElement(FormikSelect, Object.assign({}, rest));
+    else
+        return React__default.createElement(BaseSelect, Object.assign({}, rest));
+};
+const BaseSelect = (_a) => {
+    var { name, label, children, FormControlProps, InputLabelProps } = _a, rest = __rest(_a, ["name", "label", "children", "FormControlProps", "InputLabelProps"]);
+    return (React__default.createElement(FormControl, Object.assign({ fullWidth: true }, FormControlProps),
+        React__default.createElement(CustomInputLabel, Object.assign({}, InputLabelProps), label),
+        React__default.createElement(Select$1, Object.assign({ name: name, inputProps: {
+                name,
+            }, label: label }, rest), children)));
+};
+const FormikSelect = (_a) => {
+    var { name, label, children, FormControlProps, InputLabelProps } = _a, rest = __rest(_a, ["name", "label", "children", "FormControlProps", "InputLabelProps"]);
+    const [_b, meta, { setValue }] = useField({ name }), field = __rest(_b, ["value"]);
+    const onChange = (_, { props: { value } }) => {
+        setValue(value);
+    };
+    return (React__default.createElement(FormControl, Object.assign({ fullWidth: true }, FormControlProps),
+        React__default.createElement(CustomInputLabel, Object.assign({}, InputLabelProps), label),
+        React__default.createElement(Select$1, Object.assign({ inputProps: {
+                name,
+            }, label: label }, rest, field, { onChange: onChange }), children)));
+};
+
+function Autocomplete(_a) {
+    var { withFormik = true, name, getOptionValue } = _a, rest = __rest(_a, ["withFormik", "name", "getOptionValue"]);
+    if (withFormik && !!getOptionValue) {
+        return (React__default.createElement(FormikAutocomplete, Object.assign({ name: name, getOptionValue: getOptionValue }, rest)));
+    }
+    else
+        return React__default.createElement(BaseInput, Object.assign({}, rest));
+}
+function BaseInput(props) {
+    return (React__default.createElement(Autocomplete$1, Object.assign({ fullWidth: true, renderInput: (params) => React__default.createElement(TextField, Object.assign({ label: props.label }, params)) }, props)));
+}
+function FormikAutocomplete(_a) {
+    var { getOptionValue } = _a, props = __rest(_a, ["getOptionValue"]);
+    const [_b, , { setValue }] = useField({ name: props.name }), field = __rest(_b, []);
+    const onChange = (_, newValue) => {
+        if (getOptionValue) {
+            setValue(getOptionValue(newValue));
         }
-    }, [searchText]);
-    useEffect(() => {
-        updateFilters(selectedFilters);
-    }, [selectedFilters]);
-    return (React__default.createElement(Paper, null,
-        isLoading && React__default.createElement(LinearProgress, null),
-        React__default.createElement(FiltersBar, { setAnchorEl: setAnchorEl, setOpenSearch: setOpenSearch, searchAnchorEl: searchAnchorEl, noFilterButtons: noFilterButtons, selectedFilters: selectedFilters, customButtons: customButtons, handleCloseFilter: handleCloseFilter }),
-        React__default.createElement(TableContainer, null,
-            React__default.createElement(Table, { size: "small" },
-                React__default.createElement(GridHeader, { titles: columnTitles, order: order, orderBy: orderBy, setOrder: setOrder, setOrderBy: setOrderBy }),
-                React__default.createElement(TableBody, null,
-                    props.children ? (props.children) : primaryKey ? (React__default.createElement(AutoCreatedRows, { tableData: tableData, columns: columnTitles, primaryKey: primaryKey })) : null,
-                    footer))),
-        !noPagination && (React__default.createElement(TablePagination, { page: page, component: "div", rowsPerPage: rowsPerPage, labelRowsPerPage: "Linhas por p\u00E1gina", rowsPerPageOptions: rowOptions, count: countRows, labelDisplayedRows: ({ page }) => `${page + 1} de ${Math.floor(countRows / rowsPerPage) + 1}`, onPageChange: (_, newPage) => {
-                setPage(newPage);
-            }, onRowsPerPageChange: handleChangeRowsPerPage })),
-        React__default.createElement(Popover, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
-                vertical: "top",
-                horizontal: "right",
-            }, transformOrigin: {
-                vertical: "top",
-                horizontal: "right",
-            } },
-            React__default.createElement(Box$2, { sx: { minWidth: 300, padding: 2 } },
-                React__default.createElement(Typography, { fontWeight: "bold", variant: "body1" }, "Filtrar por:"),
-                React__default.createElement(Autocomplete, { value: selectedTitle || "", onChange: ({ target }) => {
-                        !target.innerHTML.includes("path")
-                            ? setSelectedTitle(target.innerHTML)
-                            : setSelectedTitle(undefined);
-                    }, options: columnTitles.map((title) => title.label), renderInput: (params) => (React__default.createElement(TextField, Object.assign({ variant: "standard", margin: "dense" }, params, { label: "Coluna" }))) }),
-                React__default.createElement(Autocomplete, { value: selectedFilterValue || "", onChange: ({ target }) => {
-                        !target.innerHTML.includes("path")
-                            ? setSelectedFilterValue(target.innerHTML)
-                            : setSelectedFilterValue(undefined);
-                    }, disabled: valuesToFilter.length < 1, options: valuesToFilter.map((title) => title), renderInput: (params) => (React__default.createElement(TextField, Object.assign({ variant: "standard", margin: "dense" }, params, { label: "Valor" }))) }),
-                React__default.createElement(Box$2, { sx: { py: 1 } }),
-                React__default.createElement(Button, { disabled: !selectedFilterValue, onClick: handleAddFilter, fullWidth: true }, "Adicionar filtro"))),
-        React__default.createElement(Popover, { anchorEl: searchAnchorEl.current, open: openSearch, onClose: () => setOpenSearch(false), anchorOrigin: {
-                vertical: "top",
-                horizontal: "left",
-            }, transformOrigin: {
-                vertical: "top",
-                horizontal: "left",
-            } },
-            React__default.createElement(Box$2, { sx: {
-                    minWidth: 300,
-                    px: 2,
-                    pb: 1,
-                    display: "grid",
-                    gridTemplateColumns: "1fr 30px",
-                    alignItems: "flex-end",
-                } },
-                React__default.createElement(TextField, { variant: "standard", margin: "dense", label: "Buscar", value: searchText, onChange: ({ currentTarget }) => setSearchText(currentTarget.value) }),
-                React__default.createElement(Box$2, null,
-                    React__default.createElement(IconButton, { onClick: () => {
-                            setSearchText("");
-                            setOpenSearch(false);
-                        } },
-                        React__default.createElement(MdClose, { size: 8 * 3 })))))));
+        else
+            setValue(newValue);
+    };
+    return (React__default.createElement(Autocomplete$1, Object.assign({}, props, { renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, field, { label: props.label }))), onChange: onChange })));
+}
+
+const Checkbox = (_a) => {
+    var { withFormik = true, name } = _a, props = __rest(_a, ["withFormik", "name"]);
+    if (withFormik && name)
+        return React__default.createElement(FormikCheckbox, Object.assign({ name: name }, props));
+    else
+        return React__default.createElement(BaseCheckbox, Object.assign({}, props));
+};
+const BaseCheckbox = (_a) => {
+    var { label, FormControlLabelProps } = _a, props = __rest(_a, ["label", "FormControlLabelProps"]);
+    return (React__default.createElement(FormControlLabel, Object.assign({ label: label, control: React__default.createElement(Checkbox$1, Object.assign({}, props)) }, FormControlLabelProps)));
+};
+const FormikCheckbox = (_a) => {
+    var { label, name, FormControlLabelProps } = _a, props = __rest(_a, ["label", "name", "FormControlLabelProps"]);
+    const [_b, , { setValue }] = useField({
+        name,
+    }), field = __rest(_b, ["value", "onChange"]);
+    const onChange = (_, value) => {
+        setValue(value);
+    };
+    return (React__default.createElement(FormControlLabel, Object.assign({ label: label, onChange: onChange, control: React__default.createElement(Checkbox$1, Object.assign({}, props)) }, field, FormControlLabelProps)));
+};
+
+const Switch = (_a) => {
+    var { withFormik = true, name } = _a, props = __rest(_a, ["withFormik", "name"]);
+    if (withFormik && name)
+        return React__default.createElement(FormikSwitch, Object.assign({ name: name }, props));
+    else
+        return React__default.createElement(BaseSwitch, Object.assign({}, props));
+};
+const BaseSwitch = (_a) => {
+    var { label, FormControlLabelProps } = _a, props = __rest(_a, ["label", "FormControlLabelProps"]);
+    return (React__default.createElement(FormControlLabel, Object.assign({ label: label, control: React__default.createElement(Switch$1, Object.assign({}, props)) }, FormControlLabelProps)));
+};
+const FormikSwitch = (_a) => {
+    var { label, name, FormControlLabelProps } = _a, props = __rest(_a, ["label", "name", "FormControlLabelProps"]);
+    const [_b, , { setValue }] = useField({
+        name,
+    }), field = __rest(_b, ["value", "onChange"]);
+    const onChange = (_, value) => {
+        setValue(value);
+    };
+    return (React__default.createElement(FormControlLabel, Object.assign({ label: label, onChange: onChange, control: React__default.createElement(Switch$1, Object.assign({}, props)) }, field, FormControlLabelProps)));
+};
+
+const Radio = (_a) => {
+    var { name, withFormik = true } = _a, rest = __rest(_a, ["name", "withFormik"]);
+    if (withFormik && name)
+        return React__default.createElement(FormikRadio, Object.assign({ name: name }, rest));
+    else
+        return React__default.createElement(BaseRadio, Object.assign({}, rest));
+};
+const BaseRadio = (_a) => {
+    var { label, options } = _a, rest = __rest(_a, ["label", "options"]);
+    return (React__default.createElement(FormControl, null,
+        label && React__default.createElement(FormLabel, null, label),
+        React__default.createElement(RadioGroup, Object.assign({}, rest), options.map((option) => (React__default.createElement(FormControlLabel, { key: String(option.value), value: option.value, label: option.label, control: React__default.createElement(Radio$1, null) }))))));
+};
+const FormikRadio = (_a) => {
+    var { label, name, options } = _a, rest = __rest(_a, ["label", "name", "options"]);
+    const onChange = (setFieldValue, value) => {
+        setFieldValue(name, value);
+    };
+    return (React__default.createElement(Field, null, ({ form: { setFieldValue } }) => (React__default.createElement(FormControl, null,
+        label && React__default.createElement(FormLabel, null, label),
+        React__default.createElement(RadioGroup, Object.assign({ onChange: (_, value) => onChange(setFieldValue, value) }, rest), options.map((option) => (React__default.createElement(FormControlLabel, { key: String(option.value), value: option.value, label: option.label, control: React__default.createElement(Radio$1, null) }))))))));
+};
+
+const LargeButton = (_a) => {
+    var { loading, children } = _a, rest = __rest(_a, ["loading", "children"]);
+    return (React__default.createElement(Button, Object.assign({ variant: "contained", fullWidth: true, sx: Object.assign({ color: "#fff", fontWeight: "bold" }, rest.sx) }, rest), children));
 };
 
-export { EditableTableCell, Grid, Td, Tr, filterData };
+export { Autocomplete, Checkbox, EditableTableCell, Grid, GridV2, Input, InputMask, LargeButton, Radio, Select, Switch, Td, Tr, filterData };
 //# sourceMappingURL=index.js.map