venice-ui 2.4.13 → 3.0.1

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

@@ -15,27 +15,63 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filters = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = require("styled-components");
-const Typography_1 = require("../Typography");
 const Aligment_1 = require("../Aligment");
-const Icons_1 = require("../Icons");
-const Modal_1 = require("../Modal");
 const Filters_styles_1 = require("./Filters.styles");
-const Theme_1 = require("../../Theme");
-const Input_1 = require("../Input");
-const Chips_1 = require("../Chips");
 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 Modal_1 = require("../Modal");
+const config_1 = require("../../config");
+const config_2 = require("../../config");
+const Icon_1 = require("../Icon");
+const Numerical_1 = require("../Numerical");
+const DatePicker_1 = require("../DatePicker");
+const Input_1 = require("../Input");
+const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
+    title: config_1.wordbook.filters.title,
+    close: config_1.wordbook.actions.cancel,
+    confirm: config_1.wordbook.actions.confirm,
+    trigger: config_1.wordbook.filters.filterText,
+    clearAll: config_1.wordbook.filters.labelClearAll,
+    clear: config_1.wordbook.filters.clear,
+}, filters = [], headers = [], elements = [], fullElements, handleSubmitFilters, externalClearSignal, onClear, iconMode = true, }) => {
+    const resolvedThemeData = (0, config_2.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const filterConfig = componentsConfig.filters;
+    const normalizeDateValue = (0, react_1.useCallback)((rawValue) => {
+        if (rawValue === undefined || rawValue === null || rawValue === '') {
+            return undefined;
+        }
+        const numericValue = typeof rawValue === 'number' ? rawValue : Number(rawValue);
+        if (!Number.isNaN(numericValue)) {
+            return numericValue;
+        }
+        const parsed = new Date(rawValue);
+        return Number.isNaN(parsed.getTime()) ? undefined : parsed.getTime();
+    }, []);
     const filtersConfig = (0, react_1.useMemo)(() => {
         const uniq = (arr) => Array.from(new Set(arr.filter((v) => v !== undefined && v !== null)));
         if (filters && filters.length) {
@@ -55,32 +91,86 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
             .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 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 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 };
+                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 };
+                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 };
+                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 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));
+            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: '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 };
+            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)(() => {
@@ -92,8 +182,12 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
                 value: [],
                 rangeMin: filter.min,
                 rangeMax: filter.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) : '',
+                min: filter.type === 'range' && filter.min !== undefined
+                    ? String(filter.min)
+                    : '',
+                max: filter.type === 'range' && filter.max !== undefined
+                    ? String(filter.max)
+                    : '',
             };
         });
         return obj;
@@ -122,12 +216,12 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
             const defaultMax = filter.rangeMax !== undefined ? String(filter.rangeMax) : '';
             const curMin = filter.min ?? '';
             const curMax = filter.max ?? '';
-            return (curMin !== '' && curMin !== defaultMin) || (curMax !== '' && curMax !== defaultMax);
+            return ((curMin !== '' && curMin !== defaultMin) ||
+                (curMax !== '' && curMax !== defaultMax));
         }
         return false;
     }, []);
     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) => {
@@ -135,8 +229,12 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
             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) : '',
+                min: f.type === 'range' && f.rangeMin !== undefined
+                    ? String(f.rangeMin)
+                    : '',
+                max: f.type === 'range' && f.rangeMax !== undefined
+                    ? String(f.rangeMax)
+                    : '',
             };
         });
         return resetedFilter;
@@ -157,20 +255,40 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
                 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 } };
+                const defaultMin = filterType === 'range'
+                    ? current.rangeMin !== undefined
+                        ? String(current.rangeMin)
+                        : ''
+                    : '';
+                const defaultMax = filterType === 'range'
+                    ? current.rangeMax !== undefined
+                        ? String(current.rangeMax)
+                        : ''
+                    : '';
+                return {
+                    ...prev,
+                    [filterName]: { ...current, min: defaultMin, max: defaultMax },
+                };
             }
             return prev;
         });
     }, []);
     const setRangeFilter = (0, react_1.useCallback)((name, value) => {
         const [filterName, filterParam] = String(name).split('_');
-        setActiveFilters((prev) => ({ ...prev, [filterName]: { ...prev[filterName], [filterParam]: value } }));
+        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)] : [] } }));
+        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();
@@ -203,10 +321,16 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
             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;
