fix: hard wrap and clamp lines in limit-options (bombshell-dev#398)

Author: 43081j

.changeset/better-hotels-fall.md

@@ -0,0 +1,5 @@
+---
+"@clack/prompts": patch
+---
+
+Clamp scrolling windows to 5 rows.

packages/prompts/package.json

@@ -50,7 +50,7 @@
   "scripts": {
     "build": "unbuild",
     "prepack": "pnpm build",
-    "test": "FORCE_COLOR=1 vitest run"
+    "test": "vitest run"
   },
   "dependencies": {
     "@clack/core": "workspace:*",

packages/prompts/src/limit-options.ts

@@ -46,7 +46,7 @@ export const limitOptions = <TOption>(params: LimitOptionsParams<TOption>): stri
 	const paramMaxItems = params.maxItems ?? Number.POSITIVE_INFINITY;
 	const outputMaxItems = Math.max(rows - rowPadding, 0);
 	// We clamp to minimum 5 because anything less doesn't make sense UX wise
-	const maxItems = Math.max(paramMaxItems, 5);
+	const maxItems = Math.max(Math.min(paramMaxItems, outputMaxItems), 5);
 	let slidingWindowLocation = 0;
 
 	if (cursor >= maxItems - 3) {
@@ -73,7 +73,10 @@ export const limitOptions = <TOption>(params: LimitOptionsParams<TOption>): stri
 		slidingWindowLocationEnd - (shouldRenderBottomEllipsis ? 1 : 0);
 
 	for (let i = slidingWindowLocationWithEllipsis; i < slidingWindowLocationEndWithEllipsis; i++) {
-		const wrappedLines = wrapAnsi(style(options[i], i === cursor), maxWidth).split('\n');
+		const wrappedLines = wrapAnsi(style(options[i], i === cursor), maxWidth, {
+			hard: true,
+			trim: false,
+		}).split('\n');
 		lineGroups.push(wrappedLines);
 		lineCount += wrappedLines.length;
 	}

packages/prompts/test/limit-options.test.ts

@@ -103,7 +103,7 @@ describe('limitOptions', () => {
 		output.rows = 7;
 		options.maxItems = 10;
 		const result = limitOptions(options);
-		expect(result).toEqual(['Item 1', 'Item 2', 'Item 3', color.dim('...')]);
+		expect(result).toEqual(['Item 1', 'Item 2', color.dim('...')]);
 	});
 
 	test('handle multi-line item clamping (start)', async () => {

packages/prompts/vitest.config.ts

@@ -2,6 +2,9 @@ import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
 	test: {
+		env: {
+			FORCE_COLOR: '1',
+		},
 		snapshotSerializers: ['vitest-ansi-serializer'],
 	},
 });