npm - @remit/web-client - Versions diffs - 0.0.116 → 0.0.118 - Mend

@remit/web-client 0.0.116 → 0.0.118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/package.json +1 -1
package/src/components/layout/MailTopBar.tsx +1 -2
package/src/components/mail/MessageToolbar.tsx +1 -1
package/src/components/mail/ThreadListInteraction.tsx +1 -2
package/src/components/self-update/SelfUpdateOverlay.tsx +2 -2
package/src/components/ui/KeyboardShortcutsModal.tsx +2 -3
package/src/hooks/use-system-update.test.ts +179 -92
package/src/hooks/use-system-update.ts +16 -20
package/src/hooks/useTriageLayer.ts +1 -4
package/src/lib/self-update-state.test.ts +24 -65
package/src/lib/self-update-state.ts +66 -165
package/src/hooks/useListCursor.test.ts +0 -273
package/src/hooks/useListCursor.ts +0 -259
package/src/hooks/useTriageKeyboard.ts +0 -108
package/src/lib/keymap-dispatch.test.ts +0 -255
package/src/lib/keymap-dispatch.ts +0 -244
package/src/lib/keymap.test.ts +0 -68
package/src/lib/keymap.ts +0 -210

package/src/hooks/useListCursor.test.ts DELETED Viewed

