venice-ui 2.3.6 → 2.4.0

package/dist/cjs/components/Filters/Filters.js

@@ -32,166 +32,286 @@ const Icons_1 = require("../Icons");
 const Modal_1 = require("../Modal");
 const Filters_styles_1 = require("./Filters.styles");
 const Theme_1 = require("../../Theme");
-const common_1 = require("../common");
 const Input_1 = require("../Input");
 const Chips_1 = require("../Chips");
-const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelConfirm = 'Approve', labelClose = "Cancel", filters = [], labelClearAll = 'Clear all filters', handleSubmitFilters }) => {
-    const generateStateObj = () => {
+const List_1 = require("../List");
+const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelConfirm = 'Approve', labelClose = 'Cancel', filters = [], headers = [], elements = [], fullElements, labelClearAll = 'Wyczyść', handleSubmitFilters, externalClearSignal, onClear, }) => {
+    const filtersConfig = (0, react_1.useMemo)(() => {
+        const uniq = (arr) => Array.from(new Set(arr.filter((v) => v !== undefined && v !== null)));
+        if (filters && filters.length) {
+            return filters.map((h) => ({
+                label: h.label,
+                name: h.name,
+                type: h.type || 'select',
+                allowValues: (h.allowValues || []).map((v) => String(v)),
+                min: h.min,
+                max: h.max,
+                collapsible: h.collapsible ?? true,
+            }));
+        }
+        if (!headers || headers.length === 0)
+            return [];
+        return headers
+            .filter((h) => !h.action)
+            .map((h) => {
+            const key = h.valueSource || h.name;
+            const values = (elements || []).map((it) => it?.[key]).filter((v) => v !== undefined && v !== null);
+            const nameLower = (h.name || '').toString().toLowerCase();
+            if (nameLower === 'age' || nameLower.includes('age')) {
+                const nums = values.map((v) => Number(v)).filter((n) => !Number.isNaN(n));
+                const min = nums.length ? Math.min(...nums) : 0;
+                const max = nums.length ? Math.max(...nums) : 0;
+                return { label: h.name, name: key, type: 'range', min, max, collapsible: true };
+            }
+            if (h.scope && h.scope.length) {
+                return { label: h.name, name: key, type: 'select', allowValues: h.scope.map((s) => (s.label ?? s.value ?? s.key ?? String(s))), collapsible: true };
+            }
+            if (h.date) {
+                const dates = values.map((v) => (v ? new Date(v).getTime() : NaN)).filter((d) => !Number.isNaN(d));
+                const min = dates.length ? new Date(Math.min(...dates)).toISOString() : undefined;
+                const max = dates.length ? new Date(Math.max(...dates)).toISOString() : undefined;
+                return { label: h.name, name: key, type: 'date', min, max, collapsible: true };
+            }
+            if (h.isCount) {
+                const nums = values.map((v) => Number(v)).filter((n) => !Number.isNaN(n));
+                return { label: h.name, name: key, type: 'range', min: nums.length ? Math.min(...nums) : 0, max: nums.length ? Math.max(...nums) : 0, collapsible: true };
+            }
+            const numericValues = values.map((v) => Number(v)).filter((n) => !Number.isNaN(n));
+            if (numericValues.length === values.length && values.length > 0) {
+                return { label: h.name, name: key, type: 'range', min: Math.min(...numericValues), max: Math.max(...numericValues), collapsible: true };
+            }
+            return { label: h.name, name: key, type: 'select', allowValues: uniq(values).map((v) => String(v)), collapsible: true };
+        });
+    }, [filters, headers, elements]);
+    const generateStateObj = (0, react_1.useCallback)(() => {
         const obj = {};
-        filters.forEach((filter) => {
+        filtersConfig.forEach((filter) => {
             obj[filter.name] = {
                 name: filter.name,
                 type: filter.type,
                 value: [],
                 rangeMin: filter.min,
                 rangeMax: filter.max,
-                min: '',
-                max: '',
+                min: (filter.type === 'range' || filter.type === 'date') && filter.min !== undefined ? String(filter.min) : '',
+                max: (filter.type === 'range' || filter.type === 'date') && filter.max !== undefined ? String(filter.max) : '',
             };
         });
         return obj;
-    };
+    }, [filtersConfig]);
     const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
     const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
-    const toogleFilter = () => {
-        setOpenFilters(!openFilters);
-    };
-    const isFilterActive = (filter) => {
-        let isActive = false;
-        if (filter.type === 'select') {
-            isActive = filter.value.length > 0;
-        }
-        else if (filter.type === 'range') {
-            isActive = filter.min.length > 0 || filter.max.length > 0;
+    const [collapsedFilters, setCollapsedFilters] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        const init = {};
+        filtersConfig.forEach((f) => (init[f.name] = false));
+        const prevKeys = Object.keys(collapsedFilters).sort().join(',');
+        const newKeys = Object.keys(init).sort().join(',');
+        if (prevKeys !== newKeys)
+            setCollapsedFilters(init);
+    }, [filtersConfig]);
+    const toggleCollapse = (0, react_1.useCallback)((name) => {
+        setCollapsedFilters((prev) => ({ ...prev, [name]: !prev[name] }));
+    }, []);
+    const toggleFilter = (0, react_1.useCallback)(() => setOpenFilters((v) => !v), []);
+    const isFilterActive = (0, react_1.useCallback)((filter) => {
+        if (filter.type === 'select' || filter.type === 'text') {
+            return !!(filter.value && filter.value.length > 0);
         }
-        return isActive;
-    };
-    const isAnyFilterActive = () => {
-        const activs = Object.keys(activeFilters).find((key) => isFilterActive(activeFilters[key]));
-        if (activs) {
-            return activs.length > 0;
+        if (filter.type === 'range' || filter.type === 'date') {
+            const defaultMin = filter.rangeMin !== undefined ? String(filter.rangeMin) : '';
+            const defaultMax = filter.rangeMax !== undefined ? String(filter.rangeMax) : '';
+            const curMin = filter.min ?? '';
+            const curMax = filter.max ?? '';
+            return (curMin !== '' && curMin !== defaultMin) || (curMax !== '' && curMax !== defaultMax);
         }
         return false;
-    };
-    const setIconColor = () => {
-        return isAnyFilterActive() ? theme.action : theme.textColor;
-    };
-    const clearAll = () => {
-        const resetedFilter = { ...activeFilters };
-        Object.keys(resetedFilter).forEach((key) => {
-            if (resetedFilter[key].type === 'select') {
-                resetedFilter[key].value = [];
-            }
-            else if (resetedFilter[key].type === 'range') {
-                resetedFilter[key].min = '';
-                resetedFilter[key].max = '';
-            }
+    }, []);
+    const isAnyFilterActive = (0, react_1.useCallback)(() => Object.values(activeFilters).some((f) => isFilterActive(f)), [activeFilters, isFilterActive]);
+    const setIconColor = (0, react_1.useCallback)(() => (isAnyFilterActive() ? theme.action : theme.textColor), [isAnyFilterActive, theme.action, theme.textColor]);
+    const clearAll = (0, react_1.useCallback)(() => {
+        const resetedFilter = {};
+        Object.keys(activeFilters).forEach((key) => {
+            const f = activeFilters[key];
+            resetedFilter[key] = {
+                ...f,
+                value: f.type === 'select' || f.type === 'text' ? [] : f.value,
+                min: (f.type === 'range' || f.type === 'date') && f.rangeMin !== undefined ? String(f.rangeMin) : '',
+                max: (f.type === 'range' || f.type === 'date') && f.rangeMax !== undefined ? String(f.rangeMax) : '',
+            };
         });
         return resetedFilter;
-    };
-    const resetAllFilters = () => {
+    }, [activeFilters]);
+    const resetAllFilters = (0, react_1.useCallback)(() => {
         const cleared = clearAll();
-        setActiveFilters({
-            ...cleared,
-        });
-    };
-    const resetAllFiltersAndSubmit = () => {
+        setActiveFilters({ ...cleared });
+    }, [clearAll]);
+    const resetAllFiltersAndSubmit = (0, react_1.useCallback)(() => {
         resetAllFilters();
         applyFilter();
-    };
-    const resetFilter = (filterName, filterType) => {
-        if (filterType === 'select') {
-            setActiveFilters({
-                ...activeFilters,
-                [filterName]: {
-                    ...activeFilters[filterName],
-                    value: [],
-                },
-            });
-        }
-        if (filterType === 'range') {
-            setActiveFilters({
-                ...activeFilters,
-                [filterName]: {
-                    ...activeFilters[filterName],
-                    min: '',
-                    max: '',
-                },
-            });
-        }
-    };
-    const setSelectFilter = (filterValue, filterName) => {
-        let values = [];
-        const existingValues = activeFilters[filterName].value;
-        if (existingValues.includes(filterValue)) {
-            values = existingValues.filter((item) => item !== filterValue);
-        }
-        else {
-            existingValues.push(filterValue);
-            values = [...existingValues];
-        }
-        setActiveFilters({
-            ...activeFilters,
-            [filterName]: {
-                ...activeFilters[filterName],
-                value: values,
-            },
-        });
-    };
-    const setRangeFilter = (name, value) => {
-        const filterName = name.split('_')[0];
-        const filterParam = name.split('_')[1];
-        setActiveFilters({
-            ...activeFilters,
-            [filterName]: {
-                ...activeFilters[filterName],
-                [filterParam]: value,
-            },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetAllFilters]);
+    const resetFilter = (0, react_1.useCallback)((filterName, filterType) => {
+        setActiveFilters((prev) => {
+            const current = prev[filterName] || {};
+            if (filterType === 'select' || filterType === 'text') {
+                return { ...prev, [filterName]: { ...current, value: [] } };
+            }
+            if (filterType === 'range' || filterType === 'date') {
+                const defaultMin = current.rangeMin !== undefined ? String(current.rangeMin) : '';
+                const defaultMax = current.rangeMax !== undefined ? String(current.rangeMax) : '';
+                return { ...prev, [filterName]: { ...current, min: defaultMin, max: defaultMax } };
+            }
+            return prev;
         });
-    };
-    const applyFilter = () => {
-        const obj = [];
+    }, []);
+    const setRangeFilter = (0, react_1.useCallback)((name, value) => {
+        const [filterName, filterParam] = String(name).split('_');
+        setActiveFilters((prev) => ({ ...prev, [filterName]: { ...prev[filterName], [filterParam]: value } }));
+    }, []);
+    const setTextFilter = (0, react_1.useCallback)((name, value) => {
+        const filterName = (name || '').split('_')[0];
+        setActiveFilters((prev) => ({ ...prev, [filterName]: { ...(prev[filterName] || { name: filterName, type: 'text', value: [] }), value: value ? [String(value)] : [] } }));
+    }, []);
+    const applyFilter = (0, react_1.useCallback)(() => {
+        let result = (elements || []).slice();
         Object.keys(activeFilters).forEach((key) => {
-            if (activeFilters[key].type === 'select') {
-                if (activeFilters[key].value.length > 0) {
-                    obj.push({
-                        name: activeFilters[key].name,
-                        type: activeFilters[key].type,
-                        value: activeFilters[key].value,
-                    });
+            const f = activeFilters[key];
+            if (!f)
+                return;
+            if (f.type === 'select') {
+                if (f.value && f.value.length > 0) {
+                    const sel = new Set(f.value.map((v) => String(v)));
+                    result = result.filter((it) => sel.has(String(it?.[key])));
                 }
             }
-            else if (activeFilters[key].type === 'range') {
-                if (activeFilters[key].min.length > 0 || activeFilters[key].max.length > 0) {
-                    obj.push({
-                        name: activeFilters[key].name,
-                        type: activeFilters[key].type,
-                        min: activeFilters[key].min.length > 0 ? activeFilters[key].min : undefined,
-                        max: activeFilters[key].max.length > 0 ? activeFilters[key].max : undefined,
-                    });
+            else if (f.type === 'range') {
+                if (!isFilterActive(f))
+                    return;
+                const min = f.min !== '' ? Number(f.min) : undefined;
+                const max = f.max !== '' ? Number(f.max) : undefined;
+                result = result.filter((it) => {
+                    const val = Number(it?.[key]);
+                    if (Number.isNaN(val))
+                        return false;
+                    if (min !== undefined && val < min)
+                        return false;
+                    if (max !== undefined && val > max)
+                        return false;
+                    return true;
+                });
+            }
+            else if (f.type === 'date') {
+                if (!isFilterActive(f))
+                    return;
+                const fromDate = f.min ? new Date(f.min) : null;
+                const toDate = f.max ? new Date(f.max) : null;
+                const fromTs = fromDate ? new Date(fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate(), 0, 0, 0, 0).getTime() : null;
+                const toTs = toDate ? new Date(toDate.getFullYear(), toDate.getMonth(), toDate.getDate(), 23, 59, 59, 999).getTime() : null;
+                result = result.filter((it) => {
+                    const raw = it?.[key];
+                    if (!raw)
+                        return false;
+                    const d = new Date(raw);
+                    if (Number.isNaN(d.getTime()))
+                        return false;
+                    const ts = d.getTime();
+                    if (fromTs !== null && ts < fromTs)
+                        return false;
+                    if (toTs !== null && ts > toTs)
+                        return false;
+                    return true;
+                });
+            }
+            else {
+                const q = Array.isArray(f.value) ? f.value[0] : f.value;
+                if (q) {
+                    const qs = String(q).toLowerCase();
+                    result = result.filter((it) => String(it?.[key] ?? '').toLowerCase().includes(qs));
                 }
             }
         });
-        handleSubmitFilters && handleSubmitFilters(obj);
+        handleSubmitFilters && handleSubmitFilters(result);
         setOpenFilters(false);
-    };
+    }, [activeFilters, elements, handleSubmitFilters, isFilterActive]);
+    const prevConfigKeysRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const newState = generateStateObj();
+        const keysSerialized = JSON.stringify(Object.keys(newState));
+        if (prevConfigKeysRef.current !== keysSerialized) {
+            setActiveFilters(newState);
+            prevConfigKeysRef.current = keysSerialized;
+        }
+    }, [generateStateObj]);
+    const prevExternalClearRef = (0, react_1.useRef)(externalClearSignal ?? 0);
+    (0, react_1.useEffect)(() => {
+        if (externalClearSignal === undefined)
+            return;
+        if (prevExternalClearRef.current !== externalClearSignal) {
+            prevExternalClearRef.current = externalClearSignal;
+            const cleared = clearAll();
+            setActiveFilters(cleared);
+            handleSubmitFilters && handleSubmitFilters((fullElements && fullElements.length ? fullElements : elements) || []);
+        }
+    }, [externalClearSignal, clearAll, handleSubmitFilters, fullElements, elements]);
+    const mapListItems = (0, react_1.useCallback)((filterName, allowValues) => {
+        const sel = (activeFilters[filterName]?.value || []).map(String);
+        return (allowValues || []).map((v) => ({ id: String(v), value: String(v), children: [], selected: sel.includes(String(v)) }));
+    }, [activeFilters]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Filters_styles_1.FilterIconArea, null,
-            react_1.default.createElement(Icons_1.Icon, { name: "filters", onClick: toogleFilter, iconColor: setIconColor() }),
-            isAnyFilterActive() && (react_1.default.createElement(Chips_1.Chips, { label: labelClearAll, handleClose: resetAllFiltersAndSubmit }))),
-        openFilters && (react_1.default.createElement(Modal_1.Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, handleAdditional: resetAllFilters, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll, isOpen: openFilters },
-            react_1.default.createElement(Aligment_1.Aligment, { direction: "column", align: 'flex-end' },
-                react_1.default.createElement(Filters_styles_1.FiltersArea, null, filters.map((filter) => (react_1.default.createElement(Filters_styles_1.FilterSection, null,
-                    react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap" },
-                        react_1.default.createElement(Typography_1.TextAccent, null, filter.label),
+            react_1.default.createElement(Icons_1.Icon, { name: "filters", onClick: toggleFilter, iconColor: setIconColor() }),
+            isAnyFilterActive() && (react_1.default.createElement(Chips_1.Chips, { label: labelClearAll, handleClose: () => {
+                    if (onClear) {
+                        onClear();
+                        const cleared = clearAll();
+                        setActiveFilters(cleared);
+                    }
+                    else {
+                        const cleared = clearAll();
+                        setActiveFilters(cleared);
+                        handleSubmitFilters && handleSubmitFilters((fullElements && fullElements.length ? fullElements : elements) || []);
+                    }
+                } }))),
+        openFilters && (react_1.default.createElement(Modal_1.Modal, { title: title, handleConfirm: applyFilter, handleClose: toggleFilter, handleAdditional: () => {
+                if (onClear) {
+                    onClear();
+                    const cleared = clearAll();
+                    setActiveFilters(cleared);
+                    setOpenFilters(false);
+                }
+                else {
+                    resetAllFiltersAndSubmit();
+                }
+            }, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll, isOpen: openFilters },
+            react_1.default.createElement(Aligment_1.Aligment, { direction: "column", align: "flex-end" },
+                react_1.default.createElement(Filters_styles_1.FiltersArea, null, filtersConfig.map((filter) => (react_1.default.createElement(Filters_styles_1.FilterSection, { key: filter.name },
+                    react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", style: { alignItems: 'center', justifyContent: 'start' } },
+                        react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", onClick: () => filter.collapsible && toggleCollapse(filter.name), style: { cursor: filter.collapsible ? 'pointer' : 'default', alignItems: 'center', justifyContent: 'start' } },
+                            react_1.default.createElement(Typography_1.TextAccent, { style: { marginRight: 0 } }, filter.label),
+                            react_1.default.createElement(Icons_1.Icon, { name: collapsedFilters[filter.name] ? 'arrow_drop_down' : 'arrow_drop_up', size: 16, iconColor: theme.textColor })),
                         react_1.default.createElement(Icons_1.Icon, { name: "close", size: 14, onClick: () => resetFilter(filter.name, filter.type) })),
-                    filter.type === 'select' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "column", align: "flex-start", vPadding: Theme_1.Theme.padding.s }, filter.allowValues?.map((item) => {
-                        return (react_1.default.createElement(common_1.PanelOption, { width: "100%", key: item, active: activeFilters[filter.name].value.includes(item), onClick: () => setSelectFilter(item, filter.name) }, item));
-                    }))),
-                    filter.type === 'range' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme_1.Theme.padding.s, justify: "flex-start", gap: 8 },
+                    !filter.collapsible || !collapsedFilters[filter.name] ? (filter.type === 'select' ? (react_1.default.createElement("div", { style: { width: '100%' } },
+                        react_1.default.createElement(List_1.List, { items: mapListItems(filter.name, filter.allowValues), handleChange: (items) => {
+                                const collectSelected = (list) => list.reduce((acc, it) => {
+                                    if (it.selected)
+                                        acc.push(String(it.id));
+                                    if (it.children && it.children.length)
+                                        acc.push(...collectSelected(it.children));
+                                    return acc;
+                                }, []);
+                                const selectedIds = collectSelected(items);
+                                setActiveFilters((prev) => ({ ...prev, [filter.name]: { ...(prev[filter.name] || { name: filter.name, type: filter.type, value: [] }), value: selectedIds } }));
+                            }, isCheckbox: true, isCollapsable: true }))) : filter.type === 'range' ? (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme_1.Theme.padding.s, justify: "flex-start", gap: 8 },
+                        react_1.default.createElement(Filters_styles_1.FilterInputWrapper, null,
+                            react_1.default.createElement(Input_1.Input, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name].min, handleChange: setRangeFilter })),
+                        react_1.default.createElement(Filters_styles_1.FilterInputWrapper, null,
+                            react_1.default.createElement(Input_1.Input, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name].max, handleChange: setRangeFilter })))) : filter.type === 'date' ? (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme_1.Theme.padding.s, justify: "flex-start", gap: 8 },
+                        react_1.default.createElement(Filters_styles_1.FilterInputWrapper, null,
+                            react_1.default.createElement(Input_1.Input, { type: "date", name: `${filter.name}_min`, value: activeFilters[filter.name].min, handleChange: setRangeFilter })),
                         react_1.default.createElement(Filters_styles_1.FilterInputWrapper, null,
-                            react_1.default.createElement(Input_1.Input, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name].min, placeholder: activeFilters[filter.name].rangeMin, handleChange: setRangeFilter })),
+                            react_1.default.createElement(Input_1.Input, { type: "date", name: `${filter.name}_max`, value: activeFilters[filter.name].max, handleChange: setRangeFilter })))) : filter.type === 'text' ? (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme_1.Theme.padding.s, justify: "flex-start", gap: 8 },
                         react_1.default.createElement(Filters_styles_1.FilterInputWrapper, null,
-                            react_1.default.createElement(Input_1.Input, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name].max, placeholder: activeFilters[filter.name].rangeMax, handleChange: setRangeFilter })))))))))))));
+                            react_1.default.createElement(Input_1.Input, { type: "text", name: `${filter.name}_query`, value: (activeFilters[filter.name]?.value && activeFilters[filter.name].value[0]) || '', handleChange: setTextFilter })))) : null) : null)))))))));
 };
 exports.Filters = Filters;
