@remit/ui 0.0.144 → 0.0.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.144",
+  "version": "0.0.145",
   "type": "module",
   "files": [
     "src"

package/src/components/attendee-row.render.test.ts

@@ -54,6 +54,52 @@ describe("AttendeeRow", () => {
 		);
 		assert.doesNotMatch(html, /Organiser/);
 	});
+
+	it("renders exactly what it always did for a caller with nothing to open", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, { attendee: attendees[1] }),
+		);
+		assert.match(html, /^<div class="flex min-h-9 items-center gap-2\.5">/);
+		assert.match(html, /<span class="min-w-0 flex-1">/);
+		assert.doesNotMatch(
+			html,
+			/<button|aria-expanded|w-full|text-left|relative/,
+		);
+	});
+
+	it("becomes a control where a name leads somewhere", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, {
+				attendee: attendees[0],
+				onActivate: () => undefined,
+			}),
+		);
+		assert.match(html, /<button/);
+		assert.match(html, /aria-expanded="false"/);
+	});
+
+	it("says the row is the one standing open", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, {
+				attendee: attendees[0],
+				active: true,
+				onActivate: () => undefined,
+			}),
+		);
+		assert.match(html, /aria-expanded="true"/);
+	});
+
+	it("gives a thumb a row it can hit", () => {
+		const html = renderToString(
+			createElement(AttendeeRow, {
+				attendee: attendees[0],
+				onActivate: () => undefined,
+				touch: true,
+			}),
+		);
+		assert.match(html, /min-h-11/);
+		assert.doesNotMatch(html, /min-h-9/);
+	});
 });
 
 describe("AttendeeList", () => {
@@ -70,4 +116,65 @@ describe("AttendeeList", () => {
 			"",
 		);
 	});
+
+	it("leaves the markup it always had when nothing can be opened", () => {
+		const html = renderToString(createElement(AttendeeList, { attendees }));
+		assert.doesNotMatch(html, /<button|aria-expanded|w-full/);
+		assert.doesNotMatch(html, /<div>/);
+		assert.equal(
+			html.match(/<div class="flex min-h-9 items-center gap-2\.5">/g)?.length,
+			attendees.length,
+		);
+	});
+
+	it("makes every row a control when a guest can be opened", () => {
+		const html = renderToString(
+			createElement(AttendeeList, { attendees, onActivate: () => undefined }),
+		);
+		assert.equal(html.match(/<button/g)?.length, attendees.length);
+	});
+
+	it("puts the context under the guest it is about and under no other", () => {
+		const html = renderToString(
+			createElement(AttendeeList, {
+				attendees,
+				activeEmail: "dana@northwind.example",
+				onActivate: () => undefined,
+				renderContext: (attendee) =>
+					createElement("p", null, `Recent mail · ${attendee.name}`),
+			}),
+		);
+		assert.match(html, /Recent mail · Dana Okafor/);
+		assert.doesNotMatch(html, /Recent mail · Priya Natarajan/);
+	});
+
+	it("names the disclosure the open row controls", () => {
+		const html = renderToString(
+			createElement(AttendeeList, {
+				attendees,
+				activeEmail: "dana@northwind.example",
+				onActivate: () => undefined,
+				renderContext: (attendee) =>
+					createElement("p", null, `Recent mail · ${attendee.name}`),
+			}),
+		);
+		const controls = html.match(/aria-controls="([^"]+)"/g) ?? [];
+		assert.equal(controls.length, 1);
+		const id = /aria-controls="([^"]+)"/.exec(html)?.[1];
+		assert.ok(id);
+		assert.ok(html.includes(`<div id="${id}"`));
+	});
+
+	it("opens no context for a guest who is not on the list", () => {
+		const html = renderToString(
+			createElement(AttendeeList, {
+				attendees,
+				activeEmail: "nobody@northwind.example",
+				onActivate: () => undefined,
+				renderContext: (attendee) =>
+					createElement("p", null, `Recent mail · ${attendee.name}`),
+			}),
+		);
+		assert.doesNotMatch(html, /Recent mail/);
+	});
 });

package/src/components/attendee-row.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { AttendeeList, RsvpBadge } from "./attendee-row.js";
 import type { CalendarAttendee } from "./calendar-types.js";
 
@@ -56,6 +58,52 @@ export const List: Story = {
 	),
 };
 
