@pagamio/frontend-commons-lib 0.8.352 → 0.8.354

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

@@ -3,6 +3,12 @@ interface EmptyStateProps {
     title: string;
     description?: string;
     icon?: React.ReactNode;
+    /**
+     * Optional CTA rendered below the description. Pass a Button (or a
+     * cluster of buttons in a Fragment) so the empty state can guide the
+     * user toward the next step.
+     */
+    action?: React.ReactNode;
 }
 declare const EmptyState: React.FC<EmptyStateProps>;
 export default EmptyState;

package/lib/components/ui/EmptyState.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MdOutlineFolder } from 'react-icons/md';
-const EmptyState = ({ title, description, icon }) => {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-input bg-muted p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-32 w-32 items-center justify-center", children: icon ?? _jsx(MdOutlineFolder, { className: "h-full w-full text-muted-foreground" }) }), _jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: title }), _jsx("p", { className: "text-muted-foreground", children: description ?? "We couldn't find any data at this moment. Please try again later or adjust your filters." })] }));
+const EmptyState = ({ title, description, icon, action }) => {
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center rounded-lg border border-input bg-muted p-8 text-center", children: [_jsx("div", { className: "mb-4 flex h-32 w-32 items-center justify-center", children: icon ?? _jsx(MdOutlineFolder, { className: "h-full w-full text-muted-foreground" }) }), _jsx("h2", { className: "mb-2 text-lg font-semibold text-foreground", children: title }), _jsx("p", { className: "text-muted-foreground", children: description ?? "We couldn't find any data at this moment. Please try again later or adjust your filters." }), action && _jsx("div", { className: "mt-4", children: action })] }));
 };
 export default EmptyState;

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