@pagamio/frontend-commons-lib 0.8.351 → 0.8.353

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

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import type { UsePagamioComboboxReturn } from '../../shared/hooks/usePagamioCombobox';
+/**
+ * Optional in-popover action — replaces the old "+ Create New X" sentinel
+ * option pattern that some `<Select>` callers used to inline a "create a
+ * new item" affordance. Rendered as a button row pinned to the top of the
+ * popover, above the options list. Clicking it closes the popover and
+ * fires `onClick` (typically opening a quick-create modal). The handler
+ * is responsible for the side effect; the combobox does NOT update its
+ * `value` automatically.
+ */
+export interface SearchableComboboxActionButton {
+    /** Label shown on the action button (e.g. "+ New category"). */
+    label: React.ReactNode;
+    onClick: () => void;
+}
 export interface PagamioSearchableComboboxProps<T extends {
     id: string;
 }> {
@@ -8,6 +22,12 @@ export interface PagamioSearchableComboboxProps<T extends {
     /** Controlled selected id, or null when nothing is selected. */
     value: string | null;
     onChange: (id: string | null) => void;
+    /**
+     * Optional action button rendered at the top of the popover. Used to
+     * surface a "+ Create new …" affordance inside the picker itself,
+     * matching where the old static-select sentinel option lived.
+     */
+    actionButton?: SearchableComboboxActionButton;
     /**
      * Optional pre-resolved selected option. When set, the trigger shows its
      * label without needing to fetch via `restoreIds`. If both this and the
@@ -39,4 +59,4 @@ export interface PagamioSearchableComboboxProps<T extends {
 }
 export declare function PagamioSearchableCombobox<T extends {
     id: string;
-}>({ combobox, value, onChange, selectedOption, placeholder, searchPlaceholder, emptyMessage, cappedMessage, loadingMessage, disabled, required, name, getLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }: PagamioSearchableComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ combobox, value, onChange, actionButton, selectedOption, placeholder, searchPlaceholder, emptyMessage, cappedMessage, loadingMessage, disabled, required, name, getLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }: PagamioSearchableComboboxProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/components/ui/PagamioSearchableCombobox.js

@@ -19,7 +19,7 @@ function defaultGetLabel(option) {
     const o = option;
     return o.name ?? option.id;
 }
-export function PagamioSearchableCombobox({ combobox, value, onChange, selectedOption, placeholder = 'Select…', searchPlaceholder = 'Search...', emptyMessage = 'No options found', cappedMessage = 'Showing top results — refine your search.', loadingMessage = 'Loading…', disabled, required, name, getLabel = defaultGetLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }) {
+export function PagamioSearchableCombobox({ combobox, value, onChange, actionButton, selectedOption, placeholder = 'Select…', searchPlaceholder = 'Search...', emptyMessage = 'No options found', cappedMessage = 'Showing top results — refine your search.', loadingMessage = 'Loading…', disabled, required, name, getLabel = defaultGetLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }) {
     const [open, setOpen] = React.useState(false);
     const inputRef = React.useRef(null);
     // Focus the search input when the popover opens — matches the Select's
@@ -52,11 +52,18 @@ export function PagamioSearchableCombobox({ combobox, value, onChange, selectedO
                                         : placeholder }), _jsx(ChevronDownIcon, { className: "ml-2 h-4 w-4 opacity-50 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 4, 
                         // Mirrors SelectContent: same shadow + animation classes, popover
                         // background, popover-foreground text. Width matches trigger.
-                        className: cn('p-0 w-[var(--radix-popover-trigger-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', contentClassName), children: [_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: inputRef, type: "text", placeholder: searchPlaceholder, value: combobox.search, onChange: (e) => combobox.setSearch(e.target.value), onKeyDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-sm border border-input rounded bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring" }) }), _jsx("div", { className: "p-1 max-h-[200px] overflow-y-auto", children: combobox.isLoading && combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: loadingMessage })) : combobox.error ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-destructive", children: combobox.error.message || 'Failed to load options.' })) : combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: emptyMessage })) : (_jsxs(_Fragment, { children: [combobox.options.map((option) => {
-                                            const isSelected = option.id === value;
-                                            return (_jsx("button", { type: "button", role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option.id), className: cn(
-                                                // Mirrors SelectItem styling: padding, hover via
-                                                // focus:bg-muted, selected via bg-accent.
-                                                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-left', 'hover:bg-muted focus:bg-muted focus:text-foreground', isSelected && 'bg-accent text-foreground'), children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "line-clamp-1", children: getLabel(option) }), isSelected ? (_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(CheckIcon, { className: "h-4 w-4" }) })) : null] })) }, option.id));
-                                        }), combobox.isCapped ? (_jsx("div", { className: "mt-1 border-t px-2 py-1.5 text-xs text-muted-foreground", children: cappedMessage })) : null] })) })] })] }), name ? _jsx("input", { type: "hidden", name: name, value: value ?? '' }) : null] }));
+                        className: cn('p-0 w-[var(--radix-popover-trigger-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', contentClassName), children: [_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: inputRef, type: "text", placeholder: searchPlaceholder, value: combobox.search, onChange: (e) => combobox.setSearch(e.target.value), onKeyDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-sm border border-input rounded bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring" }) }), _jsxs("div", { className: "p-1 max-h-[200px] overflow-y-auto", children: [actionButton ? (_jsx("button", { type: "button", onClick: () => {
+                                            setOpen(false);
+                                            actionButton.onClick();
+                                        }, className: cn(
+                                        // Same row geometry as an option row so the picker reads
+                                        // as one consistent list. Primary-coloured label keeps it
+                                        // visually distinct from real options.
+                                        'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-left font-medium text-primary', 'hover:bg-muted focus:bg-muted'), children: actionButton.label }, "__action__")) : null, combobox.isLoading && combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: loadingMessage })) : combobox.error ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-destructive", children: combobox.error.message || 'Failed to load options.' })) : combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: emptyMessage })) : (_jsxs(_Fragment, { children: [combobox.options.map((option) => {
+                                                const isSelected = option.id === value;
+                                                return (_jsx("button", { type: "button", role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option.id), className: cn(
+                                                    // Mirrors SelectItem styling: padding, hover via
+                                                    // focus:bg-muted, selected via bg-accent.
+                                                    'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-left', 'hover:bg-muted focus:bg-muted focus:text-foreground', isSelected && 'bg-accent text-foreground'), children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "line-clamp-1", children: getLabel(option) }), isSelected ? (_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(CheckIcon, { className: "h-4 w-4" }) })) : null] })) }, option.id));
+                                            }), combobox.isCapped ? (_jsx("div", { className: "mt-1 border-t px-2 py-1.5 text-xs text-muted-foreground", children: cappedMessage })) : null] }))] })] })] }), name ? _jsx("input", { type: "hidden", name: name, value: value ?? '' }) : null] }));
 }

package/lib/components/ui/TableDownload.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Dropdown, DropdownItem } from 'flowbite-react';
 import { jsPDF } from 'jspdf';
-import { autoTable } from 'jspdf-autotable';
+import autoTable from 'jspdf-autotable';
 import { FiDownload } from 'react-icons/fi';
 import * as XLSX from 'xlsx';
 const TableDownload = ({ columns, data }) => {

package/lib/form-engine/FormEngine.js

@@ -47,31 +47,36 @@ const FormEngine = ({ fields, onSubmit, initialValues, layout = 'vertical', isNo
         }
         return initialValues;
     };
-    const { control, handleSubmit, watch, formState: { errors, isSubmitting }, reset, setValue, trigger, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
-    const allFields = watch();
-    const password = watch('password');
-    const confirmPassword = watch('confirmPassword');
-    //re-validate confirmPassword when password changes
+    const { control, handleSubmit, watch, formState: { errors, isSubmitting }, reset, setValue, trigger, getValues, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
+    // Subscribe to field changes via the callback form of `watch` so this
+    // component does NOT re-render on every keystroke / select change. The
+    // previous `const allFields = watch()` (no args) caused the entire
+    // FormEngine subtree — including all Radix Select popovers — to re-render
+    // synchronously inside the field's onChange. That race produced the
+    // "click twice to commit" symptom on Select inputs: the first click's
+    // outside-dismiss fired during the parent re-render and the popover lost
+    // its open state. Subscribing via callback keeps RHF state updates
+    // isolated to the affected Controller subtree.
     useEffect(() => {
-        if (password && confirmPassword) {
-            trigger('confirmPassword');
-        }
-    }, [password, trigger, confirmPassword]);
-    useEffect(() => {
-        if (getFieldValues) {
-            getFieldValues(allFields);
-        }
-    }, [allFields, getFieldValues]);
-    // Save form data when fields change (for persistence)
-    useEffect(() => {
-        if (persistenceKey && allFields && Object.keys(allFields).length > 0) {
-            // Only save if there are actual field values (not just empty object)
-            const hasValues = Object.values(allFields).some((value) => value !== undefined && value !== null && value !== '');
-            if (hasValues) {
-                saveFormData(allFields, true);
+        const subscription = watch((values, info) => {
+            if (info?.name === 'password') {
+                const cp = values?.confirmPassword;
+                if (values?.password && cp) {
+                    trigger('confirmPassword');
+                }
             }
-        }
-    }, [allFields, persistenceKey, saveFormData]);
+            if (getFieldValues) {
+                getFieldValues(values);
+            }
+            if (persistenceKey) {
+                const hasValues = Object.values(values ?? {}).some((value) => value !== undefined && value !== null && value !== '');
+                if (hasValues) {
+                    saveFormData(values, true);
+                }
+            }
+        });
+        return () => subscription.unsubscribe();
+    }, [watch, trigger, getFieldValues, persistenceKey, saveFormData]);
     // Expose form control methods via ref
     useEffect(() => {
         if (formRef && 'current' in formRef) {
@@ -109,11 +114,12 @@ const FormEngine = ({ fields, onSubmit, initialValues, layout = 'vertical', isNo
     const validateConfirmPassword = (value) => {
         if (!value)
             return 'Please confirm your password';
-        if (!password)
+        const currentPassword = getValues('password');
+        if (!currentPassword)
             return 'Please enter a password first';
-        if (password.length < 8)
+        if (currentPassword.length < 8)
             return 'Please enter a valid password first (minimum 8 characters)';
-        if (value !== password)
+        if (value !== currentPassword)
             return 'Passwords do not match';
         return true;
     };

package/lib/form-engine/components/inputs/searchable-combobox/SearchableComboboxInput.js

@@ -34,7 +34,7 @@ const SearchableComboboxInput = forwardRef(({ field, value, onChange }, ref) =>
         debounceMs: source.debounceMs,
         restoreIds,
     });
-    return (_jsxs("div", { ref: ref, children: [field.label && (_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground mb-1", children: field.label })), _jsx(PagamioSearchableCombobox, { combobox: combobox, value: value ?? null, onChange: (id) => onChange?.(id), placeholder: field.placeholder, disabled: field.disabled, required: field.validation?.required ? true : undefined, name: field.name, getLabel: source.getLabel })] }));
+    return (_jsxs("div", { ref: ref, children: [field.label && (_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground mb-1", children: field.label })), _jsx(PagamioSearchableCombobox, { combobox: combobox, value: value ?? null, onChange: (id) => onChange?.(id), actionButton: field.actionButton, placeholder: field.placeholder, disabled: field.disabled, required: field.validation?.required ? true : undefined, name: field.name, getLabel: source.getLabel })] }));
 });
 SearchableComboboxInput.displayName = 'SearchableComboboxInput';
 export default SearchableComboboxInput;

package/lib/form-engine/types/index.d.ts

@@ -215,6 +215,17 @@ export interface Field {
      * Tells the form engine how to fetch lookup results.
      */
     source?: ComboboxSourceSpec;
+    /**
+     * Optional in-picker action for `searchable-combobox`. Renders as the
+     * first row of the popover (above the options) — the same place a
+     * "+ Create new …" sentinel option used to live in the old static
+     * `<Select>`. Clicking it closes the popover and fires `onClick`; the
+     * handler owns the side effect (e.g. opens a quick-create modal).
+     */
+    actionButton?: {
+        label: string;
+        onClick: () => void;
+    };
 }
 export interface DependentFieldUpdate {
     field: string;

package/lib/pagamio-table/data-table/TableDownload.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dropdown, DropdownItem } from 'flowbite-react';
 import { jsPDF } from 'jspdf';
-import { autoTable } from 'jspdf-autotable';
+import autoTable from 'jspdf-autotable';
 import { FiDownload } from 'react-icons/fi';
 import * as XLSX from 'xlsx';
 const TableDownload = ({ columns, data }) => {

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