@pagamio/frontend-commons-lib 0.8.366 → 0.8.368

package/lib/auth/components/LoginPage.js

@@ -333,16 +333,16 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
                                 setPhoneError(null);
                             }, className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'phone'
                                 ? 'bg-primary text-primary-foreground'
-                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: phoneTabLabel })), showUsernameTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'username', onClick: () => {
+                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: phoneTabLabel })), _jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'password', onClick: () => setActiveTab('password'), className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'password'
+                                ? 'bg-primary text-primary-foreground'
+                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel }), showUsernameTab && (_jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'username', onClick: () => {
                                 setActiveTab('username');
                                 setUsernameStep('enterLoginNumber');
                                 setLoginNumberPinValue('');
                                 setUsernameError(null);
                             }, className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'username'
                                 ? 'bg-primary text-primary-foreground'
-                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: usernameTabLabel })), _jsx("button", { type: "button", role: "tab", "aria-selected": activeTab === 'password', onClick: () => setActiveTab('password'), className: `flex-1 whitespace-nowrap px-3 py-2.5 text-center text-sm font-medium transition-colors ${activeTab === 'password'
-                                ? 'bg-primary text-primary-foreground'
-                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel })] })), activeTab === 'password' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
+                                : 'bg-background text-foreground/70 hover:bg-muted'}`, children: usernameTabLabel }))] })), activeTab === 'password' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
                                 ...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
                                 password: '',
                                 rememberMe: false,

package/lib/components/ui/FilterComponent.d.ts

@@ -4,7 +4,7 @@ type FilterValue = string | string[] | Date | null | undefined;
 interface FilterDefinition {
     name: string;
     placeholder?: string;
-    type?: 'select' | 'multi-select' | 'date' | 'date-range';
+    type?: 'select' | 'multi-select' | 'date' | 'date-range' | 'amount';
     options?: Array<{
         label: string;
         value: string;

package/lib/components/ui/FilterComponent.js

@@ -12,6 +12,13 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = true, showClearFilters, searctInputPlaceHolder = 'Search...', showApplyFilters = true, showSearch = false, searchQuery = '', children, isNarrow, handleFilterChange, handleApplyFilters, resetFilters, onSearch = () => { }, }) => {
     const hasSelectedActiveFilters = Object.entries(selectedFilters).some(([key, v]) => !isDefaultFilterValue(v, key));
     const shouldShowActionButtons = hasSelectedActiveFilters || (showSearch && searchQuery.length > 0);
+    const normalizeAmountValue = (input) => {
+        const cleaned = input.replace(/[^0-9.,]/g, '').replace(/,/g, '.');
+        const [whole, ...fractionParts] = cleaned.split('.');
+        if (fractionParts.length === 0)
+            return whole;
+        return `${whole}.${fractionParts.join('')}`;
+    };
     const parseDateValue = (value) => {
         if (!value)
             return null;
@@ -66,6 +73,17 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                             if (type === 'multi-select') {
                                 return (_jsx(MultiSelect, { options: Array.isArray(options) ? options : [], placeholder: filter.placeholder ?? `Select ${name}`, value: value || [], onChange: (val) => handleFilterChange(name, val), className: "w-full" }));
                             }
+                            if (type === 'amount') {
+                                const currentValue = typeof value === 'string' ? value : '';
+                                return (_jsxs("div", { className: "relative w-full", children: [_jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", "aria-hidden": "true", children: "R" }), _jsx("input", { type: "text", inputMode: "decimal", value: currentValue, onChange: (event) => handleFilterChange(name, normalizeAmountValue(event.target.value)), onKeyDown: (event) => {
+                                                if (event.key === 'Enter') {
+                                                    handleApplyFilters();
+                                                }
+                                                else if (event.key === 'Escape') {
+                                                    handleFilterChange(name, '');
+                                                }
+                                            }, placeholder: filter.placeholder ?? 'Amount', "aria-label": filter.placeholder ?? name, className: cn('h-9 w-full rounded-md border border-border bg-background pl-8 pr-9 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') }), !isDefaultFilterValue(currentValue) && (_jsx("button", { type: "button", className: cn('absolute right-2 top-1/2 -translate-y-1/2 rounded-sm px-1 text-base leading-none text-muted-foreground', 'hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'), onClick: () => handleFilterChange(name, ''), "aria-label": "Clear amount filter", children: "\u00D7" }))] }));
+                            }
                             // Default: select — always keep controlled via sentinel to avoid
                             // Radix switching to uncontrolled mode when value is cleared.
                             const SENTINEL = '__all__';
@@ -76,7 +94,7 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                         return (
                         // Fluid width: full width on mobile, fluid 180–260px on wider
                         // viewports so filters share the row evenly and shrink under pressure.
-                        _jsx("div", { className: "w-full sm:flex-1 sm:min-w-[180px] sm:max-w-[260px] min-w-0", children: renderFilterInput() }, name));
+                        _jsx("div", { className: cn('w-full sm:flex-1 min-w-0', type === 'amount' ? 'sm:min-w-[150px] sm:max-w-[220px]' : 'sm:min-w-[180px] sm:max-w-[260px]'), children: renderFilterInput() }, name));
                     }), 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" }))] }), _jsx("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2", children: children })] }));
 };
 export default FilterComponent;

