Merge branch 'master' into master

benchmark/static/static.tsx

@@ -20,8 +20,8 @@ function App() {
 			setItems(previousItems => [
 				...previousItems,
 				{
-					id: previousItems.length
-				}
+					id: previousItems.length,
+				},
 			]);
 
 			timer = setTimeout(run, 10);

examples/jest/jest.tsx

@@ -16,7 +16,7 @@ const paths = [
 	'tests/delete-profile.js',
 	'tests/posts.js',
 	'tests/post.js',
-	'tests/comments.js'
+	'tests/comments.js',
 ];
 
 type State = {
@@ -38,7 +38,7 @@ class Jest extends React.Component<Record<string, unknown>, State> {
 		this.state = {
 			startTime: Date.now(),
 			completedTests: [],
-			runningTests: []
+			runningTests: [],
 		};
 	}
 
@@ -85,24 +85,24 @@ class Jest extends React.Component<Record<string, unknown>, State> {
 				...previousState.runningTests,
 				{
 					status: 'runs',
-					path
-				}
-			]
+					path,
+				},
+			],
 		}));
 
 		await delay(1000 * Math.random());
 
 		this.setState(previousState => ({
 			runningTests: previousState.runningTests.filter(
-				test => test.path !== path
+				test => test.path !== path,
 			),
 			completedTests: [
 				...previousState.completedTests,
 				{
 					status: Math.random() < 0.5 ? 'pass' : 'fail',
-					path
-				}
-			]
+					path,
+				},
+			],
 		}));
 	}
 }

examples/static/static.tsx

@@ -19,8 +19,8 @@ function Example() {
 					...previousTests,
 					{
 						id: previousTests.length,
-						title: `Test #${previousTests.length + 1}`
-					}
+						title: `Test #${previousTests.length + 1}`,
+					},
 				]);
 
 				timer = setTimeout(run, 100);

examples/subprocess-output/subprocess-output.tsx

