@remit/web-client 0.0.309 → 0.0.310

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.309",
+  "version": "0.0.310",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeForm.tsx

@@ -327,57 +327,67 @@ const WiredComposeHeader = ({
 	// the keyboard down with it and started the cycle over.
 	const [expandedFor, setExpandedFor] = useState<number | undefined>(undefined);
 	const expanded = expandedFor === documentGeneration;
+	const [focusWithin, setFocusWithin] = useState(false);
 
 	return (
-		<ComposeHeader
-			collapsed={!isDesktop && isKeyboardOpen && !expanded}
-			onExpand={() => setExpandedFor(documentGeneration)}
-			summary={composeHeaderSummary({
-				to: toAddresses,
-				cc: ccAddresses,
-				bcc: bccAddresses,
-				subject,
-			})}
-			from={
-				<FromSelector
-					selectedAccountId={selectedAccountId}
-					onSelect={onAccountChange}
-				/>
-			}
-			to={
-				<AddressField
-					label="To"
-					addresses={toAddresses}
-					onChange={setToAddresses}
-					placeholder="Recipients"
-					onPendingChange={onToPendingChange}
-					ref={fieldHandles.to}
-				/>
-			}
-			cc={
-				showCc ? (
-					<AddressField
-						label="Cc"
-						addresses={ccAddresses}
-						onChange={setCcAddresses}
-						ref={fieldHandles.cc}
+		<div
+			className="contents"
+			onFocusCapture={() => setFocusWithin(true)}
+			onBlurCapture={(event) => {
+				if (event.currentTarget.contains(event.relatedTarget)) return;
+				setFocusWithin(false);
+			}}
+		>
+			<ComposeHeader
+				collapsed={!isDesktop && isKeyboardOpen && !expanded && !focusWithin}
+				onExpand={() => setExpandedFor(documentGeneration)}
+				summary={composeHeaderSummary({
+					to: toAddresses,
+					cc: ccAddresses,
+					bcc: bccAddresses,
+					subject,
+				})}
+				from={
+					<FromSelector
+						selectedAccountId={selectedAccountId}
+						onSelect={onAccountChange}
 					/>
-				) : undefined
-			}
-			bcc={
-				showBcc ? (
+				}
+				to={
 					<AddressField
-						label="Bcc"
-						addresses={bccAddresses}
-						onChange={setBccAddresses}
-						ref={fieldHandles.bcc}
+						label="To"
+						addresses={toAddresses}
+						onChange={setToAddresses}
+						placeholder="Recipients"
+						onPendingChange={onToPendingChange}
+						ref={fieldHandles.to}
 					/>
-				) : undefined
-			}
-			subject={<ComposeSubjectField value={subject} onChange={setSubject} />}
-			onShowCc={() => setShowCc(true)}
-			onShowBcc={() => setShowBcc(true)}
-		/>
+				}
+				cc={
+					showCc ? (
+						<AddressField
+							label="Cc"
+							addresses={ccAddresses}
+							onChange={setCcAddresses}
+							ref={fieldHandles.cc}
+						/>
+					) : undefined
+				}
+				bcc={
+					showBcc ? (
+						<AddressField
+							label="Bcc"
+							addresses={bccAddresses}
+							onChange={setBccAddresses}
+							ref={fieldHandles.bcc}
+						/>
+					) : undefined
+				}
+				subject={<ComposeSubjectField value={subject} onChange={setSubject} />}
+				onShowCc={() => setShowCc(true)}
+				onShowBcc={() => setShowBcc(true)}
+			/>
+		</div>
 	);
 };
 

package/src/components/compose/mobile-header-stays-expanded.render.test.ts

@@ -14,7 +14,10 @@
 
 import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import type {
+	RemitImapAccountResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
 import {
 	type AnyRouter,
 	createMemoryHistory,
@@ -44,6 +47,20 @@ const account = {
 	smtpEnabled: true,
 } as unknown as RemitImapAccountResponse;
 
+const sourceMessage = {
+	message: { messageId: "msg-1" },
+	envelope: {
+		subject: "Lunch",
+		messageIdValue: "<m1@example.com>",
+		from: [{ normalizedEmail: "them@example.com", displayName: "Them" }],
+		replyTo: [],
+		to: [],
+		cc: [],
+	},
+	references: [],
+	bodyParts: [],
+} as unknown as RemitImapDescribeMessageResponse;
+
 interface VisualViewportStub {
 	height: number;
 	addEventListener: (type: string, listener: () => void) => void;
@@ -97,15 +114,22 @@ const testRouter = (): AnyRouter =>
 		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
 	}) as unknown as AnyRouter;
 
-const Opened = () =>
+const Opened = ({ mode }: { mode: "new" | "reply" }) =>
 	createElement(ComposeForm, {
-		mode: "new",
+		mode,
 		account,
+		sourceMessage: mode === "reply" ? sourceMessage : undefined,
 		onDraftCreated: () => {},
 		onClose: () => {},
 	});
 
-const mount = async (): Promise<void> => {
+const mount = async ({
+	mode = "new",
+	keyboardOpen = true,
+}: {
+	mode?: "new" | "reply";
+	keyboardOpen?: boolean;
+} = {}): Promise<void> => {
 	http = mockFetch(async (call) => {
 		if (call.path.endsWith("/config")) return { accounts: [account] };
 		return { items: [] };
@@ -115,7 +139,9 @@ const mount = async (): Promise<void> => {
 		configurable: true,
 		value: viewport,
 	});
-	viewport.height = globalThis.window.innerHeight - KEYBOARD_HEIGHT;
+	viewport.height = keyboardOpen
+		? globalThis.window.innerHeight - KEYBOARD_HEIGHT
+		: globalThis.window.innerHeight;
 
 	harness = createDomHarness(PHONE);
 	harness.renderApp(
@@ -125,7 +151,7 @@ const mount = async (): Promise<void> => {
 			children: createElement(
 				ComposeProvider,
 				null,
-				createElement(Opened, null),
+				createElement(Opened, { mode }),
 			),
 		}),
 	);
@@ -171,4 +197,33 @@ describe("the phone compose header and the software keyboard", () => {
 			"the header did not collapse over the field being typed into",
 		);
 	});
+
+	it("keeps To mounted when a reply brings the keyboard up over it", async () => {
+		await mount({ mode: "reply", keyboardOpen: false });
+
+		const input = recipientInput();
+		assert.ok(input, "the rows are there while the keyboard is down");
+
+		act(() => {
+			input.focus();
+		});
+		setKeyboard(true);
+		await harness?.flush();
+
+		assert.equal(
+			recipientInput(),
+			input,
+			"the recipient field stayed mounted under the keyboard",
+		);
+		assert.equal(
+			globalThis.document.activeElement,
+			input,
+			"the recipient field kept focus",
+		);
+		assert.equal(
+			collapsedBar(),
+			null,
+			"the header did not collapse over the field being typed into",
+		);
+	});
 });