@@ -1,273 +0,0 @@
-/**
- * The shared list cursor (#149) — the roving keyboard cursor and multi-selection
- * every thread list drives. Mounted against jsdom rather than `renderToString`,
- * since the state only moves in response to real calls across renders.
- */
-import assert from "node:assert/strict";
-import { after, afterEach, before, beforeEach, describe, it } from "node:test";
-import type { JSDOM } from "jsdom";
-import { act, createElement } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { type ListCursor, useListCursor } from "./useListCursor";
-const IDS = ["m1", "m2", "m3", "m4"];
-let dom: JSDOM;
-let container: HTMLElement;
-let root: Root;
-before(async () => {
-	const { JSDOM: JSDOMCtor } = await import("jsdom");
-	dom = new JSDOMCtor(
-		"<!doctype html><html><body><div id=root></div></body></html>",
-		{ url: "http://localhost/", pretendToBeVisual: true },
-	);
-	globalThis.window = dom.window as unknown as typeof globalThis.window;
-	globalThis.document = dom.window.document;
-	globalThis.HTMLElement = dom.window.HTMLElement;
-	globalThis.Element = dom.window.Element;
-	Object.defineProperty(globalThis, "navigator", {
-		value: dom.window.navigator,
-		configurable: true,
-	});
-	(
-		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
-	).IS_REACT_ACT_ENVIRONMENT = true;
-});
-after(() => dom.window.close());
-beforeEach(() => {
-	container = dom.window.document.getElementById(
-		"root",
-	) as unknown as HTMLElement;
-	container.innerHTML = "";
-	root = createRoot(container);
-});
-afterEach(() => {
-	act(() => root.unmount());
-});
-/**
- * Mount the hook and hand back a live handle. Every read goes through
- * `current()` so a test never asserts against a stale render.
- */
-function mountCursor(options: {
-	orderedIds?: string[];
-	isDesktop?: boolean;
-	initialFocusedId?: string;
-}): () => ListCursor {
-	let latest: ListCursor | undefined;
-	const Probe = () => {
-		latest = useListCursor({
-			orderedIds: options.orderedIds ?? IDS,
-			isDesktop: options.isDesktop ?? true,
-			initialFocusedId: options.initialFocusedId,
-		});
-		return null;
-	};
-	act(() => root.render(createElement(Probe)));
-	return () => {
-		if (!latest) throw new Error("cursor not mounted");
-		return latest;
-	};
-}
-describe("useListCursor — the roving cursor", () => {
-	it("starts on the open thread and walks the list with next/previous", () => {
-		const cursor = mountCursor({ initialFocusedId: "m2" });
-		assert.equal(cursor().focusedMessageId, "m2");
-		act(() => cursor().focusNext());
-		assert.equal(cursor().focusedMessageId, "m3");
-		act(() => cursor().focusPrevious());
-		assert.equal(cursor().focusedMessageId, "m2");
-	});
-	it("starts at the top when nothing is focused yet", () => {
-		const cursor = mountCursor({});
-		assert.equal(cursor().focusedMessageId, undefined);
-		act(() => cursor().focusNext());
-		assert.equal(cursor().focusedMessageId, "m1");
-	});
-	it("clamps at both ends rather than wrapping", () => {
-		const cursor = mountCursor({ initialFocusedId: "m1" });
-		act(() => cursor().focusPrevious());
-		assert.equal(cursor().focusedMessageId, "m1");
-		act(() => cursor().focusLast());
-		assert.equal(cursor().focusedMessageId, "m4");
-		act(() => cursor().focusNext());
-		assert.equal(cursor().focusedMessageId, "m4");
-		act(() => cursor().focusFirst());
-		assert.equal(cursor().focusedMessageId, "m1");
-	});
-	it("moves nothing when the list is empty", () => {
-		const cursor = mountCursor({ orderedIds: [] });
-		act(() => cursor().focusNext());
-		act(() => cursor().focusLast());
-		assert.equal(cursor().focusedMessageId, undefined);
-	});
-	it("asks for DOM focus on its own moves, not on a pointer move", () => {
-		const cursor = mountCursor({ initialFocusedId: "m1" });
-		act(() => cursor().focusNext());
-		assert.equal(cursor().pendingDomFocusRef.current, "m2");
-		assert.equal(cursor().cursorMovedByPointerRef.current, false);
-	});
-});
-describe("useListCursor — selection", () => {
-	it("x toggles the row under the cursor", () => {
-		const cursor = mountCursor({ initialFocusedId: "m2" });
-		act(() => cursor().toggleFocusedSelection());
-		assert.deepEqual([...cursor().selection.selectedIds], ["m2"]);
-		act(() => cursor().toggleFocusedSelection());
-		assert.equal(cursor().selection.selectedCount, 0);
-	});
-	it("shift-extend moves the cursor and grows the range from the anchor", () => {
-		const cursor = mountCursor({ initialFocusedId: "m2" });
-		// The first press has no anchor yet, so the row it lands on becomes both
-		// the anchor and the whole range.
-		act(() => cursor().extendRangeDown());
-		assert.deepEqual([...cursor().selection.selectedIds], ["m3"]);
-		assert.equal(cursor().focusedMessageId, "m3");
-		assert.equal(cursor().selection.anchorId, "m3");
-		// Consecutive presses extend from that anchor.
-		act(() => cursor().extendRangeDown());
-		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m3", "m4"]);
-		assert.equal(cursor().focusedMessageId, "m4");
-		assert.equal(cursor().selection.anchorId, "m3");
-	});
-	it("shift-extend upward ranges back through the anchor", () => {
-		const cursor = mountCursor({ initialFocusedId: "m4" });
-		act(() => cursor().extendRangeUp());
-		assert.deepEqual([...cursor().selection.selectedIds], ["m3"]);
-		act(() => cursor().extendRangeUp());
-		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m2", "m3"]);
-		assert.equal(cursor().focusedMessageId, "m2");
-	});
-	it("at the last row, extending takes that row and the cursor stays", () => {
-		const cursor = mountCursor({ initialFocusedId: "m4" });
-		act(() => cursor().extendRangeDown());
-		assert.deepEqual([...cursor().selection.selectedIds], ["m4"]);
-		assert.equal(cursor().focusedMessageId, "m4");
-	});
-	it("select-all takes every row, and exiting clears it", () => {
-		const cursor = mountCursor({});
-		act(() => cursor().selectAllLoaded());
-		assert.equal(cursor().selection.selectedCount, IDS.length);
-		act(() => cursor().exitSelection());
-		assert.equal(cursor().selection.selectedCount, 0);
-	});
-	it("runs the caller's teardown before clearing", () => {
-		const order: string[] = [];
-		let latest: ListCursor | undefined;
-		const Probe = () => {
-			latest = useListCursor({
-				orderedIds: IDS,
-				isDesktop: true,
-				onExitSelection: () => order.push("teardown"),
-			});
-			return null;
-		};
-		act(() => root.render(createElement(Probe)));
-		act(() => latest?.selectAllLoaded());
-		act(() => latest?.exitSelection());
-		assert.deepEqual(order, ["teardown"]);
-		assert.equal(latest?.selection.selectedCount, 0);
-	});
-});
-describe("useListCursor — mouse selection semantics", () => {
-	it("shift-click ranges, cmd-click toggles, and both consume the click", () => {
-		const cursor = mountCursor({ initialFocusedId: "m1" });
-		let handled = false;
-		act(() => {
-			handled = cursor().handleRowSelect("m3", {
-				shiftKey: true,
-				metaKey: false,
-				ctrlKey: false,
-			});
-		});
-		assert.equal(handled, true);
-		assert.deepEqual([...cursor().selection.selectedIds].sort(), [
-			"m1",
-			"m2",
-			"m3",
-		]);
-		act(() => {
-			handled = cursor().handleRowSelect("m4", {
-				shiftKey: false,
-				metaKey: true,
-				ctrlKey: false,
-			});
-		});
-		assert.equal(handled, true);
-		assert.ok(cursor().selection.selectedIds.has("m4"));
-	});
-	it("a plain click collapses the selection and lets the row open", () => {
-		const cursor = mountCursor({ initialFocusedId: "m1" });
-		act(() => cursor().selectAllLoaded());
-		let handled = true;
-		act(() => {
-			handled = cursor().handleRowSelect("m2", {
-				shiftKey: false,
-				metaKey: false,
-				ctrlKey: false,
-			});
-		});
-		assert.equal(handled, false, "navigation must proceed on a plain click");
-		assert.equal(cursor().selection.selectedCount, 0);
-	});
-});
-describe("useListCursor — the device branch", () => {
-	it("is not in multi-select mode on desktop, whatever is selected", () => {
-		const cursor = mountCursor({ isDesktop: true });
-		act(() => cursor().selectAllLoaded());
-		assert.equal(cursor().isMultiSelectMode, false);
-	});
-	it("enters multi-select mode on touch as soon as something is selected", () => {
-		const cursor = mountCursor({ isDesktop: false });
-		assert.equal(cursor().isMultiSelectMode, false);
-		act(() => cursor().selection.select("m2"));
-		assert.equal(cursor().isMultiSelectMode, true);
-	});
-	it("on touch, in multi-select mode, next/previous toggle instead of moving", () => {
-		const cursor = mountCursor({ isDesktop: false, initialFocusedId: "m1" });
-		act(() => cursor().selection.select("m1"));
-		act(() => cursor().focusNext());
-		assert.equal(
-			cursor().focusedMessageId,
-			"m1",
-			"the cursor stays put in multi-select mode",
-		);
-		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m1", "m2"]);
-	});
-});

