venice-ui 2.4.13 → 3.0.1

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

@@ -1,15 +1,41 @@
-import React, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import React, { useMemo, useState, useEffect, useRef, useCallback, } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { TextAccent } from '../Typography';
 import { Aligment } from '../Aligment';
-import { Icon } from '../Icons';
+import { FilterCounter, FilterGrid, FiltersArea, FilterSection, FilterSectionHeader, FilterTrigerRoot, HeaderRowClear, HeaderTitle, ListIconWrapper, } from './Filters.styles';
+import { List } from '../List';
 import { Modal } from '../Modal';
-import { FilterIconArea, FilterInputWrapper, FiltersArea, FilterSection, } from './Filters.styles';
-import { Theme, mainTheme } from '../../Theme';
+import { wordbook } from '../../config';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { Icon } from '../Icon';
+import { Numerical } from '../Numerical';
+import { DatePicker } from '../DatePicker';
 import { Input } from '../Input';
-import { Chips } from '../Chips';
-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, }) => {
+export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
+    title: wordbook.filters.title,
+    close: wordbook.actions.cancel,
+    confirm: wordbook.actions.confirm,
+    trigger: wordbook.filters.filterText,
+    clearAll: wordbook.filters.labelClearAll,
+    clear: wordbook.filters.clear,
+}, filters = [], headers = [], elements = [], fullElements, handleSubmitFilters, externalClearSignal, onClear, iconMode = true, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const filterConfig = componentsConfig.filters;
+    const normalizeDateValue = 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 = useMemo(() => {
         const uniq = (arr) => Array.from(new Set(arr.filter((v) => v !== undefined && v !== null)));
         if (filters && filters.length) {
@@ -29,32 +55,86 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
             .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 = useCallback(() => {
@@ -66,8 +146,12 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
                 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;
@@ -96,12 +180,12 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
             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 = 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) => {
@@ -109,8 +193,12 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
             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;
@@ -131,20 +219,40 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
                 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 = 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 = 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 = useCallback(() => {
         let result = (elements || []).slice();
@@ -177,10 +285,16 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
             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)
@@ -200,7 +314,9 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
                 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));
                 }
             }
         });
