@remit/web-client 0.0.35 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "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/MessageList.tsx

@@ -423,7 +423,10 @@ export const MessageList = ({
 	const handleRowSelect = useCallback(
 		(messageId: string, modifiers: SelectionModifiers): boolean => {
 			if (modifiers.shiftKey) {
-				selectRange(orderedIds, messageId);
+				// 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 (modifiers.metaKey || modifiers.ctrlKey) {
@@ -438,7 +441,14 @@ export const MessageList = ({
 			setAnchor(messageId);
 			return false;
 		},
-		[orderedIds, selectRange, toggleCheck, clearSelection, setAnchor],
+		[
+			orderedIds,
+			focusedMessageId,
+			selectRange,
+			toggleCheck,
+			clearSelection,
+			setAnchor,
+		],
 	);
 
 	// Open the delete confirmation for an explicit set of ids. All delete

package/src/hooks/useSelection.test.ts

@@ -4,10 +4,43 @@ import {
 	computeRange,
 	intersectSelectedIds,
 	nextFocusId,
+	resolveRangeAnchor,
 } from "./useSelection.js";
 
 const ids = ["a", "b", "c", "d", "e"];
 
+// Mirrors the hook's `selectRange` state transition (anchor + selection) using
+// the same pure helpers it runs, so the mouse/keyboard sequences below exercise
+// the real logic without an interactive DOM. Returns the next {selected, anchor}.
+const applyRange = (
+	state: { selected: Set<string>; anchor: string | undefined },
+	orderedIds: string[],
+	targetId: string,
+	fallbackAnchor?: string,
+): { selected: Set<string>; anchor: string | undefined } => {
+	const anchor = resolveRangeAnchor(
+		orderedIds,
+		state.anchor,
+		fallbackAnchor,
+		targetId,
+	);
+	const range = computeRange(orderedIds, anchor, targetId);
+	const selected = new Set(state.selected);
+	for (const id of range) selected.add(id);
+	return { selected, anchor };
+};
+
+// Mirrors a cmd/ctrl-click: toggle membership and re-anchor on the clicked row.
+const applyToggle = (
+	state: { selected: Set<string>; anchor: string | undefined },
+	targetId: string,
+): { selected: Set<string>; anchor: string | undefined } => {
+	const selected = new Set(state.selected);
+	if (selected.has(targetId)) selected.delete(targetId);
+	else selected.add(targetId);
+	return { selected, anchor: targetId };
+};
+
 describe("computeRange", () => {
 	test("forward range: anchor above target selects the inclusive slice", () => {
 		assert.deepStrictEqual(computeRange(ids, "b", "d"), ["b", "c", "d"]);
@@ -44,6 +77,81 @@ describe("computeRange", () => {
 	});
 });
 
+describe("resolveRangeAnchor", () => {
+	test("keeps a still-visible stored anchor so consecutive shift-clicks extend from it", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "b", undefined, "d"), "b");
+	});
+
+	test("a stored anchor no longer visible falls back to the open/focused row", () => {
+		// The stored anchor "z" was filtered/searched out of the visible list; the
+		// open row "b" is still visible, so the range anchors there.
+		assert.strictEqual(resolveRangeAnchor(ids, "z", "b", "d"), "b");
+	});
+
+	test("with neither a visible stored anchor nor a visible fallback, the target anchors itself", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "z", "y", "d"), "d");
+	});
+
+	test("no stored anchor and no fallback selects just the target", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, undefined, undefined, "c"), "c");
+	});
+
+	test("a stored anchor beats the fallback while it stays visible", () => {
+		assert.strictEqual(resolveRangeAnchor(ids, "a", "c", "e"), "a");
+	});
+});
+
+describe("shift-click range over a filtered/search-narrowed list (#142, #144)", () => {
+	test("shift-click range with an active filter builds the range within the visible rows", () => {
+		// Full inbox is a..h; the "Automated" filter leaves only these rows.
+		const filtered = ["b", "d", "f", "g"];
+		// The open row "d" is visible; nothing selected yet, no stored anchor.
+		let state = {
+			selected: new Set<string>(),
+			anchor: undefined as string | undefined,
+		};
+		// Shift-click "g": ranges from the open/focused row "d" to "g".
+		state = applyRange(state, filtered, "g", "d");
+		assert.deepStrictEqual([...state.selected], ["d", "f", "g"]);
+		assert.strictEqual(state.anchor, "d");
+	});
+
+	test("range where the anchor left the visible set re-anchors instead of no-oping", () => {
+		const filtered = ["b", "d", "f", "g"];
+		// Stored anchor "a" was selected before the filter narrowed the list and is
+		// no longer visible; there is no open/focused fallback row.
+		let state = {
+			selected: new Set<string>(),
+			anchor: "a" as string | undefined,
+		};
+		// First shift-click adopts the clicked row as the new visible anchor.
+		state = applyRange(state, filtered, "f");
+		assert.deepStrictEqual([...state.selected], ["f"]);
+		assert.strictEqual(state.anchor, "f");
+		// Second shift-click now builds a real range from that adopted anchor.
+		state = applyRange(state, filtered, "b");
+		assert.deepStrictEqual([...state.selected].sort(), ["b", "d", "f"]);
+		assert.strictEqual(state.anchor, "f");
+	});
+
+	test("multi-select across a search-results list: cmd-click then shift-click", () => {
+		// Search "npm" yields these results; the inbox anchor is gone from this set.
+		const results = ["m1", "m2", "m3", "m4", "m5"];
+		let state = {
+			selected: new Set<string>(),
+			anchor: "inbox-row" as string | undefined,
+		};
+		// Cmd-click "m2": toggles it in and re-anchors on it (a visible row).
+		state = applyToggle(state, "m2");
+		assert.deepStrictEqual([...state.selected], ["m2"]);
+		assert.strictEqual(state.anchor, "m2");
+		// Shift-click "m4": ranges from the cmd-clicked anchor across the results.
+		state = applyRange(state, results, "m4");
+		assert.deepStrictEqual([...state.selected].sort(), ["m2", "m3", "m4"]);
+		assert.strictEqual(state.anchor, "m2");
+	});
+});
+
 describe("nextFocusId", () => {
 	test("moves down one row", () => {
 		assert.strictEqual(nextFocusId(ids, "b", 1), "c");

package/src/hooks/useSelection.ts

@@ -37,11 +37,19 @@ interface UseSelectionReturn {
 	/** Toggle selection for all items */
 	toggleAll: (ids: string[]) => void;
 	/**
-	 * Add the contiguous range of ids from the current anchor to `targetId`
-	 * (inclusive) to the selection, using `orderedIds` for display order. If
-	 * no anchor exists, selects only `targetId` and makes it the anchor.
+	 * Add the contiguous range of ids from the anchor to `targetId` (inclusive)
+	 * to the selection, using `orderedIds` for display order. The anchor is the
+	 * stored one when it is still visible in `orderedIds`; otherwise
+	 * `fallbackAnchor` when that is visible (the open/focused row); otherwise
+	 * `targetId`. Whatever anchors the range becomes the new stored anchor, so a
+	 * filtered or search-narrowed list can still build a range within what's
+	 * visible (#142, #144).
 	 */
-	selectRange: (orderedIds: string[], targetId: string) => void;
+	selectRange: (
+		orderedIds: string[],
+		targetId: string,
+		fallbackAnchor?: string,
+	) => void;
 	/**
 	 * Set the range anchor without changing the selection set. Used by a plain
 	 * click that navigates but should seed the anchor for a later shift-click.
@@ -85,6 +93,34 @@ export const computeRange = (
 	return orderedIds.slice(start, end + 1);
 };
 
+/**
+ * Resolve which id a shift-range selection anchors from, given the stored
+ * anchor and the ids currently visible (`orderedIds`). Pure so the
+ * filtered/search anchor behavior can be unit-tested without a DOM.
+ *
+ * - The stored anchor wins while it is still visible — consecutive shift-clicks
+ *   keep extending from the same origin (Apple Mail / Gmail).
+ * - Once the stored anchor leaves the visible set (filtered out, or a search
+ *   changed the list), it can't anchor a range in that set, so fall back to
+ *   `fallbackAnchor` (the open/focused row) when it is visible.
+ * - With neither available, the target anchors itself: the clicked row is
+ *   selected alone and becomes the origin for the next shift-click.
+ */
+export const resolveRangeAnchor = (
+	orderedIds: string[],
+	storedAnchor: string | undefined,
+	fallbackAnchor: string | undefined,
+	targetId: string,
+): string => {
+	if (storedAnchor !== undefined && orderedIds.includes(storedAnchor)) {
+		return storedAnchor;
+	}
+	if (fallbackAnchor !== undefined && orderedIds.includes(fallbackAnchor)) {
+		return fallbackAnchor;
+	}
+	return targetId;
+};
+
 /**
  * The ids from `selectedIds` that are still present in `currentIds` — the
  * survivor set after a list refresh. Only ever narrows: an id absent from
@@ -211,9 +247,15 @@ export const useSelection = <T>(
 	}, []);
 
 	const selectRange = useCallback(
-		(orderedIds: string[], targetId: string) => {
+		(orderedIds: string[], targetId: string, fallbackAnchor?: string) => {
+			const effectiveAnchor = resolveRangeAnchor(
+				orderedIds,
+				anchorId,
+				fallbackAnchor,
+				targetId,
+			);
 			setSelectedIds((prev) => {
-				const range = computeRange(orderedIds, anchorId, targetId);
+				const range = computeRange(orderedIds, effectiveAnchor, targetId);
 				if (range.length === 0) return prev;
 				const next = new Set(prev);
 				for (const id of range) {
@@ -221,10 +263,12 @@ export const useSelection = <T>(
 				}
 				return next;
 			});
-			// Keep the original anchor so subsequent shift-clicks extend from the
-			// same origin (Apple Mail / Gmail behavior). Only seed the anchor when
-			// none exists yet.
-			setAnchorId((prev) => prev ?? targetId);
+			// Whatever anchored the range becomes the stored anchor. A still-visible
+			// stored anchor resolves to itself (unchanged), so consecutive
+			// shift-clicks keep extending from the same origin; a stored anchor that
+			// left the visible set is replaced by the row the range actually used, so
+			// a filtered/search-narrowed list can build a range within what's visible.
+			setAnchorId(effectiveAnchor);
 		},
 		[anchorId],
 	);