+                const fromTsRaw = normalizeDateValue(f.min);
+                const toTsRaw = normalizeDateValue(f.max);
+                const fromDate = fromTsRaw !== undefined ? new Date(fromTsRaw) : null;
+                const toDate = toTsRaw !== undefined ? new Date(toTsRaw) : 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)
@@ -226,7 +350,9 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
                 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));
+                    result = result.filter((it) => String(it?.[key] ?? '')
+                        .toLowerCase()
+                        .includes(qs));
                 }
             }
         });
@@ -250,29 +376,81 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
             prevExternalClearRef.current = externalClearSignal;
             const cleared = clearAll();
             setActiveFilters(cleared);
-            handleSubmitFilters && handleSubmitFilters((fullElements && fullElements.length ? fullElements : elements) || []);
+            handleSubmitFilters &&
+                handleSubmitFilters((fullElements && fullElements.length ? fullElements : elements) || []);
         }
-    }, [externalClearSignal, clearAll, handleSubmitFilters, 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)) }));
+        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: 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: () => {
+    const renderFilterContent = (0, react_1.useCallback)((filter) => {
+        switch (filter.type) {
+            case 'select':
+                return (react_1.default.createElement("div", { style: { width: '100%' } },
+                    react_1.default.createElement(List_1.List, { isCheckbox: true, 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,
+                                },
+                            }));
+                        } })));
+            case 'range':
+                return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
+                    react_1.default.createElement(Filters_styles_1.FilterGrid, null,
+                        react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
+                        react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
+            case 'date':
+                return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
+                    react_1.default.createElement(Filters_styles_1.FilterGrid, null,
+                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%' }),
+                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%' }))));
+            case 'text':
+                return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
+                    react_1.default.createElement(Input_1.Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));
+            default:
+                return null;
+        }
+    }, [
+        activeFilters,
+        mapListItems,
+        normalizeDateValue,
+        setRangeFilter,
+        setTextFilter,
+    ]);
+    const counter = Object.values(activeFilters).filter(isFilterActive).length;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Filters_styles_1.FilterTrigerRoot, { theme: resolvedTheme, config: filterConfig, size: size, onClick: toggleFilter, isActive: isAnyFilterActive() },
+            iconMode && (react_1.default.createElement(Icon_1.Icon, { name: "filters", size: filterConfig.size.triger[size].iconSize })),
+            labels.trigger,
+            counter > 0 && (react_1.default.createElement(Filters_styles_1.FilterCounter, { size: size, config: filterConfig }, counter))),
+        openFilters && (react_1.default.createElement(Modal_1.Modal, { title: labels.title, handleConfirm: applyFilter, handleClose: toggleFilter, handleAdditional: () => {
                 if (onClear) {
                     onClear();
                     const cleared = clearAll();
@@ -282,36 +460,19 @@ const Filters = ({ theme = Theme_1.mainTheme, title = 'Select filters', labelCon
                 else {
                     resetAllFiltersAndSubmit();
                 }
-            }, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll, isOpen: openFilters },
+            }, labelConfirm: labels.confirm, labelClose: labels.close, labelAdditional: labels.clearAll, 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.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: "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: "text", name: `${filter.name}_query`, value: (activeFilters[filter.name]?.value && activeFilters[filter.name].value[0]) || '', handleChange: setTextFilter })))) : null) : null)))))))));
+                react_1.default.createElement(Filters_styles_1.FiltersArea, null, filtersConfig.map((filter) => (react_1.default.createElement(Filters_styles_1.FilterSection, { theme: resolvedTheme, config: filterConfig, key: filter.name },
+                    react_1.default.createElement(Filters_styles_1.FilterSectionHeader, { theme: resolvedTheme, config: filterConfig },
+                        react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", justify: "flex-start", width: "auto", gap: filterConfig.size.header.gap },
+                            react_1.default.createElement(Filters_styles_1.HeaderTitle, { onClick: () => filter.collapsible && toggleCollapse(filter.name), theme: resolvedTheme, config: filterConfig }, filter.label),
+                            react_1.default.createElement(Filters_styles_1.ListIconWrapper, { theme: resolvedTheme, config: filterConfig, isExtended: collapsedFilters[filter.name] || false, onClick: (e) => {
+                                    e.stopPropagation();
+                                } },
+                                react_1.default.createElement(Icon_1.Icon, { name: "chevron_down", size: "md", onClick: () => filter.collapsible && toggleCollapse(filter.name) }))),
+                        isFilterActive(activeFilters[filter.name]) && (react_1.default.createElement(Filters_styles_1.HeaderRowClear, { theme: resolvedTheme, config: filterConfig, onClick: () => resetFilter(filter.name, filter.type) }, labels.clear))),
+                    !filter.collapsible || !collapsedFilters[filter.name]
+                        ? renderFilterContent(filter)
+                        : null)))))))));
 };
 exports.Filters = Filters;
