@pagamio/frontend-commons-lib 0.8.274 → 0.8.276

package/lib/components/sidebar-v2/NavbarV2.js

@@ -40,7 +40,7 @@ import { useSidebar } from './SidebarV2Context';
 const SidebarV2ToggleButton = React.memo(({ isOpen, onToggle, className, iconClassName }) => {
     const { tLib } = useLibTranslations();
     return (_jsxs(Button, { type: "button", variant: "ghost", onClick: onToggle, className: className ??
-            'mr-3 cursor-pointer rounded p-2 text-foreground/70 hover:bg-accent hover:text-foreground', "aria-label": tLib('sidebar.toggle', 'Toggle sidebar'), children: [_jsx("span", { className: "sr-only", children: tLib('sidebar.toggle', 'Toggle sidebar') }), isOpen ? (_jsx(IconX, { className: iconClassName ?? 'h-6 w-6' })) : (_jsx(IconMenu2, { className: iconClassName ?? 'h-6 w-6' }))] }));
+            'mr-3 cursor-pointer rounded p-2 text-foreground hover:bg-accent hover:text-foreground', "aria-label": tLib('sidebar.toggle', 'Toggle sidebar'), children: [_jsx("span", { className: "sr-only", children: tLib('sidebar.toggle', 'Toggle sidebar') }), isOpen ? (_jsx(IconX, { className: iconClassName ?? 'h-6 w-6' })) : (_jsx(IconMenu2, { className: iconClassName ?? 'h-6 w-6' }))] }));
 });
 SidebarV2ToggleButton.displayName = 'SidebarV2ToggleButton';
 /**

package/lib/components/sidebar-v2/SidebarV2Primitives.js

@@ -140,7 +140,7 @@ SidebarSeparator.displayName = 'SidebarSeparator';
 const SidebarTrigger = forwardRef(({ className, showOnMobile = true, ...props }, ref) => {
     const { open, toggleSidebar, isMobile, openMobile } = useSidebarV2();
     const isOpen = isMobile ? openMobile : open;
-    return (_jsx(Button, { ref: ref, type: "button", size: "icon", variant: "ghost", onClick: toggleSidebar, "aria-label": isOpen ? 'Close sidebar' : 'Open sidebar', className: cn('inline-flex items-center justify-center rounded-md p-2', 'text-muted-foreground hover:bg-accent hover:text-accent-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'transition-colors', !showOnMobile && 'hidden md:inline-flex', className), ...props, children: isOpen ? (isMobile ? (_jsx(IconX, { className: "h-5 w-5" })) : (_jsx(IconLayoutSidebarLeftCollapse, { className: "h-5 w-5" }))) : (_jsx(IconLayoutSidebarLeftExpand, { className: "h-5 w-5" })) }));
+    return (_jsx(Button, { ref: ref, type: "button", size: "icon", variant: "ghost", onClick: toggleSidebar, "aria-label": isOpen ? 'Close sidebar' : 'Open sidebar', className: cn('inline-flex items-center justify-center rounded-md p-2', 'text-accent-foreground hover:bg-accent hover:text-accent-foreground', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'transition-colors', !showOnMobile && 'hidden md:inline-flex', className), ...props, children: isOpen ? (isMobile ? (_jsx(IconX, { className: "h-5 w-5" })) : (_jsx(IconLayoutSidebarLeftCollapse, { className: "h-5 w-5" }))) : (_jsx(IconLayoutSidebarLeftExpand, { className: "h-5 w-5" })) }));
 });
 SidebarTrigger.displayName = 'SidebarTrigger';
 /**

package/lib/context/MultiFormEngineDrawerProvider.js

@@ -12,9 +12,18 @@ const MultiFormEngineDrawerProviderContext = createContext(undefined);
 export const MultiFormEngineDrawerProvider = ({ pathname, children }) => {
     const [drawerStates, setDrawerStates] = useState(new Map());
     const formDataRef = useRef(new Map());
+    const prevPathnameRef = useRef(pathname);
     useEffect(() => {
         setupInputRegistry();
     }, []);
+    // Clear drawers synchronously during render when pathname changes
+    // (useEffect fires too late, causing the new page to render with compressed layout)
+    if (prevPathnameRef.current !== pathname) {
+        prevPathnameRef.current = pathname;
+        if (drawerStates.size > 0) {
+            setDrawerStates(new Map());
+        }
+    }
     const handleOpenDrawer = useCallback((key) => {
         setDrawerStates((prev) => new Map(prev).set(key, true));
     }, []);
@@ -51,9 +60,6 @@ export const MultiFormEngineDrawerProvider = ({ pathname, children }) => {
     const hasFormData = useCallback((key) => {
         return formDataRef.current.has(key);
     }, []);
-    useEffect(() => {
-        setDrawerStates(new Map());
-    }, [pathname]);
     const contextValue = useMemo(() => ({
         isOpen,
         isAnyDrawerOpen,

package/lib/dashboard-visuals/utils/formatUtil.d.ts

@@ -16,6 +16,8 @@ interface DateFormatOptions {
     locale?: string;
     fallback?: string;
     includeTime?: boolean;
+    /** When true, includes seconds in the time portion. Defaults to false. */
+    includeSeconds?: boolean;
 }
 interface DateRangeFormatOptions extends DateFormatOptions {
     separator?: string;

package/lib/dashboard-visuals/utils/formatUtil.js

@@ -211,7 +211,7 @@ export const formatValue = (value, format, options) => {
  * @returns Formatted date string or fallback value
  */
 export const formatDate = (date, options) => {
-    const { locale = 'en-US', fallback = 'N/A', includeTime = false } = options || {};
+    const { locale = 'en-US', fallback = 'N/A', includeTime = false, includeSeconds = false } = options || {};
     if (!date)
         return fallback;
     try {
@@ -227,7 +227,7 @@ export const formatDate = (date, options) => {
                 day: '2-digit',
                 hour: '2-digit',
                 minute: '2-digit',
-                second: '2-digit',
+                ...(includeSeconds && { second: '2-digit' }),
             });
         }
         return dateObj.toLocaleDateString(locale, {

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

@@ -4,6 +4,8 @@ interface BaseDrawerProps {
     isOpen: boolean;
     marginTop?: string;
     onClose: () => void;
+    /** When provided, the X button calls this instead of onClose, allowing dirty-check interception. */
+    onCloseAttempt?: () => void;
     children: React.ReactNode;
 }
 declare const BaseDrawer: React.FC<BaseDrawerProps>;

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Drawer } from 'flowbite-react';
 import Button from '../../components/ui/Button';
-const BaseDrawer = ({ title, isOpen, marginTop = '0px', onClose, children }) => {
+const BaseDrawer = ({ title, isOpen, marginTop = '0px', onClose, onCloseAttempt, children, }) => {
     return (_jsxs(Drawer, { open: isOpen, onClose: onClose, backdrop: false, position: "right", className: "flex flex-col px-0 bg-card border-l-2 border-border w-full md:w-[420px]", style: {
             marginTop,
             height: `calc(100vh - ${marginTop})`,
             paddingTop: '0px',
-        }, children: [_jsxs("div", { className: "sticky top-0 flex items-center h-12 border-b border-border", style: { zIndex: 100 }, children: [_jsx("div", { className: "flex items-center justify-start pl-6 h-full bg-muted py-5", style: { width: '88%' }, children: _jsx("h2", { className: "text-lg font-semibold text-foreground truncate", children: title }) }), _jsx(Button, { type: "button", variant: "ghost", className: "hover:text-foreground/70 hover:bg-accent bg-card", onClick: onClose, style: { width: '12%', height: '3rem' }, children: "x" })] }), children] }));
+        }, children: [_jsxs("div", { className: "sticky top-0 flex items-center h-12 border-b border-border", style: { zIndex: 100 }, children: [_jsx("div", { className: "flex items-center justify-start pl-6 h-full bg-muted py-5", style: { width: '88%' }, children: _jsx("h2", { className: "text-lg font-semibold text-foreground truncate", children: title }) }), _jsx(Button, { type: "button", variant: "ghost", className: "hover:text-foreground/70 hover:bg-accent bg-card", onClick: onCloseAttempt ?? onClose, style: { width: '12%', height: '3rem' }, children: "x" })] }), children] }));
 };
 export default BaseDrawer;

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

