@pagamio/frontend-commons-lib 0.8.276 → 0.8.277

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

@@ -24,6 +24,8 @@ interface DrawerContentProps {
     persistenceKey?: string;
     /** 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. */
+    cancelRef?: React.MutableRefObject<() => void>;
 }
 declare const DrawerContent: React.FC<DrawerContentProps>;
 export default DrawerContent;

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

@@ -5,7 +5,7 @@ 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, }) => {
+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 { saveFormData, restoreFormData, clearPersistedData, hasPersistedData } = useFormPersistence(persistenceKey);
     const { addToast } = useToast();
     // Determine initial values: initialValues take precedence over persisted data
@@ -144,10 +144,13 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
     const handleContinueEditing = () => {
         setShowCancelConfirmModal(false);
     };
-    // Keep isDirtyRef in sync so FormEngineDrawer can check before X-button close.
+    // Keep isDirtyRef and cancelRef in sync every render.
     if (isDirtyRef) {
         isDirtyRef.current = checkUnsavedChanges();
     }
+    if (cancelRef) {
+        cancelRef.current = handleCancel;
+    }
     // Helper function to process dependency validations
     const processDependencyValidation = (field) => {
         if (!field.validation?.dependency) {

package/lib/pagamio-drawer/index.js

@@ -1,16 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Button, NotificationModal } from '../components';
 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 [fields, setFields] = useState(initialFields);
-    const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
     const initializedRef = useRef(false);
     const processingDependencyRef = useRef(false);
     const pendingUpdatesRef = useRef(new Map());
-    // Updated by DrawerContent on every render with current dirty state.
-    const isDirtyRef = useRef(false);
+    // cancelRef is updated every render by DrawerContent with its handleCancel function.
+    // Calling cancelRef.current() from the X button shows the same modal as the Cancel button.
+    const cancelRef = useRef(() => { });
     // Update fields when initialFields changes while preserving values
     useEffect(() => {
         setFields((prevFields) => {
@@ -134,18 +133,6 @@ const FormEngineDrawer = ({ title, cancelButtonText = 'Cancel', submitButtonText
             processingDependencyRef.current = false;
         }
     };
-    const handleCloseAttempt = () => {
-        if (isDirtyRef.current) {
-            setShowDiscardConfirm(true);
-        }
-        else {
-            onClose();
-        }
-    };
-    const handleConfirmDiscard = () => {
-        setShowDiscardConfirm(false);
-        onClose();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(BaseDrawer, { title: title, isOpen: isOpen, marginTop: marginTop, onClose: onClose, onCloseAttempt: handleCloseAttempt, 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, isDirtyRef: isDirtyRef, children: children }, persistenceKey || 'drawer-content') }), _jsx(NotificationModal, { show: showDiscardConfirm, onClose: () => setShowDiscardConfirm(false), title: "Unsaved Changes", message: "You have unsaved changes. Are you sure you want to close?", variant: "warning", showConfirmButton: false, showCancelButton: false, children: _jsxs("div", { className: "flex justify-center gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => setShowDiscardConfirm(false), children: "Keep Editing" }), _jsx(Button, { variant: "outline", onClick: handleConfirmDiscard, children: "Discard Changes" })] }) })] }));
+    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') }));
 };
 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.276",
+  "version": "0.8.277",
   "publishConfig": {
     "access": "public",
     "provenance": false