fix: correctly wrap multi-line messages in confirm prompt

Fixes #101

Author: 43081j

.changeset/sharp-lands-unite.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Apply guide to wrapped multi-line messages in confirm prompt.

packages/prompts/src/confirm.ts

@@ -1,5 +1,5 @@
 import { styleText } from 'node:util';
-import { ConfirmPrompt, settings } from '@clack/core';
+import { ConfirmPrompt, settings, wrapTextWithPrefix } from '@clack/core';
 import {
 	type CommonOptions,
 	S_BAR,
@@ -28,7 +28,15 @@ export const confirm = (opts: ConfirmOptions) => {
 		initialValue: opts.initialValue ?? true,
 		render() {
 			const hasGuide = opts.withGuide ?? settings.withGuide;
-			const title = `${hasGuide ? `${styleText('gray', S_BAR)}\n` : ''}${symbol(this.state)}  ${opts.message}\n`;
+			const titlePrefix = `${symbol(this.state)}  `;
+			const titlePrefixBar = hasGuide ? `${styleText('gray', S_BAR)}  ` : '';
+			const messageLines = wrapTextWithPrefix(
+				opts.output,
+				opts.message,
+				titlePrefixBar,
+				titlePrefix
+			);
+			const title = `${hasGuide ? `${styleText('gray', S_BAR)}\n` : ''}${messageLines}\n`;
 			const value = this.value ? active : inactive;
 
 			switch (this.state) {

packages/prompts/test/__snapshots__/confirm.test.ts.snap

@@ -156,6 +156,29 @@ exports[`confirm (isCI = false) > renders message with choices 1`] = `
 ]
 `;
 
+exports[`confirm (isCI = false) > renders multi-line messages correctly 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  bar
+│  baz
+│  ● Yes / ○ No
+└
+",
+  "<cursor.backward count=999><cursor.up count=6>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  bar
+│  baz
+│  Yes",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`confirm (isCI = false) > renders options in vertical alignment 1`] = `
 [
   "<cursor.hide>",
@@ -373,6 +396,29 @@ exports[`confirm (isCI = true) > renders message with choices 1`] = `
 ]
 `;
 
+exports[`confirm (isCI = true) > renders multi-line messages correctly 1`] = `
+[
+  "<cursor.hide>",
+  "│
+◆  foo
+│  bar
+│  baz
+│  ● Yes / ○ No
+└
+",
+  "<cursor.backward count=999><cursor.up count=6>",
+  "<cursor.down count=1>",
+  "<erase.down>",
+  "◇  foo
+│  bar
+│  baz
+│  Yes",
+  "
+",
+  "<cursor.show>",
+]
+`;
+
 exports[`confirm (isCI = true) > renders options in vertical alignment 1`] = `
 [
   "<cursor.hide>",

packages/prompts/test/confirm.test.ts

@@ -199,4 +199,18 @@ describe.each(['true', 'false'])('confirm (isCI = %s)', (isCI) => {
 
 		expect(output.buffer).toMatchSnapshot();
 	});
+
+	test('renders multi-line messages correctly', async () => {
+		const result = prompts.confirm({
+			message: 'foo\nbar\nbaz',
+			input,
+			output,
+		});
+
+		input.emit('keypress', '', { name: 'return' });
+
+		await result;
+
+		expect(output.buffer).toMatchSnapshot();
+	});
 });