@pagamio/frontend-commons-lib 0.8.342 → 0.8.344

package/lib/pagamio-drawer/components/DrawerContent.d.ts

@@ -22,6 +22,12 @@ interface DrawerContentProps {
     processingDependencyRef?: React.MutableRefObject<boolean>;
     pendingUpdatesRef?: React.MutableRefObject<Map<string, unknown>>;
     persistenceKey?: string;
+    /**
+     * When true, persisted form data is wiped whenever the drawer transitions
+     * from open → closed. Use for one-shot create/register flows where the
+     * next open should start blank.
+     */
+    clearOnClose?: boolean;
     /** Ref updated every render with current dirty state — read by FormEngineDrawer for X-button check. */
     isDirtyRef?: React.MutableRefObject<boolean>;
     /** Ref updated every render with handleCancel — call from outside (e.g. X button) to show the same unsaved-changes modal. */

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

@@ -1,28 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useForm } from 'react-hook-form';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, 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, isDirtyRef, cancelRef, }) => {
+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, clearOnClose = false, isDirtyRef, cancelRef, }) => {
     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
+    // Build a `{ fieldName: '' }` baseline so every registered input starts
+    // controlled (with a defined string value). Without this, RHF defaults
+    // unspecified fields to `undefined`, which React flags as a "controlled
+    // → uncontrolled" transition the moment we reset, and Radix Select keeps
+    // showing its previously-selected display value.
+    const emptyFieldValues = useMemo(() => {
+        const acc = {};
+        for (const f of fields) {
+            acc[f.name] = '';
+        }
+        return acc;
+    }, [fields]);
+    // Determine initial values: initialValues take precedence over persisted data.
+    // For clearOnClose drawers we always start from the empty baseline so a
+    // stale persistence entry from a previous lifetime can't leak in.
     const getEffectiveInitialValues = () => {
-        // If initialValues are provided, use them
         if (initialValues && Object.keys(initialValues).length > 0) {
-            return initialValues;
+            return { ...emptyFieldValues, ...initialValues };
         }
-        // Otherwise, check for persisted data
-        if (persistenceKey && hasPersistedData()) {
+        if (!clearOnClose && persistenceKey && hasPersistedData()) {
             const persistedData = restoreFormData();
             if (persistedData) {
-                return persistedData;
+                return { ...emptyFieldValues, ...persistedData };
             }
         }
-        return initialValues || {};
+        return emptyFieldValues;
     };
     const { control, handleSubmit, watch, setValue, clearErrors, formState: { errors, isSubmitting }, reset, getValues, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
     const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
@@ -39,6 +50,27 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
         mountInitialValuesRef.current = initialValues || {};
     }
     wasOpenRef.current = !!isOpen;
+    // Clear persisted data AND react-hook-form state on every open → close
+    // transition when the consumer opts in. Resetting RHF is critical: the
+    // watch()-driven save effect would otherwise re-populate persistence with
+    // the old values on the very next render (e.g. during the close animation).
+    const clearOnCloseRef = useRef(clearOnClose);
+    clearOnCloseRef.current = clearOnClose;
+    const clearPersistedDataRef = useRef(clearPersistedData);
+    clearPersistedDataRef.current = clearPersistedData;
+    const resetRef = useRef(reset);
+    resetRef.current = reset;
+    const emptyFieldValuesRef = useRef(emptyFieldValues);
+    emptyFieldValuesRef.current = emptyFieldValues;
+    const previousIsOpenRef = useRef(!!isOpen);
+    useEffect(() => {
+        const wasOpen = previousIsOpenRef.current;
+        previousIsOpenRef.current = !!isOpen;
+        if (wasOpen && !isOpen && clearOnCloseRef.current) {
+            clearPersistedDataRef.current();
+            resetRef.current(emptyFieldValuesRef.current);
+        }
+    }, [isOpen]);
     const password = watch('password');
     const allFields = watch();
     // Function to check if there are unsaved changes
@@ -59,16 +91,20 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
             return true;
         });
     };
-    // Save form data when fields change (for persistence)
+    // Save form data when fields change (for persistence). Guarded by `isOpen`
+    // so a closing drawer (whose form state hasn't been reset yet) doesn't
+    // re-write the values we just cleared via clearOnClose. Without this guard,
+    // the close-time clear races with the watch()-driven save and the save wins.
     useEffect(() => {
+        if (!isOpen)
+            return;
         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);
             }
         }
-    }, [allFields, persistenceKey, saveFormData]);
+    }, [isOpen, allFields, persistenceKey, saveFormData]);
     // Process initial field updates once when drawer opens
     useEffect(() => {
         if (isOpen && !initialLoadPerformedRef.current && processInitialFieldUpdates) {

package/lib/pagamio-drawer/index.d.ts

@@ -16,6 +16,14 @@ interface FormEngineDrawerProps {
     onFieldUpdate?: Record<string, DependentFieldUpdate[]>;
     onFieldChange?: (fieldName: string, value: unknown) => void;
     persistenceKey?: string;
+    /**
+     * When true, persisted form data is wiped whenever the drawer transitions
+     * from open → closed (cancel, X, ESC, programmatic close, successful submit).
+     * Default `false` preserves the original "resume a half-filled form" behaviour.
+     * Set to `true` for one-shot create/register flows where the next open should
+     * start blank — e.g. a "register device" or "deploy terminal" drawer.
+     */
+    clearOnClose?: boolean;
 }
 declare const FormEngineDrawer: React.FC<FormEngineDrawerProps>;
 export default FormEngineDrawer;

package/lib/pagamio-drawer/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import BaseDrawer from './components/BaseDrawer';
 import DrawerContent from './components/DrawerContent';
-const FormEngineDrawer = ({ title, cancelButtonText = 'Cancel', submitButtonText = 'Submit', showForm = true, showDrawerButtons = true, isOpen, fields: initialFields, initialValues, children, marginTop = '0px', onClose, onSubmit, onFieldUpdate, onFieldChange, persistenceKey, }) => {
+const FormEngineDrawer = ({ title, cancelButtonText = 'Cancel', submitButtonText = 'Submit', showForm = true, showDrawerButtons = true, isOpen, fields: initialFields, initialValues, children, marginTop = '0px', onClose, onSubmit, onFieldUpdate, onFieldChange, persistenceKey, clearOnClose = false, }) => {
     const [fields, setFields] = useState(initialFields);
     const initializedRef = useRef(false);
     const processingDependencyRef = useRef(false);
@@ -133,6 +133,6 @@ const FormEngineDrawer = ({ title, cancelButtonText = 'Cancel', submitButtonText
             processingDependencyRef.current = false;
         }
     };
-    return (_jsx(BaseDrawer, { title: title, isOpen: isOpen, marginTop: marginTop, onClose: onClose, onCloseAttempt: () => cancelRef.current(), 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, cancelRef: cancelRef, children: children }, persistenceKey || 'drawer-content') }));
+    return (_jsx(BaseDrawer, { title: title, isOpen: isOpen, marginTop: marginTop, onClose: onClose, onCloseAttempt: () => cancelRef.current(), 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, clearOnClose: clearOnClose, cancelRef: cancelRef, 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.342",
+  "version": "0.8.344",
   "publishConfig": {
     "access": "public",
     "provenance": false