package/src/hooks/useListCursor.ts DELETED Viewed

@@ -1,259 +0,0 @@
-/**
- * useListCursor — the roving keyboard cursor and multi-selection of a thread
- * list, independent of how the list renders.
- *
- * The mailbox list, the daily brief and Flagged all need it. It used to exist
- * only inside `MessageList`, so the brief and Flagged had no cursor and no
- * selection at all (#149). Everything here is list-shape agnostic: it works off
- * the ordered message ids, so a virtualized flat list and a sectioned brief
- * drive the same state.
- *
- * DOM concerns stay with the caller. `pendingDomFocusRef` names the row that
- * should take real browser focus once it is rendered, and
- * `cursorMovedByPointerRef` records whether the last move came from a click, so
- * a list that scrolls its cursor into view can skip doing so for pointer moves.
- */
-import {
-	deriveIsMultiSelectMode,
-	nextFocusId,
-	rowSelectIntent,
-	type SelectionModifiers,
-	useSelection,
-} from "@remit/ui";
-import { useCallback, useMemo, useRef, useState } from "react";
-interface UseListCursorOptions {
-	/** Message ids in display order. */
-	orderedIds: string[];
-	isDesktop: boolean;
-	/** Seeds the cursor — normally the open thread. */
-	initialFocusedId?: string;
-	/** Extra teardown run before the selection is cleared. */
-	onExitSelection?: () => void;
-}
-export interface ListCursor {
-	focusedMessageId: string | undefined;
-	setFocusedMessageId: (id: string | undefined) => void;
-	/**
-	 * The row a keyboard command last moved the cursor onto, and `undefined`
-	 * whenever the cursor last moved some other way. Drives the reading pane
-	 * following the cursor (`useFollowFocusOpen`) — a click and Enter open on
-	 * their own, so only a bare cursor move is left to follow.
-	 */
-	keyboardFocusedMessageId: string | undefined;
-	focusIndex: number;
-	pendingDomFocusRef: React.RefObject<string | null>;
-	cursorMovedByPointerRef: React.RefObject<boolean>;
-	selection: ReturnType<typeof useSelection>;
-	isMultiSelectMode: boolean;
-	exitSelection: () => void;
-	moveFocusToIndex: (index: number) => void;
-	focusNext: () => void;
-	focusPrevious: () => void;
-	focusFirst: () => void;
-	focusLast: () => void;
-	toggleFocusedSelection: () => void;
-	extendRangeUp: () => void;
-	extendRangeDown: () => void;
-	selectAllLoaded: () => void;
-	/**
-	 * Desktop mouse selection semantics (Apple Mail / Gmail model). Returns true
-	 * when selection handled the click — the caller must then suppress the
-	 * row's navigation; false for a plain click.
-	 */
-	handleRowSelect: (
-		messageId: string,
-		modifiers: SelectionModifiers,
-	) => boolean;
-}
-export const useListCursor = ({
-	orderedIds,
-	isDesktop,
-	initialFocusedId,
-	onExitSelection,
-}: UseListCursorOptions): ListCursor => {
-	// The keyboard "where am I" pointer, distinct from the open thread
-	// (`selectedMessageId` in the URL). j/k move this cursor; Enter opens the
-	// focused row, and on desktop the reading pane follows the cursor of its own
-	// accord (`useFollowFocusOpen`). It seeds from the open thread so opening a
-	// message also focuses its row.
-	const [focusedMessageId, setFocusedId] = useState<string | undefined>(
-		initialFocusedId,
-	);
-	// Which of those moves came from a keyboard command, so the reading pane can
-	// follow the cursor without following a click that already opened its own row.
-	const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
-		string | undefined
-	>();
-	// Every non-keyboard move — a click, Tab, a thread opening, a refetch snapping
-	// the cursor to a survivor — drops the keyboard mark, so nothing follows it.
-	// A row taking DOM focus as the *consequence* of a keyboard move arrives here
-	// with the id that move just set; keeping the mark in that case is what stops
-	// the browser's own focus event from cancelling the load the move started.
-	const setFocusedMessageId = useCallback((id: string | undefined) => {
-		setKeyboardFocusedMessageId((current) =>
-			current === id ? current : undefined,
-		);
-		setFocusedId(id);
-	}, []);
-	const selection = useSelection();
-	const {
-		selectedCount,
-		toggle: toggleCheck,
-		clearSelection,
-		selectRange,
-		setAnchor,
-		selectAll,
-	} = selection;
-	// The selection count is the only source of truth for whether the list is in
-	// multi-select mode (#115). A separate flag needs an effect to reconcile it
-	// back to the count, and across that render the two disagree.
-	const isMultiSelectMode = deriveIsMultiSelectMode(selectedCount, isDesktop);
-	// Set when a keyboard command moves the cursor. Real DOM focus then follows
-	// it onto the row once rendered, so the browser's own focus — and therefore
-	// Tab, Shift+Tab and the focus ring — agree with what the list highlights
-	// (#43).
-	const pendingDomFocusRef = useRef<string | null>(null);
-	// Whether the cursor's last move came from a row taking DOM focus (a click)
-	// rather than a command. Scrolling for a click moves the row out from under
-	// the pointer between mousedown and click, so the click lands on empty space
-	// and nothing opens (#85).
-	const cursorMovedByPointerRef = useRef(false);
-	const exitSelection = useCallback(() => {
-		onExitSelection?.();
-		clearSelection();
-	}, [clearSelection, onExitSelection]);
-	const focusIndex = useMemo(
-		() => (focusedMessageId ? orderedIds.indexOf(focusedMessageId) : -1),
-		[orderedIds, focusedMessageId],
-	);
-	// Move the cursor by index. In multi-select mode (mobile) j/k toggle
-	// selection rather than moving a cursor.
-	const moveFocusToIndex = useCallback(
-		(index: number) => {
-			if (index < 0 || index >= orderedIds.length) return;
-			const messageId = orderedIds[index];
-			if (isMultiSelectMode) {
-				toggleCheck(messageId);
-				return;
-			}
-			pendingDomFocusRef.current = messageId;
-			cursorMovedByPointerRef.current = false;
-			setKeyboardFocusedMessageId(messageId);
-			setFocusedId(messageId);
-		},
-		[orderedIds, isMultiSelectMode, toggleCheck],
-	);
-	const focusNext = useCallback(() => {
-		if (orderedIds.length === 0) return;
-		moveFocusToIndex(
-			focusIndex < 0 ? 0 : Math.min(focusIndex + 1, orderedIds.length - 1),
-		);
-	}, [orderedIds.length, focusIndex, moveFocusToIndex]);
-	const focusPrevious = useCallback(() => {
-		if (orderedIds.length === 0) return;
-		moveFocusToIndex(focusIndex <= 0 ? 0 : focusIndex - 1);
-	}, [orderedIds.length, focusIndex, moveFocusToIndex]);
-	const focusFirst = useCallback(() => moveFocusToIndex(0), [moveFocusToIndex]);
-	const focusLast = useCallback(
-		() => moveFocusToIndex(orderedIds.length - 1),
-		[moveFocusToIndex, orderedIds.length],
-	);
-	const toggleFocusedSelection = useCallback(() => {
-		if (focusedMessageId) toggleCheck(focusedMessageId);
-	}, [focusedMessageId, toggleCheck]);
-	const handleRowSelect = useCallback(
-		(messageId: string, modifiers: SelectionModifiers): boolean => {
-			const intent = rowSelectIntent(modifiers);
-			if (intent === "range") {
-				// The open/focused row is the fallback origin when the stored anchor
-				// has been filtered or searched out of the visible list, so the first
-				// shift-click still ranges from where the user is (#142, #144).
-				selectRange(orderedIds, messageId, focusedMessageId);
-				return true;
-			}
-			if (intent === "toggle") {
-				toggleCheck(messageId);
-				return true;
-			}
-			// Plain click: collapse any multi-selection and let navigation proceed.
-			// The clicked row becomes the next anchor for a subsequent shift-click,
-			// but is NOT added to the checkbox set (no toolbar on a plain open).
-			exitSelection();
-			setAnchor(messageId);
-			return false;
-		},
-		[
-			orderedIds,
-			focusedMessageId,
-			selectRange,
-			toggleCheck,
-			exitSelection,
-			setAnchor,
-		],
-	);
-	// Shift+arrow moves the cursor one row and adds the row it lands on to the
-	// range — the keyboard equivalent of shift-click. The first press seeds the
-	// anchor on that row; consecutive presses extend from it. The range only
-	// grows, so reversing direction ranges back through the anchor rather than
-	// giving rows up.
-	const extendRange = useCallback(
-		(direction: -1 | 1) => {
-			const target = nextFocusId(orderedIds, focusedMessageId, direction);
-			if (target === undefined) return;
-			selectRange(orderedIds, target);
-			pendingDomFocusRef.current = target;
-			cursorMovedByPointerRef.current = false;
-			// Shift+arrow is building a range, not reading. The reading pane stays on
-			// whatever is open rather than chasing the growing edge of the selection.
-			setKeyboardFocusedMessageId(undefined);
-			setFocusedId(target);
-		},
-		[orderedIds, focusedMessageId, selectRange],
-	);
-	const extendRangeUp = useCallback(() => extendRange(-1), [extendRange]);
-	const extendRangeDown = useCallback(() => extendRange(1), [extendRange]);
-	const selectAllLoaded = useCallback(() => {
-		if (orderedIds.length > 0) selectAll(orderedIds);
-	}, [orderedIds, selectAll]);
-	return {
-		focusedMessageId,
-		setFocusedMessageId,
-		keyboardFocusedMessageId,
-		focusIndex,
-		pendingDomFocusRef,
-		cursorMovedByPointerRef,
-		selection,
-		isMultiSelectMode,
-		exitSelection,
-		moveFocusToIndex,
-		focusNext,
-		focusPrevious,
-		focusFirst,
-		focusLast,
-		toggleFocusedSelection,
-		extendRangeUp,
-		extendRangeDown,
-		selectAllLoaded,
-		handleRowSelect,
-	};
-};