+exports.default = exports.Filters;

package/dist/cjs/components/Filters/filtersHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyFiltersToTable = exports.setTableFilterSet = exports.getMaxValue = exports.getMinValue = exports.getUniqueValues = void 0;
+exports.applyFiltersToTable = exports.getMaxValue = exports.getMinValue = exports.getUniqueValues = void 0;
 const getUniqueValues = (elements, source) => {
     const result = [...new Set(elements.map((item) => item[source]))];
     return result;
@@ -14,21 +14,6 @@ const getMaxValue = (elements, source) => {
     return Math.max(...elements.map((item) => item[source]));
 };
 exports.getMaxValue = getMaxValue;
-const setTableFilterSet = (headers, elements) => {
-    const filterSetting = [];
-    headers.forEach((filter) => {
-        filterSetting.push({
-            label: filter.name,
-            name: filter.valueSource,
-            type: filter.filterType ? filter.filterType : 'select',
-            allowValues: (0, exports.getUniqueValues)(elements, filter.valueSource),
-            min: (0, exports.getMinValue)(elements, filter.valueSource),
-            max: (0, exports.getMaxValue)(elements, filter.valueSource),
-        });
-    });
-    return filterSetting;
-};
-exports.setTableFilterSet = setTableFilterSet;
 const applyFiltersToTable = (elements, filters) => {
     let filtered = [...elements];
     filters.forEach((filter) => {

package/dist/cjs/components/Input/Input.js

@@ -30,7 +30,6 @@ const Aligment_1 = require("../Aligment");
 const Input_styles_1 = require("./Input.styles");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-const lodash_1 = require("lodash");
 const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, prefix, }) => {
     const [inputValue, setInputValue] = (0, react_1.useState)(value);
     (0, react_1.useEffect)(() => {
@@ -41,19 +40,14 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
             ? numberValue
             : parseFloat(numberValue);
     };
-    const debouncedRef = (0, react_1.useRef)((0, lodash_1.debounce)((n, v) => {
-        console.log('checking debounce', n, v);
-        handleChange(n, v);
-    }, 300));
     const onChange = (e) => {
         let returnedValue = type === 'number' || type === 'increase'
             ? calculateNumberValue(e.target.value)
             : e.target.value.toString();
         setInputValue(returnedValue);
-        debouncedRef.current(name, returnedValue);
+        handleChange(name, returnedValue);
     };
     const onBlurValidation = () => {
-        debouncedRef.current.flush();
         if (type === 'number' || type === 'increase') {
             let validateValue = inputValue;
             if (isNaN(parseFloat(validateValue.toString()))) {
@@ -72,7 +66,6 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
     };
     const onKeyDown = async (e) => {
         if (handleSubmit && e.key === 'Enter') {
-            debouncedRef.current.cancel();
             const currentValue = type === 'number' || type === 'increase'
                 ? calculateNumberValue(e.currentTarget.value)
                 : e.currentTarget.value.toString();

package/dist/cjs/components/Table/Table.js

@@ -32,10 +32,20 @@ const tableHelper_1 = require("./tableHelper");
 const HeaderCell_1 = require("./HeaderCell");
 const Cell_1 = require("./Cell");
 const Pagination_1 = require("../Pagination");
+const Filters_1 = require("../Filters");
+const Typography_1 = require("../Typography");
 const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
     name: '',
     order: 'none',
 }, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
+    const initialElementsRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!initialElementsRef.current && Array.isArray(elements) && elements.length > 0) {
+            initialElementsRef.current = elements.slice();
+        }
+        setTableProps((prev) => ({ ...prev, elements: Array.isArray(elements) ? elements : [] }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elements]);
     const checkHeaders = () => {
         const tableHeaders = [...headers];
         if (moreActions.length > 0) {
@@ -75,7 +85,6 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
             });
         }
     };
-    // PAGINACJA
     const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
     const [currentPageSize, setCurrentPageSize] = (0, react_1.useState)(pageSize || 10);
     const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
@@ -83,7 +92,28 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
     (0, react_1.useEffect)(() => {
         setCurrentPage(1);
     }, [elements, currentPageSize]);
+    const [noResultsMessage, setNoResultsMessage] = (0, react_1.useState)(null);
+    const handleApplyFilters = (0, react_1.useCallback)((filteredElements) => {
+        setTableProps((prev) => ({
+            ...prev,
+            elements: filteredElements,
+        }));
+        setCurrentPage(1);
+        setNoResultsMessage(filteredElements && filteredElements.length === 0 ? 'Nie ma żadnych wyników' : null);
+    }, [setCurrentPage, setTableProps]);
+    const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
+    const handleClearFilters = (0, react_1.useCallback)(() => {
+        setFiltersClearSignal((s) => s + 1);
+        const full = (initialElementsRef.current && initialElementsRef.current.length > 0)
+            ? initialElementsRef.current
+            : (Array.isArray(elements) ? elements : []);
+        setTableProps((prev) => ({ ...prev, elements: Array.isArray(full) ? full.slice() : [] }));
+        setCurrentPage(1);
+        setNoResultsMessage(null);
+    }, [elements, setCurrentPage, setNoResultsMessage]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 } },
+            react_1.default.createElement(Filters_1.Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, fullElements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters })),
         react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             react_1.default.createElement(Table_styles_1.TableHead, null,
                 react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
@@ -92,6 +122,8 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
                     return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0, isDisabled: item.disabled }));
                 })));
             }))),