package/lib/pagamio-table/data-table/index.d.ts

@@ -1,3 +1,3 @@
 import type { PagamioTableProps } from './types';
-declare const PagamioTable: <T extends Record<string, any>>({ columns, data, isLoading, isFetching, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable, renderDetailPanel, toolbar, toolbarMode, fetchAllData, 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, }: PagamioTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const PagamioTable: <T extends Record<string, any>>({ columns, data, isLoading, isFetching, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable, renderDetailPanel, toolbar, toolbarMode, fetchAllData, 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, disableInternalTableScroll, defaultColumn, mantineTableOptions, }: PagamioTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default PagamioTable;

package/lib/pagamio-table/data-table/index.js

@@ -101,8 +101,11 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
                     (typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd ?? (() => { }), icon: HiPlusSm, label: "add-new-entry", className: cn('items-center text-nowrap', isNarrow ? 'w-full' : undefined), children: addText ?? 'Add New Entry' })) : (addButton))] }) }));
 }
 // ─── PagamioTable Component ──────────────────────────────────────────
-const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', fetchAllData, 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 PagamioTable = ({ columns, data, isLoading = false, isFetching = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', fetchAllData, 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, disableInternalTableScroll, defaultColumn, mantineTableOptions, }) => {
     const [expanded, setExpanded] = useState({});
+    const externalState = mantineTableOptions?.state;
+    const { state: ignoredState, ...mantineOptionsWithoutState } = mantineTableOptions ?? {};
+    void ignoredState;
     const tableRef = useRef(null);
     // ── Internal max-height ─────────────────────────────────────────────
     // The mantine table container is height-capped to `viewportHeight - tableTop`
@@ -138,6 +141,10 @@ const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, ro
         const mrtContainer = el.querySelector('.mrt-table-container');
         if (!mrtContainer)
             return;
+        if (disableInternalTableScroll) {
+            mrtContainer.style.removeProperty('max-height');
+            return;
+        }
         // If a parent is already handling the scroll, let the table render at
         // its natural height — the user gets one continuous page scroll.
         if (!tableShouldOwnScroll(el)) {
@@ -244,6 +251,7 @@ const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, ro
             pagination: paginationState,
             sorting: sortingState,
             expanded,
+            ...(externalState ?? {}),
         },
         // Manual modes (server-side)
         manualPagination: hasServerPagination,
@@ -328,7 +336,7 @@ const PagamioTable = ({ columns, data, isLoading = false, isFetching = false, ro
             className: rowClassName,
         }),
         // Escape hatch — OCP: consumer can override anything (spread last)
-        ...mantineTableOptions,
+        ...mantineOptionsWithoutState,
     });
     // ── Toolbar rendering ──────────────────────────────────────────────
     const showCustomToolbar = toolbarMode === 'custom' && (!!toolbar || !!search || !!filtering);

package/lib/pagamio-table/data-table/types.d.ts

@@ -28,7 +28,7 @@ export interface SortConfig {
 export interface BaseFilter {
     columnKey: string;
     label?: string;
-    type?: 'select' | 'multi-select' | 'date' | 'date-range' | 'range' | 'boolean';
+    type?: 'select' | 'multi-select' | 'date' | 'date-range' | 'amount' | 'range' | 'boolean';
     options?: Array<{
         label: string;
         value: string;
@@ -209,6 +209,11 @@ export interface PagamioTableProps<T extends Record<string, any>> {
     renderTopToolbarCustomActions?: MRT_TableOptions<T>['renderTopToolbarCustomActions'];
     renderBottomToolbarCustomActions?: MRT_TableOptions<T>['renderBottomToolbarCustomActions'];
     layoutMode?: 'semantic' | 'grid';
+    /**
+     * When true, PagamioTable will not cap `.mrt-table-container` height.
+     * Use this when the page itself should own vertical scrolling.
+     */
+    disableInternalTableScroll?: boolean;
     defaultColumn?: Partial<MRT_ColumnDef<T>>;
     mantineTableOptions?: Partial<MRT_TableOptions<T>>;
 }
@@ -259,6 +264,7 @@ export interface UsePagamioTableConfig<T extends BaseEntity> {
     rowClassName?: string;
     expandable?: boolean;
     renderDetailPanel?: PagamioTableProps<T>['renderDetailPanel'];
+    disableInternalTableScroll?: boolean;
 }
 export interface UsePagamioTableReturn<T extends BaseEntity> {
     tableProps: PagamioTableProps<T>;

package/lib/styles.css

@@ -2872,6 +2872,10 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 .px-1\.5 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -3011,6 +3015,9 @@ video {
 .pr-8 {
   padding-right: 2rem;
 }
+.pr-9 {
+  padding-right: 2.25rem;
+}
 .ps-5 {
   padding-inline-start: 1.25rem;
 }
@@ -6545,6 +6552,10 @@ video {
     width: auto;
   }
 
+  .sm\:min-w-\[150px\] {
+    min-width: 150px;
+  }
+
   .sm\:min-w-\[180px\] {
     min-width: 180px;
   }
@@ -6553,6 +6564,10 @@ video {
     min-width: 200px;
   }
 
+  .sm\:max-w-\[220px\] {
+    max-width: 220px;
+  }
+
   .sm\:max-w-\[260px\] {
     max-width: 260px;
   }

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