@@ -11,7 +11,7 @@ function SubprocessOutput() {
 		const subProcess = childProcess.spawn('npm', [
 			'run',
 			'example',
-			'examples/jest'
+			'examples/jest',
 		]);
 
 		subProcess.stdout.on('data', (newOutput: Buffer) => {

examples/suspense/suspense.tsx

@@ -41,5 +41,5 @@ function Fallback() {
 render(
 	<React.Suspense fallback={<Fallback />}>
 		<Example />
-	</React.Suspense>
+	</React.Suspense>,
 );

examples/table/table.tsx

@@ -7,7 +7,7 @@ const users = Array.from({length: 10})
 	.map((_, index) => ({
 		id: index,
 		name: faker.internet.userName(),
-		email: faker.internet.email()
+		email: faker.internet.email(),
 	}));
 
 function Table() {

examples/use-focus-with-id/use-focus-with-id.tsx

@@ -5,7 +5,7 @@ import {
 	Text,
 	useFocus,
 	useInput,
-	useFocusManager
+	useFocusManager,
 } from '../../src/index.js';
 
 function Focus() {

media/demo.js

@@ -7,7 +7,7 @@ class Counter extends React.PureComponent {
 		super();
 
 		this.state = {
-			i: 0
+			i: 0,
 		};
 	}
 
@@ -18,20 +18,20 @@ class Counter extends React.PureComponent {
 			React.createElement(
 				Box,
 				{},
-				React.createElement(Text, {color: 'blue'}, '~/Projects/ink ')
+				React.createElement(Text, {color: 'blue'}, '~/Projects/ink '),
 			),
 			React.createElement(
 				Box,
 				{},
 				React.createElement(Text, {color: 'magenta'}, '❯ '),
 				React.createElement(Text, {color: 'green'}, 'node '),
-				React.createElement(Text, {}, 'media/example')
+				React.createElement(Text, {}, 'media/example'),
 			),
 			React.createElement(
 				Text,
 				{color: 'green'},
-				`${this.state.i} tests passed`
-			)
+				`${this.state.i} tests passed`,
+			),
 		);
 	}
 
@@ -42,7 +42,7 @@ class Counter extends React.PureComponent {
 			}
 
 			this.setState(previousState => ({
-				i: previousState.i + 1
+				i: previousState.i + 1,
 			}));
 		}, 100);
 	}

package.json

@@ -62,27 +62,27 @@
 		"slice-ansi": "^7.1.0",
 		"stack-utils": "^2.0.6",
 		"string-width": "^7.0.0",
-		"type-fest": "^4.6.0",
+		"type-fest": "^4.8.3",
 		"widest-line": "^5.0.0",
 		"wrap-ansi": "^9.0.0",
-		"ws": "^8.12.0",
+		"ws": "^8.15.0",
 		"yoga-wasm-web": "~0.3.3"
 	},
 	"devDependencies": {
-		"@faker-js/faker": "^8.2.0",
+		"@faker-js/faker": "^8.3.1",
 		"@sindresorhus/tsconfig": "^5.0.0",
 		"@types/benchmark": "^2.1.2",
-		"@types/lodash": "^4.14.191",
+		"@types/lodash": "^4.14.202",
 		"@types/ms": "^0.7.31",
-		"@types/node": "*",
-		"@types/react": "^18.0.0",
+		"@types/node": "^20.10.4",
+		"@types/react": "^18.2.43",
 		"@types/react-reconciler": "^0.28.2",
-		"@types/scheduler": "^0.16.2",
+		"@types/scheduler": "^0.16.8",
 		"@types/signal-exit": "^3.0.0",
 		"@types/sinon": "^10.0.20",
 		"@types/stack-utils": "^2.0.2",
-		"@types/ws": "^8.5.4",
-		"@vdemedes/prettier-config": "^1.0.1",
+		"@types/ws": "^8.5.10",
+		"@vdemedes/prettier-config": "^2.0.1",
 		"ava": "^5.1.1",
 		"boxen": "^7.0.1",
 		"delay": "^6.0.0",
@@ -91,14 +91,14 @@
 		"eslint-plugin-react-hooks": "4.6.0",
 		"ms": "^2.1.3",
 		"node-pty": "^1.0.0",
-		"p-queue": "^7.3.4",
-		"prettier": "^2.0.4",
+		"p-queue": "^8.0.0",
+		"prettier": "^3.1.1",
 		"react": "^18.0.0",
-		"react-devtools-core": "^4.19.1",
+		"react-devtools-core": "^5.0.0",
 		"sinon": "^17.0.0",
 		"strip-ansi": "^7.1.0",
-		"ts-node": "10.9.1",
-		"typescript": "^5.2.2",
+		"ts-node": "^10.9.2",
+		"typescript": "^5.3.3",
 		"xo": "^0.56.0"
 	},
 	"peerDependencies": {

src/colorize.ts

@@ -12,7 +12,7 @@ const isNamedColor = (color: string): color is ForegroundColorName => {
 const colorize = (
 	str: string,
 	color: string | undefined,
-	type: ColorType
+	type: ColorType,
 ): string => {
 	if (!color) {
 		return str;

src/components/App.tsx

@@ -50,7 +50,7 @@ export default class App extends PureComponent<Props, State> {
 		isFocusEnabled: true,
 		activeFocusId: undefined,
 		focusables: [],
-		error: undefined
+		error: undefined,
 	};
 
 	// Count how many components enabled raw mode to avoid disabling
@@ -69,7 +69,7 @@ export default class App extends PureComponent<Props, State> {
 			<AppContext.Provider
 				// eslint-disable-next-line react/jsx-no-constructed-context-values
 				value={{
-					exit: this.handleExit
+					exit: this.handleExit,
 				}}
 			>
 				<StdinContext.Provider
@@ -81,21 +81,21 @@ export default class App extends PureComponent<Props, State> {
 						// eslint-disable-next-line @typescript-eslint/naming-convention
 						internal_exitOnCtrlC: this.props.exitOnCtrlC,
 						// eslint-disable-next-line @typescript-eslint/naming-convention
-						internal_eventEmitter: this.internal_eventEmitter
+						internal_eventEmitter: this.internal_eventEmitter,
 					}}
 				>
 					<StdoutContext.Provider
 						// eslint-disable-next-line react/jsx-no-constructed-context-values
 						value={{
 							stdout: this.props.stdout,
-							write: this.props.writeToStdout
+							write: this.props.writeToStdout,
 						}}
 					>
 						<StderrContext.Provider
 							// eslint-disable-next-line react/jsx-no-constructed-context-values
 							value={{
 								stderr: this.props.stderr,
-								write: this.props.writeToStderr
+								write: this.props.writeToStderr,
 							}}
 						>
 							<FocusContext.Provider
@@ -110,7 +110,7 @@ export default class App extends PureComponent<Props, State> {
 									disableFocus: this.disableFocus,
 									focusNext: this.focusNext,
 									focusPrevious: this.focusPrevious,
-									focus: this.focus
+									focus: this.focus,
 								}}
 							>
 								{this.state.error ? (
@@ -149,11 +149,11 @@ export default class App extends PureComponent<Props, State> {
 		if (!this.isRawModeSupported()) {
 			if (stdin === process.stdin) {
 				throw new Error(
-					'Raw mode is not supported on the current process.stdin, which Ink uses as input stream by default.\nRead about how to prevent this error on https://github.com/vadimdemedes/ink/#israwmodesupported'
+					'Raw mode is not supported on the current process.stdin, which Ink uses as input stream by default.\nRead about how to prevent this error on https://github.com/vadimdemedes/ink/#israwmodesupported',
 				);
 			} else {
 				throw new Error(
-					'Raw mode is not supported on the stdin provided to Ink.\nRead about how to prevent this error on https://github.com/vadimdemedes/ink/#israwmodesupported'
+					'Raw mode is not supported on the stdin provided to Ink.\nRead about how to prevent this error on https://github.com/vadimdemedes/ink/#israwmodesupported',
 				);
 			}
 		}
@@ -199,7 +199,7 @@ export default class App extends PureComponent<Props, State> {
 		// Reset focus when there's an active focused component on Esc
 		if (input === escape && this.state.activeFocusId) {
 			this.setState({
-				activeFocusId: undefined
+				activeFocusId: undefined,
 			});
 		}
 
@@ -224,20 +224,20 @@ export default class App extends PureComponent<Props, State> {
 
 	enableFocus = (): void => {
 		this.setState({
-			isFocusEnabled: true
+			isFocusEnabled: true,
 		});
 	};
 
 	disableFocus = (): void => {
 		this.setState({
-			isFocusEnabled: false
+			isFocusEnabled: false,
 		});
 	};
 
 	focus = (id: string): void => {
 		this.setState(previousState => {
 			const hasFocusableId = previousState.focusables.some(
-				focusable => focusable?.id === id
+				focusable => focusable?.id === id,
 			);
 
 			if (!hasFocusableId) {
@@ -254,7 +254,7 @@ export default class App extends PureComponent<Props, State> {
 			const nextFocusableId = this.findNextFocusable(previousState);
 
 			return {
-				activeFocusId: nextFocusableId ?? firstFocusableId
+				activeFocusId: nextFocusableId ?? firstFocusableId,
 			};
 		});
 	};
@@ -266,7 +266,7 @@ export default class App extends PureComponent<Props, State> {
 			const previousFocusableId = this.findPreviousFocusable(previousState);
 
 			return {
-				activeFocusId: previousFocusableId ?? lastFocusableId
+				activeFocusId: previousFocusableId ?? lastFocusableId,
 			};
 		});
 	};
@@ -285,9 +285,9 @@ export default class App extends PureComponent<Props, State> {
 					...previousState.focusables,
 					{
 						id,
-						isActive: true
-					}
-				]
+						isActive: true,
+					},
+				],
 			};
 		});
 	};
@@ -300,7 +300,7 @@ export default class App extends PureComponent<Props, State> {
 					: previousState.activeFocusId,
 			focusables: previousState.focusables.filter(focusable => {
 				return focusable.id !== id;
-			})
+			}),
 		}));
 	};
 
@@ -313,9 +313,9 @@ export default class App extends PureComponent<Props, State> {
 
 				return {
 					id,
-					isActive: true
+					isActive: true,
 				};
-			})
+			}),
 		}));
 	};
 
@@ -332,9 +332,9 @@ export default class App extends PureComponent<Props, State> {
 
 				return {
 					id,
-					isActive: false
+					isActive: false,
 				};
-			})
+			}),
 		}));
 	};
 

src/components/AppContext.ts

@@ -12,7 +12,7 @@ export type Props = {
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const AppContext = createContext<Props>({
-	exit() {}
+	exit() {},
 });
 
 AppContext.displayName = 'InternalAppContext';