+        noResultsMessage && (react_1.default.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } },
+            react_1.default.createElement(Typography_1.TextAccent, null, noResultsMessage))),
         ifPagination && (react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize }))));
 };
 exports.Table = Table;

package/dist/cjs/components/Table/tableHelper.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getValueFormScope = exports.setElements = exports.applySort = exports.setSortParams = void 0;
+exports.getValueFormScope = exports.applySort = exports.setSortParams = void 0;
 const lodash_1 = require("lodash");
-const Filters_1 = require("../Filters");
 const setSortParams = (target, order, sort) => {
     const newSort = {
         name: target,
@@ -19,14 +18,6 @@ const applySort = (sort, elements) => {
     return sorted;
 };
 exports.applySort = applySort;
-const setElements = (elements, sort, filters) => {
-    let tableElements = [...(0, Filters_1.applyFiltersToTable)(elements, filters)];
-    if (sort.name !== '') {
-        tableElements = (0, exports.applySort)(sort, tableElements);
-    }
-    return tableElements;
-};
-exports.setElements = setElements;
 const getValueFormScope = (item, valuesScope) => {
     return valuesScope.find((_value) => _value.key === item)?.value || '';
 };

package/dist/esm/components/Filters/Filters.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { TextAccent } from '../Typography';
 import { Aligment } from '../Aligment';
@@ -6,165 +6,285 @@ import { Icon } from '../Icons';
 import { Modal } from '../Modal';
 import { FilterIconArea, FilterInputWrapper, FiltersArea, FilterSection, } from './Filters.styles';
 import { Theme, mainTheme } from '../../Theme';
-import { PanelOption } from '../common';
 import { Input } from '../Input';
 import { Chips } from '../Chips';
-export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConfirm = 'Approve', labelClose = "Cancel", filters = [], labelClearAll = 'Clear all filters', handleSubmitFilters }) => {
-    const generateStateObj = () => {
+import { List } from '../List';
+export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConfirm = 'Approve', labelClose = 'Cancel', filters = [], headers = [], elements = [], fullElements, labelClearAll = 'Wyczyść', handleSubmitFilters, externalClearSignal, onClear, }) => {
+    const filtersConfig = useMemo(() => {
+        const uniq = (arr) => Array.from(new Set(arr.filter((v) => v !== undefined && v !== null)));
+        if (filters && filters.length) {
+            return filters.map((h) => ({
+                label: h.label,
+                name: h.name,
+                type: h.type || 'select',
+                allowValues: (h.allowValues || []).map((v) => String(v)),
+                min: h.min,
+                max: h.max,
+                collapsible: h.collapsible ?? true,
+            }));
+        }
+        if (!headers || headers.length === 0)
+            return [];
+        return headers
+            .filter((h) => !h.action)
+            .map((h) => {
+            const key = h.valueSource || h.name;
+            const values = (elements || []).map((it) => it?.[key]).filter((v) => v !== undefined && v !== null);
+            const nameLower = (h.name || '').toString().toLowerCase();
+            if (nameLower === 'age' || nameLower.includes('age')) {
+                const nums = values.map((v) => Number(v)).filter((n) => !Number.isNaN(n));
+                const min = nums.length ? Math.min(...nums) : 0;
+                const max = nums.length ? Math.max(...nums) : 0;
+                return { label: h.name, name: key, type: 'range', min, max, collapsible: true };
+            }
+            if (h.scope && h.scope.length) {
+                return { label: h.name, name: key, type: 'select', allowValues: h.scope.map((s) => (s.label ?? s.value ?? s.key ?? String(s))), collapsible: true };
+            }
+            if (h.date) {
+                const dates = values.map((v) => (v ? new Date(v).getTime() : NaN)).filter((d) => !Number.isNaN(d));
+                const min = dates.length ? new Date(Math.min(...dates)).toISOString() : undefined;
+                const max = dates.length ? new Date(Math.max(...dates)).toISOString() : undefined;
+                return { label: h.name, name: key, type: 'date', min, max, collapsible: true };
+            }
+            if (h.isCount) {
+                const nums = values.map((v) => Number(v)).filter((n) => !Number.isNaN(n));
+                return { label: h.name, name: key, type: 'range', min: nums.length ? Math.min(...nums) : 0, max: nums.length ? Math.max(...nums) : 0, collapsible: true };
+            }
+            const numericValues = values.map((v) => Number(v)).filter((n) => !Number.isNaN(n));
+            if (numericValues.length === values.length && values.length > 0) {
+                return { label: h.name, name: key, type: 'range', min: Math.min(...numericValues), max: Math.max(...numericValues), collapsible: true };
+            }
+            return { label: h.name, name: key, type: 'select', allowValues: uniq(values).map((v) => String(v)), collapsible: true };
+        });
+    }, [filters, headers, elements]);
+    const generateStateObj = useCallback(() => {
         const obj = {};
-        filters.forEach((filter) => {
+        filtersConfig.forEach((filter) => {
             obj[filter.name] = {
                 name: filter.name,
                 type: filter.type,
                 value: [],
                 rangeMin: filter.min,
                 rangeMax: filter.max,
-                min: '',
-                max: '',
+                min: (filter.type === 'range' || filter.type === 'date') && filter.min !== undefined ? String(filter.min) : '',
+                max: (filter.type === 'range' || filter.type === 'date') && filter.max !== undefined ? String(filter.max) : '',
             };
         });
         return obj;
-    };
+    }, [filtersConfig]);
     const [openFilters, setOpenFilters] = useState(false);
     const [activeFilters, setActiveFilters] = useState(generateStateObj());
-    const toogleFilter = () => {
-        setOpenFilters(!openFilters);
-    };
-    const isFilterActive = (filter) => {
-        let isActive = false;
-        if (filter.type === 'select') {
-            isActive = filter.value.length > 0;
-        }
-        else if (filter.type === 'range') {
-            isActive = filter.min.length > 0 || filter.max.length > 0;
+    const [collapsedFilters, setCollapsedFilters] = useState({});
+    useEffect(() => {
+        const init = {};
+        filtersConfig.forEach((f) => (init[f.name] = false));
+        const prevKeys = Object.keys(collapsedFilters).sort().join(',');
+        const newKeys = Object.keys(init).sort().join(',');
+        if (prevKeys !== newKeys)
+            setCollapsedFilters(init);
+    }, [filtersConfig]);
+    const toggleCollapse = useCallback((name) => {
+        setCollapsedFilters((prev) => ({ ...prev, [name]: !prev[name] }));
+    }, []);
+    const toggleFilter = useCallback(() => setOpenFilters((v) => !v), []);
+    const isFilterActive = useCallback((filter) => {
+        if (filter.type === 'select' || filter.type === 'text') {
+            return !!(filter.value && filter.value.length > 0);
         }
-        return isActive;
-    };
-    const isAnyFilterActive = () => {
-        const activs = Object.keys(activeFilters).find((key) => isFilterActive(activeFilters[key]));
-        if (activs) {
-            return activs.length > 0;
+        if (filter.type === 'range' || filter.type === 'date') {
+            const defaultMin = filter.rangeMin !== undefined ? String(filter.rangeMin) : '';
+            const defaultMax = filter.rangeMax !== undefined ? String(filter.rangeMax) : '';
+            const curMin = filter.min ?? '';
+            const curMax = filter.max ?? '';
+            return (curMin !== '' && curMin !== defaultMin) || (curMax !== '' && curMax !== defaultMax);
         }
         return false;
-    };
-    const setIconColor = () => {
-        return isAnyFilterActive() ? theme.action : theme.textColor;
-    };
-    const clearAll = () => {
-        const resetedFilter = { ...activeFilters };
-        Object.keys(resetedFilter).forEach((key) => {
-            if (resetedFilter[key].type === 'select') {
-                resetedFilter[key].value = [];
-            }
-            else if (resetedFilter[key].type === 'range') {
-                resetedFilter[key].min = '';
-                resetedFilter[key].max = '';
-            }
+    }, []);
+    const isAnyFilterActive = useCallback(() => Object.values(activeFilters).some((f) => isFilterActive(f)), [activeFilters, isFilterActive]);
+    const setIconColor = useCallback(() => (isAnyFilterActive() ? theme.action : theme.textColor), [isAnyFilterActive, theme.action, theme.textColor]);
+    const clearAll = useCallback(() => {
+        const resetedFilter = {};
+        Object.keys(activeFilters).forEach((key) => {
+            const f = activeFilters[key];
+            resetedFilter[key] = {
+                ...f,
+                value: f.type === 'select' || f.type === 'text' ? [] : f.value,
+                min: (f.type === 'range' || f.type === 'date') && f.rangeMin !== undefined ? String(f.rangeMin) : '',
+                max: (f.type === 'range' || f.type === 'date') && f.rangeMax !== undefined ? String(f.rangeMax) : '',
+            };
         });
         return resetedFilter;
-    };
-    const resetAllFilters = () => {
+    }, [activeFilters]);
+    const resetAllFilters = useCallback(() => {
         const cleared = clearAll();
-        setActiveFilters({
-            ...cleared,
-        });
-    };
-    const resetAllFiltersAndSubmit = () => {
+        setActiveFilters({ ...cleared });
+    }, [clearAll]);
+    const resetAllFiltersAndSubmit = useCallback(() => {
         resetAllFilters();
         applyFilter();
-    };
-    const resetFilter = (filterName, filterType) => {
-        if (filterType === 'select') {
-            setActiveFilters({
-                ...activeFilters,
-                [filterName]: {
-                    ...activeFilters[filterName],
-                    value: [],
-                },
-            });
-        }
-        if (filterType === 'range') {
-            setActiveFilters({
-                ...activeFilters,
-                [filterName]: {
-                    ...activeFilters[filterName],
-                    min: '',
-                    max: '',
-                },
-            });
-        }
-    };
-    const setSelectFilter = (filterValue, filterName) => {
-        let values = [];
-        const existingValues = activeFilters[filterName].value;
-        if (existingValues.includes(filterValue)) {
-            values = existingValues.filter((item) => item !== filterValue);
-        }
-        else {
-            existingValues.push(filterValue);
-            values = [...existingValues];
-        }
-        setActiveFilters({
-            ...activeFilters,
-            [filterName]: {
-                ...activeFilters[filterName],
-                value: values,
-            },
-        });
-    };
-    const setRangeFilter = (name, value) => {
-        const filterName = name.split('_')[0];
-        const filterParam = name.split('_')[1];
-        setActiveFilters({
-            ...activeFilters,
-            [filterName]: {
-                ...activeFilters[filterName],
-                [filterParam]: value,
-            },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetAllFilters]);
+    const resetFilter = useCallback((filterName, filterType) => {
+        setActiveFilters((prev) => {
+            const current = prev[filterName] || {};
+            if (filterType === 'select' || filterType === 'text') {
+                return { ...prev, [filterName]: { ...current, value: [] } };
+            }
+            if (filterType === 'range' || filterType === 'date') {
+                const defaultMin = current.rangeMin !== undefined ? String(current.rangeMin) : '';
+                const defaultMax = current.rangeMax !== undefined ? String(current.rangeMax) : '';
+                return { ...prev, [filterName]: { ...current, min: defaultMin, max: defaultMax } };
+            }
+            return prev;
         });
-    };
-    const applyFilter = () => {
-        const obj = [];
+    }, []);
+    const setRangeFilter = useCallback((name, value) => {
+        const [filterName, filterParam] = String(name).split('_');
+        setActiveFilters((prev) => ({ ...prev, [filterName]: { ...prev[filterName], [filterParam]: value } }));
+    }, []);
+    const setTextFilter = useCallback((name, value) => {
+        const filterName = (name || '').split('_')[0];
+        setActiveFilters((prev) => ({ ...prev, [filterName]: { ...(prev[filterName] || { name: filterName, type: 'text', value: [] }), value: value ? [String(value)] : [] } }));
+    }, []);
+    const applyFilter = useCallback(() => {
+        let result = (elements || []).slice();
         Object.keys(activeFilters).forEach((key) => {
-            if (activeFilters[key].type === 'select') {
-                if (activeFilters[key].value.length > 0) {
-                    obj.push({
-                        name: activeFilters[key].name,
-                        type: activeFilters[key].type,
-                        value: activeFilters[key].value,
-                    });
+            const f = activeFilters[key];
+            if (!f)
+                return;
+            if (f.type === 'select') {
+                if (f.value && f.value.length > 0) {
+                    const sel = new Set(f.value.map((v) => String(v)));
+                    result = result.filter((it) => sel.has(String(it?.[key])));
                 }
             }
-            else if (activeFilters[key].type === 'range') {
-                if (activeFilters[key].min.length > 0 || activeFilters[key].max.length > 0) {
-                    obj.push({
-                        name: activeFilters[key].name,
-                        type: activeFilters[key].type,
-                        min: activeFilters[key].min.length > 0 ? activeFilters[key].min : undefined,
-                        max: activeFilters[key].max.length > 0 ? activeFilters[key].max : undefined,
-                    });
+            else if (f.type === 'range') {
+                if (!isFilterActive(f))
+                    return;
+                const min = f.min !== '' ? Number(f.min) : undefined;
+                const max = f.max !== '' ? Number(f.max) : undefined;
+                result = result.filter((it) => {
+                    const val = Number(it?.[key]);
+                    if (Number.isNaN(val))
+                        return false;
+                    if (min !== undefined && val < min)
+                        return false;
+                    if (max !== undefined && val > max)
+                        return false;
+                    return true;
+                });
+            }
+            else if (f.type === 'date') {
+                if (!isFilterActive(f))
+                    return;
+                const fromDate = f.min ? new Date(f.min) : null;
+                const toDate = f.max ? new Date(f.max) : null;
+                const fromTs = fromDate ? new Date(fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate(), 0, 0, 0, 0).getTime() : null;
+                const toTs = toDate ? new Date(toDate.getFullYear(), toDate.getMonth(), toDate.getDate(), 23, 59, 59, 999).getTime() : null;
+                result = result.filter((it) => {
+                    const raw = it?.[key];
+                    if (!raw)
+                        return false;
+                    const d = new Date(raw);
+                    if (Number.isNaN(d.getTime()))
+                        return false;
+                    const ts = d.getTime();
+                    if (fromTs !== null && ts < fromTs)
+                        return false;
+                    if (toTs !== null && ts > toTs)
+                        return false;
+                    return true;
+                });
+            }
+            else {
+                const q = Array.isArray(f.value) ? f.value[0] : f.value;
+                if (q) {
+                    const qs = String(q).toLowerCase();
+                    result = result.filter((it) => String(it?.[key] ?? '').toLowerCase().includes(qs));
                 }
             }
         });
-        handleSubmitFilters && handleSubmitFilters(obj);
+        handleSubmitFilters && handleSubmitFilters(result);
         setOpenFilters(false);
-    };
+    }, [activeFilters, elements, handleSubmitFilters, isFilterActive]);
+    const prevConfigKeysRef = useRef(null);
+    useEffect(() => {
+        const newState = generateStateObj();
+        const keysSerialized = JSON.stringify(Object.keys(newState));
+        if (prevConfigKeysRef.current !== keysSerialized) {
+            setActiveFilters(newState);
+            prevConfigKeysRef.current = keysSerialized;
+        }
+    }, [generateStateObj]);
+    const prevExternalClearRef = useRef(externalClearSignal ?? 0);
+    useEffect(() => {
+        if (externalClearSignal === undefined)
+            return;
+        if (prevExternalClearRef.current !== externalClearSignal) {
+            prevExternalClearRef.current = externalClearSignal;
+            const cleared = clearAll();
+            setActiveFilters(cleared);
+            handleSubmitFilters && handleSubmitFilters((fullElements && fullElements.length ? fullElements : elements) || []);
+        }
+    }, [externalClearSignal, clearAll, handleSubmitFilters, fullElements, elements]);
+    const mapListItems = useCallback((filterName, allowValues) => {
+        const sel = (activeFilters[filterName]?.value || []).map(String);
+        return (allowValues || []).map((v) => ({ id: String(v), value: String(v), children: [], selected: sel.includes(String(v)) }));
+    }, [activeFilters]);
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(FilterIconArea, null,
-            React.createElement(Icon, { name: "filters", onClick: toogleFilter, iconColor: setIconColor() }),
-            isAnyFilterActive() && (React.createElement(Chips, { label: labelClearAll, handleClose: resetAllFiltersAndSubmit }))),
-        openFilters && (React.createElement(Modal, { title: title, handleConfirm: applyFilter, handleClose: toogleFilter, handleAdditional: resetAllFilters, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll, isOpen: openFilters },
-            React.createElement(Aligment, { direction: "column", align: 'flex-end' },
-                React.createElement(FiltersArea, null, filters.map((filter) => (React.createElement(FilterSection, null,
-                    React.createElement(Aligment, { wrap: "nowrap" },
-                        React.createElement(TextAccent, null, filter.label),
+            React.createElement(Icon, { name: "filters", onClick: toggleFilter, iconColor: setIconColor() }),
+            isAnyFilterActive() && (React.createElement(Chips, { label: labelClearAll, handleClose: () => {
+                    if (onClear) {
+                        onClear();
+                        const cleared = clearAll();
+                        setActiveFilters(cleared);
+                    }
+                    else {
+                        const cleared = clearAll();
+                        setActiveFilters(cleared);
+                        handleSubmitFilters && handleSubmitFilters((fullElements && fullElements.length ? fullElements : elements) || []);
+                    }
+                } }))),
+        openFilters && (React.createElement(Modal, { title: title, handleConfirm: applyFilter, handleClose: toggleFilter, handleAdditional: () => {
+                if (onClear) {
+                    onClear();
+                    const cleared = clearAll();
+                    setActiveFilters(cleared);
+                    setOpenFilters(false);
+                }
+                else {
+                    resetAllFiltersAndSubmit();
+                }
+            }, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll, isOpen: openFilters },
+            React.createElement(Aligment, { direction: "column", align: "flex-end" },
+                React.createElement(FiltersArea, null, filtersConfig.map((filter) => (React.createElement(FilterSection, { key: filter.name },
+                    React.createElement(Aligment, { wrap: "nowrap", style: { alignItems: 'center', justifyContent: 'start' } },
+                        React.createElement(Aligment, { wrap: "nowrap", onClick: () => filter.collapsible && toggleCollapse(filter.name), style: { cursor: filter.collapsible ? 'pointer' : 'default', alignItems: 'center', justifyContent: 'start' } },
+                            React.createElement(TextAccent, { style: { marginRight: 0 } }, filter.label),
+                            React.createElement(Icon, { name: collapsedFilters[filter.name] ? 'arrow_drop_down' : 'arrow_drop_up', size: 16, iconColor: theme.textColor })),
                         React.createElement(Icon, { name: "close", size: 14, onClick: () => resetFilter(filter.name, filter.type) })),
-                    filter.type === 'select' && (React.createElement(Aligment, { wrap: "nowrap", direction: "column", align: "flex-start", vPadding: Theme.padding.s }, filter.allowValues?.map((item) => {
-                        return (React.createElement(PanelOption, { width: "100%", key: item, active: activeFilters[filter.name].value.includes(item), onClick: () => setSelectFilter(item, filter.name) }, item));
-                    }))),
-                    filter.type === 'range' && (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme.padding.s, justify: "flex-start", gap: 8 },
+                    !filter.collapsible || !collapsedFilters[filter.name] ? (filter.type === 'select' ? (React.createElement("div", { style: { width: '100%' } },
+                        React.createElement(List, { items: mapListItems(filter.name, filter.allowValues), handleChange: (items) => {
+                                const collectSelected = (list) => list.reduce((acc, it) => {
+                                    if (it.selected)
+                                        acc.push(String(it.id));
+                                    if (it.children && it.children.length)
+                                        acc.push(...collectSelected(it.children));
+                                    return acc;
+                                }, []);
+                                const selectedIds = collectSelected(items);
+                                setActiveFilters((prev) => ({ ...prev, [filter.name]: { ...(prev[filter.name] || { name: filter.name, type: filter.type, value: [] }), value: selectedIds } }));
+                            }, isCheckbox: true, isCollapsable: true }))) : filter.type === 'range' ? (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme.padding.s, justify: "flex-start", gap: 8 },
+                        React.createElement(FilterInputWrapper, null,
+                            React.createElement(Input, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name].min, handleChange: setRangeFilter })),
+                        React.createElement(FilterInputWrapper, null,
+                            React.createElement(Input, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name].max, handleChange: setRangeFilter })))) : filter.type === 'date' ? (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme.padding.s, justify: "flex-start", gap: 8 },
+                        React.createElement(FilterInputWrapper, null,
+                            React.createElement(Input, { type: "date", name: `${filter.name}_min`, value: activeFilters[filter.name].min, handleChange: setRangeFilter })),
                         React.createElement(FilterInputWrapper, null,
-                            React.createElement(Input, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name].min, placeholder: activeFilters[filter.name].rangeMin, handleChange: setRangeFilter })),
+                            React.createElement(Input, { type: "date", name: `${filter.name}_max`, value: activeFilters[filter.name].max, handleChange: setRangeFilter })))) : filter.type === 'text' ? (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", vPadding: Theme.padding.s, justify: "flex-start", gap: 8 },
                         React.createElement(FilterInputWrapper, null,
-                            React.createElement(Input, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name].max, placeholder: activeFilters[filter.name].rangeMax, handleChange: setRangeFilter })))))))))))));
+                            React.createElement(Input, { type: "text", name: `${filter.name}_query`, value: (activeFilters[filter.name]?.value && activeFilters[filter.name].value[0]) || '', handleChange: setTextFilter })))) : null) : null)))))))));
 };
