Add activeId property to useFocusManager hook

readme.md

@@ -1962,6 +1962,22 @@ const Example = () => {
 };
 ```
 
+#### activeId
+
+Type: `string | undefined`
+
+[`id`](#id) of the currently focused component. If there's no active focus on component right now, the value is `undefined`.
+
+```js
+import {useFocusManager} from 'ink';
+
+const Example = () => {
+	const {activeId} = useFocusManager();
+
+	return <Text>Focused component ID: {activeId ?? "-"}</Text>;
+};
+```
+
 ### useIsScreenReaderEnabled()
 
 Returns whether a screen reader is enabled. This is useful when you want to render different output for screen readers.

src/hooks/use-focus-manager.ts

@@ -26,6 +26,11 @@ type Output = {
 	Switch focus to the element with provided `id`. If there's no element with that `id`, focus will be given to the first focusable component.
 	*/
 	focus: Props['focus'];
+
+	/**
+	Contains the `id` of the currently focused component. If no component is focused, the value will be `undefined`.
+	*/
+	activeId: Props['activeId'];
 };
 
 /**
@@ -40,6 +45,7 @@ const useFocusManager = (): Output => {
 		focusNext: focusContext.focusNext,
 		focusPrevious: focusContext.focusPrevious,
 		focus: focusContext.focus,
+		activeId: focusContext.activeId,
 	};
 };
 

test/focus.tsx

@@ -508,3 +508,30 @@ test('skips disabled elements when wrapping around from the front', async t => {
 		['First', 'Second ✔', 'Third'].join('\n'),
 	);
 });
+
+test('the focus helper reports whichever id currently holds focus', async t => {
+	const stdout = createStdout();
+	const stdin = createStdin();
+
+	let activeId: string | undefined;
+
+	function TestActiveId() {
+		const focusManager = useFocusManager();
+		activeId = focusManager.activeId;
+
+		return <Test autoFocus />;
+	}
+
+	render(<TestActiveId />, {
+		stdout,
+		stdin,
+		debug: true,
+	});
+
+	await delay(100);
+	t.not(activeId, undefined);
+
+	emitReadable(stdin, '\u001B');
+	await delay(100);
+	t.is(activeId, undefined);
+});