@pagamio/frontend-commons-lib 0.8.253 → 0.8.255

package/lib/auth/components/FeatureCarousel.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
-interface FeatureItem {
+export interface FeatureItem {
     icon?: React.ReactNode;
     title: string;
     description: string;
 }
-interface FeatureCarouselProps {
+export interface FeatureCarouselProps {
     features: FeatureItem[];
     className?: string;
     interval?: number;
 }
 export declare function FeatureCarousel({ features, className, interval }: FeatureCarouselProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/lib/auth/components/index.d.ts

@@ -6,5 +6,6 @@ export { default as PagamioCustomerRegistrationPage, customerRegistrationPageDef
 export { default as PagamioForgotPasswordPage, forgotPasswordDefaultText, type PagamioForgotPasswordPageProps, } from './ForgotPasswordPage';
 export { default as PagamioResetPasswordPage, resetPasswordDefaultText, type PagamioResetPasswordPageProps, } from './ResetPasswordPage';
 export { AuthPageLayout as PagamioAuthPageLayout } from './AuthPageLayout';
+export { FeatureCarousel, type FeatureCarouselProps, type FeatureItem } from './FeatureCarousel';
 export { default as OtpVerificationPage, OtpInput, otpVerificationDefaultText, type OtpInputProps, type OtpVerificationConfig, type OtpVerificationHandlers, type OtpVerificationPageProps, type OtpVerificationText, } from './OtpVerification';
 export { passwordValidation } from './AuthFormUtils';

package/lib/auth/components/index.js

@@ -5,5 +5,6 @@ export { default as PagamioCustomerRegistrationPage, customerRegistrationPageDef
 export { default as PagamioForgotPasswordPage, forgotPasswordDefaultText, } from './ForgotPasswordPage';
 export { default as PagamioResetPasswordPage, resetPasswordDefaultText, } from './ResetPasswordPage';
 export { AuthPageLayout as PagamioAuthPageLayout } from './AuthPageLayout';
+export { FeatureCarousel } from './FeatureCarousel';
 export { default as OtpVerificationPage, OtpInput, otpVerificationDefaultText, } from './OtpVerification';
 export { passwordValidation } from './AuthFormUtils';

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

@@ -8,7 +8,6 @@ export interface MultiSelectProps {
     onChange?: (selected: string[]) => void;
     placeholder?: string;
     className?: string;
-    onSearch?: (value: string) => void;
     field?: Field;
     tagPosition?: 'inside' | 'bottom';
 }

package/lib/components/ui/MultiSelect.js

@@ -1,60 +1,103 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as Checkbox from '@radix-ui/react-checkbox';
-import { CheckIcon, ChevronDownIcon, Cross2Icon } from '@radix-ui/react-icons';
-import * as Popover from '@radix-ui/react-popover';
-import { forwardRef, useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon, Cross2Icon } from '@radix-ui/react-icons';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from '../../helpers';
 import Button from './Button';
-const TagsList = ({ selectedOptions, placeholder, removeTag }) => {
-    if (selectedOptions.length === 0) {
-        return _jsx("span", { className: "truncate", children: placeholder ?? 'Select options' });
-    }
-    return (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedOptions.map((option) => (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 text-sm bg-muted rounded-md", children: [option.label, _jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: (e) => removeTag(option.value, e), className: "p-0.5 hover:bg-gray-200 rounded-full", children: _jsx(Cross2Icon, { className: "w-3 h-3" }) })] }, option.value))) }));
-};
-const MultiSelect = forwardRef(({ options, value, defaultValue = [], disabled, onChange, placeholder, className, onSearch, field, tagPosition = 'inside', }, ref) => {
+const MultiSelect = forwardRef(({ options, value, defaultValue = [], disabled, onChange, placeholder, className, field, tagPosition = 'inside' }, ref) => {
     const [selectedValues, setSelectedValues] = useState(defaultValue);
-    const [searchTerm, setSearchTerm] = useState('');
-    const [filteredOptions, setFilteredOptions] = useState(options);
     const [isOpen, setIsOpen] = useState(false);
+    const [dropdownPos, setDropdownPos] = useState(null);
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    // Sync external value changes (e.g. form reset / initial values)
     useEffect(() => {
-        if (onSearch) {
-            onSearch(searchTerm);
+        if (value !== undefined) {
+            setSelectedValues(value);
         }
-        else {
-            setFilteredOptions(options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase())));
-        }
-    }, [searchTerm, options, onSearch]);
-    const internalValues = value || selectedValues;
-    const handleToggle = (option) => {
-        const updatedValues = internalValues.includes(option)
-            ? internalValues.filter((val) => val !== option)
-            : [...internalValues, option];
-        if (!value) {
-            setSelectedValues(updatedValues);
-        }
-        onChange?.(updatedValues);
+    }, [value]);
+    // Measure trigger position so the fixed dropdown aligns correctly
+    const updateDropdownPosition = useCallback(() => {
+        if (!triggerRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        setDropdownPos({
+            top: rect.bottom + window.scrollY + 4,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+        });
+    }, []);
+    // Reposition on scroll / resize while open
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        updateDropdownPosition();
+        window.addEventListener('scroll', updateDropdownPosition, true);
+        window.addEventListener('resize', updateDropdownPosition);
+        return () => {
+            window.removeEventListener('scroll', updateDropdownPosition, true);
+            window.removeEventListener('resize', updateDropdownPosition);
+        };
+    }, [isOpen, updateDropdownPosition]);
+    // Close on outside click
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleOutside = (e) => {
+            const target = e.target;
+            const clickedInsideTrigger = containerRef.current?.contains(target);
+            const dropdown = document.getElementById('ms-dropdown-portal');
+            const clickedInsideDropdown = dropdown?.contains(target);
+            if (!clickedInsideTrigger && !clickedInsideDropdown) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleOutside);
+        return () => document.removeEventListener('mousedown', handleOutside);
+    }, [isOpen]);
+    const internalValues = value ?? selectedValues;
+    const handleToggle = (optionValue) => {
+        const updated = internalValues.includes(optionValue)
+            ? internalValues.filter((v) => v !== optionValue)
+            : [...internalValues, optionValue];
+        if (value === undefined)
+            setSelectedValues(updated);
+        onChange?.(updated);
     };
     const removeTag = (optionValue, e) => {
         e.stopPropagation();
         handleToggle(optionValue);
     };
-    const selectedOptions = options.filter((option) => internalValues.includes(option.value));
-    return (_jsx("div", { ref: ref, className: cn('relative w-full', className), children: _jsxs(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", disabled: disabled, className: "w-full cursor-pointer disabled:text-muted-foreground disabled:bg-muted disabled:cursor-not-allowed", onClick: (e) => {
-                            e.preventDefault();
-                            setIsOpen(!isOpen);
-                        }, onKeyDown: (e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                setIsOpen(!isOpen);
-                            }
-                        }, children: [_jsxs("div", { id: field?.name, className: "flex items-center w-full px-4 py-2 border rounded-md", style: { minHeight: '41px' }, children: [_jsx("div", { className: "flex-1 text-left", children: tagPosition === 'inside' ? (_jsx(TagsList, { selectedOptions: selectedOptions, removeTag: removeTag, placeholder: field?.placeholder })) : (_jsx("span", { className: "truncate", children: selectedOptions.length === 0
-                                                ? (field?.placeholder ?? placeholder ?? 'Select options')
-                                                : `${selectedOptions.length} selected` })) }), _jsx(ChevronDownIcon, { className: "ml-2 flex-shrink-0" })] }), tagPosition === 'bottom' && selectedOptions.length > 0 && (_jsx("div", { className: "mt-2", children: _jsx(TagsList, { selectedOptions: selectedOptions, removeTag: removeTag, placeholder: field?.placeholder }) }))] }) }), _jsxs(Popover.Content, { className: "p-2 bg-popover text-popover-foreground border rounded shadow-md w-full z-50", align: "start", sideOffset: 5, onOpenAutoFocus: (e) => e.preventDefault(), children: [_jsx("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full px-2 py-1 mb-2 border rounded", onClick: (e) => e.stopPropagation() }), _jsx("div", { className: "max-h-60 overflow-auto", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => (_jsxs("div", { className: "flex items-center gap-2 px-2 py-1 cursor-pointer hover:bg-accent", children: [_jsx(Checkbox.Root, { type: "button", checked: internalValues.includes(option.value), onCheckedChange: () => handleToggle(option.value), className: "w-4 h-4 border rounded", children: _jsx(Checkbox.Indicator, { children: _jsx(CheckIcon, { className: "w-4 h-4 text-primary" }) }) }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => handleToggle(option.value), onKeyDown: (e) => {
-                                            if (e.key === 'Enter' || e.key === ' ') {
-                                                e.preventDefault();
-                                                handleToggle(option.value);
-                                            }
-                                        }, className: "text-left w-full", children: option.label })] }, option.value)))) : (_jsx("div", { className: "px-2 py-1 text-muted-foreground", children: "No options found" })) })] })] }) }));
+    const handleTriggerClick = () => {
+        if (disabled)
+            return;
+        if (!isOpen)
+            updateDropdownPosition();
+        setIsOpen((o) => !o);
+    };
+    const selectedOptions = options.filter((o) => internalValues.includes(o.value));
+    const displayPlaceholder = field?.placeholder ?? placeholder ?? 'Select options';
+    const tags = (_jsx(_Fragment, { children: selectedOptions.map((opt) => (_jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium bg-primary/10 text-primary", children: [opt.label, _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": `Remove ${opt.label}`, onClick: (e) => removeTag(opt.value, e), className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-full", children: _jsx(Cross2Icon, { className: "w-2.5 h-2.5" }) })] }, opt.value))) }));
+    return (_jsxs("div", { ref: containerRef, className: cn('relative w-full', className), children: [_jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, onClick: handleTriggerClick, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handleTriggerClick();
+                    }
+                    if (e.key === 'Escape')
+                        setIsOpen(false);
+                }, className: cn('flex items-center w-full px-3 py-2 text-sm border border-input rounded-md bg-background text-left', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0', 'transition-colors duration-150 min-h-[38px]', disabled
+                    ? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
+                    : 'cursor-pointer hover:border-primary/60', isOpen && 'border-primary ring-2 ring-ring'), "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [_jsx("span", { className: "flex-1 min-w-0", children: tagPosition === 'inside' && selectedOptions.length > 0 ? (_jsx("span", { className: "flex flex-wrap gap-1", children: tags })) : (_jsx("span", { className: cn('truncate block', selectedOptions.length === 0 && 'text-muted-foreground'), children: selectedOptions.length === 0 || tagPosition === 'inside'
+                                ? displayPlaceholder
+                                : `${selectedOptions.length} selected` })) }), _jsx(ChevronDownIcon, { className: cn('ml-2 flex-shrink-0 text-muted-foreground transition-transform duration-150', isOpen && 'rotate-180') })] }), tagPosition === 'bottom' && selectedOptions.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: tags })), isOpen && dropdownPos && (_jsx("div", { ref: ref, id: "ms-dropdown-portal", style: {
+                    position: 'fixed',
+                    top: dropdownPos.top,
+                    left: dropdownPos.left,
+                    width: dropdownPos.width,
+                }, className: cn('z-[9999]', 'bg-popover border border-border rounded-md shadow-lg', 'animate-in fade-in-0 zoom-in-95 duration-100'), children: _jsx("ul", { className: "max-h-56 overflow-y-auto p-1.5 space-y-0.5", children: options.length > 0 ? (options.map((option) => {
+                        const checked = internalValues.includes(option.value);
+                        const id = `ms-opt-${field?.name ?? 'ms'}-${option.value}`;
+                        return (_jsx("li", { children: _jsxs("label", { htmlFor: id, className: cn('flex items-center gap-2.5 px-2 py-2 rounded-md cursor-pointer text-sm', 'hover:bg-accent hover:text-accent-foreground transition-colors', checked && 'bg-primary/5'), children: [_jsx("input", { id: id, type: "checkbox", checked: checked, onChange: () => handleToggle(option.value), className: cn('w-4 h-4 rounded border border-input bg-background flex-shrink-0', 'accent-[hsl(var(--primary))] cursor-pointer', 'focus:ring-2 focus:ring-ring focus:ring-offset-0') }), _jsx("span", { className: "flex-1 font-medium text-foreground", children: option.label })] }) }, option.value));
+                    })) : (_jsx("li", { className: "px-3 py-2 text-sm text-muted-foreground text-center", children: "No options found" })) }) }))] }));
 });
 MultiSelect.displayName = 'MultiSelect';
 export default MultiSelect;

