@protobase/ui 0.58.0 → 0.58.2

package/dist/connect/interaction-guard.d.ts

@@ -6,9 +6,15 @@ export declare const isFramed: (win?: {
   top: unknown;
   self: unknown;
 }) => boolean;
-/** Whether the page has been in front for `delayMs` (`armAfterFocus`), as React state. */
+/**
+ * Whether the page has been in front for `delayMs` (`armAfterFocus`), as React state: it waits again after a press while
+ * unarmed and after a back-forward cache restore, and a disarm renders synchronously, so the next press already sees it.
+ */
 export declare const useArmedAfterFocus: (delayMs: number) => boolean;
-/** The handlers of a button guarded by `armed`: its press must begin while armed for its click to act (`pressGate`). */
+/**
+ * The handlers of a button guarded by `armed`: its press must begin while armed for its click to act (`pressGate`).
+ * With `armed` from `useArmedAfterFocus`, it is never stale after a disarm, which renders synchronously.
+ */
 export declare const useGuardedPress: (armed: boolean, onPress: () => void) => {
   onPointerDown: () => void;
   onKeyDown: (event: {

package/dist/connect/interaction-guard.js

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 //#region src/connect/interaction-guard.ts
 /** How long the connect page must have been in front, visible and focused, before Allow takes a click. */
 const allowDelayMs = 500;
@@ -6,9 +7,13 @@ const allowDelayMs = 500;
 const isFramed = (win = window) => win.top !== win.self;
 /**
 * Calls `onChange(true)` once the document has been visible and focused for `delayMs` without a break, and
-* `onChange(false)` as soon as the window loses focus or the document is hidden, waiting again from the next focus. A
-* click aimed at another page, such as the second half of a double-click on a page that just gave way to this one,
-* lands before then. Returns the cleanup that removes its listeners and timer.
+* `onChange(false)` as soon as the window loses focus, the document is hidden or the page is left (`pagehide`), waiting
+* again from the next focus. A click aimed at another page, such as the second half of a double-click on a page that
+* just gave way to this one, lands before then. While unarmed, a press anywhere on the page (`pointerdown` or `keydown`,
+* of any pointer, button or key) or a restore from the back-forward cache starts the wait again, so pressing as fast as
+* one can over the spot never lands an armed press. `pointerdown` is the only pointer event that still reaches the
+* document from a disabled button. A document without a window never arms, since it cannot hear blur or a restore.
+* Returns the cleanup that removes its listeners and timer.
 */
 const armAfterFocus = (doc, delayMs, onChange) => {
 	let armed = false;
@@ -24,18 +29,32 @@ const armAfterFocus = (doc, delayMs, onChange) => {
 	};
 	const wait = () => {
 		disarm();
-		if (doc.visibilityState === "visible" && doc.hasFocus()) timer = setTimeout(() => set(true), delayMs);
+		if (doc.defaultView && doc.visibilityState === "visible" && doc.hasFocus()) timer = setTimeout(() => set(true), delayMs);
 	};
 	const visibility = () => doc.visibilityState === "visible" ? wait() : disarm();
+	const pressed = () => {
+		if (!armed) wait();
+	};
+	const shown = (event) => {
+		if ("persisted" in event && event.persisted) wait();
+	};
 	doc.defaultView?.addEventListener("focus", wait);
 	doc.defaultView?.addEventListener("blur", disarm);
+	doc.defaultView?.addEventListener("pagehide", disarm);
+	doc.defaultView?.addEventListener("pageshow", shown);
 	doc.addEventListener("visibilitychange", visibility);
+	doc.addEventListener("pointerdown", pressed, true);
+	doc.addEventListener("keydown", pressed, true);
 	wait();
 	return () => {
 		clearTimeout(timer);
 		doc.defaultView?.removeEventListener("focus", wait);
 		doc.defaultView?.removeEventListener("blur", disarm);
+		doc.defaultView?.removeEventListener("pagehide", disarm);
+		doc.defaultView?.removeEventListener("pageshow", shown);
 		doc.removeEventListener("visibilitychange", visibility);
+		doc.removeEventListener("pointerdown", pressed, true);
+		doc.removeEventListener("keydown", pressed, true);
 	};
 };
 /**
@@ -58,13 +77,21 @@ const pressGate = () => {
 		}
 	};
 };
-/** Whether the page has been in front for `delayMs` (`armAfterFocus`), as React state. */
+/** `armAfterFocus`'s onChange as React state: a disarm renders at once (`flush`), so the very next press sees it. */
+const armedState = (set, flush) => (armed) => armed ? set(true) : flush(() => set(false));
+/**
+* Whether the page has been in front for `delayMs` (`armAfterFocus`), as React state: it waits again after a press while
+* unarmed and after a back-forward cache restore, and a disarm renders synchronously, so the next press already sees it.
+*/
 const useArmedAfterFocus = (delayMs) => {
 	const [armed, setArmed] = useState(false);
-	useEffect(() => armAfterFocus(document, delayMs, setArmed), [delayMs]);
+	useEffect(() => armAfterFocus(document, delayMs, armedState(setArmed, flushSync)), [delayMs]);
 	return armed;
 };
-/** The handlers of a button guarded by `armed`: its press must begin while armed for its click to act (`pressGate`). */
+/**
+* The handlers of a button guarded by `armed`: its press must begin while armed for its click to act (`pressGate`).
+* With `armed` from `useArmedAfterFocus`, it is never stale after a disarm, which renders synchronously.
+*/
 const useGuardedPress = (armed, onPress) => {
 	const gate = useRef(pressGate());
 	return {
@@ -76,4 +103,4 @@ const useGuardedPress = (armed, onPress) => {
 	};
 };
 //#endregion
-export { allowDelayMs, armAfterFocus, isFramed, pressGate, useArmedAfterFocus, useGuardedPress };
+export { allowDelayMs, armAfterFocus, armedState, isFramed, pressGate, useArmedAfterFocus, useGuardedPress };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.58.0";
+var version = "0.58.2";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };