@ceedcv-maya/shared-hooks-react 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceedcv-maya/shared-hooks-react",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/index.ts

@@ -1,2 +1,3 @@
 export { useAutoSave, type SaveStatus, type UseAutoSaveResult } from './useAutoSave';
+export { useFlushOnPageLeave } from './useFlushOnPageLeave';
 export { useFilterState, type FilterRecord, type UseFilterStateResult } from './useFilterState';

package/src/useFlushOnPageLeave.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Ejecuta `flush` cuando el usuario oculta la pestaña o navega fuera
+ * (cambio de app, cerrar pestaña, etc.). Complementa el debounce del autoguardado.
+ */
+export function useFlushOnPageLeave(
+  flush: () => void | Promise<void>,
+  enabled = true,
+): void {
+  const flushRef = useRef(flush);
+  flushRef.current = flush;
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const run = () => {
+      void flushRef.current();
+    };
+
+    const onVisibility = () => {
+      if (document.visibilityState === 'hidden') {
+        run();
+      }
+    };
+
+    document.addEventListener('visibilitychange', onVisibility);
+    window.addEventListener('pagehide', run);
+
+    return () => {
+      document.removeEventListener('visibilitychange', onVisibility);
+      window.removeEventListener('pagehide', run);
+    };
+  }, [enabled]);
+}