@pagamio/frontend-commons-lib 0.8.321 → 0.8.323

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/form-engine/components/inputs/multi-select-input/MultiSelectInput.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { MultiSelect } from '../../../../components';
-const MultiSelectInputComponent = React.forwardRef(({ field, error, options, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(MultiSelect, { className: "w-full border-input pb-5 disabled:text-muted-foreground disabled:bg-muted disabled:cursor-not-allowed", options: (options ?? []), value: props.value, defaultValue: props.value, disabled: field.disabled, onChange: props.onChange, tagPosition: "bottom" }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
+const MultiSelectInputComponent = React.forwardRef(({ field, error, options, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsx(MultiSelect, { className: "w-full border-input disabled:text-muted-foreground disabled:bg-muted disabled:cursor-not-allowed", options: (options ?? []), value: props.value, defaultValue: props.value, disabled: field.disabled, onChange: props.onChange, 
+            // Render selected tags inside the input itself rather than as a
+            // separate row below — matches how every other select-style input
+            // in the app surfaces selections, and stops the field from looking
+            // empty when items are already chosen.
+            tagPosition: "inside" }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
 export default MultiSelectInputComponent;

package/lib/styles.css

@@ -2942,9 +2942,6 @@ video {
 .pb-4 {
   padding-bottom: 1rem;
 }
-.pb-5 {
-  padding-bottom: 1.25rem;
-}
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -6417,14 +6414,6 @@ video {
     width: 1.75rem;
   }
 
-  .sm\:w-\[240px\] {
-    width: 240px;
-  }
-
-  .sm\:w-\[300px\] {
-    width: 300px;
-  }
-
   .sm\:w-\[400px\] {
     width: 400px;
   }
@@ -6433,10 +6422,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.321",
+  "version": "0.8.323",
   "publishConfig": {
     "access": "public",
     "provenance": false