-exports.default = exports.Filters;

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

@@ -3,30 +3,98 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterInputWrapper = exports.FilterOption = exports.FilterSection = exports.FiltersArea = exports.FilterIconArea = void 0;
+exports.FilterInputWrapper = exports.FilterGrid = exports.FilterOption = exports.HeaderRowClear = exports.ListIconWrapper = exports.HeaderTitle = exports.FilterSectionHeader = exports.FilterSection = exports.FiltersArea = exports.FilterCounter = exports.FilterTrigerRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../../Theme");
-exports.FilterIconArea = styled_components_1.default.div `
-  display:flex;
+exports.FilterTrigerRoot = styled_components_1.default.div `
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
-  gap:8px;
-}
+  gap: ${({ theme, config, size }) => config.size.triger[size].gap}px;
+  height: ${({ theme, config, size }) => config.size.triger[size].height}px;
+  padding: 0 ${({ theme, config, size }) => config.size.triger[size].paddingX}px;
+  background: ${({ theme, config, isActive }) => isActive ? config.color.activeBackground : config.color.background};
+  border-radius: ${({ theme, config, size }) => config.size.triger[size].radius}px;
+  cursor: pointer;
+  color: ${({ theme, config, isActive }) => isActive ? config.color.activeText : config.color.text};
+  border: none;
+
+  &:hover {
+    background: ${({ theme, config }) => config.color.hover.background};
+  }
+`;
+exports.FilterCounter = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  background: ${({ theme, config }) => config.color.default.counterBackground};
+  color: ${({ theme, config }) => config.color.default.counterText};
+  border-radius: ${({ theme, config, size }) => config.size.counter[size].radius}px;
+  font-size: ${({ theme, config, size }) => config.size.counter[size].fontSize}px;
+  line-height: ${({ theme, config, size }) => config.size.counter[size].lineHeight}px;
+  padding: 0 ${({ theme, config, size }) => config.size.counter[size].paddingX}px;
 `;
 exports.FiltersArea = styled_components_1.default.div `
-  width:100%;
+  width: 100%;
 `;
 exports.FilterSection = styled_components_1.default.div `
-  width:100%;
-  display:flex;
-  flex-direction:column;
-  padding-bottom:${Theme_1.Theme.padding.m}
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ theme, config }) => config.size.filterRow.paddingY}px;
+`;
+exports.FilterSectionHeader = styled_components_1.default.div `
+  height: ${({ theme, config }) => config.size.header.height}px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme, config }) => config.size.header.gap}px;
+`;
+exports.HeaderTitle = styled_components_1.default.div `
+  display: flex;
+  font-size: ${({ theme, config }) => config.size.header.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.header.lineHeight}px;
+  color: ${({ theme, config }) => config.color.default.headerText};
+  text-transform: uppercase;
+  font-weight: 500;
+  cursor: pointer;
+`;
+exports.ListIconWrapper = styled_components_1.default.div `
+  display: flex;
+  transition: transform 0.2s ease;
+  transform: ${({ isExtended }) => isExtended ? 'rotate(-90deg)' : 'rotate(0deg)'};
+  width: ${({ config }) => config.size.iconSpace}px;
+  height: ${({ config }) => config.size.iconSpace}px;
+  align-items: center;
+  justify-content: center;
+`;
+exports.HeaderRowClear = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  font-size: ${({ theme, config }) => config.size.header.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.header.lineHeight}px;
+  color: ${({ theme, config }) => config.color.default.text};
+  font-weight: 500;
+  width: auto;
+  cursor: pointer;
+  :hover {
+    color: ${({ theme, config }) => config.color.hover.clearText};
+  }
 `;
 exports.FilterOption = styled_components_1.default.div `
-  width:100%;
-  display:flex;
-  flex-direction:column;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+exports.FilterGrid = styled_components_1.default.div `
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 `;
 exports.FilterInputWrapper = styled_components_1.default.div `
-  width:100px
+  width: 100%;
 `;