@remit/ui 0.0.110 → 0.0.112

package/package.json

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

package/src/components/filter-rule-editor.stories.tsx

@@ -371,9 +371,18 @@ const openDestinationTree = async (canvasElement: HTMLElement) => {
 	await tick();
 };
 
-/** Opens a folder in the tree; tapping it both picks it and reveals its children. */
+/**
+ * Opens a folder in the tree; tapping it both picks it and reveals its
+ * children. A tap toggles, and the branch holding the rule's current
+ * destination is already open when the tree appears, so a folder that is open
+ * is left alone rather than tapped shut.
+ */
 const openFolder = async (canvasElement: HTMLElement, label: string) => {
-	clickAriaLabel(canvasElement, `Move to ${label}`);
+	const row = canvasElement.querySelector<HTMLElement>(
+		`[aria-label="Move to ${label}"]`,
+	);
+	if (!row) throw new Error(`no control labelled "Move to ${label}"`);
+	if (row.getAttribute("aria-expanded") !== "true") row.click();
 	await tick();
 };
 

package/src/components/reading-pane.stories.tsx

@@ -203,6 +203,27 @@ export const ExpandedRowComposed: StoryObj<typeof ExpandedMessage> = {
 	),
 };
 
+/** The chevron beside the sender is the disclosure control, not a picture of
+ *  one: press it to put the message away and press the row to bring it back.
+ *  Reclaiming the space a long message takes is what a reader aims at it for. */
+export const RowDisclosure: StoryObj<typeof ExpandedMessage> = {
+	render: function RowDisclosureRender() {
+		const [expanded, setExpanded] = useState(true);
+		return (
+			<div className="max-w-3xl border border-line">
+				{expanded ? (
+					<ExpandedMessage
+						message={row}
+						onHeaderClick={() => setExpanded(false)}
+					/>
+				) : (
+					<CollapsedMessage message={row} onClick={() => setExpanded(true)} />
+				)}
+			</div>
+		);
+	},
+};
+
 /** The app owns the fetch and hands the row its state back; so does this. */
 const ThreadAttachments = () => {
 	const [rows, setRows] = useState<AttachmentItem[]>([

package/src/components/reading-pane.tsx

@@ -184,7 +184,23 @@ export function ExpandedMessage({
 			)}
 		>
 			<div className="flex items-start gap-3">
-				<ChevronDown className="mt-1 size-3.5 shrink-0 text-fg-subtle" />
+				{/* The chevron is the disclosure control, not a picture of one: it is
+				    what a reader aims at to put a message away, so it carries the
+				    collapse itself rather than sitting beside the sender block that
+				    does. */}
+				{onHeaderClick ? (
+					<button
+						type="button"
+						onClick={onHeaderClick}
+						aria-expanded={true}
+						aria-label="Collapse message"
+						className="mt-1 shrink-0 text-fg-subtle transition-colors hover:text-fg"
+					>
+						<ChevronDown className="size-3.5" />
+					</button>
+				) : (
+					<ChevronDown className="mt-1 size-3.5 shrink-0 text-fg-subtle" />
+				)}
 				<Avatar name={message.fromName} email={message.fromEmail} size="md" />
 				<div className="min-w-0 flex-1">
 					{onHeaderClick ? (

package/src/components/rich-text-editor.tsx

@@ -444,13 +444,23 @@ const AutoFocus = ({ caret }: { caret?: ComposeCaret }) => {
 
 	useEffect(() => {
 		if (!caret) return;
-		const timer = setTimeout(
-			() =>
-				editor.focus(undefined, {
-					defaultSelection: caret === "start" ? "rootStart" : "rootEnd",
-				}),
-			0,
-		);
+		// Seeding the document leaves a selection behind at the end of what was
+		// inserted, and `defaultSelection` only applies where there is none — so
+		// the caret is placed here rather than left to `focus`, which would open a
+		// new message below the signature instead of above it.
+		const timer = setTimeout(() => {
+			editor.update(
+				() => {
+					const root = $getRoot();
+					if (caret === "start") {
+						root.selectStart();
+						return;
+					}
+					root.selectEnd();
+				},
+				{ onUpdate: () => editor.focus() },
+			);
+		}, 0);
 		return () => clearTimeout(timer);
 	}, [editor, caret]);