+/**
+ * The same list where the surface has something to say about the person behind
+ * a row. A row is then a disclosure: it opens under the guest, the same
+ * activation closes it, and what opens is the caller's — the kit places it and
+ * knows nothing else about it.
+ */
+export const WithContext: Story = {
+	render: () => {
+		const [active, setActive] = useState("");
+		return (
+			<div className="max-w-sm rounded-lg border border-line bg-surface p-3">
+				<AttendeeList
+					attendees={attendees}
+					activeEmail={active}
+					onActivate={setActive}
+					renderContext={(attendee) => (
+						<p className="w-64 rounded-lg border border-line bg-surface-raised p-3 text-xs text-fg-muted">
+							{`Everything ${attendee.name} has written lately would go here.`}
+						</p>
+					)}
+				/>
+			</div>
+		);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const guest = canvas.getByRole("button", { name: /Aisha Khan/ });
+
+		await userEvent.click(guest);
+
+		const opened = await waitFor(() =>
+			canvas.getByText(/Everything Aisha Khan has written/),
+		);
+		await expect(guest).toHaveAttribute("aria-expanded", "true");
+		await expect(guest).toHaveAttribute(
+			"aria-controls",
+			opened.parentElement?.id,
+		);
+
+		await userEvent.click(opened);
+
+		await waitFor(() => expect(opened).toBeInTheDocument());
+		await expect(guest).toHaveAttribute("aria-expanded", "true");
+	},
+};
+
 export const EveryReply: Story = {
 	render: () => (
 		<div className="flex gap-4">

package/src/components/attendee-row.tsx

@@ -1,4 +1,5 @@
 import { Check, Clock, Minus, X } from "lucide-react";
+import { Fragment, type ReactNode, useId } from "react";
 import { cn } from "../lib/cn.js";
 import { Avatar } from "./avatar.js";
 import type { CalendarAttendee, RsvpState } from "./calendar-types.js";
@@ -48,12 +49,31 @@ export function RsvpBadge({ rsvp, className }: RsvpBadgeProps) {
 
 export interface AttendeeRowProps {
 	attendee: CalendarAttendee;
+	/** Marks the row whose context is open. */
+	active?: boolean;
+	/**
+	 * Called with the guest to open and with "" to close, so a row that is
+	 * already open closes on the next activation. Absent leaves the row inert,
+	 * as today.
+	 */
+	onActivate?: (email: string) => void;
+	/** The disclosure this row opens, so the button can name what it controls. */
+	contextId?: string;
+	/** A thumb needs a bigger row than a pointer does. */
+	touch?: boolean;
 	className?: string;
 }
 
-export function AttendeeRow({ attendee, className }: AttendeeRowProps) {
-	return (
-		<div className={cn("flex min-h-9 items-center gap-2.5", className)}>
+export function AttendeeRow({
+	attendee,
+	active = false,
+	onActivate,
+	contextId,
+	touch = false,
+	className,
+}: AttendeeRowProps) {
+	const face = (
+		<>
 			<Avatar name={attendee.name} email={attendee.email} size="sm" />
 			<span className="min-w-0 flex-1">
 				<span className="block truncate text-sm text-fg">{attendee.name}</span>
@@ -62,17 +82,74 @@ export function AttendeeRow({ attendee, className }: AttendeeRowProps) {
 				)}
 			</span>
 			<RsvpBadge rsvp={attendee.rsvp} />
-		</div>
+		</>
+	);
+
+	if (!onActivate)
+		return (
+			<div className={cn("flex min-h-9 items-center gap-2.5", className)}>
+				{face}
+			</div>
+		);
+
+	return (
+		<button
+			type="button"
+			aria-expanded={active}
+			aria-controls={active && contextId !== undefined ? contextId : undefined}
+			onClick={() => onActivate(active ? "" : attendee.email)}
+			onKeyDown={(event) => {
+				if (event.key === "Escape") onActivate("");
+			}}
+			onBlur={(event) => {
+				if (!active) return;
+				// Only focus landing on something else is focus leaving the guest.
+				// Clicking the text inside the disclosure focuses nothing at all, and
+				// what the row opened is rendered beside it, so neither closes it.
+				if (event.relatedTarget === null) return;
+				if (event.currentTarget.parentElement?.contains(event.relatedTarget))
+					return;
+				onActivate("");
+			}}
+			className={cn(
+				"flex w-full items-center gap-2.5 rounded-md px-1.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				touch ? "min-h-11" : "min-h-9",
+				active ? "bg-accent-2-soft" : "hover:bg-surface-sunken",
+				className,
+			)}
+		>
+			{face}
+		</button>
 	);
 }
 
 export interface AttendeeListProps {
 	attendees: CalendarAttendee[];
+	/** The guest whose context is open. Empty for none. */
+	activeEmail?: string;
+	/** Called with a guest to open and with "" to close. */
+	onActivate?: (email: string) => void;
+	/** Rendered under the open row. The kit knows nothing about mail. */
+	renderContext?: (attendee: CalendarAttendee) => ReactNode;
+	touch?: boolean;
 	className?: string;
 }
 
-/** The full guest list with a one-line tally above it. */
-export function AttendeeList({ attendees, className }: AttendeeListProps) {
+/**
+ * The full guest list with a one-line tally above it. A row is a control only
+ * where the surface has something to say about the person behind it, and what
+ * it opens is a disclosure under the row rather than a card over the pane: the
+ * same gesture closes it, so do Escape and taking focus elsewhere.
+ */
+export function AttendeeList({
+	attendees,
+	activeEmail = "",
+	onActivate,
+	renderContext,
+	touch = false,
+	className,
+}: AttendeeListProps) {
+	const listId = useId();
 	if (attendees.length === 0) return null;
 	const tally = (["accepted", "tentative", "declined", "noReply"] as const)
 		.map((state) => ({
@@ -88,9 +165,30 @@ export function AttendeeList({ attendees, className }: AttendeeListProps) {
 			<p className="pb-1 text-2xs uppercase tracking-wider text-fg-subtle">
 				{`${attendees.length} guests · ${tally}`}
 			</p>
-			{attendees.map((attendee) => (
-				<AttendeeRow key={attendee.email} attendee={attendee} />
-			))}
+			{attendees.map((attendee, index) => {
+				const active = attendee.email === activeEmail;
+				const contextId = `${listId}-guest-${index}`;
+				const row = (
+					<AttendeeRow
+						attendee={attendee}
+						active={active}
+						onActivate={onActivate}
+						contextId={renderContext ? contextId : undefined}
+						touch={touch}
+					/>
+				);
+				if (!onActivate) return <Fragment key={attendee.email}>{row}</Fragment>;
+				return (
+					<div key={attendee.email}>
+						{row}
+						{active && renderContext && (
+							<div id={contextId} className="py-1">
+								{renderContext(attendee)}
+							</div>
+						)}
+					</div>
+				);
+			})}
 		</div>
 	);
 }

package/src/components/event-detail.render.test.ts

@@ -101,4 +101,26 @@ describe("EventDetail", () => {
 	it("names the calendar and its account", () => {
 		assert.match(render({}), /Northwind/);
 	});
+
+	it("leaves the guest list inert where a name leads nowhere", () => {
+		assert.doesNotMatch(render({}), /aria-expanded/);
+	});
+
+	it("opens the caller's context under the guest it is about", () => {
+		const html = renderToString(
+			createElement(EventDetail, {
+				event,
+				calendar,
+				whenText: "Wednesday 10 June · 10:00 – 11:30",
+				onEdit: () => undefined,
+				onDelete: () => undefined,
+				activeAttendee: "priya@northwind.example",
+				onActivateAttendee: () => undefined,
+				renderAttendeeContext: (attendee) =>
+					createElement("p", null, `Recent mail · ${attendee.name}`),
+			}),
+		);
+		assert.match(html, /aria-expanded="true"/);
+		assert.match(html, /Recent mail · Priya Natarajan/);
+	});
 });

package/src/components/event-detail.tsx

@@ -13,6 +13,7 @@ import { cn } from "../lib/cn.js";
 import { AttendeeList, RsvpBadge } from "./attendee-row.js";
 import { Button } from "./button.js";
 import type {
+	CalendarAttendee,
 	CalendarDescriptor,
 	CalendarEventData,
 } from "./calendar-types.js";
@@ -28,6 +29,14 @@ export interface EventDetailProps {
 	onOpenThread?: () => void;
 	/** Puts the pane back to whatever it shows with nothing selected. */
 	onClose?: () => void;
+	/** The guest whose context is open. Empty for none. */
+	activeAttendee?: string;
+	/** Called with a guest to open and with "" to close. Absent leaves the list inert. */
+	onActivateAttendee?: (email: string) => void;
+	/** Rendered under the open guest. The kit knows nothing about mail. */
+	renderAttendeeContext?: (attendee: CalendarAttendee) => React.ReactNode;
+	/** A thumb needs a bigger row than a pointer does. */
+	touch?: boolean;
 	/**
 	 * `bare` drops the header and the scrolling frame, for a surface that already
 	 * carries both — a full-screen flow whose footer holds the same actions.
@@ -64,6 +73,10 @@ export function EventDetail({
 	onDelete,
 	onOpenThread,
 	onClose,
+	activeAttendee = "",
+	onActivateAttendee,
+	renderAttendeeContext,
+	touch = false,
 	chrome = "header",
 	className,
 }: EventDetailProps) {
@@ -128,7 +141,14 @@ export function EventDetail({
 			)}
 
 			{event.attendees.length > 0 && (
-				<AttendeeList attendees={event.attendees} className="mt-3" />
+				<AttendeeList
+					attendees={event.attendees}
+					activeEmail={activeAttendee}
+					onActivate={onActivateAttendee}
+					renderContext={renderAttendeeContext}
+					touch={touch}
+					className="mt-3"
+				/>
 			)}
 
 			{event.notes !== "" && (