+export default Filters;

package/dist/esm/components/Filters/filtersHelper.js

@@ -8,20 +8,6 @@ export const getMinValue = (elements, source) => {
 export const getMaxValue = (elements, source) => {
     return Math.max(...elements.map((item) => item[source]));
 };
-export const setTableFilterSet = (headers, elements) => {
-    const filterSetting = [];
-    headers.forEach((filter) => {
-        filterSetting.push({
-            label: filter.name,
-            name: filter.valueSource,
-            type: filter.filterType ? filter.filterType : 'select',
-            allowValues: getUniqueValues(elements, filter.valueSource),
-            min: getMinValue(elements, filter.valueSource),
-            max: getMaxValue(elements, filter.valueSource),
-        });
-    });
-    return filterSetting;
-};
 export const applyFiltersToTable = (elements, filters) => {
     let filtered = [...elements];
     filters.forEach((filter) => {

package/dist/esm/components/Input/Input.js

@@ -1,10 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { Aligment } from '../Aligment';
 import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, Prefix, } from './Input.styles';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-import { debounce } from 'lodash';
 export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error = false, errorMsg, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, prefix, }) => {
     const [inputValue, setInputValue] = useState(value);
     useEffect(() => {
@@ -15,19 +14,14 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
             ? numberValue
             : parseFloat(numberValue);
     };
-    const debouncedRef = useRef(debounce((n, v) => {
-        console.log('checking debounce', n, v);
-        handleChange(n, v);
-    }, 300));
     const onChange = (e) => {
         let returnedValue = type === 'number' || type === 'increase'
             ? calculateNumberValue(e.target.value)
             : e.target.value.toString();
         setInputValue(returnedValue);
-        debouncedRef.current(name, returnedValue);
+        handleChange(name, returnedValue);
     };
     const onBlurValidation = () => {
-        debouncedRef.current.flush();
         if (type === 'number' || type === 'increase') {
             let validateValue = inputValue;
             if (isNaN(parseFloat(validateValue.toString()))) {
@@ -46,7 +40,6 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
     };
     const onKeyDown = async (e) => {
         if (handleSubmit && e.key === 'Enter') {
-            debouncedRef.current.cancel();
             const currentValue = type === 'number' || type === 'increase'
                 ? calculateNumberValue(e.currentTarget.value)
                 : e.currentTarget.value.toString();

package/dist/esm/components/Table/Table.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { TableHead, TableRow, TableWrapper } from './Table.styles';
 import { mainTheme } from '../../Theme';
@@ -6,10 +6,20 @@ import { applySort, setSortParams } from './tableHelper';
 import { HeaderCell } from './HeaderCell';
 import { Cell } from './Cell';
 import { Pagination } from '../Pagination';
+import { Filters } from '../Filters';
+import { TextAccent } from '../Typography';
 export const Table = ({ theme = mainTheme, headers, elements, hover = true, selectable = true, sortable = true, sort = {
     name: '',
     order: 'none',
 }, pageSize = 10, ifPagination = false, moreActions = [], onRowClick, }) => {
+    const initialElementsRef = useRef(null);
+    useEffect(() => {
+        if (!initialElementsRef.current && Array.isArray(elements) && elements.length > 0) {
+            initialElementsRef.current = elements.slice();
+        }
+        setTableProps((prev) => ({ ...prev, elements: Array.isArray(elements) ? elements : [] }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elements]);
     const checkHeaders = () => {
         const tableHeaders = [...headers];
         if (moreActions.length > 0) {
@@ -49,7 +59,6 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
             });
         }
     };
-    // PAGINACJA
     const [currentPage, setCurrentPage] = useState(1);
     const [currentPageSize, setCurrentPageSize] = useState(pageSize || 10);
     const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
@@ -57,7 +66,28 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
     useEffect(() => {
         setCurrentPage(1);
     }, [elements, currentPageSize]);
+    const [noResultsMessage, setNoResultsMessage] = useState(null);
+    const handleApplyFilters = useCallback((filteredElements) => {
+        setTableProps((prev) => ({
+            ...prev,
+            elements: filteredElements,
+        }));
+        setCurrentPage(1);
+        setNoResultsMessage(filteredElements && filteredElements.length === 0 ? 'Nie ma żadnych wyników' : null);
+    }, [setCurrentPage, setTableProps]);
+    const [filtersClearSignal, setFiltersClearSignal] = useState(0);
+    const handleClearFilters = useCallback(() => {
+        setFiltersClearSignal((s) => s + 1);
+        const full = (initialElementsRef.current && initialElementsRef.current.length > 0)
+            ? initialElementsRef.current
+            : (Array.isArray(elements) ? elements : []);
+        setTableProps((prev) => ({ ...prev, elements: Array.isArray(full) ? full.slice() : [] }));
+        setCurrentPage(1);
+        setNoResultsMessage(null);
+    }, [elements, setCurrentPage, setNoResultsMessage]);
     return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 } },
+            React.createElement(Filters, { title: "Select filters", labelConfirm: "Apply", labelClose: "Cancel", labelClearAll: "Clear", headers: headers, elements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, fullElements: initialElementsRef.current && initialElementsRef.current.length > 0 ? initialElementsRef.current : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters })),
         React.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             React.createElement(TableHead, null,
                 React.createElement(TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
@@ -66,5 +96,7 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
                     return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0, isDisabled: item.disabled }));
                 })));
             }))),
