@remit/web-client 0.0.42 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/DailyBrief.tsx

@@ -31,6 +31,7 @@ import {
 	type FilterSheetProps,
 	type FilterSheetSource,
 	KeyboardHintBar,
+	LIST_ROW_ATTRIBUTE,
 	type SearchResult,
 	type ThreadRowData,
 	type ThreadSection,
@@ -140,6 +141,7 @@ const BriefRow = ({
 	return (
 		<button
 			type="button"
+			{...LIST_ROW_ATTRIBUTE}
 			onClick={onClick}
 			className={cn("group w-full", comfortableRowClass({ active }))}
 		>

package/src/components/mail/FlaggedList.tsx

@@ -16,10 +16,12 @@
 import {
 	ComfortableRow,
 	flaggedFilterConfig,
+	LIST_ROW_SELECTOR,
 	MessageListPane,
 	type ThreadRowData,
+	useRovingFocus,
 } from "@remit/ui";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
@@ -54,6 +56,9 @@ export function FlaggedList({
 	const tokenContext = useSearchTokenContext();
 	const isDesktop = useIsDesktop();
 
+	const listRef = useRef<HTMLDivElement>(null);
+	useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
+
 	const [selectedCategory, setSelectedCategory] = useState("all");
 	const [activeFilters, setActiveFilters] = useState<ReadonlySet<string>>(
 		new Set(),
@@ -130,7 +135,7 @@ export function FlaggedList({
 	}, []);
 
 	const listBody = (
-		<div className="flex-1 overflow-y-auto">
+		<div ref={listRef} className="flex-1 overflow-y-auto">
 			<div className="divide-y divide-line">
 				{rows.map((thread) => (
 					<ComfortableRow

package/src/components/mail/OutboxPane.tsx

@@ -22,7 +22,12 @@ import type {
 	RemitImapOutboxMessageResponse,
 	RemitImapOutboxMessageStatus,
 } from "@remit/api-http-client/types.gen.ts";
-import { OutboxRow, ReadingPaneEmpty } from "@remit/ui";
+import {
+	LIST_ROW_SELECTOR,
+	OutboxRow,
+	ReadingPaneEmpty,
+	useRovingFocus,
+} from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import {
@@ -40,6 +45,7 @@ import {
 	useCallback,
 	useContext,
 	useMemo,
+	useRef,
 } from "react";
 import { useCompose } from "@/components/compose/ComposeProvider";
 import { MessageBody } from "@/components/mail/MessageBody";
@@ -434,6 +440,8 @@ function OutboxList() {
 		selectedMessageId,
 		onSelectMessage,
 	} = useOutboxPane();
+	const listRef = useRef<HTMLDivElement>(null);
+	useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
 
 	if (isLoading) {
 		return (
@@ -468,7 +476,7 @@ function OutboxList() {
 					{messages.length} {messages.length === 1 ? "message" : "messages"}
 				</span>
 			</header>
-			<div className="flex-1 overflow-y-auto">
+			<div ref={listRef} className="flex-1 overflow-y-auto">
 				{messages.map((message) => (
 					<OutboxMessageRow
 						key={message.outboxMessageId}
@@ -523,6 +531,8 @@ function OutboxPhone() {
 		selectedMessage,
 		onSelectMessage,
 	} = useOutboxPane();
+	const listRef = useRef<HTMLDivElement>(null);
+	useRovingFocus({ containerRef: listRef, itemSelector: LIST_ROW_SELECTOR });
 
 	if (isLoading) {
 		return (
@@ -563,7 +573,7 @@ function OutboxPhone() {
 					{messages.length} {messages.length === 1 ? "message" : "messages"}
 				</span>
 			</header>
-			<div className="flex-1 overflow-y-auto">
+			<div ref={listRef} className="flex-1 overflow-y-auto">
 				{messages.map((message) => (
 					<OutboxMessageRow
 						key={message.outboxMessageId}