@ultimat3/render 27.2.2 → 27.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/render",
-  "version": "27.2.2",
+  "version": "27.2.3",
   "description": "The route primitive and the five render modes: static, isr, ssr, stream, spa.",
   "license": "MIT",
   "type": "module",
@@ -40,11 +40,11 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@ultimat3/cache": "27.2.2",
-    "@ultimat3/core": "27.2.2",
-    "@ultimat3/http": "27.2.2",
-    "@ultimat3/i18n": "27.2.2",
-    "@ultimat3/seo": "27.2.2",
+    "@ultimat3/cache": "27.2.3",
+    "@ultimat3/core": "27.2.3",
+    "@ultimat3/http": "27.2.3",
+    "@ultimat3/i18n": "27.2.3",
+    "@ultimat3/seo": "27.2.3",
     "sass": "1.105.1"
   }
 }

package/src/navigation-modal.ts

@@ -146,6 +146,29 @@ export function modalController(
   const onClose = (event: Event): void => {
     if (event.target === dialog && dialog !== undefined && !dialog.open) close();
   };
+  // A press on the backdrop. `closedby="any"` has the browser close the dialog itself (and fire
+  // `close`, read above); a browser without it reports the press as a click whose target is the
+  // dialog and whose point is outside its box — a click on the dialog's own padding is inside it
+  // and closes nothing, and so does one a keyboard made, which lands on a control. The press must
+  // START outside too: one that began inside (selecting text, dragging out of a field) and was
+  // released on the backdrop also clicks the dialog, and must not throw the visitor's work away.
+  // Idempotent with the browser's own: a close already under way is not started twice.
+  const outside = (event: Event): boolean => {
+    const open = dialog;
+    if (open === undefined || event.target !== open) return false;
+    const { clientX: x, clientY: y } = event as MouseEvent;
+    const box = open.getBoundingClientRect();
+    return x < box.left || x > box.right || y < box.top || y > box.bottom;
+  };
+  let pressedOutside = false;
+  const onPointerDown = (event: Event): void => {
+    pressedOutside = outside(event);
+  };
+  const onClick = (event: Event): void => {
+    const began = pressedOutside;
+    pressedOutside = false;
+    if (began && outside(event)) close();
+  };
 
   const present = async (
     next: Document,
@@ -165,8 +188,12 @@ export function modalController(
       title = doc.title;
       open = doc.createElement('dialog');
       open.setAttribute(NAVIGATION_MODAL_ATTRIBUTE, '');
+      // Light dismiss: Escape AND a press outside close it, as every modal does (`Dialog` included).
+      open.setAttribute('closedby', 'any');
       open.addEventListener('cancel', onCancel);
       open.addEventListener('close', onClose);
+      open.addEventListener('pointerdown', onPointerDown);
+      open.addEventListener('click', onClick);
       doc.body.append(open);
     } else {
       // One modal at a time: the next address replaces this one's content, in the same dialog.