+        noResultsMessage && (React.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } },
+            React.createElement(TextAccent, null, noResultsMessage))),
         ifPagination && (React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize }))));
 };

package/dist/esm/components/Table/tableHelper.js

@@ -1,5 +1,4 @@
 import { orderBy } from 'lodash';
-import { applyFiltersToTable } from '../Filters';
 export const setSortParams = (target, order, sort) => {
     const newSort = {
         name: target,
@@ -14,13 +13,6 @@ export const applySort = (sort, elements) => {
     }
     return sorted;
 };
-export const setElements = (elements, sort, filters) => {
-    let tableElements = [...applyFiltersToTable(elements, filters)];
-    if (sort.name !== '') {
-        tableElements = applySort(sort, tableElements);
-    }
-    return tableElements;
-};
 export const getValueFormScope = (item, valuesScope) => {
     return valuesScope.find((_value) => _value.key === item)?.value || '';
 };

package/dist/types/components/Filters/Filters.d.ts

@@ -1,9 +1,14 @@
 import { FC } from 'react';
-export interface IFilterConfigProps {
+interface IHeader {
     name: string;
-    valueSource: string;
+    valueSource?: string;
     date?: boolean;
-    filterType?: 'select' | 'range';
+    isCount?: boolean;
+    scope?: Array<{
+        key?: string;
+        value?: string;
+        label?: string;
+    }>;
 }
 export interface IApplyFilterResults {
     name: string;
@@ -13,6 +18,15 @@ export interface IApplyFilterResults {
     max?: number;
 }
 export interface IFilterProps {
+    collapsible: boolean;
+    valueSource?: string;
+    date?: boolean;
+    isCount?: boolean;
+    scope?: Array<{
+        key?: string;
+        value?: string;
+        label?: string;
+    }>;
     label: string;
     name: string;
     type: 'select' | 'range' | string;
@@ -25,9 +39,14 @@ interface IFiltersProps {
     title: string;
     labelConfirm: string;
     labelClose: string;
-    filters: IFilterProps[];
-    labelClearAll: string;
-    handleSubmitFilters: (filters: IApplyFilterResults[]) => void;
+    filters?: IFilterProps[];
+    headers?: IHeader[];
+    elements?: any[];
+    fullElements?: any[];
+    labelClearAll?: string;
+    handleSubmitFilters: (filteredElements: any[]) => void;
+    externalClearSignal?: number;
+    onClear?: () => void;
 }
 export declare const Filters: FC<IFiltersProps>;
-export {};
+export default Filters;

package/dist/types/components/Filters/filtersHelper.d.ts

@@ -1,7 +1,6 @@
-import { IApplyFilterResults, IFilterConfigProps, IFilterProps } from './Filters';
+import { IApplyFilterResults } from './Filters';
 export type TAllowValues = 'string' | 'number';
 export declare const getUniqueValues: (elements: any, source: string) => string[];
 export declare const getMinValue: (elements: any, source: string) => number;
 export declare const getMaxValue: (elements: any, source: string) => number;
-export declare const setTableFilterSet: (headers: IFilterConfigProps[], elements: any) => IFilterProps[];
 export declare const applyFiltersToTable: (elements: any, filters: IApplyFilterResults[]) => any[];

package/dist/types/components/Input/Input.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { InputType, IFormElement } from '../../types';
 export interface IInputProps extends IFormElement {
-    type?: InputType;
+    type?: InputType | 'date';
     handleChange: (name: string, value: string | number) => void;
     placeholder?: string;
     min?: number;

package/dist/types/components/Table/tableHelper.d.ts

@@ -1,6 +1,4 @@
-import { IApplyFilterResults } from '../Filters';
 import { ITableScopeProps, ITableSortProps } from './Table';
 export declare const setSortParams: (target: string, order: string, sort: ITableSortProps) => ITableSortProps;
 export declare const applySort: (sort: ITableSortProps, elements: any) => any;
-export declare const setElements: (elements: any, sort: ITableSortProps, filters: IApplyFilterResults[]) => any;
 export declare const getValueFormScope: (item: string, valuesScope: ITableScopeProps[]) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",