@@ -224,29 +340,81 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
             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 = 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.createElement(ThemeProvider, { theme: theme },
-        React.createElement(FilterIconArea, null,
-            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: () => {
+    const renderFilterContent = useCallback((filter) => {
+        switch (filter.type) {
+            case 'select':
+                return (React.createElement("div", { style: { width: '100%' } },
+                    React.createElement(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.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
+                    React.createElement(FilterGrid, null,
+                        React.createElement(Numerical, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
+                        React.createElement(Numerical, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
+            case 'date':
+                return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
+                    React.createElement(FilterGrid, null,
+                        React.createElement(DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%' }),
+                        React.createElement(DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%' }))));
+            case 'text':
+                return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
+                    React.createElement(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.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(FilterTrigerRoot, { theme: resolvedTheme, config: filterConfig, size: size, onClick: toggleFilter, isActive: isAnyFilterActive() },
+            iconMode && (React.createElement(Icon, { name: "filters", size: filterConfig.size.triger[size].iconSize })),
+            labels.trigger,
+            counter > 0 && (React.createElement(FilterCounter, { size: size, config: filterConfig }, counter))),
+        openFilters && (React.createElement(Modal, { title: labels.title, handleConfirm: applyFilter, handleClose: toggleFilter, handleAdditional: () => {
                 if (onClear) {
                     onClear();
                     const cleared = clearAll();
@@ -256,35 +424,18 @@ export const Filters = ({ theme = mainTheme, title = 'Select filters', labelConf
                 else {
                     resetAllFiltersAndSubmit();
                 }
-            }, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelClearAll, isOpen: openFilters },
+            }, labelConfirm: labels.confirm, labelClose: labels.close, labelAdditional: labels.clearAll, 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.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: "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: "text", name: `${filter.name}_query`, value: (activeFilters[filter.name]?.value && activeFilters[filter.name].value[0]) || '', handleChange: setTextFilter })))) : null) : null)))))))));
+                React.createElement(FiltersArea, null, filtersConfig.map((filter) => (React.createElement(FilterSection, { theme: resolvedTheme, config: filterConfig, key: filter.name },
+                    React.createElement(FilterSectionHeader, { theme: resolvedTheme, config: filterConfig },
+                        React.createElement(Aligment, { wrap: "nowrap", justify: "flex-start", width: "auto", gap: filterConfig.size.header.gap },
+                            React.createElement(HeaderTitle, { onClick: () => filter.collapsible && toggleCollapse(filter.name), theme: resolvedTheme, config: filterConfig }, filter.label),
+                            React.createElement(ListIconWrapper, { theme: resolvedTheme, config: filterConfig, isExtended: collapsedFilters[filter.name] || false, onClick: (e) => {
+                                    e.stopPropagation();
+                                } },
+                                React.createElement(Icon, { name: "chevron_down", size: "md", onClick: () => filter.collapsible && toggleCollapse(filter.name) }))),
+                        isFilterActive(activeFilters[filter.name]) && (React.createElement(HeaderRowClear, { theme: resolvedTheme, config: filterConfig, onClick: () => resetFilter(filter.name, filter.type) }, labels.clear))),
+                    !filter.collapsible || !collapsedFilters[filter.name]
+                        ? renderFilterContent(filter)
+                        : null)))))))));
 };
-export default Filters;

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

@@ -1,26 +1,94 @@
-import styled from "styled-components";
-import { Theme } from "../../Theme";
-export const FilterIconArea = styled.div `
-  display:flex;
+import styled from 'styled-components';
+export const FilterTrigerRoot = styled.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};
+  }
+`;
+export const FilterCounter = styled.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;
 `;
 export const FiltersArea = styled.div `
-  width:100%;
+  width: 100%;
 `;
 export const FilterSection = styled.div `
-  width:100%;
-  display:flex;
-  flex-direction:column;
-  padding-bottom:${Theme.padding.m}
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ theme, config }) => config.size.filterRow.paddingY}px;
+`;
+export const FilterSectionHeader = styled.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;
+`;
+export const HeaderTitle = styled.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;
+`;
+export const ListIconWrapper = styled.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;
+`;
+export const HeaderRowClear = styled.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};
+  }
 `;
 export const FilterOption = styled.div `
-  width:100%;
-  display:flex;
-  flex-direction:column;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+export const FilterGrid = styled.div `
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 `;
 export const FilterInputWrapper = styled.div `
-  width:100px
+  width: 100%;
 `;

package/dist/esm/components/Form/Form.js

@@ -1,32 +1,25 @@
 import React from 'react';
+import { FormRoot, FormRow, FormSubRow } from './Form.styles';
+import { resolveThemeWithComponentsConfig } from '../../config';
 import { Input } from '../Input';
-import { File } from '../File';
-import { FormRow, FormSubRow, FormWrapper } from './FormElements';
+import { Numerical } from '../Numerical';
 import { Dropdown } from '../Dropdown';
+import { File } from '../File';
 import { DatePicker } from '../DatePicker';
-import { FillSelect } from '../FillSelect';
-export const Form = ({ formData, size = 'medium', read, handleFieldFocus, handleFieldBlur, }) => {
+export const Form = ({ theme, themeVariant = 'default', formData, size = 'md', read = false, handleFieldFocus, handleFieldBlur, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const formConfig = componentsConfig.form;
     const onChangeHandler = (name, value) => {
         formData.action(name, value);
     };
     const onDateChangeHandler = (name, value) => {
         formData.action(name, value);
     };
-    const onIntChangeHandler = (name, value) => {
-        let valueString = value;
-        if (valueString.length > 0) {
-            const modify = valueString
-                .replaceAll(',', '.')
-                .replace(/[^\d.-]/g, '')
-                .split('.');
-            let digit = modify.shift();
-            if (modify.length > 0) {
-                digit = digit + '.' + modify.join('');
-            }
-            valueString = digit;
-        }
-        formData.action(name, valueString);
-    };
     const onFileHandler = (event) => {
         const fileList = event.currentTarget.files;
         if (!fileList)
@@ -38,28 +31,29 @@ export const Form = ({ formData, size = 'medium', read, handleFieldFocus, handle
     const selectType = (item) => {
         switch (item.type) {
             case 'text':
-                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: item.inputType || 'text', size: size, handleChange: onChangeHandler, readOnly: read || item.readOnly, autoFocus: item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, labelPosition: item.labelPosition, width: item.width, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur, required: item.required, optional: item.optional, optionalLabel: item.optionalLabel, prefix: item.prefix, suffix: item.suffix, prefixIcon: item.prefixIcon, suffixIcon: item.suffixIcon, prefixIconAction: item.prefixIconAction, suffixIconAction: item.suffixIconAction, withClear: item.withClear, helperText: item.helperText, componentWidth: '100%' }));
             case 'number':
-                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
+                return (React.createElement(Numerical, { label: item.label, value: item.value, name: item.name, type: "number", size: size, handleChange: onChangeHandler, readOnly: read || item.readOnly, autoFocus: item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, labelPosition: item.labelPosition, width: item.width, min: item.min, max: item.max, step: item.step, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur, required: item.required, optional: item.optional, optionalLabel: item.optionalLabel, prefix: item.prefix, suffix: item.suffix, prefixIcon: item.prefixIcon, suffixIcon: item.suffixIcon, prefixIconAction: item.prefixIconAction, suffixIconAction: item.suffixIconAction, withClear: item.withClear, helperText: item.helperText, componentWidth: '100%' }));
             case 'increase':
-                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur }));
+                return (React.createElement(Numerical, { label: item.label, value: item.value, name: item.name, type: "increase", size: size, handleChange: onChangeHandler, readOnly: read || item.readOnly, autoFocus: item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error, labelPosition: item.labelPosition, width: item.width, min: item.min, max: item.max, step: item.step, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur, required: item.required, optional: item.optional, optionalLabel: item.optionalLabel, prefix: item.prefix, suffix: item.suffix, prefixIcon: item.prefixIcon, suffixIcon: item.suffixIcon, prefixIconAction: item.prefixIconAction, suffixIconAction: item.suffixIconAction, withClear: item.withClear, helperText: item.helperText, componentWidth: '100%' }));
             case 'select':
-                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur, maxHeight: item.maxHeight, disabled: item.isDisabled }));
+                return (React.createElement(Dropdown, { options: item.options, handleChange: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, labelPosition: item.labelPosition, width: item.width, position: item.position, zIndex: item.zIndex, readOnly: read || item.readOnly, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur, maxRows: item.maxRows, disabled: item.isDisabled, required: item.required, optional: item.optional, optionalLabel: item.optionalLabel, prefix: item.prefix, prefixIcon: item.prefixIcon, prefixIconAction: item.prefixIconAction, noBreakLabel: item.noBreakLabel, searchable: item.searchable, helperText: item.helperText, componentWidth: '100%' }));
             case 'fill':
-                return (React.createElement(FillSelect, { options: item.options, handleSelect: onChangeHandler, handleAddToScope: item.handleAddToScope, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error, placeholder: item.placeholder }));
+                return (React.createElement(Dropdown, { options: item.options, handleChange: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, labelPosition: item.labelPosition, width: item.width, position: item.position, zIndex: item.zIndex, readOnly: read || item.readOnly, error: item.error, placeholder: item.placeholder, handleFieldFocus: handleFieldFocus, handleFieldBlur: handleFieldBlur, maxRows: item.maxRows, disabled: item.isDisabled, required: item.required, optional: item.optional, optionalLabel: item.optionalLabel, prefix: item.prefix, prefixIcon: item.prefixIcon, prefixIconAction: item.prefixIconAction, noBreakLabel: item.noBreakLabel, searchable: item.searchable, handleAdd: item.handleAdd, helperText: item.helperText, componentWidth: '100%' }));
             case 'file':
-                return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read, subLabel: item.subLabel, error: item.error }));
+                return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, labelPosition: item.labelPosition, width: item.width, placeholder: item.placeholder, disabled: item.isDisabled, readOnly: read || item.readOnly, helperText: item.helperText, error: item.error, required: item.required, optional: item.optional, optionalLabel: item.optionalLabel, buttonLabel: item.buttonLabel, multiple: item.multipleFile, accept: item.acceptFormats, componentWidth: '100%' }));
             case 'date':
-                return (React.createElement(DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler, zIndex: item.zIndex, error: item.error }));
+                return (React.createElement(DatePicker, { label: item.label, value: item.value, name: item.name, size: size, labelPosition: item.labelPosition, width: item.width, disabled: item.isDisabled, readOnly: read || item.readOnly, handleChange: onDateChangeHandler, zIndex: item.zIndex, error: item.error, required: item.required, optional: item.optional, optionalLabel: item.optionalLabel, isAdvance: item.isAdvance, autoConfirm: item.autoConfirm, labels: item.actionLabels, localeLabels: item.localeLabels, placeholder: item.placeholder, helperText: item.helperText, componentWidth: '100%' }));
+            default:
+                return null;
         }
     };
-    return (React.createElement(FormWrapper, null, formData.data.map((item) => {
+    return (React.createElement(FormRoot, null, formData.data.map((item) => {
         if ('row' in item) {
-            return (React.createElement(FormRow, { key: `subRow-${item.row[0].name}` }, item.row.map((rowItem) => (React.createElement(FormSubRow, { factor: item.row.length, key: rowItem.name }, selectType(rowItem))))));
+            return (React.createElement(FormRow, { config: formConfig, theme: resolvedTheme, key: `subRow-${item.row[0].name}` }, item.row.map((rowItem) => (React.createElement(FormSubRow, { factor: item.row.length, config: formConfig, theme: resolvedTheme, key: rowItem.name }, selectType(rowItem))))));
         }
         else {
-            return React.createElement(FormRow, { key: item.name }, selectType(item));
+            return (React.createElement(FormRow, { config: formConfig, theme: resolvedTheme, key: item.name }, selectType(item)));
         }
     })));
 };
-export default Form;