package/lib/styles.css

@@ -842,6 +842,9 @@ video {
 .z-\[70\] {
   z-index: 70;
 }
+.z-\[9999\] {
+  z-index: 9999;
+}
 .z-auto {
   z-index: auto;
 }
@@ -1243,8 +1246,8 @@ video {
 .max-h-16 {
   max-height: 4rem;
 }
-.max-h-60 {
-  max-height: 15rem;
+.max-h-56 {
+  max-height: 14rem;
 }
 .max-h-64 {
   max-height: 16rem;
@@ -1279,6 +1282,9 @@ video {
 .min-h-\[200px\] {
   min-height: 200px;
 }
+.min-h-\[38px\] {
+  min-height: 38px;
+}
 .min-h-\[60px\] {
   min-height: 60px;
 }
@@ -1727,6 +1733,9 @@ video {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-2\.5 {
+  gap: 0.625rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
@@ -2638,9 +2647,6 @@ video {
 .p-0 {
   padding: 0px;
 }
-.p-0\.5 {
-  padding: 0.125rem;
-}
 .p-1 {
   padding: 0.25rem;
 }
@@ -3311,6 +3317,9 @@ video {
   --tw-placeholder-opacity: 1;
   color: rgb(142 75 16 / var(--tw-placeholder-opacity, 1));
 }
+.accent-\[hsl\(var\(--primary\)\)\] {
+  accent-color: hsl(var(--primary));
+}
 .opacity-0 {
   opacity: 0;
 }
@@ -3422,6 +3431,9 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(240 82 82 / var(--tw-ring-opacity, 1));
 }
+.ring-ring {
+  --tw-ring-color: hsl(var(--ring));
+}
 .ring-white {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
@@ -3919,6 +3931,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(23 14 49 / var(--tw-border-opacity, 1));
 }
+.hover\:border-primary\/60:hover {
+  border-color: hsl(var(--primary) / 0.6);
+}
 .hover\:border-purple-800:hover {
   --tw-border-opacity: 1;
   border-color: rgb(85 33 181 / var(--tw-border-opacity, 1));
@@ -4042,6 +4057,9 @@ video {
 .hover\:bg-primary\/15:hover {
   background-color: hsl(var(--primary) / 0.15);
 }
+.hover\:bg-primary\/20:hover {
+  background-color: hsl(var(--primary) / 0.2);
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -4446,6 +4464,9 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(194 120 3 / var(--tw-ring-opacity, 1));
 }
+.focus\:ring-offset-0:focus {
+  --tw-ring-offset-width: 0px;
+}
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }

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