@bluemarble/bm-components 0.0.71 → 0.0.72

package/dist/esm/index.js

@@ -5,35 +5,35 @@ import emStyled from '@emotion/styled';
 import '@emotion/react';
 import { Field, useField } from 'formik';
 
-const GridHeader = ({ setOrder, setOrderBy, order, orderBy, titles = [] }) => {
-    function onRequestSort(title) {
-        if (title !== orderBy) {
-            setOrderBy(title);
-            return setOrder('desc');
-        }
-        switch (order) {
-            case 'desc':
-                setOrder('asc');
-                setOrderBy(title);
-                break;
-            case 'asc':
-                setOrder(undefined);
-                setOrderBy('');
-                break;
-            default:
-                setOrder('desc');
-                setOrderBy(title);
-                break;
-        }
-    }
-    return (React__default.createElement(TableHead, null,
-        React__default.createElement(TableRow, { sx: { backgroundColor: 'background.default' } }, titles.map((title) => {
-            return (React__default.createElement(TableCell, { key: title.name, sortDirection: orderBy === title.name ? order : false, sx: Object.assign({ fontWeight: 'bold' }, title.sx) },
-                React__default.createElement(TableSortLabel, { onClick: () => onRequestSort(title.name), active: orderBy === title.name, direction: orderBy === title.name ? order : 'asc', sx: {
-                        position: 'relative',
-                        svg: { position: 'absolute', right: '27px' }
-                    } }, title.label)));
-        }))));
+const GridHeader = ({ setOrder, setOrderBy, order, orderBy, titles = [] }) => {
+    function onRequestSort(title) {
+        if (title !== orderBy) {
+            setOrderBy(title);
+            return setOrder('desc');
+        }
+        switch (order) {
+            case 'desc':
+                setOrder('asc');
+                setOrderBy(title);
+                break;
+            case 'asc':
+                setOrder(undefined);
+                setOrderBy('');
+                break;
+            default:
+                setOrder('desc');
+                setOrderBy(title);
+                break;
+        }
+    }
+    return (React__default.createElement(TableHead, null,
+        React__default.createElement(TableRow, { sx: { backgroundColor: 'background.default' } }, titles.map((title) => {
+            return (React__default.createElement(TableCell, { key: title.name, sortDirection: orderBy === title.name ? order : false, sx: Object.assign({ fontWeight: 'bold' }, title.sx) },
+                React__default.createElement(TableSortLabel, { onClick: () => onRequestSort(title.name), active: orderBy === title.name, direction: orderBy === title.name ? order : 'asc', sx: {
+                        position: 'relative',
+                        svg: { position: 'absolute', right: '27px' }
+                    } }, title.label)));
+        }))));
 };
 
 function _extends() {
@@ -3800,47 +3800,47 @@ function MdSearch (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"}},{"tag":"path","attr":{"d":"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}}]})(props);
 }
 
-const FiltersBar = ({ customButtons, selectedFilters, handleCloseFilter, noFilterButtons, searchAnchorEl, setOpenSearch, setAnchorEl, noFilters }) => {
-    return (React__default.createElement(Box$1, { sx: {
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            width: '100%'
-        } },
-        !noFilters && (React__default.createElement(Box$1, { sx: { pl: 1 } }, selectedFilters.map((item, index) => {
-            return (React__default.createElement(Chip, { key: index, label: item.value, onDelete: () => handleCloseFilter(item) }));
-        }))),
-        React__default.createElement(Box$1, { ref: searchAnchorEl, sx: { minHeight: 30, width: '100%' } },
-            customButtons,
-            !noFilterButtons && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Tooltip, { title: "Buscar" },
-                    React__default.createElement(IconButton, { onClick: () => setOpenSearch(true) },
-                        React__default.createElement(MdSearch, { size: 8 * 3 }))),
-                React__default.createElement(Tooltip, { title: "Filtrar" },
-                    React__default.createElement(IconButton, { sx: { position: 'relative' }, onClick: ({ currentTarget }) => setAnchorEl(currentTarget) },
-                        React__default.createElement(MdFilterList, { size: 8 * 3 }))))))));
+const FiltersBar = ({ customButtons, selectedFilters, handleCloseFilter, noFilterButtons, searchAnchorEl, setOpenSearch, setAnchorEl, noFilters }) => {
+    return (React__default.createElement(Box$1, { sx: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            width: '100%'
+        } },
+        !noFilters && (React__default.createElement(Box$1, { sx: { pl: 1 } }, selectedFilters.map((item, index) => {
+            return (React__default.createElement(Chip, { key: index, label: item.value, onDelete: () => handleCloseFilter(item) }));
+        }))),
+        React__default.createElement(Box$1, { ref: searchAnchorEl, sx: { minHeight: 30, width: '100%' } },
+            customButtons,
+            !noFilterButtons && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Tooltip, { title: "Buscar" },
+                    React__default.createElement(IconButton, { onClick: () => setOpenSearch(true) },
+                        React__default.createElement(MdSearch, { size: 8 * 3 }))),
+                React__default.createElement(Tooltip, { title: "Filtrar" },
+                    React__default.createElement(IconButton, { sx: { position: 'relative' }, onClick: ({ currentTarget }) => setAnchorEl(currentTarget) },
+                        React__default.createElement(MdFilterList, { size: 8 * 3 }))))))));
 };
 
