@pagamio/frontend-commons-lib 0.8.273 → 0.8.275

package/lib/components/ui/TextField.js

@@ -38,6 +38,6 @@ const TextField = ({ value, placeholder, name, type = 'text', label, error = fal
     const [showPassword, setShowPassword] = useState(false);
     // Determine the input type based on whether it's a password field and visibility toggle state
     const inputType = type === 'password' && showPassword ? 'text' : type;
-    return (_jsxs("div", { className: "flex flex-col gap-y-2", children: [_jsx(Label, { htmlFor: name, children: label }), _jsxs("div", { className: "relative", children: [_jsx(TextInput, { id: name, color: error ? 'failure' : 'gray', name: name, placeholder: placeholder, type: inputType, required: true, value: value, onChange: (e) => setValue(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown }), helperText && _jsx("span", { className: "text-sm text-red-500 mt-1", children: helperText }), type === 'password' && (_jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => setShowPassword(!showPassword), className: "absolute right-3 top-[0.625rem] text-foreground/70 hover:text-foreground", children: showPassword ? _jsx(HiEyeOff, { className: "h-5 w-5" }) : _jsx(HiEye, { className: "h-5 w-5" }) }))] })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-y-2", children: [_jsx(Label, { htmlFor: name, children: label }), _jsxs("div", { className: "relative", children: [_jsx(TextInput, { id: name, color: error ? 'failure' : 'gray', name: name, placeholder: placeholder, type: inputType, required: true, value: value, onChange: (e) => setValue(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown }), helperText && _jsx("span", { className: "text-sm text-red-500 mt-1", children: helperText }), type === 'password' && (_jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => setShowPassword(!showPassword), className: "absolute right-1 top-1/2 -translate-y-1/2 text-foreground/70 hover:text-foreground", children: showPassword ? _jsx(HiEyeOff, { className: "h-5 w-5" }) : _jsx(HiEye, { className: "h-5 w-5" }) }))] })] }));
 };
 export default TextField;

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/styles.css

@@ -800,9 +800,6 @@ video {
 .top-4 {
   top: 1rem;
 }
-.top-\[0\.625rem\] {
-  top: 0.625rem;
-}
 .top-\[50\%\] {
   top: 50%;
 }

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