package/src/hooks/useTriageKeyboard.ts DELETED Viewed

@@ -1,108 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { TriageAction } from "@/lib/keymap";
-import {
-	dispatchKey,
-	isControlTarget,
-	isEditableTarget,
-	type SequencePrefix,
-} from "@/lib/keymap-dispatch";
-/** Map of action → handler. Omitted actions are inert (no-op). */
-export type TriageHandlers = Partial<Record<TriageAction, () => void>>;
-interface UseTriageKeyboardOptions {
-	handlers: TriageHandlers;
-	/** Disable the whole layer (e.g. a blocking modal owns the keyboard). */
-	enabled?: boolean;
-	/**
-	 * Reset window (ms) for a pending `g …` sequence prefix. After this with no
-	 * second key, the prefix is dropped. ~1s per the spec.
-	 */
-	sequenceTimeoutMs?: number;
-}
-/**
- * Global keydown handler for the triage layer's VERBS (#429). Routes keystrokes
- * through the pure {@link dispatchKey} core to the supplied handler table,
- * staying fully inert while focus is in an editable surface (input/textarea/CE;
- * even Esc is left to the focused field's own handler) and carrying the `g …`
- * go-to sequence prefix across keystrokes with a timeout.
- *
- * List navigation and selection route through here and nowhere else: the
- * message list publishes its commands upward (see `MessageListCommands`) and
- * the route wires them into the handler table, so `@/lib/keymap` is the source
- * of truth for both the displayed bindings and the routed ones. The list used
- * to run a second window listener claiming the same keys, which is what made
- * Enter unusable on every focused button in the app (#43).
- *
- * Other window-level keydown listeners still exist for keys this layer does not
- * own — `?` at the mail layout, `/` in SearchBar, Esc in the compose and
- * conversation views. They bind disjoint keys; only the list's competing
- * listener was removed.
- *
- * Per-action targeting (focused row vs selection) and the actual mutations live
- * in the handlers the caller passes in — this hook only dispatches.
- */
-export function useTriageKeyboard({
-	handlers,
-	enabled = true,
-	sequenceTimeoutMs = 1000,
-}: UseTriageKeyboardOptions): void {
-	// Latest handlers without re-subscribing the listener every render.
-	const handlersRef = useRef(handlers);
-	handlersRef.current = handlers;
-	const prefixRef = useRef<SequencePrefix>(null);
-	const prefixTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-	useEffect(() => {
-		if (!enabled) return;
-		const clearPrefixTimer = () => {
-			if (prefixTimerRef.current !== null) {
-				clearTimeout(prefixTimerRef.current);
-				prefixTimerRef.current = null;
-			}
-		};
-		const onKeyDown = (event: KeyboardEvent) => {
-			const result = dispatchKey(
-				{
-					key: event.key,
-					shiftKey: event.shiftKey,
-					metaKey: event.metaKey,
-					ctrlKey: event.ctrlKey,
-					altKey: event.altKey,
-					inEditable: isEditableTarget(event.target),
-					onControl: isControlTarget(event.target),
-				},
-				prefixRef.current,
-			);
-			// Update the pending prefix and (re)arm / clear its reset timer.
-			clearPrefixTimer();
-			prefixRef.current = result.nextPrefix;
-			if (result.nextPrefix !== null) {
-				prefixTimerRef.current = setTimeout(() => {
-					prefixRef.current = null;
-					prefixTimerRef.current = null;
-				}, sequenceTimeoutMs);
-			}
-			if (result.action === null) return;
-			const handler = handlersRef.current[result.action];
-			if (!handler) return;
-			if (result.preventDefault) event.preventDefault();
-			handler();
-		};
-		window.addEventListener("keydown", onKeyDown);
-		return () => {
-			window.removeEventListener("keydown", onKeyDown);
-			clearPrefixTimer();
-			prefixRef.current = null;
-		};
-	}, [enabled, sequenceTimeoutMs]);
-}