@pagamio/frontend-commons-lib 0.8.310 → 0.8.312

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/pagamio-table/data-table/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
 import { HiPlusSm } from 'react-icons/hi';
-import { useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FilterComponent, IconButton } from '../../components';
 import { useMediaQueries } from '../../shared';
 import { getDefaultTableOptions } from './Defaults';
@@ -62,6 +62,32 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
 // ─── PagamioTable Component ──────────────────────────────────────────
 const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }) => {
     const [expanded, setExpanded] = useState({});
+    const tableRef = useRef(null);
+    const applyTableHeight = (el) => {
+        const mrtContainer = el.querySelector('.mrt-table-container');
+        if (!mrtContainer)
+            return;
+        const containerTop = mrtContainer.getBoundingClientRect().top;
+        const offset = Math.round(containerTop + 68); // 52 MRT pagination + 16 gap
+        mrtContainer.style.setProperty('max-height', `calc(100vh - ${offset}px)`, 'important');
+    };
+    // Runs after every render (no deps), always after MRT's own layout effect.
+    useLayoutEffect(() => {
+        if (tableRef.current)
+            applyTableHeight(tableRef.current);
+    });
+    useEffect(() => {
+        const el = tableRef.current;
+        if (!el)
+            return;
+        const resizeObserver = new ResizeObserver(() => applyTableHeight(el));
+        resizeObserver.observe(document.documentElement);
+        window.addEventListener('resize', () => applyTableHeight(el));
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', () => applyTableHeight(el));
+        };
+    }, []);
     // Process columns (handle showHeader: false)
     const processedColumns = useMemo(() => processColumns(columns), [columns]);
     // Convert our SortConfig to MRT's SortingState
@@ -168,6 +194,12 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
         // Layout
         ...(layoutMode && { layoutMode }),
         ...(defaultColumn && { defaultColumn }),
+        mantineTableContainerProps: {
+            style: {
+                border: 'transparent',
+                borderRadius: '4px',
+            },
+        },
         // Row interaction styling
         mantineTableBodyRowProps: ({ row }) => ({
             onClick: onRowClick ? (event) => handleRowClick(row, event) : undefined,
@@ -179,6 +211,6 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
     });
     // ── Toolbar rendering ──────────────────────────────────────────────
     const showCustomToolbar = toolbarMode === 'custom' && (!!toolbar || !!search || !!filtering);
-    return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { className: "border border-border rounded-md overflow-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
+    return (_jsxs("div", { children: [showCustomToolbar && (_jsx(CustomToolbar, { filters: toolbar?.filters ?? [], appliedFilters: filtering?.appliedFilters ?? {}, onFilterChange: filtering?.onFilterChange ?? (() => { }), onApply: filtering?.onApply ?? (() => { }), onClearFilters: toolbar?.onClearFilters, showClearFilters: toolbar?.showClearFilters ?? false, showApplyFilterButton: toolbar?.showApplyFilterButton ?? true, searchEnabled: !!search, searchQuery: search?.query ?? '', onSearch: search?.onChange ?? (() => { }), searchPlaceholder: search?.placeholder, exportConfig: toolbar?.export, columns: columns, data: data, addButton: toolbar?.addButton, addText: toolbar?.addText, onAdd: toolbar?.onAdd })), _jsx("div", { ref: tableRef, className: "border border-border rounded-md overflow-hidden", children: _jsx(MantineReactTable, { table: table }) })] }));
 };
 export default PagamioTable;

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.310",
+  "version": "0.8.312",
   "publishConfig": {
     "access": "public",
     "provenance": false