@ssplib/react-components 0.0.224 → 0.0.226

package/components/form/table/Table.d.ts

@@ -5,18 +5,24 @@ interface ColumnData {
     customComponent?: (content: string, obj: any) => JSX.Element;
     size?: number;
 }
-type FilterTypes = 'a-z' | 'z-a' | 'items' | 'date-interval' | 'data-a-z' | 'data-z-a' | 'select';
-export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, useKC, statusKeyName, csvExcludeKeys, csvExcludeKeysCSV, csvExcludeKeysAll, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvNoZipText, csvAllButtonTitle, removeQuotes, normalize, csvShowAllButton, csvWithoutZip, itemCount, csvUpper, csvZipFileNamesKey, generateCsvZip, filters, hideTitleCSV, csvExcludeUpper, filterSeparator, filterStorageName, multipleDataPath, expandTextMaxLength, collapsedSize, customMargin, customMarginMobile, }: {
+interface OrderBy {
+    label: string;
+    key: string;
+    type: 'string' | 'number';
+}
+export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, dataPath, tableName, csv, columnSize, action, useKC, statusKeyName, csvExcludeKeys, csvExcludeKeysCSV, csvExcludeKeysAll, csvCustomKeyNames, csvExcludeValidate, csvButtonTitle, csvNoZipText, csvAllButtonTitle, removeQuotes, normalize, csvShowAllButton, csvWithoutZip, itemCount, csvUpper, csvZipFileNamesKey, generateCsvZip, hideTitleCSV, csvExcludeUpper, multipleDataPath, expandTextMaxLength, collapsedSize, customMargin, customMarginMobile, filters, orderBy, id, }: {
+    id: string;
     mediaQueryLG?: {
         all: number;
         action: number;
     };
+    filters?: FilterValue[];
+    orderBy?: OrderBy[];
     customMargin?: number;
     customMarginMobile?: number;
     normalize?: boolean;
     csvUpper?: boolean;
     multipleDataPath?: string;
-    filterStorageName?: string;
     removeQuotes?: boolean;
     columns: ColumnData[];
     tableName: string;
@@ -52,22 +58,21 @@ export declare function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg, data
     };
     dataPath?: string;
     useKC?: boolean;
-    filters?: {
-        [key: string]: {
-            type: FilterTypes;
-            keyName: string;
-            name: string;
-            listEndpoint?: string;
-            selectList?: string[];
-            referenceKey?: string;
-            options?: {
-                name: string;
-                color: string;
-                key: string;
-            }[];
-        }[];
-    };
-    filterSeparator?: string;
 }): JSX.Element;
+type FilterType = 'string' | 'number' | 'date';
+type FilterOperators = 'igual' | 'contem' | 'maior que' | 'menor que' | 'data exata' | 'após' | 'antes de' | 'entre' | 'tem um dos';
+interface FilterValue {
+    label: string;
+    keyName: string;
+    type: FilterType;
+    operator: FilterOperators;
+    operators: FilterOperators[];
+    value: string | any[];
+    value2?: string | any[];
+    useList?: {
+        id: string;
+        label: string;
+    }[];
+}
 declare const _default: React.MemoExoticComponent<typeof Table>;
 export default _default;

package/components/form/table/Table.js

@@ -27,23 +27,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
+const icons_material_1 = require("@mui/icons-material");
+const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const FileDownload_1 = __importDefault(require("@mui/icons-material/FileDownload"));
+const NavigateNextRounded_1 = __importDefault(require("@mui/icons-material/NavigateNextRounded"));
 const Search_1 = __importDefault(require("@mui/icons-material/Search"));
 const material_1 = require("@mui/material");
 const Grid_1 = __importDefault(require("@mui/material/Grid"));
 const Pagination_1 = __importDefault(require("@mui/material/Pagination"));
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDayjs_1 = require("@mui/x-date-pickers/AdapterDayjs");
+const dayjs_1 = __importDefault(require("dayjs"));
+const jszip_1 = __importDefault(require("jszip"));
 const lodash_get_1 = __importDefault(require("lodash.get"));
 const react_1 = __importStar(require("react"));
 const auth_1 = require("../../../context/auth");
