@pagamio/frontend-commons-lib 0.8.309 → 0.8.311

package/lib/components/ui/FilterComponent.js

@@ -1,37 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input, MultiSelect, Select } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { endOfDay, startOfDay } from 'date-fns';
-import React from 'react';
+import { cn } from '../../helpers';
 import { isDefaultFilterValue } from '../../shared/utils/filterUtils';
 import Button from './Button';
 import DatePicker from './DatePicker';
 import DateRangePickerWithPresets from './DateRangePickerWithPresets';
 import FilterWrapper from './FilterWrapper';
-const sharedStyles = {
-    input: {
-        borderRadius: '6px',
-    },
-    label: {
-        fontSize: '13px',
-    },
-};
-const selectInputStyles = {
-    input: {
-        borderRadius: '6px',
-        fontSize: '0.8rem',
-        height: '39px',
-    },
-    dropdown: {
-        fontSize: '0.75rem',
-    },
-};
-const commonProps = {
-    size: 'md',
-    style: { width: 240 },
-};
+import MultiSelect from './MultiSelect';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select';
 const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = true, showClearFilters, searctInputPlaceHolder = 'Search...', showApplyFilters = true, showSearch = false, searchQuery = '', children, isNarrow, handleFilterChange, handleApplyFilters, resetFilters, onSearch = () => { }, }) => {
-    const [activeRangePicker, setActiveRangePicker] = React.useState(null);
     const hasSelectedActiveFilters = Object.entries(selectedFilters).some(([key, v]) => !isDefaultFilterValue(v, key));
     const shouldShowActionButtons = hasSelectedActiveFilters || (showSearch && searchQuery.length > 0);
     const parseDateValue = (value) => {
@@ -44,7 +22,6 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
         const parsed = new Date(value);
         return Number.isNaN(parsed.getTime()) ? null : parsed;
     };
-    // Keyboard handler for search input
     const handleSearchKeyDown = (e) => {
         if (e.key === 'Enter') {
             handleApplyFilters();
@@ -54,28 +31,16 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
             resetFilters();
         }
     };
-    // Keyboard handler for select/multiselect (dropdown) filters
-    const handleFilterKeyDown = (e, name) => {
-        if (e.key === 'Enter') {
-            handleApplyFilters();
-        }
-        else if (e.key === 'Escape') {
-            handleFilterChange(name, '');
-            resetFilters();
-        }
-    };
-    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsx("div", { className: "w-full sm:w-[300px]", children: _jsx(Input, { leftSection: _jsx(IconSearch, { size: 16 }), placeholder: searctInputPlaceHolder, value: searchQuery, onChange: (event) => onSearch(event), onKeyDown: handleSearchKeyDown, className: "w-full", styles: { input: { height: 39, backgroundColor: 'hsl(var(--muted))' } }, "aria-label": "Search" }) })), filters.map((filter) => {
+    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsxs("div", { className: "relative w-full sm:w-[300px]", children: [_jsx(IconSearch, { size: 16, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: searctInputPlaceHolder, value: searchQuery, onChange: onSearch, onKeyDown: handleSearchKeyDown, "aria-label": "Search", className: cn('h-9 w-full rounded-md border border-border bg-background pl-9 pr-3 text-sm text-foreground', 'placeholder:text-muted-foreground', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') })] })), filters.map((filter) => {
                         const { name, type, options } = filter;
                         const value = selectedFilters[name];
                         const renderFilterInput = () => {
                             if (type === 'date-range') {
                                 const rangeKeys = filter.rangeKeys;
-                                if (!rangeKeys) {
-                                    console.warn('Date range filter requires rangeKeys', filter);
+                                if (!rangeKeys)
                                     return null;
-                                }
-                                const startDateValue = rangeKeys ? selectedFilters[rangeKeys.start] : undefined;
-                                const endDateValue = rangeKeys ? selectedFilters[rangeKeys.end] : undefined;
+                                const startDateValue = selectedFilters[rangeKeys.start];
+                                const endDateValue = selectedFilters[rangeKeys.end];
                                 const startDate = parseDateValue(startDateValue);
                                 const endDate = parseDateValue(endDateValue);
                                 const dateRange = startDate && endDate
@@ -84,8 +49,6 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                                         ? { from: startDate, to: startDate }
                                         : undefined;
                                 const handleRangeChange = (range) => {
-                                    if (!rangeKeys)
-                                        return;
                                     if (range?.from) {
                                         handleFilterChange(rangeKeys.start, startOfDay(range.from));
                                         handleFilterChange(rangeKeys.end, range.to ? endOfDay(range.to) : endOfDay(range.from));
@@ -101,16 +64,13 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                                 return (_jsx(DatePicker, { value: value || null, onChange: (date) => handleFilterChange(name, date), placeholder: filter.placeholder ?? `Select ${name}` }));
                             }
                             if (type === 'multi-select') {
-                                return (_jsx(MultiSelect, { data: options || [], placeholder: filter.placeholder ?? `Select ${name}`, value: value || [], onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: {
-                                        ...sharedStyles,
-                                    }, ...commonProps, onKeyDown: (e) => handleFilterKeyDown(e, name), "aria-label": filter.placeholder ?? name }));
+                                return (_jsx(MultiSelect, { options: options ?? [], placeholder: filter.placeholder ?? `Select ${name}`, value: value || [], onChange: (val) => handleFilterChange(name, val), className: "w-full" }));
                             }
-                            return (_jsx(Select, { data: options || [], placeholder: filter.placeholder ?? `Select ${name}`, value: value || null, onChange: (val) => handleFilterChange(name, val), searchable: true, clearable: true, className: "w-full", styles: {
-                                    ...sharedStyles,
-                                    ...selectInputStyles,
-                                }, onKeyDown: (e) => handleFilterKeyDown(e, name), "aria-label": filter.placeholder ?? name }));
+                            // Default: select
+                            const currentValue = value || '';
+                            return (_jsxs(Select, { value: currentValue || undefined, onValueChange: (val) => handleFilterChange(name, val === '__clear__' ? '' : val), children: [_jsx(SelectTrigger, { className: "h-9 w-full border-border bg-background text-sm text-foreground", "aria-label": filter.placeholder ?? name, children: _jsx(SelectValue, { placeholder: filter.placeholder ?? `Select ${name}` }) }), _jsxs(SelectContent, { children: [currentValue && (_jsx(SelectItem, { value: "__clear__", className: "text-muted-foreground", children: filter.placeholder ?? 'All' })), (options ?? []).map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)))] })] }));
                         };
                         return (_jsx("div", { className: "w-full sm:w-[240px]", children: renderFilterInput() }, name));
-                    }), showApplyFilterButton && shouldShowActionButtons && (_jsx(Button, { onClick: handleApplyFilters, variant: "primary", className: "w-full sm:w-auto", style: { height: 39 }, tabIndex: 0, "aria-label": "Apply Filters", children: "Apply Filters" })), showClearFilters && shouldShowActionButtons && (_jsx(Button, { onClick: resetFilters, variant: "outline-primary", className: "w-full sm:w-auto", style: { height: 39 }, tabIndex: 0, "aria-label": "Clear Filters", children: "Clear Filters" }))] }), children] }));
+                    }), showApplyFilterButton && shouldShowActionButtons && (_jsx(Button, { onClick: handleApplyFilters, variant: "primary", className: "w-full sm:w-auto", style: { height: 36 }, tabIndex: 0, "aria-label": "Apply Filters", children: "Apply Filters" })), showClearFilters && shouldShowActionButtons && (_jsx(Button, { onClick: resetFilters, variant: "outline-primary", className: "w-full sm:w-auto", style: { height: 36 }, tabIndex: 0, "aria-label": "Clear Filters", children: "Clear Filters" }))] }), children] }));
 };
 export default FilterComponent;

package/lib/form-engine/components/inputs/searchable-multi-select/SearchableMultiSelectInput.js

@@ -27,9 +27,11 @@ const SearchableMultiSelectInput = forwardRef(({ field, error, options: rawOptio
         if (!triggerRef.current)
             return;
         const rect = triggerRef.current.getBoundingClientRect();
+        // Dropdown uses position: fixed, which is viewport-relative.
+        // getBoundingClientRect() is already viewport-relative, so do NOT add scroll offsets.
         setDropdownPos({
-            top: rect.bottom + window.scrollY + 4,
-            left: rect.left + window.scrollX,
+            top: rect.bottom + 4,
+            left: rect.left,
             width: rect.width,
         });
     }, []);

package/lib/styles.css

@@ -2958,6 +2958,9 @@ video {
 .pl-8 {
   padding-left: 2rem;
 }
+.pl-9 {
+  padding-left: 2.25rem;
+}
 .pr-10 {
   padding-right: 2.5rem;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.309",
+  "version": "0.8.311",
   "publishConfig": {
     "access": "public",
     "provenance": false