@nsail/ui 0.1.334 → 0.1.338

package/dist/dialog.js

@@ -13,16 +13,32 @@ export function NsDialogHost({ children }) {
         return new Promise((resolve) => setPending({ text, danger, resolve }));
     }, []);
     useEffect(() => {
-        if (pending && dialog.current && !dialog.current.open) {
+        if (!pending || !dialog.current) {
+            return;
+        }
+        if (!dialog.current.open) {
             dialog.current.showModal();
         }
+        // Which face the cursor opens on: an ordinary confirmation offers its own act, so the cursor
+        // stands on it and Enter takes it; one that destroys stands on the way out, so Enter alone can
+        // only decline (ui/forms.md, Focus on open).
+        //
+        // Placed here, after showModal(), and never by React's autoFocus: that prop focuses at the
+        // commit that MOUNTED the faces, which is a commit where this dialog was still closed — a
+        // display:none element taking no cursor — and it reaches the DOM as a focus() call, not as the
+        // autofocus ATTRIBUTE a native dialog's own focusing steps read when showModal() runs (React
+        // 19.3, read off a live DOM: neither face carries the attribute). Those steps are synchronous
+        // inside the call above, so the cursor is placed after them rather than racing them, and the
+        // placing holds whichever of the two mechanisms the browser answers.
+        const [wayOut, act] = dialog.current.querySelectorAll(".ns-actions button");
+        (pending.danger ? wayOut : act).focus();
     }, [pending]);
     function close(confirmed) {
         pending?.resolve(confirmed);
         dialog.current?.close();
         setPending(null);
     }
-    return (_jsxs(DialogContext.Provider, { value: confirm, children: [children, _jsx("dialog", { ref: dialog, className: "ns-dialog", onCancel: () => close(false), children: pending && (_jsxs(_Fragment, { children: [_jsx("p", { children: pending.text }), _jsxs("div", { className: "ns-actions", children: [_jsx(NsButton, { text: "Actions.Cancel", onClick: () => close(false) }), _jsx(NsButton, { text: "Actions.Confirm", variant: pending.danger ? "danger" : "primary", onClick: () => close(true), autoFocus: true })] })] })) })] }));
+    return (_jsxs(DialogContext.Provider, { value: confirm, children: [children, _jsx("dialog", { ref: dialog, className: "ns-dialog", onCancel: () => close(false), children: pending && (_jsxs(_Fragment, { children: [_jsx("p", { children: pending.text }), _jsxs("div", { className: "ns-actions", children: [_jsx(NsButton, { text: "Actions.Cancel", onClick: () => close(false) }), _jsx(NsButton, { text: "Actions.Confirm", variant: pending.danger ? "danger" : "primary", onClick: () => close(true) })] })] })) })] }));
 }
 export function useConfirm() {
     const confirm = useContext(DialogContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsail/ui",
-  "version": "0.1.334",
+  "version": "0.1.338",
   "description": "The Ns* components for a React client, drawn from the descriptors an Sdk generates.",
   "license": "MIT",
   "repository": {
@@ -35,11 +35,14 @@
     "react-dom": ">=19"
   },
   "dependencies": {
-    "@nsail/stack": "0.1.334"
+    "@nsail/stack": "0.1.338"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node -e \"require('fs').copyFileSync('src/ns.css', 'dist/ns.css')\"",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "happy-dom": "^21.0.4"
   }
 }