@bluemarble/bm-components 0.0.2 → 0.0.5

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useContext, createElement, createContext, Fragment, useRef, useLayoutEffect, Children, isValidElement, cloneElement, useState, useMemo, useEffect, memo } from 'react';
+import React__default, { forwardRef, useContext, createElement, createContext, Fragment, useRef, useLayoutEffect, Children, isValidElement, cloneElement, memo, useState, useMemo, useEffect } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
@@ -28206,38 +28206,33 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
 } : void 0;
 var TextField$1 = TextField;
 
-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$1, null,
-        React__default.createElement(TableRow$1, { sx: { backgroundColor: 'background.default' } }, titles.map((title, index) => {
-            return (React__default.createElement(TableCell$1, { key: index, sortDirection: orderBy === title.name ? order : false },
-                React__default.createElement(Box$1, { sx: {
-                        width: '100%',
-                        display: 'flex',
-                        justifyContent: 'space-between'
-                    } },
-                    React__default.createElement(TableSortLabel$1, { onClick: () => onRequestSort(title.name), active: orderBy === title.name, direction: orderBy === title.name ? order : 'asc' },
-                        React__default.createElement(Typography$1, { fontWeight: "bold", component: "p", variant: "body2" }, 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$1, null,
+        React__default.createElement(TableRow$1, { sx: { backgroundColor: "background.default" } }, titles.map((title) => {
+            return (React__default.createElement(TableCell$1, { key: title.name, sortDirection: orderBy === title.name ? order : false, sx: title.sx },
+                React__default.createElement(TableSortLabel$1, { onClick: () => onRequestSort(title.name), active: orderBy === title.name, direction: orderBy === title.name ? order : "asc" },
+                    React__default.createElement(Typography$1, { fontWeight: "bold", component: "p", variant: "body2" }, title.label))));
+        }))));
 };
 
 var DefaultContext = {
@@ -28329,242 +28324,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, }) => {
-    return (React__default.createElement(Box$3, { ref: searchAnchorEl, sx: {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-        } },
-        React__default.createElement(Box$3, { sx: { pl: 1 } }, selectedFilters.map((item, index) => {
-            return (React__default.createElement(Chip$1, { key: index, label: item.value, onDelete: () => handleCloseFilter(item) }));
-        })),
-        React__default.createElement(Box$3, { sx: { minHeight: 30 } },
-            customButtons,
-            !noFilterButtons && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Tooltip$1, { title: "Buscar" },
-                    React__default.createElement(IconButton$1, { onClick: () => setOpenSearch(true) },
-                        React__default.createElement(MdSearch, { size: 8 * 3 }))),
-                React__default.createElement(Tooltip$1, { title: "Filtrar" },
-                    React__default.createElement(IconButton$1, { sx: { position: "relative" }, onClick: ({ currentTarget }) => setAnchorEl(currentTarget) },
-                        React__default.createElement(MdFilterList, { size: 8 * 3 }))))))));
+const FiltersBar = ({ customButtons, selectedFilters, handleCloseFilter, noFilterButtons, searchAnchorEl, setOpenSearch, setAnchorEl, }) => {
+    return (React__default.createElement(Box$3, { sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+        } },
+        React__default.createElement(Box$3, { sx: { pl: 1 } }, selectedFilters.map((item, index) => {
+            return (React__default.createElement(Chip$1, { key: index, label: item.value, onDelete: () => handleCloseFilter(item) }));
+        })),
+        React__default.createElement(Box$3, { ref: searchAnchorEl, sx: { minHeight: 30 } },
+            customButtons,
+            !noFilterButtons && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Tooltip$1, { title: "Buscar" },
+                    React__default.createElement(IconButton$1, { onClick: () => setOpenSearch(true) },
+                        React__default.createElement(MdSearch, { size: 8 * 3 }))),
+                React__default.createElement(Tooltip$1, { title: "Filtrar" },
+                    React__default.createElement(IconButton$1, { 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));
-}
-
-const Grid = (props) => {
-    const { columnTitles, isLoading, footer, noFilterButtons = false, selectedFilters, customButtons, setSelectedFilters, defaultData, setTableData, updateFilters, tableData, rowOptions = [30, 60, 100], noPagination, } = props;
-    const [order, setOrder] = useState(undefined);
-    const [orderBy, setOrderBy] = useState("Nome");
-    const [page, setPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(rowOptions[0]);
-    const [selectedTitle, setSelectedTitle] = useState(undefined);
-    const [selectedFilterValue, setSelectedFilterValue] = useState(undefined);
-    const [valuesToFilter, setValuesToFilter] = useState([]);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [searchText, setSearchText] = useState("");
-    const [openSearch, setOpenSearch] = useState(false);
-    const searchAnchorEl = useRef(null);
-    const countRows = useMemo(() => {
-        if (searchText.length > 0) {
-            const array = handleFilterBySearch(searchText);
-            return array.length;
-        }
-        else {
-            return defaultData.length;
-        }
-    }, [searchText, tableData]);
-    const handleChangeRowsPerPage = ({ target, }) => {
-        setRowsPerPage(parseInt(target.value));
-        const maxPage = Math.floor(countRows / rowsPerPage);
-        if (page > maxPage)
-            setPage(maxPage);
-    };
-    function handleSort(data) {
-        const sortable = data.slice(0);
-        if (order === undefined)
-            return sortable;
-        sortable.sort((a, b) => {
-            const x = a[orderBy];
-            const y = b[orderBy];
-            return x < y ? -1 : x > y ? 1 : 0;
-        });
-        return order === "asc" ? sortable : sortable.reverse();
-    }
-    function handleAddFilter() {
-        const [column] = columnTitles.filter((item) => item.label === selectedTitle);
-        const newFilter = {
-            column: column.name,
-            value: selectedFilterValue || "",
-            transformer: column.transformer,
-        };
-        const filterAlreadyExists = selectedFilters.some((filter) => filter.column === column.name && filter.value === selectedFilterValue);
-        if (filterAlreadyExists)
-            return;
-        setSelectedFilters([...selectedFilters, newFilter]);
-    }
-    function handleCloseFilter(item) {
-        const filterToDelete = selectedFilters.find((filter) => filter.column === item.column && filter.value === item.value);
-        if (!filterToDelete)
-            return;
-        const filteredSelectedFilters = selectedFilters.filter((_, index) => selectedFilters.indexOf(filterToDelete) !== index);
-        setSelectedFilters([...filteredSelectedFilters]);
-    }
-    function handleFilterBySearch(text) {
-        const newArray = defaultData.filter((item) => {
-            for (const [, value] of Object.entries(item)) {
-                if (`${value}`.includes(text))
-                    return true;
-            }
-            return false;
-        });
-        return newArray;
-    }
-    useEffect(() => {
-        const maxPage = Math.floor(countRows / rowsPerPage);
-        if (page > maxPage)
-            setPage(maxPage - 1);
-    }, [countRows]);
-    useEffect(() => {
-        if (order) {
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            const sortedArray = handleSort(newArray);
-            const data = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(data);
-        }
-        else {
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            const data = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(data);
-        }
-    }, [defaultData]);
-    useEffect(() => {
-        const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-        const sortedArray = handleSort(newArray);
-        const paginatedArray = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-        setTableData(paginatedArray);
-    }, [order, orderBy]);
-    useEffect(() => {
-        if (order) {
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            const sortedArray = handleSort(newArray);
-            const dados = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(dados);
-        }
-        else {
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            const dados = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(dados);
-        }
-    }, [page, rowsPerPage]);
-    useEffect(() => {
-        setValuesToFilter([]);
-        setSelectedFilterValue(undefined);
-        if (selectedTitle) {
-            const values = [];
-            const [prop] = columnTitles.filter((item) => item.label === selectedTitle);
-            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
-            newArray.forEach((item) => {
-                const value = prop.transformer
-                    ? prop.transformer(getPropertyValue(item, prop.name))
-                    : String(getPropertyValue(item, prop.name));
-                if (!values.includes(value))
-                    values.push(value);
-            });
-            setValuesToFilter(values);
-        }
-    }, [selectedTitle]);
-    useEffect(() => {
-        if (order) {
-            const newArray = handleFilterBySearch(searchText);
-            const sortedArray = handleSort(newArray);
-            const dados = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(dados);
-        }
-        else {
-            const newArray = handleFilterBySearch(searchText);
-            const dados = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-            setTableData(dados);
-        }
-    }, [searchText]);
-    useEffect(() => {
-        updateFilters(selectedFilters);
-    }, [selectedFilters]);
-    return (React__default.createElement(Paper$1, null,
-        isLoading && React__default.createElement(LinearProgress$1, null),
-        React__default.createElement(FiltersBar, { setAnchorEl: setAnchorEl, setOpenSearch: setOpenSearch, searchAnchorEl: searchAnchorEl, noFilterButtons: noFilterButtons, selectedFilters: selectedFilters, customButtons: customButtons, handleCloseFilter: handleCloseFilter }),
-        React__default.createElement(TableContainer$1, null,
-            React__default.createElement(Table$1, { size: "small" },
-                React__default.createElement(GridHeader, { titles: columnTitles, order: order, orderBy: orderBy, setOrder: setOrder, setOrderBy: setOrderBy }),
-                React__default.createElement(TableBody$1, null,
-                    props.children,
-                    footer))),
-        !noPagination && (React__default.createElement(TablePagination$1, { 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$1, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
-                vertical: "top",
-                horizontal: "right",
-            }, transformOrigin: {
-                vertical: "top",
-                horizontal: "right",
-            } },
-            React__default.createElement(Box$1, { sx: { minWidth: 300, padding: 2 } },
-                React__default.createElement(Typography$1, { fontWeight: "bold", variant: "body1" }, "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$1, 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$1, Object.assign({ variant: "standard", margin: "dense" }, params, { label: "Valor" }))) }),
-                React__default.createElement(Box$1, { sx: { py: 1 } }),
-                React__default.createElement(Button$1, { disabled: !selectedFilterValue, onClick: handleAddFilter, fullWidth: true }, "Adicionar filtro"))),
-        React__default.createElement(Popover$1, { anchorEl: searchAnchorEl.current, open: openSearch, onClose: () => setOpenSearch(false), anchorOrigin: {
-                vertical: "top",
-                horizontal: "left",
-            }, transformOrigin: {
-                vertical: "top",
-                horizontal: "left",
-            } },
-            React__default.createElement(Box$1, { sx: {
-                    minWidth: 300,
-                    px: 2,
-                    pb: 1,
-                    display: "grid",
-                    gridTemplateColumns: "1fr 30px",
-                    alignItems: "flex-end",
-                } },
-                React__default.createElement(TextField$1, { variant: "standard", margin: "dense", label: "Buscar", value: searchText, onChange: ({ currentTarget }) => setSearchText(currentTarget.value) }),
-                React__default.createElement(Box$1, null,
-                    React__default.createElement(IconButton$1, { onClick: () => {
-                            setSearchText("");
-                            setOpenSearch(false);
-                        } },
-                        React__default.createElement(MdClose, { 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));
+}
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -28593,17 +28393,249 @@ function __rest(s, e) {
     return t;
 }
 
-const CustomTableRow = (props) => {
-    const { children, sx, striped = true } = props, rest = __rest(props, ["children", "sx", "striped"]);
-    return (React__default.createElement(TableRow$1, Object.assign({ sx: Object.assign({ "&:nth-of-type(even)": { bgcolor: striped ? "action.selected" : "" } }, sx) }, rest), children));
-};
+const CustomTableCell = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React__default.createElement(TableCell$1, Object.assign({}, props), children);
+};
+const EditableTableCell = (_a) => {
+    var { TextFieldProps, onSave, name, data, fullWidth = true } = _a, props = __rest(_a, ["TextFieldProps", "onSave", "name", "data", "fullWidth"]);
+    const [isEditing, setIsEditing] = useState(false);
+    let value = data === null || data === void 0 ? void 0 : data[name];
+    const handleSave = (event) => {
+        var _a, _b, _c;
+        setIsEditing(false);
+        value = (_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,
+            data: Object.assign(Object.assign({}, data), { [name]: (_c = event.target) === null || _c === void 0 ? void 0 : _c.value }),
+        };
+        onSave(response);
+    };
+    return (React__default.createElement(TableCell$1, Object.assign({ sx: { py: 0, px: isEditing ? 0 : "intial" }, onDoubleClick: () => setIsEditing(true) }, props), isEditing ? (React__default.createElement(TextField$1, Object.assign({ name: name, focused: isEditing, onBlur: (ev) => handleSave(ev), autoFocus: true, size: "small", defaultValue: data === null || data === void 0 ? void 0 : data[name], sx: Object.assign({ width: fullWidth ? "100%" : "intial" }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.sx), inputProps: {
+            style: {
+                paddingBottom: 6,
+                paddingTop: 6,
+            },
+        }, InputProps: {
+            sx: {
+                fontSize: 14,
+                pl: 0.2,
+            },
+        } }, TextFieldProps))) : (React__default.createElement(React__default.Fragment, null, value))));
+};
+const Td = memo(CustomTableCell);
+
+const CustomTableRow = (props) => {
+    const { children, sx, striped = true } = props, rest = __rest(props, ["children", "sx", "striped"]);
+    return (React__default.createElement(TableRow$1, Object.assign({ sx: Object.assign({ "&:nth-of-type(even)": { bgcolor: striped ? "action.selected" : "" } }, sx) }, rest), children));
+};
 const Tr = memo(CustomTableRow);
 
-const CustomTableCell = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return React__default.createElement(TableCell$1, Object.assign({}, props), children);
+const AutoCreatedRows = ({ tableData, columns, primaryKey, }) => {
+    return (React__default.createElement(React__default.Fragment, null, tableData.map((row) => (React__default.createElement(Tr, { key: row[primaryKey] }, columns.map((column) => {
+        const cellValue = column.transformer
+            ? column.transformer(row[column.name])
+            : row[column.name];
+        return React__default.createElement(Td, { key: column.name }, cellValue);
+    }))))));
+};
+
+const Grid = (props) => {
+    const { columnTitles, isLoading, footer, noFilterButtons = false, selectedFilters, customButtons, setSelectedFilters, defaultData, setTableData, updateFilters, tableData, rowOptions = [60, 100, 150], noPagination, primaryKey, } = props;
+    const [order, setOrder] = useState(undefined);
+    const [orderBy, setOrderBy] = useState("");
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(rowOptions[0]);
+    const [selectedTitle, setSelectedTitle] = useState(undefined);
+    const [selectedFilterValue, setSelectedFilterValue] = useState(undefined);
+    const [valuesToFilter, setValuesToFilter] = useState([]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [searchText, setSearchText] = useState("");
+    const [openSearch, setOpenSearch] = useState(false);
+    const searchAnchorEl = useRef(null);
+    const countRows = useMemo(() => {
+        if (searchText.length > 0) {
+            const array = handleFilterBySearch(searchText);
+            return array.length;
+        }
+        else {
+            return defaultData.length;
+        }
+    }, [searchText, tableData]);
+    const handleChangeRowsPerPage = ({ target, }) => {
+        setRowsPerPage(parseInt(target.value));
+        const maxPage = Math.floor(countRows / rowsPerPage);
+        if (page > maxPage)
+            setPage(maxPage);
+    };
+    function handleSort(data) {
+        const sortable = data.slice(0);
+        if (order === undefined)
+            return sortable;
+        sortable.sort((a, b) => {
+            const x = a[orderBy];
+            const y = b[orderBy];
+            return x < y ? -1 : x > y ? 1 : 0;
+        });
+        return order === "asc" ? sortable : sortable.reverse();
+    }
+    function handleAddFilter() {
+        const [column] = columnTitles.filter((item) => item.label === selectedTitle);
+        const newFilter = {
+            column: column.name,
+            value: selectedFilterValue || "",
+            transformer: column.transformer,
+        };
+        const filterAlreadyExists = selectedFilters.some((filter) => filter.column === column.name && filter.value === selectedFilterValue);
+        if (filterAlreadyExists)
+            return;
+        setSelectedFilters([...selectedFilters, newFilter]);
+    }
+    function handleCloseFilter(item) {
+        const filterToDelete = selectedFilters.find((filter) => filter.column === item.column && filter.value === item.value);
+        if (!filterToDelete)
+            return;
+        const filteredSelectedFilters = selectedFilters.filter((_, index) => selectedFilters.indexOf(filterToDelete) !== index);
+        setSelectedFilters([...filteredSelectedFilters]);
+    }
+    function handleFilterBySearch(text) {
+        const newArray = defaultData.filter((item) => {
+            for (const [, value] of Object.entries(item)) {
+                if (`${value}`.includes(text))
+                    return true;
+            }
+            return false;
+        });
+        return newArray;
+    }
+    useEffect(() => {
+        const maxPage = Math.floor(countRows / rowsPerPage);
+        if (page > maxPage)
+            setPage(maxPage - 1);
+    }, [countRows]);
+    useEffect(() => {
+        if (order) {
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            const sortedArray = handleSort(newArray);
+            const data = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(data);
+        }
+        else {
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            const data = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(data);
+        }
+    }, [defaultData]);
+    useEffect(() => {
+        const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+        const sortedArray = handleSort(newArray);
+        const paginatedArray = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+        setTableData(paginatedArray);
+    }, [order, orderBy]);
+    useEffect(() => {
+        if (order) {
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            const sortedArray = handleSort(newArray);
+            const dados = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(dados);
+        }
+        else {
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            const dados = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(dados);
+        }
+    }, [page, rowsPerPage]);
+    useEffect(() => {
+        setValuesToFilter([]);
+        setSelectedFilterValue(undefined);
+        if (selectedTitle) {
+            const values = [];
+            const [prop] = columnTitles.filter((item) => item.label === selectedTitle);
+            const newArray = searchText.length > 0 ? handleFilterBySearch(searchText) : defaultData;
+            newArray.forEach((item) => {
+                const value = prop.transformer
+                    ? prop.transformer(getPropertyValue(item, prop.name))
+                    : String(getPropertyValue(item, prop.name));
+                if (!values.includes(value))
+                    values.push(value);
+            });
+            setValuesToFilter(values);
+        }
+    }, [selectedTitle]);
+    useEffect(() => {
+        if (order) {
+            const newArray = handleFilterBySearch(searchText);
+            const sortedArray = handleSort(newArray);
+            const dados = sortedArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(dados);
+        }
+        else {
+            const newArray = handleFilterBySearch(searchText);
+            const dados = newArray.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+            setTableData(dados);
+        }
+    }, [searchText]);
+    useEffect(() => {
+        updateFilters(selectedFilters);
+    }, [selectedFilters]);
+    return (React__default.createElement(Paper$1, null,
+        isLoading && React__default.createElement(LinearProgress$1, null),
+        React__default.createElement(FiltersBar, { setAnchorEl: setAnchorEl, setOpenSearch: setOpenSearch, searchAnchorEl: searchAnchorEl, noFilterButtons: noFilterButtons, selectedFilters: selectedFilters, customButtons: customButtons, handleCloseFilter: handleCloseFilter }),
+        React__default.createElement(TableContainer$1, null,
+            React__default.createElement(Table$1, { size: "small" },
+                React__default.createElement(GridHeader, { titles: columnTitles, order: order, orderBy: orderBy, setOrder: setOrder, setOrderBy: setOrderBy }),
+                React__default.createElement(TableBody$1, null,
+                    props.children ? (props.children) : primaryKey ? (React__default.createElement(AutoCreatedRows, { tableData: tableData, columns: columnTitles, primaryKey: primaryKey })) : null,
+                    footer))),
+        !noPagination && (React__default.createElement(TablePagination$1, { 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$1, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: {
+                vertical: "top",
+                horizontal: "right",
+            }, transformOrigin: {
+                vertical: "top",
+                horizontal: "right",
+            } },
+            React__default.createElement(Box$1, { sx: { minWidth: 300, padding: 2 } },
+                React__default.createElement(Typography$1, { fontWeight: "bold", variant: "body1" }, "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$1, 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$1, Object.assign({ variant: "standard", margin: "dense" }, params, { label: "Valor" }))) }),
+                React__default.createElement(Box$1, { sx: { py: 1 } }),
+                React__default.createElement(Button$1, { disabled: !selectedFilterValue, onClick: handleAddFilter, fullWidth: true }, "Adicionar filtro"))),
+        React__default.createElement(Popover$1, { anchorEl: searchAnchorEl.current, open: openSearch, onClose: () => setOpenSearch(false), anchorOrigin: {
+                vertical: "top",
+                horizontal: "left",
+            }, transformOrigin: {
+                vertical: "top",
+                horizontal: "left",
+            } },
+            React__default.createElement(Box$1, { sx: {
+                    minWidth: 300,
+                    px: 2,
+                    pb: 1,
+                    display: "grid",
+                    gridTemplateColumns: "1fr 30px",
+                    alignItems: "flex-end",
+                } },
+                React__default.createElement(TextField$1, { variant: "standard", margin: "dense", label: "Buscar", value: searchText, onChange: ({ currentTarget }) => setSearchText(currentTarget.value) }),
+                React__default.createElement(Box$1, null,
+                    React__default.createElement(IconButton$1, { onClick: () => {
+                            setSearchText("");
+                            setOpenSearch(false);
+                        } },
+                        React__default.createElement(MdClose, { size: 8 * 3 })))))));
 };
-const Td = memo(CustomTableCell);
 
-export { Grid, Td, Tr, filterData };
+export { EditableTableCell, Grid, Td, Tr, filterData };
 //# sourceMappingURL=index.js.map