-function filterData(filters, defaultData) {
-    if (filters.length === 0)
-        return defaultData.current;
-    const filteredArray = defaultData.current.slice(0).filter((item) => {
-        let satisfiedFilter = 0;
-        filters.forEach((sub) => {
-            let currentValue = getPropertyValue(item, sub.column);
-            if (sub.transformer)
-                currentValue = sub.transformer(currentValue);
-            if (String(currentValue) === String(sub.value))
-                satisfiedFilter += 1;
-        });
-        if (satisfiedFilter === filters.length)
-            return true;
-        return false;
-    });
-    return filteredArray;
-}
-function getPropertyValue(obj, property) {
-    return String(property.split('.').reduce((o, k) => o && o[k], obj));
+function filterData(filters, defaultData) {
+    if (filters.length === 0)
+        return defaultData.current;
+    const filteredArray = defaultData.current.slice(0).filter((item) => {
+        let satisfiedFilter = 0;
+        filters.forEach((sub) => {
+            let currentValue = getPropertyValue(item, sub.column);
+            if (sub.transformer)
+                currentValue = sub.transformer(currentValue);
+            if (String(currentValue) === String(sub.value))
+                satisfiedFilter += 1;
+        });
+        if (satisfiedFilter === filters.length)
+            return true;
+        return false;
+    });
+    return filteredArray;
+}
+function getPropertyValue(obj, property) {
+    return String(property.split('.').reduce((o, k) => o && o[k], obj));
 }
 
 /*! *****************************************************************************
@@ -3870,222 +3870,222 @@ 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 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 = undefined } = props, rest = __rest(props, ["children", "sx", "striped", "bordered"]);
-    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
-    }))));
-};
+const CustomTableRow = (props) => {
+    const { children, sx, striped = true, bordered = undefined } = props, rest = __rest(props, ["children", "sx", "striped", "bordered"]);
+    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
+    }))));
+};
 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 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, noFilters } = 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}`.toLocaleLowerCase().includes(text.toLocaleLowerCase()))
-                    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, noFilters: noFilters, 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 })))))));
+const Grid = (props) => {
+    const { columnTitles, isLoading, footer, noFilterButtons = false, selectedFilters, customButtons, setSelectedFilters, defaultData, setTableData, updateFilters, tableData, rowOptions = [60, 100, 150], noPagination, primaryKey, noFilters } = 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}`.toLocaleLowerCase().includes(text.toLocaleLowerCase()))
+                    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, noFilters: noFilters, 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: {}};
@@ -9771,46 +9771,46 @@ 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)));
+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) {
@@ -14738,533 +14738,533 @@ function useIMask(opts) {
   };
 }
 
-const InputMask$1 = (allProps) => {
-    var _a;
-    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;
-        setIsEditing(false);
-        setValue(String((_a = event.target) === null || _a === void 0 ? void 0 : _a.value));
-        const response = {
-            name,
-            event,
-            value: (_b = event.target) === null || _b === void 0 ? void 0 : _b.value,
-            unmaskedValue,
-            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();
-    };
-    useEffect(() => {
-        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,
-                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)));
+const InputMask$1 = (allProps) => {
+    var _a;
+    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;
+        setIsEditing(false);
+        setValue(String((_a = event.target) === null || _a === void 0 ? void 0 : _a.value));
+        const response = {
+            name,
+            event,
+            value: (_b = event.target) === null || _b === void 0 ? void 0 : _b.value,
+            unmaskedValue,
+            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();
+    };
+    useEffect(() => {
+        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,
+                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)));
 };
 
-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);
-        if (onCancel)
-            onCancel();
-    };
-    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 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);
+        if (onCancel)
+            onCancel();
+    };
+    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 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, shrink } = _a, rest = __rest(_a, ["name", "shrink"]);
-    return (React__default.createElement(Field, { name: name }, (_a) => {
-        var _b = _a.field, { value } = _b, field = __rest(_b, ["value"]);
-        return (React__default.createElement(BaseInput$1, Object.assign({ defaultValue: value }, field, rest, { InputLabelProps: Object.assign({ shrink }, rest.InputLabelProps) })));
-    }));
+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, shrink } = _a, rest = __rest(_a, ["name", "shrink"]);
+    return (React__default.createElement(Field, { name: name }, (_a) => {
+        var _b = _a.field, { value } = _b, field = __rest(_b, ["value"]);
+        return (React__default.createElement(BaseInput$1, Object.assign({ defaultValue: value }, field, rest, { InputLabelProps: Object.assign({ shrink }, rest.InputLabelProps) })));
+    }));
 };
 
-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 (!value)
-            setValue(String(defaultValue));
-    }, [defaultValue]);
-    useEffect(() => {
-        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);
-    const initialValue = useRef();
-    const formikSaveFunction = useRef();
-    useEffect(() => {
-        if (!value && defaultValue)
-            setValue(String(defaultValue));
-        else if (initialValue.current) {
-            setValue(String(initialValue.current));
-        }
-    }, [defaultValue]);
-    useEffect(() => {
-        if (formikSaveFunction.current)
-            formikSaveFunction.current(name, unmaskedValue);
-    }, [value]);
-    return (React__default.createElement(Field, { name: name }, (_a) => {
-        var _b = _a.field, { value } = _b, field = __rest(_b, ["value"]), { form: { setFieldValue } } = _a;
-        initialValue.current = value;
-        formikSaveFunction.current = setFieldValue;
-        return React__default.createElement(BaseInput$1, Object.assign({}, rest, field, { 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 }), { value } = _b, 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, { defaultValue: value, onChange: onChange }), children)));
+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 (!value)
+            setValue(String(defaultValue));
+    }, [defaultValue]);
+    useEffect(() => {
+        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);
+    const initialValue = useRef();
+    const formikSaveFunction = useRef();
+    useEffect(() => {
+        if (!value && defaultValue)
+            setValue(String(defaultValue));
+        else if (initialValue.current) {
+            setValue(String(initialValue.current));
+        }
+    }, [defaultValue]);
+    useEffect(() => {
+        if (formikSaveFunction.current)
+            formikSaveFunction.current(name, unmaskedValue);
+    }, [value]);
+    return (React__default.createElement(Field, { name: name }, (_a) => {
+        var _b = _a.field, { value } = _b, field = __rest(_b, ["value"]), { form: { setFieldValue } } = _a;
+        initialValue.current = value;
+        formikSaveFunction.current = setFieldValue;
+        return React__default.createElement(BaseInput$1, Object.assign({}, rest, field, { 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 }), { value } = _b, 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, { defaultValue: value, onChange: onChange }), children)));
 };
 
-function Autocomplete(_a) {
-    var { withFormik = true, name, getOptionValue } = _a, rest = __rest(_a, ["withFormik", "name", "getOptionValue"]);
-    if (withFormik) {
-        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, option } = _a, props = __rest(_a, ["getOptionValue", "option"]);
-    const [_b, , { setValue }] = useField({
-        name: props.name
-    }), { value: defaultValue } = _b, field = __rest(_b, ["value"]);
-    const defaultOption = useMemo(() => {
-        const key = option === null || option === void 0 ? void 0 : option.key;
-        if (key)
-            return props.options.find((option) => option[key] === defaultValue);
-        else
-            return props.options.find((option) => Object.values(option)[0] === defaultValue);
-    }, []);
-    const onChange = (_, newValue) => {
-        const value = option === null || option === void 0 ? void 0 : option.value;
-        if (getOptionValue) {
-            setValue(getOptionValue(newValue));
-        }
-        else if (value) {
-            setValue(newValue[value]);
-        }
-        else
-            setValue(newValue);
-    };
-    const getOptionLabel = (item) => {
-        if (props === null || props === void 0 ? void 0 : props.getOptionLabel)
-            return props.getOptionLabel(item);
-        else if (option === null || option === void 0 ? void 0 : option.label)
-            return String(item[option.label]);
-        return '[getOptionLabel] error';
-    };
-    const isOptionEqualToValue = (a, b) => {
-        const key = option === null || option === void 0 ? void 0 : option.key;
-        if (props === null || props === void 0 ? void 0 : props.isOptionEqualToValue)
-            return props.isOptionEqualToValue(a, b);
-        else if (key)
-            return a[key] === b[key];
-        return Object.values(a)[0] === Object.values(b)[0];
-    };
-    return (React__default.createElement(Autocomplete$1, Object.assign({ getOptionLabel: getOptionLabel, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, field, { label: props.label }))), defaultValue: defaultOption, onChange: onChange, isOptionEqualToValue: isOptionEqualToValue }, props)));
-}
-
-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
-    }), { value, onChange: unused } = _b, 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, { defaultChecked: value })) }, field, FormControlLabelProps)));
+function Autocomplete(_a) {
+    var { withFormik = true, name, getOptionValue } = _a, rest = __rest(_a, ["withFormik", "name", "getOptionValue"]);
+    if (withFormik) {
+        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, option } = _a, props = __rest(_a, ["getOptionValue", "option"]);
+    const [_b, , { setValue }] = useField({
+        name: props.name
+    }), { value: defaultValue } = _b, field = __rest(_b, ["value"]);
+    const defaultOption = useMemo(() => {
+        const key = option === null || option === void 0 ? void 0 : option.key;
+        if (key)
+            return props.options.find((option) => option[key] === defaultValue);
+        else
+            return props.options.find((option) => Object.values(option)[0] === defaultValue);
+    }, []);
+    const onChange = (_, newValue) => {
+        const value = option === null || option === void 0 ? void 0 : option.value;
+        if (getOptionValue) {
+            setValue(getOptionValue(newValue));
+        }
+        else if (value) {
+            setValue(newValue[value]);
+        }
+        else
+            setValue(newValue);
+    };
+    const getOptionLabel = (item) => {
+        if (props === null || props === void 0 ? void 0 : props.getOptionLabel)
+            return props.getOptionLabel(item);
+        else if (option === null || option === void 0 ? void 0 : option.label)
+            return String(item[option.label]);
+        return '[getOptionLabel] error';
+    };
+    const isOptionEqualToValue = (a, b) => {
+        const key = option === null || option === void 0 ? void 0 : option.key;
+        if (props === null || props === void 0 ? void 0 : props.isOptionEqualToValue)
+            return props.isOptionEqualToValue(a, b);
+        else if (key)
+            return a[key] === b[key];
+        return Object.values(a)[0] === Object.values(b)[0];
+    };
+    return (React__default.createElement(Autocomplete$1, Object.assign({ getOptionLabel: getOptionLabel, renderInput: (params) => (React__default.createElement(TextField, Object.assign({}, params, field, { label: props.label }))), defaultValue: defaultOption, onChange: onChange, isOptionEqualToValue: isOptionEqualToValue }, props)));
+}
+
+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
+    }), { value, onChange: unused } = _b, 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, { defaultChecked: value })) }, 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
-    }), { value, onChange: unused } = _b, 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, { defaultChecked: value })) }, 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
+    }), { value, onChange: unused } = _b, 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, { defaultChecked: value })) }, 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, ({ field: { value }, form: { setFieldValue } }) => (React__default.createElement(FormControl, null,
-        label && React__default.createElement(FormLabel, null, label),
-        React__default.createElement(RadioGroup, Object.assign({ defaultValue: value, 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 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, ({ field: { value }, form: { setFieldValue } }) => (React__default.createElement(FormControl, null,
+        label && React__default.createElement(FormLabel, null, label),
+        React__default.createElement(RadioGroup, Object.assign({ defaultValue: value, 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, CircularProgressProps, sx } = _a, rest = __rest(_a, ["loading", "children", "CircularProgressProps", "sx"]);
-    return (React__default.createElement(Button, Object.assign({ variant: "contained", fullWidth: true, sx: Object.assign({ color: '#fff', fontWeight: 'bold' }, sx), disabled: rest.disabled || loading }, rest), loading ? (React__default.createElement(CircularProgress, Object.assign({ size: 25, color: "inherit" }, CircularProgressProps))) : (children)));
+const LargeButton = (_a) => {
+    var { loading, children, CircularProgressProps, sx } = _a, rest = __rest(_a, ["loading", "children", "CircularProgressProps", "sx"]);
+    return (React__default.createElement(Button, Object.assign({ variant: "contained", fullWidth: true, sx: Object.assign({ color: '#fff', fontWeight: 'bold' }, sx), disabled: rest.disabled || loading }, rest), loading ? (React__default.createElement(CircularProgress, Object.assign({ size: 25, color: "inherit" }, CircularProgressProps))) : (children)));
 };
 
-function getTabProps(index) {
-    return {
-        id: `tab-${index}`,
-        'aria-controls': `tabpanel-${index}`
-    };
-}
-const TabPanel = (props) => {
-    const { children, value, index } = props, other = __rest(props, ["children", "value", "index"]);
-    return (React__default.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}` }, other), value === index && React__default.createElement(React__default.Fragment, null, children)));
+function getTabProps(index) {
+    return {
+        id: `tab-${index}`,
+        'aria-controls': `tabpanel-${index}`
+    };
+}
+const TabPanel = (props) => {
+    const { children, value, index } = props, other = __rest(props, ["children", "value", "index"]);
+    return (React__default.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}` }, other), value === index && React__default.createElement(React__default.Fragment, null, children)));
 };
 
-const GridPagination = ({ currentPage, totalNumberOfPages, onPageChange, rowsPerPageOptions, setRowsPerPage, rowsPerPage, dense }) => {
-    return (React__default.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%", py: dense ? 0.5 : 1 },
-        React__default.createElement(Box$2, null),
-        React__default.createElement(Stack, { direction: "row", alignItems: "center" },
-            React__default.createElement(Select$1, { variant: "standard", size: "small", margin: "dense", sx: { width: 60, mr: 2, textAlign: 'center', fontSize: 13 }, value: rowsPerPage, onChange: ({ target }) => setRowsPerPage(parseInt(target.value)) }, rowsPerPageOptions.map((option) => (React__default.createElement(MenuItem, { key: option, value: option }, option)))),
-            React__default.createElement(Typography, { variant: "body2" },
-                currentPage + 1,
-                " de ",
-                totalNumberOfPages + 1),
-            React__default.createElement(IconButton, { size: "small", disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1) },
-                React__default.createElement(MdArrowBackIosNew, { size: 8 * 2 })),
-            React__default.createElement(IconButton, { size: "small", disabled: currentPage === totalNumberOfPages, onClick: () => onPageChange(currentPage + 1) },
-                React__default.createElement(MdArrowForwardIos, { size: 8 * 2 })))));
+const GridPagination = ({ currentPage, totalNumberOfPages, onPageChange, rowsPerPageOptions, setRowsPerPage, rowsPerPage, dense }) => {
+    return (React__default.createElement(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "100%", py: dense ? 0.5 : 1 },
+        React__default.createElement(Box$2, null),
+        React__default.createElement(Stack, { direction: "row", alignItems: "center" },
+            React__default.createElement(Select$1, { variant: "standard", size: "small", margin: "dense", sx: { width: 60, mr: 2, textAlign: 'center', fontSize: 13 }, value: rowsPerPage, onChange: ({ target }) => setRowsPerPage(parseInt(target.value)) }, rowsPerPageOptions.map((option) => (React__default.createElement(MenuItem, { key: option, value: option }, option)))),
+            React__default.createElement(Typography, { variant: "body2" },
+                currentPage + 1,
+                " de ",
+                totalNumberOfPages + 1),
+            React__default.createElement(IconButton, { size: "small", disabled: currentPage === 0, onClick: () => onPageChange(currentPage - 1) },
+                React__default.createElement(MdArrowBackIosNew, { size: 8 * 2 })),
+            React__default.createElement(IconButton, { size: "small", disabled: currentPage === totalNumberOfPages, onClick: () => onPageChange(currentPage + 1) },
+                React__default.createElement(MdArrowForwardIos, { size: 8 * 2 })))));
 };
 
-function BaseGrid({ columns, children, fixedColumns, paperProps, tableBodyProps, tableHeadProps, tableProps, sortedDirection, sortedBy, onSortBy, dense = true, striped, bordered, currentPage, totalNumberOfPages, onPageChange, rowsPerPage, setRowsPerPage, rowsPerPageOptions }) {
-    return (React__default.createElement(Paper, Object.assign({}, paperProps, { sx: Object.assign({ 'tr td': {
-                py: dense ? 0.23 : 0.7,
-                border: bordered ? '1px solid' : '',
-                borderColor: 'divider'
-            }, 'tr:nth-of-type(even)': {
-                transition: 'background-color ease 200ms',
-                bgcolor: striped ? 'divider' : 'initial'
-            }, width: fixedColumns ? 'fit-content' : '100' }, paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx) }),
-        React__default.createElement(Table, Object.assign({ size: "small", stickyHeader: true }, tableProps, { sx: Object.assign({}, tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) }),
-            React__default.createElement(TableHead, Object.assign({}, tableHeadProps),
-                React__default.createElement(TableRow, null, columns.map((column) => (React__default.createElement(TableCell, { key: column.name, padding: dense ? 'none' : 'normal', sx: Object.assign({ pl: 2 }, column === null || column === void 0 ? void 0 : column.sx) },
-                    React__default.createElement(TableSortLabel, { active: sortedBy === column.name, direction: sortedDirection, onClick: () => onSortBy(column.name), disabled: column.canSort === false, sx: { position: 'relative', right: '-9px' } }, column.label)))))),
-            React__default.createElement(TableBody, Object.assign({}, tableBodyProps), children)),
-        React__default.createElement(GridPagination, { rowsPerPageOptions: rowsPerPageOptions, currentPage: currentPage, totalNumberOfPages: totalNumberOfPages, onPageChange: onPageChange, setRowsPerPage: setRowsPerPage, rowsPerPage: rowsPerPage, dense: dense })));
-}
-
-function useFilter() {
-    const [selectedFilters, setSelectedFilters] = useState([]);
-    const filterBy = (newFilter) => {
-        const propToCompare = newFilter.id ? 'id' : 'prop';
-        function removeRepeatedFilters(filter) {
-            return filter[propToCompare] !== newFilter[propToCompare];
-        }
-        setSelectedFilters((filters) => [
-            ...filters.filter(removeRepeatedFilters),
-            newFilter
-        ]);
-    };
-    const removeFilter = (prop) => {
-        setSelectedFilters(selectedFilters.filter((filter) => filter.prop !== prop));
-    };
-    function clearAllFilters() {
-        setSelectedFilters([]);
-    }
-    return {
-        filters: selectedFilters,
-        filterBy,
-        removeFilter,
-        createFilter,
-        clearAllFilters
-    };
-}
-function getObjectValue(obj) {
-    return (prop) => prop.split('.').reduce((o, k) => o[k], obj);
-}
-function isDate(date) {
-    if (date instanceof Date)
-        return true;
-    else if (String(date).endsWith('Z'))
-        return true;
-    return false;
-}
-function compareFilter(item, filter) {
-    const itemValue = getObjectValue(item)(filter.prop);
-    switch (filter.compareType) {
-        case 'equal':
-            return itemValue === filter.value;
-        case 'gte':
-            return isDate(itemValue)
-                ? moment(String(itemValue)).isSameOrAfter(filter.value)
-                : itemValue >= filter.value;
-        case 'gt':
-            return isDate(itemValue)
-                ? moment(String(itemValue)).isAfter(filter.value)
-                : itemValue > filter.value;
-        case 'lte':
-            return isDate(itemValue)
-                ? moment(String(itemValue)).isSameOrBefore(filter.value)
-                : itemValue <= filter.value;
-        case 'lt':
-            return isDate(itemValue)
-                ? moment(String(itemValue)).isBefore(filter.value)
-                : itemValue < filter.value;
-    }
-    return false;
-}
-function createFilter(filters) {
-    function apply(item) {
-        const satisfiedFilters = filters.reduce((acc, filter) => {
-            if (compareFilter(item, filter))
-                acc += 1;
-            return acc;
-        }, 0);
-        return satisfiedFilters === filters.length;
-    }
-    return {
-        apply
-    };
-}
-
-function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100] }) {
-    const [defaultData, setDefaultData] = useState([]);
-    const [sortedBy, setSortedBy] = useState('');
-    const [sortedDirection, setSortedDirection] = useState('desc');
-    const [currentPage, setCurrentPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[0]);
-    const toggleSortedDirection = () => {
-        if (sortedDirection === 'desc')
-            setSortedDirection('asc');
-        if (sortedDirection === 'asc')
-            setSortedDirection('desc');
-    };
-    const onSortBy = (prop) => {
-        if (!prop)
-            return;
-        if (prop === sortedBy) {
-            if (sortedDirection === 'asc') {
-                toggleSortedDirection();
-                setSortedBy('');
-            }
-            else
-                toggleSortedDirection();
-        }
-        else {
-            setSortedDirection('desc');
-            setSortedBy(prop);
-        }
-    };
-    const set = (data) => {
-        setDefaultData(data);
-    };
-    const sortData = (data) => {
-        if (sortedBy) {
-            return data.sort((a, b) => {
-                const compare = b[sortedBy] > a[sortedBy];
-                if (sortedDirection === 'asc')
-                    return compare ? 1 : -1;
-                return compare ? -1 : 1;
-            });
-        }
-        else
-            return data;
-    };
-    const onPageChange = (pageNumber) => {
-        if (pageNumber < 0)
-            return;
-        if (pageNumber > totalNumberOfPages)
-            return;
-        setCurrentPage(pageNumber);
-    };
-    const onChangeRowsPerPage = (rows) => {
-        let totalNumberOfPages = Math.round(filteredData.length / rows) - 1;
-        totalNumberOfPages = totalNumberOfPages <= 0 ? 0 : 1;
-        if (currentPage > totalNumberOfPages)
-            setCurrentPage(totalNumberOfPages);
-        setRowsPerPage(rows);
-    };
-    const filteredData = useMemo(() => {
-        const newData = defaultData.slice(0);
-        const newFilter = createFilter(filters);
-        return newData.filter(newFilter.apply);
-    }, [defaultData, filters]);
-    const displayData = useMemo(() => {
-        const sortedData = sortData(filteredData);
-        const startPage = currentPage * rowsPerPage;
-        const endPage = startPage + rowsPerPage;
-        return sortedData.slice(startPage, endPage);
-    }, [sortedBy, sortedDirection, filteredData, currentPage, rowsPerPage]);
-    const totalNumberOfPages = Math.round(filteredData.length / rowsPerPage) - 1;
-    return {
-        data: displayData,
-        set,
-        onSortBy,
-        sortedBy,
-        defaultData,
-        sortedDirection,
-        columns,
-        currentPage,
-        totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
-        onPageChange,
-        setRowsPerPage: onChangeRowsPerPage,
-        rowsPerPageOptions,
-        rowsPerPage
-    };
-}
-
-/* eslint no-undef: "off" */
-function useEvent(event, handler, passive = false) {
-    useEffect(() => {
-        window.addEventListener(event, handler, passive);
-        return function cleanup() {
-            window.removeEventListener(event, handler);
-        };
-    });
-}
-
-function useLoading() {
-    const [state, setState] = useState([]);
-    const isLoading = (prop) => state.includes(prop);
-    const setLoading = (prop, remove) => {
-        if (remove)
-            setState((prevState) => prevState.filter((state) => state !== prop));
-        else
-            setState((prevState) => [...prevState, prop]);
-    };
-    return { isLoading, setLoading };
-}
-
-const Modal = (_a) => {
-    var { open, onClose } = _a, rest = __rest(_a, ["open", "onClose"]);
-    return (React__default.createElement(Modal$1, Object.assign({ open: open, onClose: onClose, disableEnforceFocus: true }, rest),
-        React__default.createElement(Box$2, { sx: {
-                outline: 'none',
-                backgroundColor: 'white',
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                borderRadius: 1
-            } },
-            React__default.createElement(React__default.Fragment, null, rest.children))));
+function BaseGrid({ columns, children, fixedColumns, paperProps, tableBodyProps, tableHeadProps, tableProps, sortedDirection, sortedBy, onSortBy, dense = true, striped, bordered, currentPage, totalNumberOfPages, onPageChange, rowsPerPage, setRowsPerPage, rowsPerPageOptions }) {
+    return (React__default.createElement(Paper, Object.assign({}, paperProps, { sx: Object.assign({ 'tr td': {
+                py: dense ? 0.23 : 0.7,
+                border: bordered ? '1px solid' : '',
+                borderColor: 'divider'
+            }, 'tr:nth-of-type(even)': {
+                transition: 'background-color ease 200ms',
+                bgcolor: striped ? 'divider' : 'initial'
+            }, width: fixedColumns ? 'fit-content' : '100' }, paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx) }),
+        React__default.createElement(Table, Object.assign({ size: "small", stickyHeader: true }, tableProps, { sx: Object.assign({}, tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) }),
+            React__default.createElement(TableHead, Object.assign({}, tableHeadProps),
+                React__default.createElement(TableRow, null, columns.map((column) => (React__default.createElement(TableCell, { key: column.name, padding: dense ? 'none' : 'normal', sx: Object.assign({ pl: 2 }, column === null || column === void 0 ? void 0 : column.sx) },
+                    React__default.createElement(TableSortLabel, { active: sortedBy === column.name, direction: sortedDirection, onClick: () => onSortBy(column.name), disabled: column.canSort === false, sx: { position: 'relative', right: '-9px' } }, column.label)))))),
+            React__default.createElement(TableBody, Object.assign({}, tableBodyProps), children)),
+        React__default.createElement(GridPagination, { rowsPerPageOptions: rowsPerPageOptions, currentPage: currentPage, totalNumberOfPages: totalNumberOfPages, onPageChange: onPageChange, setRowsPerPage: setRowsPerPage, rowsPerPage: rowsPerPage, dense: dense })));
+}
+
+function useFilter() {
+    const [selectedFilters, setSelectedFilters] = useState([]);
+    const filterBy = (newFilter) => {
+        const propToCompare = newFilter.id ? 'id' : 'prop';
+        function removeRepeatedFilters(filter) {
+            return filter[propToCompare] !== newFilter[propToCompare];
+        }
+        setSelectedFilters((filters) => [
+            ...filters.filter(removeRepeatedFilters),
+            newFilter
+        ]);
+    };
+    const removeFilter = (prop) => {
+        setSelectedFilters(selectedFilters.filter((filter) => filter.prop !== prop));
+    };
+    function clearAllFilters() {
+        setSelectedFilters([]);
+    }
+    return {
+        filters: selectedFilters,
+        filterBy,
+        removeFilter,
+        createFilter,
+        clearAllFilters
+    };
+}
+function getObjectValue(obj) {
+    return (prop) => prop.split('.').reduce((o, k) => o[k], obj);
+}
+function isDate(date) {
+    if (date instanceof Date)
+        return true;
+    else if (String(date).endsWith('Z'))
+        return true;
+    return false;
+}
+function compareFilter(item, filter) {
+    const itemValue = getObjectValue(item)(filter.prop);
+    switch (filter.compareType) {
+        case 'equal':
+            return itemValue === filter.value;
+        case 'gte':
+            return isDate(itemValue)
+                ? moment(String(itemValue)).isSameOrAfter(filter.value)
+                : itemValue >= filter.value;
+        case 'gt':
+            return isDate(itemValue)
+                ? moment(String(itemValue)).isAfter(filter.value)
+                : itemValue > filter.value;
+        case 'lte':
+            return isDate(itemValue)
+                ? moment(String(itemValue)).isSameOrBefore(filter.value)
+                : itemValue <= filter.value;
+        case 'lt':
+            return isDate(itemValue)
+                ? moment(String(itemValue)).isBefore(filter.value)
+                : itemValue < filter.value;
+    }
+    return false;
+}
+function createFilter(filters) {
+    function apply(item) {
+        const satisfiedFilters = filters.reduce((acc, filter) => {
+            if (compareFilter(item, filter))
+                acc += 1;
+            return acc;
+        }, 0);
+        return satisfiedFilters === filters.length;
+    }
+    return {
+        apply
+    };
+}
+
+function useGrid({ columns, filters = [], rowsPerPageOptions = [30, 60, 100] }) {
+    const [defaultData, setDefaultData] = useState([]);
+    const [sortedBy, setSortedBy] = useState('');
+    const [sortedDirection, setSortedDirection] = useState('desc');
+    const [currentPage, setCurrentPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(rowsPerPageOptions[0]);
+    const toggleSortedDirection = () => {
+        if (sortedDirection === 'desc')
+            setSortedDirection('asc');
+        if (sortedDirection === 'asc')
+            setSortedDirection('desc');
+    };
+    const onSortBy = (prop) => {
+        if (!prop)
+            return;
+        if (prop === sortedBy) {
+            if (sortedDirection === 'asc') {
+                toggleSortedDirection();
+                setSortedBy('');
+            }
+            else
+                toggleSortedDirection();
+        }
+        else {
+            setSortedDirection('desc');
+            setSortedBy(prop);
+        }
+    };
+    const set = (data) => {
+        setDefaultData(data);
+    };
+    const sortData = (data) => {
+        if (sortedBy) {
+            return data.sort((a, b) => {
+                const compare = b[sortedBy] > a[sortedBy];
+                if (sortedDirection === 'asc')
+                    return compare ? 1 : -1;
+                return compare ? -1 : 1;
+            });
+        }
+        else
+            return data;
+    };
+    const onPageChange = (pageNumber) => {
+        if (pageNumber < 0)
+            return;
+        if (pageNumber > totalNumberOfPages)
+            return;
+        setCurrentPage(pageNumber);
+    };
+    const onChangeRowsPerPage = (rows) => {
+        let totalNumberOfPages = Math.round(filteredData.length / rows) - 1;
+        totalNumberOfPages = totalNumberOfPages <= 0 ? 0 : 1;
+        if (currentPage > totalNumberOfPages)
+            setCurrentPage(totalNumberOfPages);
+        setRowsPerPage(rows);
+    };
+    const filteredData = useMemo(() => {
+        const newData = defaultData.slice(0);
+        const newFilter = createFilter(filters);
+        return newData.filter(newFilter.apply);
+    }, [defaultData, filters]);
+    const displayData = useMemo(() => {
+        const sortedData = sortData(filteredData);
+        const startPage = currentPage * rowsPerPage;
+        const endPage = startPage + rowsPerPage;
+        return sortedData.slice(startPage, endPage);
+    }, [sortedBy, sortedDirection, filteredData, currentPage, rowsPerPage]);
+    const totalNumberOfPages = Math.round(filteredData.length / rowsPerPage) - 1;
+    return {
+        data: displayData,
+        set,
+        onSortBy,
+        sortedBy,
+        defaultData,
+        sortedDirection,
+        columns,
+        currentPage,
+        totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
+        onPageChange,
+        setRowsPerPage: onChangeRowsPerPage,
+        rowsPerPageOptions,
+        rowsPerPage
+    };
+}
+
+/* eslint no-undef: "off" */
+function useEvent(event, handler, passive = false) {
+    useEffect(() => {
+        window.addEventListener(event, handler, passive);
+        return function cleanup() {
+            window.removeEventListener(event, handler);
+        };
+    });
+}
+
+function useLoading() {
+    const [state, setState] = useState([]);
+    const isLoading = (prop) => state.includes(prop);
+    const setLoading = (prop, remove) => {
+        if (remove)
+            setState((prevState) => prevState.filter((state) => state !== prop));
+        else
+            setState((prevState) => [...prevState, prop]);
+    };
+    return { isLoading, setLoading };
+}
+
+const Modal = (_a) => {
+    var { open, onClose } = _a, rest = __rest(_a, ["open", "onClose"]);
+    return (React__default.createElement(Modal$1, Object.assign({ open: open, onClose: onClose, disableEnforceFocus: true }, rest),
+        React__default.createElement(Box$2, { sx: {
+                outline: 'none',
+                backgroundColor: 'white',
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                borderRadius: 1
+            } },
+            React__default.createElement(React__default.Fragment, null, rest.children))));
 };
 
-function GetInputLabel(columns) {
-    return (columnName) => {
-        const column = columns.find((column) => column.name === columnName);
-        return { label: column.label, name: column.name };
-    };
-}
-
-const Dialog = (_a) => {
-    var { open, title, loading, body, options } = _a, rest = __rest(_a, ["open", "title", "loading", "body", "options"]);
-    return (React__default.createElement(Dialog$1, Object.assign({ open: open }, rest),
-        React__default.createElement(Box$2, { sx: { p: 2 } },
-            React__default.createElement(DialogTitle, { sx: { fontWeight: "bold" } }, title),
-            React__default.createElement(DialogContentText, { sx: { px: "10px", textAlign: "center", mb: 2 } }, body),
-            React__default.createElement(DialogActions, null, options.map((option, index) => {
-                return (React__default.createElement(Button, { key: index, onClick: () => option.cb(option.label), variant: option.focus ? "contained" : "text", sx: {
-                        fontWeight: option.focus ? "bold" : "normal",
-                        color: option.focus ? "#fff" : "primary.main",
-                    }, disableElevation: true, disabled: loading }, loading && option.focus ? (React__default.createElement(CircularProgress, { size: 25, color: "inherit" })) : (React__default.createElement(React__default.Fragment, null, option.label))));
-            })))));
+function GetInputLabel(columns) {
+    return (columnName) => {
+        const column = columns.find((column) => column.name === columnName);
+        return { label: column.label, name: column.name };
+    };
+}
+
+const Dialog = (_a) => {
+    var { open, title, loading, body, options } = _a, rest = __rest(_a, ["open", "title", "loading", "body", "options"]);
+    return (React__default.createElement(Dialog$1, Object.assign({ open: open }, rest),
+        React__default.createElement(Box$2, { sx: { p: 2 } },
+            React__default.createElement(DialogTitle, { sx: { fontWeight: "bold" } }, title),
+            React__default.createElement(DialogContentText, { sx: { px: "10px", textAlign: "center", mb: 2 } }, body),
+            React__default.createElement(DialogActions, null, options.map((option, index) => {
+                return (React__default.createElement(Button, { key: index, onClick: () => option.cb(option.label), variant: option.focus ? "contained" : "text", sx: {
+                        fontWeight: option.focus ? "bold" : "normal",
+                        color: option.focus ? "#fff" : "primary.main",
+                    }, disableElevation: true, disabled: loading }, loading && option.focus ? (React__default.createElement(CircularProgress, { size: 25, color: "inherit" })) : (React__default.createElement(React__default.Fragment, null, option.label))));
+            })))));
 };
 
 export { Autocomplete, BaseGrid, Checkbox, Dialog, EditableTableCell, GetInputLabel, Grid, Input, InputMask, LargeButton, Modal, Radio, Select, Switch, TabPanel, Td, Tr, createFilter, filterData, getTabProps, useEvent, useFilter, useGrid, useLoading };