@pagamio/frontend-commons-lib 0.8.353 → 0.8.355

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

@@ -3,6 +3,12 @@ interface EmptyStateProps {
     title: string;
     description?: string;
     icon?: React.ReactNode;
+    /**
+     * Optional CTA rendered below the description. Pass a Button (or a
+     * cluster of buttons in a Fragment) so the empty state can guide the
+     * user toward the next step.
+     */
+    action?: React.ReactNode;
 }
 declare const EmptyState: React.FC<EmptyStateProps>;
 export default EmptyState;

package/lib/components/ui/EmptyState.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MdOutlineFolder } from 'react-icons/md';
-const EmptyState = ({ title, description, icon }) => {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-input bg-muted p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-32 w-32 items-center justify-center", children: icon ?? _jsx(MdOutlineFolder, { className: "h-full w-full text-muted-foreground" }) }), _jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: title }), _jsx("p", { className: "text-muted-foreground", children: description ?? "We couldn't find any data at this moment. Please try again later or adjust your filters." })] }));
+const EmptyState = ({ title, description, icon, action }) => {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-input bg-muted p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-32 w-32 items-center justify-center", children: icon ?? _jsx(MdOutlineFolder, { className: "h-full w-full text-muted-foreground" }) }), _jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: title }), _jsx("p", { className: "text-muted-foreground", children: description ?? "We couldn't find any data at this moment. Please try again later or adjust your filters." }), action && _jsx("div", { className: "mt-4", children: action })] }));
 };
 export default EmptyState;

package/lib/components/ui/FilterComponent.js

@@ -66,9 +66,12 @@ 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" }));
                             }
-                            // 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' })), (Array.isArray(options) ? options : []).map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)))] })] }));
+                            // Default: select — always keep controlled via sentinel to avoid
+                            // Radix switching to uncontrolled mode when value is cleared.
+                            const SENTINEL = '__all__';
+                            const currentValue = value ?? '';
+                            const selectValue = currentValue !== '' ? currentValue : SENTINEL;
+                            return (_jsxs(Select, { value: selectValue, onValueChange: (val) => handleFilterChange(name, val === SENTINEL ? '' : 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, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: SENTINEL, className: "text-muted-foreground", children: filter.placeholder ?? 'All' }), (Array.isArray(options) ? options : []).map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)))] })] }));
                         };
                         return (
                         // Fluid width: full width on mobile, fluid 180–260px on wider

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