@@ -22,6 +22,8 @@ interface DrawerContentProps {
     processingDependencyRef?: React.MutableRefObject<boolean>;
     pendingUpdatesRef?: React.MutableRefObject<Map<string, any>>;
     persistenceKey?: string;
+    /** Ref updated every render with current dirty state — read by FormEngineDrawer for X-button check. */
+    isDirtyRef?: React.MutableRefObject<boolean>;
 }
 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, }) => {
+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 { saveFormData, restoreFormData, clearPersistedData, hasPersistedData } = useFormPersistence(persistenceKey);
     const { addToast } = useToast();
     // Determine initial values: initialValues take precedence over persisted data
@@ -29,13 +29,23 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
     const [showCancelConfirmModal, setShowCancelConfirmModal] = useState(false);
     const fieldChangeRef = useRef(new Set());
     const initialLoadPerformedRef = useRef(false);
+    // Capture initial values at the moment the drawer opens — used as baseline for dirty detection.
+    // We intentionally do NOT use the live `initialValues` prop, because some consumers update it
+    // on every field change (e.g. trackedFormData pattern) which would make dirty detection always return false.
+    const mountInitialValuesRef = useRef(initialValues || {});
+    const wasOpenRef = useRef(!!isOpen);
+    if (isOpen && !wasOpenRef.current) {
+        // Drawer just transitioned from closed → open; snapshot current initialValues as the baseline.
+        mountInitialValuesRef.current = initialValues || {};
+    }
+    wasOpenRef.current = !!isOpen;
     const password = watch('password');
     const allFields = watch();
     // Function to check if there are unsaved changes
     const checkUnsavedChanges = () => {
         if (!allFields || Object.keys(allFields).length === 0)
             return false;
-        const originalInitialValues = initialValues || {};
+        const originalInitialValues = mountInitialValuesRef.current;
         return Object.keys(allFields).some((key) => {
             const currentValue = allFields[key];
             const originalValue = originalInitialValues[key];
@@ -134,6 +144,10 @@ const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonTe
     const handleContinueEditing = () => {
         setShowCancelConfirmModal(false);
     };
+    // Keep isDirtyRef in sync so FormEngineDrawer can check before X-button close.
+    if (isDirtyRef) {
+        isDirtyRef.current = checkUnsavedChanges();
+    }
     // Helper function to process dependency validations
     const processDependencyValidation = (field) => {
         if (!field.validation?.dependency) {

package/lib/pagamio-drawer/index.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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);
     // Update fields when initialFields changes while preserving values
     useEffect(() => {
         setFields((prevFields) => {
@@ -130,6 +134,18 @@ 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 || 'drawer-content') }));
+    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" })] }) })] }));
 };
 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.274",
+  "version": "0.8.276",
   "publishConfig": {
     "access": "public",
     "provenance": false