@pagamio/frontend-commons-lib 0.8.320 → 0.8.322

package/lib/components/ui/FilterComponent.js

@@ -31,7 +31,7 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
             resetFilters();
         }
     };
-    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex shrink-0 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) => {
+    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2 min-w-0", children: [showSearch && (_jsxs("div", { className: "relative w-full sm:flex-1 sm:min-w-[200px] sm:max-w-[340px] min-w-0", 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 = () => {
@@ -70,7 +70,10 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                             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));
+                        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));
                     }), 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/components/ui/FilterWrapper.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const FilterWrapper = ({ isNarrow, children }) => {
-    return (_jsx("div", { className: "bg-card shadow-xl rounded-lg p-4 mb-2", children: _jsx("div", { className: isNarrow ? 'flex flex-col w-full gap-3' : 'flex items-start justify-between gap-4 w-full', children: children }) }));
+    return (
+    // `min-w-0` so this card can shrink inside a flex/grid parent;
+    // `overflow-hidden` so wide filter rows never punch out of the toolbar.
+    _jsx("div", { className: "bg-card shadow-xl rounded-lg p-4 mb-2 min-w-0 overflow-hidden", children: _jsx("div", { className: isNarrow
+                ? 'flex flex-col w-full gap-3'
+                : // `flex-wrap` lets the filter pills drop onto a second row instead of
+                    // overflowing the toolbar; each child group is set to `min-w-0` via its own
+                    // styles so individual items can shrink too.
+                    'flex flex-wrap items-start justify-between gap-4 w-full min-w-0', children: children }) }));
 };
 export default FilterWrapper;

package/lib/styles.css

@@ -1551,6 +1551,9 @@ video {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.shrink {
+  flex-shrink: 1;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -6414,14 +6417,6 @@ video {
     width: 1.75rem;
   }
 
-  .sm\:w-\[240px\] {
-    width: 240px;
-  }
-
-  .sm\:w-\[300px\] {
-    width: 300px;
-  }
-
   .sm\:w-\[400px\] {
     width: 400px;
   }
@@ -6430,10 +6425,30 @@ video {
     width: auto;
   }
 
+  .sm\:min-w-\[180px\] {
+    min-width: 180px;
+  }
+
+  .sm\:min-w-\[200px\] {
+    min-width: 200px;
+  }
+
+  .sm\:max-w-\[260px\] {
+    max-width: 260px;
+  }
+
+  .sm\:max-w-\[340px\] {
+    max-width: 340px;
+  }
+
   .sm\:max-w-sm {
     max-width: 24rem;
   }
 
+  .sm\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .sm\:translate-x-0 {
     --tw-translate-x: 0px;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

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