-const icons_material_1 = require("@mui/icons-material");
-const FormProvider_1 = __importDefault(require("../../providers/FormProvider"));
-const DatePicker_1 = __importDefault(require("../date/DatePicker"));
-const dayjs_1 = __importDefault(require("dayjs"));
-const jszip_1 = __importDefault(require("jszip"));
-const NavigateNextRounded_1 = __importDefault(require("@mui/icons-material/NavigateNextRounded"));
-const axios_1 = __importDefault(require("axios"));
+const Modal_1 = require("../../modal/Modal");
+const CustomMenu_1 = __importDefault(require("../../utils//CustomMenu"));
 function removePunctuationAndAccents(text) {
     // Remove accents and diacritics
     const normalizedText = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
@@ -53,31 +55,37 @@ function removePunctuationAndAccents(text) {
 }
 let startData = [];
 let isExpandAll = false;
+let localTableName = '';
+let orderAsc = false;
 function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     user: 'Nenhum dado encontrado',
     public: 'Nenhum dado encontrado',
-}, dataPath = '', tableName = 'Dados', csv, columnSize, action, useKC = true, statusKeyName = '', csvExcludeKeys = [], csvExcludeKeysCSV = [], csvExcludeKeysAll = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvNoZipText = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', removeQuotes = false, normalize = false, csvShowAllButton = false, csvWithoutZip = false, itemCount = 10, csvUpper = false, csvZipFileNamesKey = '', generateCsvZip = false, filters = {}, hideTitleCSV = false, csvExcludeUpper = [], filterSeparator = '|', filterStorageName = 'tableFilters', multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, }) {
+}, dataPath = '', tableName = 'Dados', csv, columnSize, action, useKC = true, statusKeyName = '', csvExcludeKeys = [], csvExcludeKeysCSV = [], csvExcludeKeysAll = [], csvCustomKeyNames = {}, csvExcludeValidate = (key, value) => false, csvButtonTitle = 'Salvar .CSV', csvNoZipText = 'Salvar .CSV', csvAllButtonTitle = 'Salvar todos em CSV', removeQuotes = false, normalize = false, csvShowAllButton = false, csvWithoutZip = false, itemCount = 10, csvUpper = false, csvZipFileNamesKey = '', generateCsvZip = false, 
+// filters = {},
+// filterSeparator = '|',
+hideTitleCSV = false, csvExcludeUpper = [], multipleDataPath = '', expandTextMaxLength = 50, collapsedSize = 53, customMargin = 4, customMarginMobile = 0, filters = [], orderBy = [], id, }) {
+    var _a;
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
     const [data, setData] = (0, react_1.useState)(null);
     const { user, userLoaded } = (0, react_1.useContext)(auth_1.AuthContext);
     const [list, setList] = (0, react_1.useState)([]);
+    const [listClone, setListClone] = (0, react_1.useState)([]);
     //numero de items pra ser mostrado
     const [itemsCount, setItemsCount] = (0, react_1.useState)(itemCount);
     const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
     const [paginationCount, setPagCount] = (0, react_1.useState)(1);
     const [listPage, setListPage] = (0, react_1.useState)(1);
-    const [appliedFilters, setAppliedFilters] = (0, react_1.useState)([]);
     const [oldSelectState, setOldSelectState] = (0, react_1.useState)('');
     const [expandObj, setExpandObj] = (0, react_1.useState)({});
     const [showExpandObj, setShowExpandObj] = (0, react_1.useState)({});
     const [showExpandObjOnExited, setShowExpandObjOnExited] = (0, react_1.useState)({});
-    // filters states
-    const [filterCollapse, setFilterCollapse] = (0, react_1.useState)(Array(Object.keys(filters).length).fill(false));
-    const [filterOpen, setFilterOpen] = (0, react_1.useState)(false);
+    const [filterKey, setFilterKey] = (0, react_1.useState)('filterKey');
     const theme = (0, material_1.useTheme)();
     const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
+    const filterContainer = (0, react_1.useRef)(null);
     const lg = (0, material_1.useMediaQuery)(theme.breakpoints.up(2000));
+    localTableName = `tableFilter_${id}`;
     (0, react_1.useEffect)(() => {
         setError(null);
         if (userLoaded || !useKC) {
@@ -109,11 +117,6 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
                         else {
                             setData(value);
                             startData = JSON.parse(JSON.stringify(value));
-                            const oldFilters = localStorage.getItem(filterStorageName);
-                            if (oldFilters) {
-                                const filters = JSON.parse(oldFilters);
-                                setAppliedFilters(filters);
-                            }
                         }
                     }
                     setIsLoading(false);
@@ -142,8 +145,13 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     (0, react_1.useEffect)(() => {
         if (isLoading || error || !getData(data))
             return;
-        setList(getData(data));
-        setPagCount(getCount(getData(data)));
+        const value = getData(data);
+        setList(value);
+        setListClone(value);
+        setPagCount(getCount(value));
+        if (localStorage.getItem(localTableName)) {
+            filtrar(JSON.parse(localStorage.getItem(localTableName)));
+        }
     }, [itemsCount, isLoading, data, getCount, error]);
     (0, react_1.useEffect)(() => {
         setCurrentPage(listPage - 1);
@@ -151,14 +159,15 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     const onPaginationChange = (0, react_1.useCallback)((e, page) => {
         setListPage(page);
     }, []);
-    const onInputChange = (0, react_1.useCallback)((e) => {
+    function onInputChange(e) {
+        console.log(listClone);
         const searchValue = e.target.value;
         if (searchValue === '') {
-            setList(getData(data));
-            setPagCount(getCount(getData(data)));
+            setList(listClone);
+            setPagCount(getCount(getData(list)));
             return;
         }
-        const listData = getData(data);
+        const listData = getData(list);
         const newList = [];
         listData.forEach((x) => {
             const dataStr = [];
@@ -227,7 +236,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
         setPagCount(getCount(newList));
         setCurrentPage(0);
         setListPage(1);
-    }, [getCount, data]);
+    }
     const getMaxItems = (0, react_1.useCallback)(() => {
         const start = currentPage * itemsCount;
         return list.slice(start, start + itemsCount);
@@ -427,284 +436,148 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
         link.setAttribute('download', `${csv === null || csv === void 0 ? void 0 : csv.fileName}.csv`);
         link.click();
     }, [list]);
-    (0, react_1.useEffect)(() => {
-        filterBasedOnList(appliedFilters);
-    }, [appliedFilters]);
-    const filterBasedOnList = (filteredList) => {
-        var _a;
-        let rawList = JSON.parse(JSON.stringify(Array.isArray(startData) ? startData : (_a = (0, lodash_get_1.default)(startData, dataPath)) !== null && _a !== void 0 ? _a : '[]'));
-        if (filteredList.length <= 0 || rawList.length <= 0) {
-            setList(rawList);
-            setPagCount(getCount(rawList));
-            setCurrentPage(0);
-            setListPage(1);
-            return;
+    function expandAll() {
+        let obj = {};
+        for (let i = 0; i < itemCount; i++) {
+            obj[i] = !isExpandAll;
         }
-        let canContinue = true;
-        // verificando todas as chaves existem, se a chave não existir, não pode continuar e nao faz nada
-        filteredList
-            .map((x) => x.keyName)
-            .forEach((x) => {
-            if (!canContinue)
-                return;
-            if (!Object.keys(rawList[0]).includes(x)) {
-                canContinue = false;
-                return;
-            }
-        });
-        if (!canContinue) {
-            setAppliedFilters([]);
-            localStorage.setItem(filterStorageName, JSON.stringify([]));
-            setList(rawList);
-            setPagCount(getCount(rawList));
-            setCurrentPage(0);
-            setListPage(1);
+        setShowExpandObjOnExited(obj);
+        setExpandObj(obj);
+        isExpandAll = !isExpandAll;
+    }
+    function reset() {
+        setList(startData);
+        setListClone(startData);
+        setPagCount(getCount(startData));
+        setCurrentPage(0);
+        setListPage(1);
+        localStorage.removeItem(localTableName);
+        setFilterKey(new Date().getTime().toString());
+    }
+    function filtrar(filterData) {
+        if (!startData)
             return;
-        }
-        function category(type, keyName, uniqueName, customValue, referencekey) {
-            if (type === 'a-z') {
-                rawList = rawList.sort((a, b) => {
-                    const aValue = a[keyName];
-                    const bValue = b[keyName];
-                    let valueA = aValue;
-                    let valueB = bValue;
-                    if (typeof aValue === 'string' || typeof bValue === 'string') {
-                        valueA = String(aValue).toLowerCase();
-                        valueB = String(bValue).toLowerCase();
-                    }
-                    console.table({
-                        values: valueA + ' < ' + valueB,
-                        result: valueA < valueB,
-                    });
-                    if (valueA < valueB) {
-                        return -1;
-                    }
-                    if (valueA > valueB) {
-                        return 1;
-                    }
-                    return 0;
-                });
-            } //
-            else if (type === 'z-a') {
-                rawList = rawList.sort((a, b) => {
-                    const aValue = a[keyName];
-                    const bValue = b[keyName];
-                    let valueA = aValue;
-                    let valueB = bValue;
-                    if (typeof aValue === 'string' || typeof bValue === 'string') {
-                        valueA = String(aValue).toLowerCase();
-                        valueB = String(bValue).toLowerCase();
-                    }
-                    if (valueA < valueB) {
-                        return 1;
-                    }
-                    if (valueA > valueB) {
-                        return -1;
-                    }
-                    return 0;
-                });
-            } //
-            else if (type === 'items' || type === 'select') {
-                rawList = rawList
-                    .filter((x) => String(x[keyName])
-                    .toLowerCase()
-                    .includes(customValue !== null && customValue !== void 0 ? customValue : ''))
-                    .sort((a, b) => {
-                    const aValue = String(a[keyName]);
-                    const bValue = String(b[keyName]);
-                    const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
-                    const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
-                    if (valueA.includes(customValue !== null && customValue !== void 0 ? customValue : ''))
-                        return -1;
-                    if (valueB.includes(customValue !== null && customValue !== void 0 ? customValue : ''))
-                        return 1;
-                    if (valueA < valueB) {
-                        return -1;
-                    }
-                    if (valueA > valueB) {
-                        return 1;
-                    }
-                    return 0;
-                });
-                if (referencekey) {
-                    const data = [];
-                    let newFiltered = rawList.filter((x) => {
-                        const item = String(x[keyName]);
-                        const value = typeof item === 'number' ? item : item.toLowerCase();
-                        if (value === customValue) {
-                            data.push(x);
-                            return false;
-                        }
-                        return true;
-                    });
-                    data.sort((a, b) => {
-                        const aValue = String(a[referencekey]);
-                        const bValue = String(b[referencekey]);
-                        const valueA = typeof aValue === 'number' ? aValue : aValue.toLowerCase();
-                        const valueB = typeof bValue === 'number' ? bValue : bValue.toLowerCase();
-                        if (valueA < valueB) {
-                            return 1;
-                        }
-                        if (valueA > valueB) {
-                            return -1;
-                        }
-                        return 0;
-                    });
-                    data.forEach((x) => {
-                        newFiltered.unshift(x);
-                    });
-                    rawList = newFiltered;
-                }
-            } //
-            else if (type === 'data-a-z') {
-                rawList = rawList.sort((a, b) => {
-                    const aValue = a[keyName];
-                    const bValue = b[keyName];
-                    const separator = filterSeparator;
-                    const aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
-                    const bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
-                    if (!aDt && !bDt)
-                        return 0;
-                    const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
-                    const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
-                    if (valueA.isBefore(valueB)) {
-                        return -1;
-                    }
-                    if (valueA.isAfter(valueB)) {
-                        return 1;
+        let currentData = JSON.parse(JSON.stringify(startData));
+        filterData
+            .filter((dt) => dt.value)
+            .forEach((dt) => {
+            let filteredData = [];
+            switch (dt.type) {
+                case 'number':
+                    switch (dt.operator) {
+                        case 'igual':
+                            currentData.forEach((cd) => {
+                                const value = Number((0, lodash_get_1.default)(cd, dt.keyName, ''));
+                                if (value === Number(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'maior que':
+                            currentData.forEach((cd) => {
+                                const value = Number((0, lodash_get_1.default)(cd, dt.keyName, ''));
+                                if (value > Number(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'menor que':
+                            currentData.forEach((cd) => {
+                                const value = Number((0, lodash_get_1.default)(cd, dt.keyName, ''));
+                                if (value < Number(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
                     }
-                    return 0;
-                });
-            } //
-            else if (type === 'data-z-a') {
-                rawList = rawList.sort((a, b) => {
-                    const aValue = a[keyName], bValue = b[keyName], separator = filterSeparator, aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0], bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
-                    if (!aDt && !bDt)
-                        return 0;
-                    const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
-                    const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
-                    if (valueA.isBefore(valueB)) {
-                        return 1;
+                    break;
+                case 'string':
+                    switch (dt.operator) {
+                        case 'igual':
+                            currentData.forEach((cd) => {
+                                const value = (0, lodash_get_1.default)(cd, dt.keyName, '');
+                                if (value === dt.value) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'contem':
+                            currentData.forEach((cd) => {
+                                const value = (0, lodash_get_1.default)(cd, dt.keyName, '');
+                                if (value.includes(dt.value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'tem um dos':
+                            currentData.forEach((cd) => {
+                                const value = (0, lodash_get_1.default)(cd, dt.keyName, '');
+                                if (dt.value.map((x) => x.id).includes(value)) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
                     }
-                    if (valueA.isAfter(valueB)) {
-                        return -1;
+                    break;
+                case 'date':
+                    switch (dt.operator) {
+                        case 'data exata':
+                            currentData.forEach((cd) => {
+                                const value = (0, dayjs_1.default)((0, lodash_get_1.default)(cd, dt.keyName, ''), 'DD/MM/YYYY');
+                                if (!value.isValid())
+                                    return;
+                                if (value.isSame((0, dayjs_1.default)(dt.value, 'DD/MM/YYYY'))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
+                        case 'entre':
+                            currentData.forEach((cd) => {
+                                const value = (0, dayjs_1.default)((0, lodash_get_1.default)(cd, dt.keyName, ''), 'DD/MM/YYYY');
+                                const dateA = (0, dayjs_1.default)(dt.value, 'DD/MM/YYYY');
+                                const dateB = (0, dayjs_1.default)(dt.value2, 'DD/MM/YYYY');
+                                console.log(dateA.isValid(), dateB.isValid());
+                                if (!dateA.isValid() || !dateB.isValid())
+                                    return;
+                                if ((value.isAfter(dateA) || value.isSame(dateA)) && (value.isBefore(dateB) || value.isSame(dateB))) {
+                                    filteredData.push(cd);
+                                }
+                            });
+                            break;
                     }
-                    return 0;
-                });
+                    break;
             }
-        }
-        function date(from, to, keyName) {
-            const separator = filterSeparator;
-            rawList = rawList.filter((x) => {
-                const dts = String(x[keyName])
-                    .split(separator)
-                    .map((k) => { var _a, _b; return (_b = ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]) !== null && _b !== void 0 ? _b : ''; });
-                let inside = false;
-                dts.forEach((k) => {
-                    if (inside)
-                        return;
-                    const dt = (0, dayjs_1.default)(k, 'D/M/YYYY');
-                    const dtFrom = (0, dayjs_1.default)(from, 'D/M/YYYY');
-                    if (to) {
-                        const dtTo = (0, dayjs_1.default)(to, 'D/M/YYYY');
-                        if ((dtFrom.isBefore(dt) || dtFrom.isSame(dt)) && (dtTo.isAfter(dt) || dtTo.isSame(dt))) {
-                            inside = true;
-                        }
-                    } //
-                    else {
-                        if (dtFrom.isBefore(dt) || dtFrom.isSame(dt)) {
-                            inside = true;
-                        }
-                    }
-                });
-                return inside;
-            });
-            rawList = rawList.sort((a, b) => {
-                const aValue = a[keyName];
-                const bValue = b[keyName];
-                const separator = filterSeparator;
-                const aDt = aValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
-                const bDt = bValue.split(separator).map((k) => { var _a; return ((_a = k.match(/[0-9]+\/[0-9]+\/[0-9]+/)) !== null && _a !== void 0 ? _a : [])[0]; })[0];
-                if (!aDt && !bDt)
-                    return 0;
-                const valueA = (0, dayjs_1.default)(aDt, 'D/M/YYYY');
-                const valueB = (0, dayjs_1.default)(bDt, 'D/M/YYYY');
-                if (valueA.isBefore(valueB)) {
-                    return -1;
-                }
-                if (valueA.isAfter(valueB)) {
-                    return 1;
-                }
-                return 0;
-            });
-        }
-        appliedFilters.forEach((x) => {
-            if (!x.isDate)
-                category(x.type, x.keyName, x.uniqueName, x.customValue, x.referencekey);
-            else
-                date(x.from, x.to, x.keyName);
+            console.log('filtred: ', filteredData);
+            currentData = filteredData;
         });
-        setList(rawList);
-        setPagCount(getCount(rawList));
+        setList(currentData);
+        setPagCount(getCount(currentData));
         setCurrentPage(0);
         setListPage(1);
-    };
-    const handleFilterOption = (type, keyName, uniqueName, customValue, referencekey) => {
-        setAppliedFilters((s) => {
-            const value = [
-                ...s.filter((x) => (x.isDate ? true : x.keyName !== keyName)),
-                {
-                    type,
-                    keyName,
-                    uniqueName,
-                    customValue,
-                    referencekey,
-                },
-            ];
-            localStorage.setItem(filterStorageName, JSON.stringify(value));
-            return value;
-        });
-    };
-    const handleFilterReset = () => {
-        const value = JSON.parse(JSON.stringify(Array.isArray(startData) ? startData : (0, lodash_get_1.default)(startData, dataPath)));
-        setList(value);
-        setAppliedFilters([]);
-        localStorage.setItem(filterStorageName, JSON.stringify([]));
-    };
-    const removeFilter = (uniqueName) => {
-        if (uniqueName === 'isDate')
-            setAppliedFilters((s) => s.filter((x) => !x.isDate));
-        else
-            setAppliedFilters((s) => {
-                const value = s.filter((x) => x.uniqueName !== uniqueName);
-                localStorage.setItem(filterStorageName, JSON.stringify(value));
-                return value;
-            });
-    };
-    const handleDateFilter = (from, to, keyName) => {
-        setAppliedFilters((s) => {
-            const value = [
-                ...s.filter((x) => !x.isDate),
-                {
-                    isDate: true,
-                    from,
-                    to,
-                    keyName,
-                    id: from + keyName,
-                },
-            ];
-            localStorage.setItem(filterStorageName, JSON.stringify(value));
-            return value;
+        localStorage.setItem(localTableName, JSON.stringify(filterData));
+        setListClone(currentData);
+    }
+    function ordenar(order) {
+        let oldList = [...list];
+        oldList.sort((a, b) => {
+            const aValue = order.type === 'string' ? (0, lodash_get_1.default)(a, order.key, '') : Number((0, lodash_get_1.default)(a, order.key, 0));
+            const bValue = order.type === 'string' ? (0, lodash_get_1.default)(b, order.key, '') : Number((0, lodash_get_1.default)(b, order.key, 0));
+            if (orderAsc) {
+                if (aValue < bValue)
+                    return -1;
+                if (aValue > bValue)
+                    return 1;
+            }
+            else {
+                if (aValue > bValue)
+                    return -1;
+                if (aValue < bValue)
+                    return 1;
+            }
+            return 0;
         });
-    };
-    function expandAll() {
-        let obj = {};
-        for (let i = 0; i < itemCount; i++) {
-            obj[i] = !isExpandAll;
-        }
-        setShowExpandObjOnExited(obj);
-        setExpandObj(obj);
-        isExpandAll = !isExpandAll;
+        orderAsc = !orderAsc;
+        setList(oldList);
     }
     // effect usado quando for mostrar "VER MAIS" e "VER MENOS"
     (0, react_1.useEffect)(() => {
@@ -719,6 +592,9 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
         });
         setShowExpandObj(obj);
     }, [list, itemsCount, currentPage]);
+    (0, react_1.useEffect)(() => {
+        console.log(filterContainer.current);
+    }, [filterContainer.current]);
     if (error)
         return (react_1.default.createElement(material_1.Box, { bgcolor: '#E2E8F0', padding: 2, marginX: 2 },
             react_1.default.createElement(Typography_1.default, { fontSize: 24, textAlign: 'center', fontFamily: 'Inter' },
@@ -735,7 +611,7 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { marginX: isSmall ? customMarginMobile : customMargin, bgcolor: 'white', p: 2, borderRadius: 6 },
             react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' } },
-                react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' }, marginBottom: 2, height: { md: '40px', xs: 'inherit' }, width: '100%' },
+                react_1.default.createElement(material_1.Stack, { spacing: 1.5, direction: { xs: 'column', md: 'row' }, height: { md: '40px', xs: 'inherit' }, width: '100%' },
                     react_1.default.createElement(TextField_1.default, { InputProps: {
                             startAdornment: react_1.default.createElement(Search_1.default, { sx: { marginRight: 1, fill: '#c0c0c0' } }),
                             sx: {
@@ -747,37 +623,40 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
                             borderRadius: '50px',
                             maxWidth: '600px',
                         }, size: 'small', onChange: onInputChange, fullWidth: true, placeholder: `Pesquisar ${tableName}` }),
-                    Object.keys(filters).length > 0 && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.FilterAlt, null), variant: 'contained', onClick: (e) => setFilterOpen(true), sx: {
-                            borderRadius: '8px',
+                    Modal_1.MODAL.reparent(react_1.default.createElement(CriarFiltro, { key: filterKey, reset: reset, filtrar: filtrar, baseFilters: [...filters], filters: localStorage.getItem(localTableName) ? JSON.parse(localStorage.getItem(localTableName)) : [...filters] }), 0),
+                    react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.FilterAlt, null), variant: 'contained', onClick: (e) => Modal_1.MODAL.openReparented(0), sx: {
+                            borderRadius: 3,
                             paddingX: '24px',
                             paddingY: '8px',
-                            minWidth: 200,
                             backgroundColor: '#208FE8',
                             textTransform: 'capitalize',
                         } },
-                        react_1.default.createElement(material_1.Stack, { direction: 'row', marginLeft: 2, borderRadius: 5, padding: 0 },
-                            react_1.default.createElement("span", null, "Filtro"),
-                            react_1.default.createElement("span", { style: {
-                                    whiteSpace: 'nowrap',
-                                    marginLeft: 8,
-                                    backgroundColor: '#15528f',
-                                    borderRadius: 8,
-                                    padding: '0px 8px',
-                                } },
-                                appliedFilters.length,
-                                " aplicado",
-                                appliedFilters.length > 1 ? 's' : '')))),
-                    react_1.default.createElement(material_1.Button, { variant: 'contained', startIcon: isExpandAll ? react_1.default.createElement(icons_material_1.KeyboardArrowUp, null) : react_1.default.createElement(icons_material_1.KeyboardArrowDown, null), sx: {
-                            backgroundColor: '#637082',
-                            ':hover': {
-                                backgroundColor: '#3c4757',
-                            },
-                            textTransform: 'capitalize',
-                            borderRadius: '8px',
-                            padding: '0px 8px',
-                        }, onClick: expandAll }, isExpandAll ? 'Recolher Todos' : 'Expandir Todos')),
-                react_1.default.createElement(material_1.Stack, { alignItems: 'end', width: { xs: '100%', md: '20%' }, pb: 2, direction: { xs: 'row', md: 'column' }, spacing: { xs: 1, md: 0 } },
-                    react_1.default.createElement(Typography_1.default, { fontWeight: 600, textAlign: 'end' }, "Demandas cadastradas"),
+                        react_1.default.createElement(material_1.Stack, { direction: 'row', borderRadius: 5, padding: 0 },
+                            react_1.default.createElement("span", null, "Filtrar"))),
+                    react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1 },
+                        react_1.default.createElement(CustomMenu_1.default, { data: orderBy.map((x) => ({
+                                name: x.label,
+                                onClick: () => ordenar(x),
+                            })), btProps: {
+                                startIcon: react_1.default.createElement(icons_material_1.KeyboardArrowDown, null),
+                                fullWidth: true,
+                            } }, "Ordenar"),
+                        react_1.default.createElement(material_1.Button, { variant: 'contained', fullWidth: true, startIcon: isExpandAll ? react_1.default.createElement(icons_material_1.KeyboardArrowUp, null) : react_1.default.createElement(icons_material_1.KeyboardArrowDown, null), sx: {
+                                backgroundColor: '#637082',
+                                ':hover': {
+                                    backgroundColor: '#3c4757',
+                                },
+                                textTransform: 'capitalize',
+                                borderRadius: 3,
+                                padding: {
+                                    md: '0px 8px',
+                                },
+                            }, onClick: expandAll }, isExpandAll ? 'Recolher' : 'Expandir'))),
+                react_1.default.createElement(material_1.Stack, { alignItems: 'end', width: { xs: '100%', md: '20%' }, direction: { xs: 'row', md: 'column' }, spacing: { xs: 1, md: 0 } },
+                    react_1.default.createElement(Typography_1.default, { fontWeight: 600, textAlign: 'end' },
+                        "Registro de ",
+                        tableName,
+                        "s"),
                     react_1.default.createElement(material_1.Stack, { justifyContent: 'center' },
                         react_1.default.createElement(Typography_1.default, null,
                             "Exibindo ",
@@ -786,6 +665,28 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
                             currentPage * itemsCount + 1 + getMaxItems().length - 1,
                             " de ",
                             list.length)))),
+            localStorage.getItem(localTableName) && (react_1.default.createElement(material_1.Box, { display: 'inline-flex', flexWrap: 'wrap', padding: 0.5, borderRadius: 4, marginBottom: 1 }, JSON.parse((_a = localStorage.getItem(localTableName)) !== null && _a !== void 0 ? _a : '[]')
+                .filter((x) => x.value)
+                .map((x) => (react_1.default.createElement(material_1.Stack, { direction: 'row', spacing: 1, bgcolor: '#4e85c1', color: 'white', width: 'fit-content', paddingY: 0.5, borderRadius: 2, paddingX: 1, m: 0.5 },
+                react_1.default.createElement(Typography_1.default, { fontWeight: 700 }, x.label),
+                react_1.default.createElement(Typography_1.default, { fontStyle: 'italic' }, x.operator),
+                react_1.default.createElement(Typography_1.default, { bgcolor: 'white', borderRadius: 2, paddingX: 1, color: 'black' }, x.operator === 'tem um dos' ? x.value.map((x) => x.id).join(' - ') : x.value.toString()),
+                react_1.default.createElement(material_1.IconButton, { onClick: (e) => {
+                        var _a;
+                        let currentValue = JSON.parse((_a = localStorage.getItem(localTableName)) !== null && _a !== void 0 ? _a : '[]');
+                        currentValue = currentValue.map((item) => {
+                            if (item.label === x.label) {
+                                return Object.assign(Object.assign(Object.assign({}, item), { value: '' }), (item.value2 ? { value2: '' } : {}));
+                            }
+                            return item;
+                        });
+                        filtrar(currentValue);
+                    }, size: 'small', sx: {
+                        padding: 0,
+                    } },
+                    react_1.default.createElement(Clear_1.default, { sx: {
+                            fill: 'white',
+                        } }))))))),
             react_1.default.createElement(material_1.Stack, { spacing: 0.2 }, getMaxItems().length <= 0 ? (react_1.default.createElement(material_1.Stack, { sx: { backgroundColor: '#E2E8F0', padding: 2, marginX: { xs: 2, md: 0 } }, justifyContent: 'center', alignItems: 'center' },
                 react_1.default.createElement(Typography_1.default, { fontSize: 21, fontFamily: 'Inter', fontWeight: 600, textAlign: 'center' }, user ? emptyMsg.user : emptyMsg.public))) : (getMaxItems().map((x, index) => (react_1.default.createElement(material_1.Paper, { key: index, sx: {
                     padding: 0.5,
@@ -872,90 +773,177 @@ function Table({ mediaQueryLG, columns, fetchFunc, emptyMsg = {
                         }
                         return paginationCount;
                     }), sx: { bgcolor: 'white', borderRadius: '50px', height: '40px', width: '40px', minWidth: 0, border: 'solid 1px #E2E8F0' } },
-                    react_1.default.createElement(NavigateNextRounded_1.default, { sx: { transform: 'scale(1.5)' } })))),
-        react_1.default.createElement(material_1.SwipeableDrawer, { anchor: isSmall ? 'bottom' : 'right', open: filterOpen, onClose: (e) => setFilterOpen(false), onOpen: (e) => setFilterOpen(true) },
-            react_1.default.createElement(material_1.List, { sx: { minWidth: 310 } }, Object.keys(filters).map((f, fIndex) => (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify({ f, fIndex }) },
-                react_1.default.createElement(material_1.ListItemButton, { onClick: (e) => setFilterCollapse((s) => s.map((x, idx) => {
-                        if (idx === fIndex)
-                            return !x;
-                        return x;
-                    })), sx: {
-                        backgroundColor: '#ebeef2',
-                    } },
-                    react_1.default.createElement(material_1.ListItemIcon, null,
-                        react_1.default.createElement(icons_material_1.Circle, { transform: 'scale(0.4)' })),
-                    react_1.default.createElement(material_1.ListItemText, { primary: f }),
-                    filterCollapse[fIndex] ? react_1.default.createElement(icons_material_1.ExpandLess, null) : react_1.default.createElement(icons_material_1.ExpandMore, null)),
-                react_1.default.createElement(material_1.Collapse, { in: filterCollapse[fIndex], timeout: 'auto', unmountOnExit: true },
-                    react_1.default.createElement(material_1.List, { component: 'div', disablePadding: true, sx: { backgroundColor: 'white' } }, filters[f].map((x, index) => (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify({ f, index }) }, x.options ? (x.options.map((o) => (react_1.default.createElement(material_1.ListItemButton, { sx: Object.assign({ pl: 4, borderBottom: 1, borderColor: '#ebeef2' }, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(o)}`) && {
-                            bgcolor: '#b7e4c7',
-                            ':hover': { bgcolor: '#b7e4c7' },
-                        })) },
-                        react_1.default.createElement(material_1.ListItemText, { primary: o.name, onClick: (e) => handleFilterOption(x.type, x.keyName, `${f}:${JSON.stringify(o)}`, o.key, x.referenceKey), sx: { color: o.color, fontWeight: 600 } }),
-                        react_1.default.createElement(material_1.Box, null, appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(o)}`) && (react_1.default.createElement(material_1.Tooltip, { title: 'Remover' },
-                            react_1.default.createElement(material_1.IconButton, { sx: { bgcolor: '#c71c1c', height: '30px', width: '30px', ':hover': { bgcolor: 'red', border: '2px solid #9e2929' } }, onClick: (e) => removeFilter(`${f}:${JSON.stringify(o)}`) },
-                                react_1.default.createElement(icons_material_1.Delete, { sx: { fill: 'white', transform: 'scale(0.8, 0.8)' } }))))))))) : x.type === 'date-interval' ? (react_1.default.createElement(material_1.Box, { padding: 2 },
-                        react_1.default.createElement(FormProvider_1.default, { onSubmit: (d) => handleDateFilter(d['filterDtStart'], d['filterDtEnd'], x.keyName) },
-                            react_1.default.createElement(DatePicker_1.default, { name: 'filterDtStart', title: 'A partir de:', required: true }),
-                            react_1.default.createElement(material_1.Box, { marginTop: 2 }),
-                            react_1.default.createElement(DatePicker_1.default, { name: 'filterDtEnd', title: 'At\u00E9 (opcional):' }),
-                            react_1.default.createElement(material_1.Stack, { marginTop: 2 },
-                                react_1.default.createElement(material_1.Button, { type: 'submit', variant: 'outlined', startIcon: react_1.default.createElement(icons_material_1.CalendarToday, null), sx: { width: '100%' } }, "Filtrar por Data"),
-                                react_1.default.createElement(material_1.Box, null, appliedFilters.filter((x) => x.isDate).length > 0 && (react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Delete, { sx: { fill: 'white' } }), variant: 'contained', color: 'error', sx: { width: '100%', marginTop: 1 }, onClick: (e) => removeFilter('isDate') }, "Remover Filtro Data"))))))) : x.selectList ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(material_1.Autocomplete, { options: x.selectList.map((x) => ({
-                                id: x.toLowerCase(),
-                                label: x,
-                            })), onFocus: (e) => console.log('ata'), onChange: (e, value) => {
-                                if (value) {
-                                    const id = `${f}:${JSON.stringify(value)}`;
-                                    handleFilterOption(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.label.toLowerCase(), x.referenceKey);
-                                    setOldSelectState(id);
-                                }
-                                else {
-                                    removeFilter(oldSelectState);
-                                }
-                            }, sx: {
-                                margin: 1,
-                            }, size: 'small', renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: 'Teste' })) }))) : x.listEndpoint ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(FetchSelectAutoComplete, { url: x.listEndpoint, label: x.name, onChange: (e, value) => {
-                                if (value) {
-                                    const id = `${f}:${JSON.stringify(value)}`;
-                                    handleFilterOption(x.type, x.keyName, id, value === null || value === void 0 ? void 0 : value.id.toLowerCase(), x.referenceKey);
-                                    setOldSelectState(id);
-                                }
-                                else {
-                                    removeFilter(oldSelectState);
-                                }
-                            } }))) : (react_1.default.createElement(material_1.Stack, { direction: 'row', sx: Object.assign({}, (appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(x)}`) && {
-                            bgcolor: '#b7e4c7',
-                            ':hover': { bgcolor: '#b7e4c7' },
-                        })) },
-                        react_1.default.createElement(material_1.ListItemButton, { sx: {
-                                pl: 4,
-                                borderBottom: 1,
-                                borderColor: '#ebeef2',
-                            }, onClick: (e) => handleFilterOption(x.type, x.keyName, `${f}:${JSON.stringify(x)}`) },
-                            react_1.default.createElement(material_1.ListItemIcon, { sx: { minWidth: '25px' } }, x.type === 'a-z' || x.type === 'data-a-z' ? (react_1.default.createElement(icons_material_1.South, { transform: 'scale(0.5)' })) : x.type === 'z-a' || x.type === 'data-z-a' ? (react_1.default.createElement(icons_material_1.North, { transform: 'scale(0.5)' })) : null),
-                            react_1.default.createElement(material_1.ListItemText, { primary: x.name })),
-                        react_1.default.createElement(material_1.Stack, { justifyContent: 'center', marginX: 2 }, appliedFilters.map((x) => x.uniqueName).includes(`${f}:${JSON.stringify(x)}`) && (react_1.default.createElement(material_1.Tooltip, { title: 'Remover' },
-                            react_1.default.createElement(material_1.IconButton, { sx: { bgcolor: '#c71c1c', height: '30px', width: '30px', ':hover': { bgcolor: 'red', border: '2px solid #9e2929' } }, onClick: (e) => removeFilter(`${f}:${JSON.stringify(x)}`) },
-                                react_1.default.createElement(icons_material_1.Delete, { sx: { fill: 'white', transform: 'scale(0.8, 0.8)' } })))))))))))))))),
-            react_1.default.createElement(material_1.Button, { variant: 'contained', onClick: handleFilterReset, startIcon: react_1.default.createElement(icons_material_1.RestartAlt, null), sx: { marginX: 2, marginBottom: 2 } }, "Reiniciar"))));
+                    react_1.default.createElement(NavigateNextRounded_1.default, { sx: { transform: 'scale(1.5)' } }))))));
 }
 exports.Table = Table;
-function FetchSelectAutoComplete(props) {
-    const [data, setData] = (0, react_1.useState)([]);
+function CriarFiltro({ filters, baseFilters, filtrar, reset }) {
+    const [data, setData] = (0, react_1.useState)(filters);
+    const [resetFields, setResetFields] = (0, react_1.useState)(false);
+    function addRule(filter) {
+        setData((dt) => {
+            return [...dt, filter];
+        });
+    }
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (react_1.default.createElement(material_1.Box, null,
+        react_1.default.createElement(material_1.Menu, { open: open, onClose: handleClose, anchorEl: anchorEl }, baseFilters.map((x) => (react_1.default.createElement(material_1.MenuItem, { onClick: (e) => {
+                addRule(x);
+                setAnchorEl(null);
+            } }, x.label)))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'space-between' },
+            react_1.default.createElement(Typography_1.default, { fontWeight: 700, fontSize: 18 }, "Filtrar"),
+            react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(icons_material_1.Refresh, null), sx: {
+                    textTransform: 'capitalize',
+                }, onClick: (e) => {
+                    reset();
+                    Modal_1.MODAL.close();
+                } }, "Limpar")),
+        react_1.default.createElement(material_1.Box, { marginBottom: 1 },
+            react_1.default.createElement(material_1.Alert, { severity: 'warning' }, "Preencha apenas os campos que deseja filtrar.")),
+        react_1.default.createElement(material_1.Stack, null, resetFields ? (data.map((d, idx) => (react_1.default.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr[idx] = valueData;
+                    return arr;
+                });
+            }, removeDt: () => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr.splice(idx, 1);
+                    return arr;
+                });
+            } })))) : (react_1.default.createElement(material_1.Box, null, data.map((d, idx) => (react_1.default.createElement(FilterRow, { filterValue: d, setReset: setResetFields, idx: idx, setDt: (valueData) => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr[idx] = valueData;
+                    return arr;
+                });
+            }, removeDt: () => {
+                setData((dt) => {
+                    let arr = [...dt];
+                    arr.splice(idx, 1);
+                    return arr;
+                });
+            } })))))),
+        react_1.default.createElement(material_1.Stack, { direction: 'row', justifyContent: 'flex-end', marginTop: 1 },
+            react_1.default.createElement(material_1.Button, { variant: 'contained', color: 'success', startIcon: react_1.default.createElement(Search_1.default, null), sx: {
+                    textTransform: 'capitalize',
+                }, onClick: (e) => {
+                    filtrar(data);
+                    Modal_1.MODAL.close();
+                } }, "Filtrar"))));
+}
+function FilterRow({ filterValue, setDt, removeDt, idx, setReset, }) {
+    const [currentOperator, setCurrentOperator] = (0, react_1.useState)(filterValue.operator);
+    const [data, setData] = (0, react_1.useState)(filterValue);
+    const theme = (0, material_1.useTheme)();
+    const isSmall = (0, material_1.useMediaQuery)(theme.breakpoints.only('xs'));
     (0, react_1.useEffect)(() => {
-        axios_1.default
-            .get(props.url)
-            .then((dt) => {
-            setData(dt.data);
-        })
-            .catch((e) => console.log('Erro ao buscar dados do filtro'));
-    }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Autocomplete, { options: data, onChange: props.onChange, sx: {
-                margin: 1,
-            }, size: 'small', renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { label: props.label })) })));
+        setDt(data);
+    }, [data]);
+    return (react_1.default.createElement(material_1.Stack, { direction: 'row', alignItems: 'end', spacing: 1, width: '100%', bgcolor: idx % 2 === 0 ? '#ededed' : 'inherit', padding: 0.5, borderRadius: 2 },
+        !isSmall && (react_1.default.createElement(Typography_1.default, { width: '100%', alignContent: 'center', fontWeight: 600, color: '#323232' }, filterValue.label)),
+        react_1.default.createElement(material_1.FormControl, { sx: {
+                width: '100%',
+            } },
+            isSmall && react_1.default.createElement(Typography_1.default, null, filterValue.label),
+            react_1.default.createElement(material_1.Select, { onChange: (e) => {
+                    const value = e.target.value;
+                    setData((obj) => (Object.assign(Object.assign({}, obj), { operator: value, value: '' })));
+                    setCurrentOperator(value);
+                }, defaultValue: currentOperator, size: 'small', sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }, filterValue.operators.map((x) => (react_1.default.createElement(material_1.MenuItem, { value: x }, x))))),
+        react_1.default.createElement(FilterField, { filterValue: filterValue, operator: data.operator, onChange: (value, type = 'value') => {
+                setData((obj) => (Object.assign(Object.assign({}, obj), { [type]: value })));
+            } }),
+        react_1.default.createElement(material_1.IconButton, { onClick: (e) => {
+                setDt(Object.assign(Object.assign({}, data), { value: '' }));
+                setReset((s) => !s);
+            } },
+            react_1.default.createElement(icons_material_1.Refresh, null))));
+}
+function FilterField({ filterValue, operator, onChange }) {
+    switch (filterValue.type) {
+        case 'number':
+            return (react_1.default.createElement(TextField_1.default, { type: 'number', size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }));
+        case 'string':
+            if (filterValue.useList) {
+                switch (operator) {
+                    case 'tem um dos':
+                        return (react_1.default.createElement(material_1.Autocomplete, { multiple: true, id: 'tags-standard', onChange: (e, value) => {
+                                onChange(value);
+                            }, options: filterValue.useList, defaultValue: Array.isArray(filterValue.value) ? filterValue.value : [], renderInput: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { variant: 'standard', placeholder: 'Escolha os valores', fullWidth: true })), fullWidth: true }));
+                    case 'contem':
+                        return (react_1.default.createElement(material_1.Box, { width: '100%' },
+                            react_1.default.createElement(material_1.Autocomplete, { options: filterValue.useList, onChange: (e, value) => {
+                                    onChange(value ? value.id : '');
+                                }, defaultValue: filterValue.value && typeof filterValue.value === 'string' ? filterValue.useList.find((item) => item.id === filterValue.value) : undefined, isOptionEqualToValue: (option, value) => option.label === value.label, renderInput: (params) => (react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', placeholder: 'Escolha um valor', fullWidth: true, sx: {
+                                        bgcolor: 'white',
+                                    } }))), fullWidth: true })));
+                }
+            }
+            return (react_1.default.createElement(TextField_1.default, { size: 'small', placeholder: 'Valor', defaultValue: filterValue.value, onChange: (e) => {
+                    onChange(e.target.value);
+                }, sx: {
+                    bgcolor: 'white',
+                }, fullWidth: true }));
+        case 'date':
+            switch (operator) {
+                case 'data exata':
+                    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
+                            }, defaultValue: filterValue.value ? (0, dayjs_1.default)(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
+                case 'entre':
+                    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { adapterLocale: 'pt-br', dateAdapter: AdapterDayjs_1.AdapterDayjs },
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '');
+                            }, defaultValue: filterValue.value ? (0, dayjs_1.default)(filterValue.value, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) }),
+                        react_1.default.createElement(x_date_pickers_1.DatePicker, { format: 'DD/MM/YYYY', onChange: (dt) => {
+                                onChange(dt.isValid() ? dt.format('DD/MM/YYYY') : '', 'value2');
+                            }, defaultValue: filterValue.value2 ? (0, dayjs_1.default)(filterValue.value2, 'DD/MM/YYYY') : undefined, sx: {
+                                div: {
+                                    input: {
+                                        paddingX: 2,
+                                        paddingY: 1.05,
+                                    },
+                                },
+                                width: '100%',
+                                bgcolor: 'white',
+                            }, inputRef: (params) => react_1.default.createElement(TextField_1.default, Object.assign({}, params, { size: 'small', fullWidth: true })) })));
+            }
+            break;
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null);
 }
 exports.default = react_1.default.memo(Table);

package/components/modal/Modal.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 export declare let MODAL: {
     open: (customCompoment?: JSX.Element | JSX.Element[] | (() => JSX.Element)) => void;
+    reparent: (child: JSX.Element, id: string | number) => JSX.Element;
+    openReparented: (id: string | number) => void;
     close: () => void;
 };
 export declare function CustomModalProvider(): JSX.Element;

package/components/modal/Modal.js

@@ -33,17 +33,37 @@ const react_1 = __importStar(require("react"));
 exports.MODAL = {
     open: () => { },
     close: () => { },
+    openReparented: () => { },
+    reparent: () => react_1.default.createElement(react_1.default.Fragment, null),
 };
+function ReparentHelper() {
+    const ref = (0, react_1.useRef)(null);
+    return react_1.default.createElement("div", { ref: ref });
+}
 function CustomModalProvider() {
     const [open, setOpen] = (0, react_1.useState)(false);
-    const [content, setContent] = (0, react_1.useState)(react_1.default.createElement(react_1.default.Fragment, null));
+    const [content, setContent] = (0, react_1.useState)(null);
+    // const contentRef = useRef<JSX.Element | JSX.Element[]>(<></>)
     const handleClose = () => setOpen(false);
+    const containerRef = (0, react_1.useRef)(null);
     const theme = (0, material_1.useTheme)();
     const isDesktop = (0, material_1.useMediaQuery)(theme.breakpoints.up('sm'));
+    const [idRef, setIdRef] = (0, react_1.useState)({});
+    const [currentId, setCurrentId] = (0, react_1.useState)(-1321465654);
     (0, react_1.useEffect)(() => {
         exports.MODAL.open = (customCompoment) => {
             if (customCompoment)
                 setContent(customCompoment);
+            setCurrentId(-1321465654);
+            setOpen(true);
+        };
+        exports.MODAL.reparent = (element, id) => {
+            setIdRef((obj) => (Object.assign(Object.assign({}, obj), { [id]: react_1.default.createElement(react_1.default.Fragment, null, element) })));
+            return react_1.default.createElement(react_1.default.Fragment, null);
+        };
+        exports.MODAL.openReparented = (id) => {
+            setCurrentId(id);
+            setContent(null);
             setOpen(true);
         };
         exports.MODAL.close = handleClose;
@@ -55,7 +75,9 @@ function CustomModalProvider() {
         } },
         react_1.default.createElement(material_1.Stack, { direction: 'row', onClick: handleClose, maxHeight: '8vh', height: '8vh', justifyContent: 'center', alignItems: 'center' },
             react_1.default.createElement(material_1.Typography, { fontWeight: 600, color: 'white' }, "Clique fora para fechar")),
-        react_1.default.createElement(material_1.Box, { p: 2, maxHeight: '92vh', bgcolor: 'white', overflow: 'auto' }, content))) : (react_1.default.createElement(material_1.Modal, { open: open, onClose: handleClose },
+        react_1.default.createElement(material_1.Box, { p: 2, maxHeight: '92vh', bgcolor: 'white', overflow: 'auto' },
+            content,
+            idRef[currentId]))) : (react_1.default.createElement(material_1.Modal, { open: open, onClose: handleClose },
         react_1.default.createElement(material_1.Box, { sx: {
                 position: 'absolute',
                 top: '50%',
@@ -76,6 +98,8 @@ function CustomModalProvider() {
                 react_1.default.createElement(CloseRounded_1.default, { sx: {
                         transform: 'scale(.9)',
                     } })),
-            react_1.default.createElement(material_1.Box, { overflow: 'auto', maxHeight: '90vh', p: 2, marginTop: 4, borderTop: 'solid 1px gray', bgcolor: '#F9F9F9', borderRadius: 2 }, content))))));
+            react_1.default.createElement(material_1.Box, { overflow: 'auto', maxHeight: '90vh', p: 2, marginTop: 4, borderTop: 'solid 1px gray', bgcolor: '#F9F9F9', borderRadius: 2 },
+                content,
+                idRef[currentId]))))));
 }
 exports.CustomModalProvider = CustomModalProvider;

package/components/utils/Bt.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonProps } from '@mui/material';
+import tinycolor from 'tinycolor2';
+interface CustomButton extends ButtonProps {
+    customColor?: tinycolor.ColorInput;
+    customFontColor?: tinycolor.ColorInput;
+}
+export default function Bt({ customColor, customFontColor, ...props }: CustomButton): JSX.Element;
+export {};

package/components/utils/Bt.js

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+function Bt(_a) {
+    var { customColor = '#383838', customFontColor = 'white' } = _a, props = __rest(_a, ["customColor", "customFontColor"]);
+    const bgColor = (0, tinycolor2_1.default)(customColor);
+    return (react_1.default.createElement(material_1.Button, Object.assign({}, props, { sx: {
+            bgcolor: bgColor.toHexString(),
+            color: (0, tinycolor2_1.default)(customFontColor).toHexString(),
+            ':hover': {
+                bgcolor: bgColor.darken(10).toHexString(),
+            },
+            boxShadow: 'none',
+            borderRadius: 3,
+            textTransform: 'capitalize',
+            paddingX: 2,
+        }, size: 'small' }), props.children));
+}
+exports.default = Bt;

package/components/utils/CustomMenu.d.ts

@@ -0,0 +1,12 @@
+import { ButtonProps } from '@mui/material';
+import React from 'react';
+interface MenuProps {
+    data: {
+        name: string;
+        onClick?: () => void;
+    }[];
+    btProps?: ButtonProps;
+    children?: React.ReactNode;
+}
+export default function CustomMenu({ data, ...props }: MenuProps): JSX.Element;
+export {};

package/components/utils/CustomMenu.js

@@ -0,0 +1,39 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const Bt_1 = __importDefault(require("./Bt"));
+function CustomMenu(_a) {
+    var { data = [] } = _a, props = __rest(_a, ["data"]);
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Bt_1.default, Object.assign({}, props.btProps, { onClick: handleClick }), props.children),
+        react_1.default.createElement(material_1.Menu, { id: 'basic-menu', anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
+                'aria-labelledby': 'basic-button',
+            } }, data.map((x) => (react_1.default.createElement(material_1.MenuItem, { onClick: (e) => {
+                x.onClick && x.onClick();
+                handleClose();
+            } }, x.name))))));
+}
+exports.default = CustomMenu;

package/index.d.ts

@@ -32,4 +32,6 @@ import { FixedAutoComplete } from './components/form/input/FixedAutoComplete';
 import DropFileUpload from './components/form/file/DropFileUpload';
 import { MODAL } from './components/modal/Modal';
 import { SspComponentsProvider } from './components/providers/SspComponentsProvider';
-export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, KeycloakAuthProvider, CheckBoxAdditional, RequiredCheckBoxGroup, FixedAutoComplete, Category, Field, FieldLabel, File, DropFileUpload, MODAL, SspComponentsProvider, TabNavBar };
+import Button from './components/utils/Bt';
+import Menu from './components/utils/CustomMenu';
+export { CheckBox, CheckBoxWarning, DatePicker, TimePicker, FileUpload, ActiveInput, AutoComplete, FetchAutoComplete, Input, MaskInput, MultInput, OtherCheckBox, Stepper, StepperBlock, Switch, SwitchWatch, ToggleVisibility, Table, NavBar, FormProvider, OAuthProvider, AUTH_COOKIE_NAME, AuthContext, FormContext, KeycloakAuthProvider, CheckBoxAdditional, RequiredCheckBoxGroup, FixedAutoComplete, Category, Field, FieldLabel, File, DropFileUpload, MODAL, SspComponentsProvider, TabNavBar, Button, Menu };

package/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabNavBar = exports.SspComponentsProvider = exports.MODAL = exports.DropFileUpload = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.FixedAutoComplete = exports.RequiredCheckBoxGroup = exports.CheckBoxAdditional = exports.KeycloakAuthProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
+exports.Menu = exports.Button = exports.TabNavBar = exports.SspComponentsProvider = exports.MODAL = exports.DropFileUpload = exports.File = exports.FieldLabel = exports.Field = exports.Category = exports.FixedAutoComplete = exports.RequiredCheckBoxGroup = exports.CheckBoxAdditional = exports.KeycloakAuthProvider = exports.FormContext = exports.AuthContext = exports.AUTH_COOKIE_NAME = exports.OAuthProvider = exports.FormProvider = exports.NavBar = exports.Table = exports.ToggleVisibility = exports.SwitchWatch = exports.Switch = exports.StepperBlock = exports.Stepper = exports.OtherCheckBox = exports.MultInput = exports.MaskInput = exports.Input = exports.FetchAutoComplete = exports.AutoComplete = exports.ActiveInput = exports.FileUpload = exports.TimePicker = exports.DatePicker = exports.CheckBoxWarning = exports.CheckBox = void 0;
 const CheckBox_1 = __importDefault(require("./components/form/checkbox/CheckBox"));
 exports.CheckBox = CheckBox_1.default;
 const CheckBoxWarning_1 = __importDefault(require("./components/form/checkbox/CheckBoxWarning"));
@@ -74,3 +74,7 @@ const Modal_1 = require("./components/modal/Modal");
 Object.defineProperty(exports, "MODAL", { enumerable: true, get: function () { return Modal_1.MODAL; } });
 const SspComponentsProvider_1 = require("./components/providers/SspComponentsProvider");
 Object.defineProperty(exports, "SspComponentsProvider", { enumerable: true, get: function () { return SspComponentsProvider_1.SspComponentsProvider; } });
+const Bt_1 = __importDefault(require("./components/utils/Bt"));
+exports.Button = Bt_1.default;
+const CustomMenu_1 = __importDefault(require("./components/utils/CustomMenu"));
+exports.Menu = CustomMenu_1.default;

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@ssplib/react-components",
-    "version": "0.0.224",
+    "version": "0.0.226",
     "description": "SSP React Components",
     "main": "index.js",
     "author": "Pedro Henrique <sr.hudrick@gmail.com>",
     "license": "MIT",
     "dependencies": {
         "cookies-next": "^2.1.1",
+        "tinycolor2": "^1.6.0",
         "lodash.get": "^4.4.2",
         "jwt-decode": "^3.1.2",
         "react-hook-form": "^7.43.9",