@pagamio/frontend-commons-lib 0.8.270 → 0.8.271

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

@@ -8,6 +8,6 @@ type DatePickerProps = {
     value?: Date | null;
     onChange?: (date: Date) => void;
 };
-declare function DatePicker({ value, disabled, name, onChange }: Readonly<DatePickerProps>): import("react/jsx-runtime").JSX.Element;
+declare function DatePicker({ value, disabled, name, placeholder, onChange }: Readonly<DatePickerProps>): import("react/jsx-runtime").JSX.Element;
 export default DatePicker;
 export type { DatePickerProps };

package/lib/components/ui/DatePicker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Datepicker } from 'flowbite-react';
 import { useEffect, useState } from 'react';
-function DatePicker({ value, disabled, name, onChange }) {
+function DatePicker({ value, disabled, name, placeholder, onChange }) {
     // Parse a date value into a valid Date or null
     const getValidDate = (date) => {
         if (date === undefined || date === null)
@@ -14,8 +14,8 @@ function DatePicker({ value, disabled, name, onChange }) {
     useEffect(() => {
         setSelectedDate(getValidDate(value));
     }, [value]);
-    // Initialize defaultValue for the Datepicker component
-    const datepickerDefaultValue = new Date();
+    // Only set defaultValue when a value is explicitly provided
+    const datepickerDefaultValue = selectedDate ?? undefined;
     const datepickerTheme = {
         root: {
             input: {

package/lib/form-engine/components/inputs/searchable-multi-select/SearchableMultiSelectInput.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Field, SelectOption } from '../../../types';
+interface SearchableMultiSelectInputProps {
+    field: Field;
+    error?: {
+        message?: string;
+    };
+    options?: Array<SelectOption | string>;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (selected: string[]) => void;
+    onBlur?: () => void;
+    name?: string;
+}
+declare const SearchableMultiSelectInput: React.ForwardRefExoticComponent<SearchableMultiSelectInputProps & React.RefAttributes<HTMLDivElement>>;
+export default SearchableMultiSelectInput;

package/lib/form-engine/components/inputs/searchable-multi-select/SearchableMultiSelectInput.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import Button from '../../../../components/ui/Button';
+import { cn } from '../../../../helpers';
+const normalizeOptions = (options) => {
+    if (!options)
+        return [];
+    return options.map((opt) => (typeof opt === 'string' ? { label: opt, value: opt } : opt));
+};
+const SearchableMultiSelectInput = forwardRef(({ field, error, options: rawOptions, value, defaultValue = [], onChange, onBlur }, ref) => {
+    const options = normalizeOptions(rawOptions);
+    const [selectedValues, setSelectedValues] = useState(defaultValue);
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [dropdownPos, setDropdownPos] = useState(null);
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const searchInputRef = useRef(null);
+    useEffect(() => {
+        if (value !== undefined) {
+            setSelectedValues(value);
+        }
+    }, [value]);
+    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,
+        });
+    }, []);
+    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]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleOutside = (e) => {
+            const target = e.target;
+            const clickedInsideTrigger = containerRef.current?.contains(target);
+            const dropdown = document.getElementById(`sms-dropdown-${field.name}`);
+            const clickedInsideDropdown = dropdown?.contains(target);
+            if (!clickedInsideTrigger && !clickedInsideDropdown) {
+                setIsOpen(false);
+                setSearchQuery('');
+                onBlur?.();
+            }
+        };
+        document.addEventListener('mousedown', handleOutside);
+        return () => document.removeEventListener('mousedown', handleOutside);
+    }, [isOpen, field.name, onBlur]);
+    useEffect(() => {
+        if (isOpen && searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    }, [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 handleTriggerClick = () => {
+        if (field.disabled)
+            return;
+        if (!isOpen)
+            updateDropdownPosition();
+        setIsOpen((o) => !o);
+    };
+    const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(searchQuery.toLowerCase()));
+    const selectedOptions = options.filter((o) => internalValues.includes(o.value));
+    const displayPlaceholder = field.placeholder ?? 'Search and select...';
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground", children: field.label }), _jsxs("div", { ref: containerRef, className: "relative w-full", children: [_jsxs("button", { ref: triggerRef, type: "button", disabled: field.disabled, onClick: handleTriggerClick, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                handleTriggerClick();
+                            }
+                            if (e.key === 'Escape') {
+                                setIsOpen(false);
+                                setSearchQuery('');
+                            }
+                        }, 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]', field.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: _jsx("span", { className: cn('truncate block', selectedOptions.length === 0 && 'text-muted-foreground'), children: selectedOptions.length === 0 ? displayPlaceholder : `${selectedOptions.length} selected` }) }), _jsx(ChevronDownIcon, { className: cn('ml-2 flex-shrink-0 text-muted-foreground transition-transform duration-150', isOpen && 'rotate-180') })] }), selectedOptions.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1 mt-2", 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))) })), isOpen && dropdownPos && (_jsxs("div", { ref: ref, id: `sms-dropdown-${field.name}`, 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("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full px-2 py-1.5 text-sm border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring" }) }), _jsx("ul", { className: "max-h-56 overflow-y-auto p-1.5 space-y-0.5", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                                    const checked = internalValues.includes(option.value);
+                                    const id = `sms-opt-${field.name}-${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" })) })] }))] }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
+});
+SearchableMultiSelectInput.displayName = 'SearchableMultiSelectInput';
+export default SearchableMultiSelectInput;

package/lib/form-engine/registry/RegisterComponents.js

@@ -31,7 +31,7 @@ export const setupInputRegistry = async () => {
     return getRegistryPromise();
 };
 const doSetup = async () => {
-    const [{ default: CardExpiryInput }, { default: CheckboxInput }, { default: ColorInput }, { default: CreditCardInput }, { default: DateInput }, { default: EmailInput }, { default: LabelInput }, { default: MultiSelectInputComponent }, { default: NumberInput }, { default: PasswordInput }, { default: RadioInput }, { default: SelectInput }, { default: TextareaInputFW }, { default: TimeInput }, { default: ToggleSwitchInput }, { default: UploadFieldForm }, { default: PhoneInput },] = await Promise.all([
+    const [{ default: CardExpiryInput }, { default: CheckboxInput }, { default: ColorInput }, { default: CreditCardInput }, { default: DateInput }, { default: EmailInput }, { default: LabelInput }, { default: MultiSelectInputComponent }, { default: NumberInput }, { default: PasswordInput }, { default: RadioInput }, { default: SelectInput }, { default: TextareaInputFW }, { default: TimeInput }, { default: ToggleSwitchInput }, { default: UploadFieldForm }, { default: PhoneInput }, { default: SearchableMultiSelectInput },] = await Promise.all([
         import('../components/inputs/card-expiry-input/CardExpiryInput'),
         import('../components/inputs/checkbox-input/CheckboxInput'),
         import('../components/inputs/color-input/ColorInput'),
@@ -49,6 +49,7 @@ const doSetup = async () => {
         import('../components/inputs/toggle-switch-input/ToggleSwitchInput'),
         import('../components/inputs/upload-field/UploadFieldForm'),
         import('../../components/ui/PhoneInput'),
+        import('../components/inputs/searchable-multi-select/SearchableMultiSelectInput'),
     ]);
     registerInput('card-expiry-input', CardExpiryInput);
     registerInput('checkbox', CheckboxInput);
@@ -67,5 +68,6 @@ const doSetup = async () => {
     registerInput('text', LabelInput);
     registerInput('textarea', TextareaInputFW);
     registerInput('time', TimeInput);
+    registerInput('searchable-multi-select', SearchableMultiSelectInput);
     registryDone = true;
 };

package/lib/pagamio-drawer/components/DrawerContent.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useForm } from 'react-hook-form';
 import { useEffect, useRef, useState } from 'react';
 import { Button, NotificationModal } from '../../components';
+import { useToast } from '../../context';
 import { FieldWrapper } from '../../form-engine';
 import { useFormPersistence } from '../../form-engine/hooks/useFormPersistence';
 const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonText = 'Submit', cancelButtonText = 'Cancel', showForm = true, showDrawerButtons = true, handleCloseDrawer, onFieldUpdate, onFieldChange, children, updateFieldOptions, updateFieldLabel, setFieldHidden, addField, updateFieldValidation, processInitialFieldUpdates, processingDependencyRef, pendingUpdatesRef, persistenceKey, }) => {
     const { saveFormData, restoreFormData, clearPersistedData, hasPersistedData } = useFormPersistence(persistenceKey);
+    const { addToast } = useToast();
     // Determine initial values: initialValues take precedence over persisted data
     // This ensures that when editing different items, the form shows the correct item's data
     const getEffectiveInitialValues = () => {
@@ -24,7 +26,6 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
     };
     const { control, handleSubmit, watch, setValue, clearErrors, formState: { errors, isSubmitting }, reset, getValues, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
     const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
-    const [submitError, setSubmitError] = useState(null);
     const [showCancelConfirmModal, setShowCancelConfirmModal] = useState(false);
     const fieldChangeRef = useRef(new Set());
     const initialLoadPerformedRef = useRef(false);
@@ -74,7 +75,6 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
         }
     }, [isOpen, processInitialFieldUpdates]);
     const handleFormSubmit = async (data) => {
-        setSubmitError(null);
         try {
             const visibleFieldsData = Object.fromEntries(Object.entries(data).filter(([key]) => !fields.find((field) => field.name === key && field.isHidden)));
             await onSubmit(visibleFieldsData);
@@ -86,19 +86,16 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
             handleCloseDrawer();
         }
         catch (error) {
-            setSubmitError(error instanceof Error ? error.message : 'An error occurred');
+            const message = error instanceof Error ? error.message : 'An error occurred';
+            addToast({ title: 'Error', message, variant: 'error' });
         }
     };
-    // Reset form when drawer closes
+    // Reset form when drawer closes (persisted data is preserved for draft resumption)
     useEffect(() => {
         if (!isOpen) {
             reset();
-            // Clear persisted data when drawer closes to prevent stale data on next open
-            if (persistenceKey) {
-                clearPersistedData();
-            }
         }
-    }, [isOpen, reset, persistenceKey, clearPersistedData]);
+    }, [isOpen, reset]);
     // Reset form when initialValues change, but preserve current form values
     useEffect(() => {
         if (isOpen && initialValues) {
@@ -233,7 +230,7 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
     return (_jsxs(_Fragment, { children: [showForm && (_jsxs("form", { className: "grid grid-cols-12 gap-2 align-middle mb-6 border-input px-6 py-5", onSubmit: handleSubmit(handleFormSubmit), children: [fields?.map((field) => (_jsx(FieldWrapper, { field: {
                             ...field,
                             validation: processDependencyValidation(field),
-                        }, control: control, errors: errors, layout: "vertical", onFieldUpdate: onFieldUpdate, onFieldChange: onFieldChange, updateFieldOptions: updateFieldOptions, updateFieldLabel: updateFieldLabel, setFieldHidden: setFieldHidden, addField: addField, setValue: setValue, clearErrors: clearErrors, getValues: getValues, pendingUpdatesRef: pendingUpdatesRef, notifyPendingUpdate: () => setPendingUpdateCount((prev) => prev + 1), processingDependencyRef: processingDependencyRef, fieldChangeRef: fieldChangeRef }, field.name))), isSubmitting && _jsx("span", { children: "Submitting..." }), submitError && _jsx("p", { className: "text-red-500", children: submitError })] })), children, showDrawerButtons && (_jsxs("div", { className: "flex border-t bg-background", style: {
+                        }, control: control, errors: errors, layout: "vertical", onFieldUpdate: onFieldUpdate, onFieldChange: onFieldChange, updateFieldOptions: updateFieldOptions, updateFieldLabel: updateFieldLabel, setFieldHidden: setFieldHidden, addField: addField, setValue: setValue, clearErrors: clearErrors, getValues: getValues, pendingUpdatesRef: pendingUpdatesRef, notifyPendingUpdate: () => setPendingUpdateCount((prev) => prev + 1), processingDependencyRef: processingDependencyRef, fieldChangeRef: fieldChangeRef }, field.name))), isSubmitting && _jsx("span", { children: "Submitting..." })] })), children, showDrawerButtons && (_jsxs("div", { className: "flex border-t bg-background", style: {
                     height: '50px',
                     position: 'fixed',
                     bottom: 0,

package/lib/pagamio-drawer/index.js

@@ -130,6 +130,6 @@ const FormEngineDrawer = ({ title, cancelButtonText = 'Cancel', submitButtonText
             processingDependencyRef.current = false;
         }
     };
-    return (_jsx(BaseDrawer, { title: title, isOpen: isOpen, marginTop: marginTop, onClose: onClose, children: _jsx(DrawerContent, { isOpen: isOpen, fields: fields, onSubmit: onSubmit, handleCloseDrawer: onClose, initialValues: initialValues, showForm: showForm, showDrawerButtons: showDrawerButtons, cancelButtonText: cancelButtonText, submitButtonText: submitButtonText, onFieldUpdate: onFieldUpdate, onFieldChange: onFieldChange, updateFieldOptions: updateFieldOptions, updateFieldLabel: updateFieldLabel, setFieldHidden: setFieldHidden, addField: addField, updateFieldValidation: updateFieldValidation, processInitialFieldUpdates: processInitialFieldUpdates, processingDependencyRef: processingDependencyRef, pendingUpdatesRef: pendingUpdatesRef, persistenceKey: persistenceKey, children: children }, `${persistenceKey}-${isOpen ? 'open' : 'closed'}`) }));
+    return (_jsx(BaseDrawer, { title: title, isOpen: isOpen, marginTop: marginTop, onClose: onClose, children: _jsx(DrawerContent, { isOpen: isOpen, fields: fields, onSubmit: onSubmit, handleCloseDrawer: onClose, initialValues: initialValues, showForm: showForm, showDrawerButtons: showDrawerButtons, cancelButtonText: cancelButtonText, submitButtonText: submitButtonText, onFieldUpdate: onFieldUpdate, onFieldChange: onFieldChange, updateFieldOptions: updateFieldOptions, updateFieldLabel: updateFieldLabel, setFieldHidden: setFieldHidden, addField: addField, updateFieldValidation: updateFieldValidation, processInitialFieldUpdates: processInitialFieldUpdates, processingDependencyRef: processingDependencyRef, pendingUpdatesRef: pendingUpdatesRef, persistenceKey: persistenceKey, children: children }, persistenceKey || 'drawer-content') }));
 };
 export default FormEngineDrawer;

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