@salesforce/ui-bundle-template-app-react-sample-b2e 11.19.0 → 11.21.0

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/filters/inputs/DateRangeFilter.tsx

@@ -0,0 +1,160 @@
+import { useState } from "react";
+import { Input } from "../../../../../components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../../components/ui/select";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import type {
+	ActiveFilterValue,
+	DateFilterMode,
+	FilterFieldType,
+} from "../../../utils/filterUtils";
+
+interface DateRangeFilterProps {
+	field: string;
+	label: string;
+	helpText?: string;
+	/** "daterange" (Date scalar) or "datetimerange" (DateTime scalar). */
+	filterType?: Extract<FilterFieldType, "daterange" | "datetimerange">;
+	/**
+	 * Which comparison chrome to show. See {@link DateFilterMode}. Defaults to
+	 * `"comparison"` (an After / Before selector with one date input).
+	 */
+	mode?: DateFilterMode;
+}
+
+/**
+ * The three ways to constrain a date field. They map directly onto the
+ * `min`/`max` bounds the query builder already understands:
+ *   - after   → only `min` set  → `gte`
+ *   - before  → only `max` set  → `lte`
+ *   - between → both set        → `gte` AND `lte`
+ */
+type DateOperator = "between" | "after" | "before";
+
+const OPERATOR_LABELS: Record<DateOperator, string> = {
+	between: "Between",
+	after: "After",
+	before: "Before",
+};
+
+/** The operators offered for each {@link DateFilterMode}. */
+const MODE_OPERATORS: Record<DateFilterMode, DateOperator[]> = {
+	range: ["between"],
+	comparison: ["after", "before"],
+	both: ["between", "after", "before"],
+};
+
+/** Pick the operator implied by an already-active filter (e.g. restored from the URL). */
+function operatorFor(value: ActiveFilterValue | undefined): DateOperator {
+	const hasMin = !!value?.min;
+	const hasMax = !!value?.max;
+	if (hasMax && !hasMin) return "before";
+	if (hasMin && !hasMax) return "after";
+	return "between";
+}
+
+/**
+ * A date constraint whose chrome is driven by `mode`:
+ *   - `"range"`: a single Between control (two date inputs).
+ *   - `"comparison"` (default): an After / Before selector with one input.
+ *   - `"both"`: a Between / After / Before selector spanning the two.
+ *
+ * "Between" shows two `<input type="date">` controls; "After" / "Before"
+ * collapse to one bound to the relevant end. Uses the platform-native picker —
+ * no popover/calendar dependency.
+ */
+export function DateRangeFilter({
+	field,
+	label,
+	helpText,
+	filterType = "daterange",
+	mode = "comparison",
+}: DateRangeFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	const operators = MODE_OPERATORS[mode];
+
+	// Operator is local UI state: it must survive a moment where no date is yet
+	// entered (which clears the active filter), so it can't be derived from
+	// `value` on every render. Seed it from any filter restored on mount, clamped
+	// to an operator this mode actually offers.
+	const [operator, setOperator] = useState<DateOperator>(() => {
+		const restored = operatorFor(value);
+		return operators.includes(restored) ? restored : operators[0];
+	});
+
+	const emit = (nextMin: string | undefined, nextMax: string | undefined) => {
+		if (!nextMin && !nextMax) onChange(undefined);
+		else onChange({ field, label, type: filterType, min: nextMin, max: nextMax });
+	};
+
+	const changeOperator = (next: DateOperator) => {
+		setOperator(next);
+		// Re-emit, keeping only the bound(s) the new operator uses.
+		if (next === "after") emit(value?.min, undefined);
+		else if (next === "before") emit(undefined, value?.max);
+		else emit(value?.min, value?.max);
+	};
+
+	const operatorId = `filter-${field}-op`;
+	// A lone "between" operator (mode="range") needs no selector — it can't change.
+	const showSelector = operators.length > 1;
+
+	return (
+		<FilterFieldWrapper label={label} helpText={helpText}>
+			<div className="flex flex-col gap-2">
+				{showSelector && (
+					<Select value={operator} onValueChange={(v) => changeOperator(v as DateOperator)}>
+						<SelectTrigger id={operatorId} className="w-full" aria-label={`${label} comparison`}>
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{operators.map((op) => (
+								<SelectItem key={op} value={op}>
+									{OPERATOR_LABELS[op]}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				)}
+
+				{operator === "between" ? (
+					<div className="flex items-center gap-2">
+						<Input
+							type="date"
+							value={value?.min ?? ""}
+							onChange={(e) => emit(e.target.value || undefined, value?.max)}
+							aria-label={`${label} from`}
+						/>
+						<span className="text-sm text-muted-foreground">–</span>
+						<Input
+							type="date"
+							value={value?.max ?? ""}
+							onChange={(e) => emit(value?.min, e.target.value || undefined)}
+							aria-label={`${label} to`}
+						/>
+					</div>
+				) : operator === "after" ? (
+					<Input
+						type="date"
+						value={value?.min ?? ""}
+						onChange={(e) => emit(e.target.value || undefined, undefined)}
+						aria-label={`${label} after`}
+					/>
+				) : (
+					<Input
+						type="date"
+						value={value?.max ?? ""}
+						onChange={(e) => emit(undefined, e.target.value || undefined)}
+						aria-label={`${label} before`}
+					/>
+				)}
+			</div>
+		</FilterFieldWrapper>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/filters/inputs/FilterFieldWrapper.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { Label } from "../../../../../components/ui/label";
+
+interface FilterFieldWrapperProps {
+	label: string;
+	htmlFor?: string;
+	helpText?: string;
+	className?: string;
+	children: ReactNode;
+}
+
+export function FilterFieldWrapper({
+	label,
+	htmlFor,
+	helpText,
+	className,
+	children,
+}: FilterFieldWrapperProps) {
+	return (
+		<div className={`space-y-1 ${className ?? ""}`}>
+			<Label htmlFor={htmlFor}>{label}</Label>
+			{children}
+			{helpText && <p className="text-xs text-muted-foreground min-h-4">{helpText}</p>}
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/filters/inputs/MultiSelectFilter.tsx

@@ -0,0 +1,88 @@
+import { ChevronDown } from "lucide-react";
+import { Button } from "../../../../../components/ui/button";
+import { Checkbox } from "../../../../../components/ui/checkbox";
+import { Label } from "../../../../../components/ui/label";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "../../../../../components/ui/popover";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+
+interface MultiSelectFilterProps {
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
+}
+
+export function MultiSelectFilter({ field, label, options, helpText }: MultiSelectFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	const selected = new Set(value?.value ? value.value.split(",").filter(Boolean) : []);
+
+	const toggle = (v: string, on: boolean) => {
+		const next = new Set(selected);
+		if (on) next.add(v);
+		else next.delete(v);
+		const joined = Array.from(next).join(",");
+		if (joined === "") onChange(undefined);
+		else onChange({ field, label, type: "multipicklist", value: joined });
+	};
+
+	// Summarize the selection on the collapsed trigger: the sole label when one is
+	// picked, a count when several are, and a placeholder when none.
+	const summary =
+		selected.size === 0
+			? `Select ${label.toLowerCase()}`
+			: selected.size === 1
+				? (options.find((o) => selected.has(o.value))?.label ?? `${selected.size} selected`)
+				: `${selected.size} selected`;
+	const triggerId = `filter-${field}`;
+
+	return (
+		<FilterFieldWrapper label={label} htmlFor={triggerId} helpText={helpText}>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						id={triggerId}
+						variant="outline"
+						className="w-full justify-between font-normal"
+						aria-label={`${label}: ${summary}`}
+					>
+						<span className={`truncate ${selected.size === 0 ? "text-muted-foreground" : ""}`}>
+							{summary}
+						</span>
+						<ChevronDown className="ml-2 size-4 shrink-0 opacity-50" aria-hidden="true" />
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent
+					align="start"
+					className="w-(--radix-popover-trigger-width) max-h-72 overflow-y-auto"
+				>
+					<div role="group" aria-label={label} className="flex flex-col gap-1">
+						{options.length === 0 ? (
+							<p className="px-1 py-2 text-sm text-muted-foreground">No options available.</p>
+						) : (
+							options.map((opt) => {
+								const id = `filter-${field}-${opt.value}`;
+								return (
+									<div key={opt.value} className="flex items-center gap-2">
+										<Checkbox
+											id={id}
+											checked={selected.has(opt.value)}
+											onCheckedChange={(checked) => toggle(opt.value, checked === true)}
+										/>
+										<Label htmlFor={id} className="text-sm font-normal cursor-pointer">
+											{opt.label}
+										</Label>
+									</div>
+								);
+							})
+						)}
+					</div>
+				</PopoverContent>
+			</Popover>
+		</FilterFieldWrapper>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/filters/inputs/NumericRangeFilter.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+import { Input } from "../../../../../components/ui/input";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import { debounce, FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
+
+interface NumericRangeFilterProps {
+	field: string;
+	label: string;
+	helpText?: string;
+	min?: number;
+	max?: number;
+}
+
+export function NumericRangeFilter({ field, label, helpText, min, max }: NumericRangeFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	const [draftMin, setDraftMin] = useState(value?.min ?? "");
+	const [draftMax, setDraftMax] = useState(value?.max ?? "");
+
+	const onChangeRef = useRef(onChange);
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	});
+	// Build the debounced caller in a mount effect, not during render: creating it
+	// inline would read onChangeRef.current at render time (react-hooks/refs). It
+	// stays a single stable instance and always calls the latest onChange via the ref.
+	const debouncedRef = useRef<((nextMin: string, nextMax: string) => void) | undefined>(undefined);
+	useEffect(() => {
+		debouncedRef.current = debounce((nextMin: string, nextMax: string) => {
+			if (!nextMin && !nextMax) onChangeRef.current(undefined);
+			else
+				onChangeRef.current({
+					field,
+					label,
+					type: "numeric",
+					min: nextMin || undefined,
+					max: nextMax || undefined,
+				});
+		}, FILTER_DEBOUNCE_MS);
+	}, [field, label]);
+
+	useEffect(() => {
+		setDraftMin(value?.min ?? "");
+		setDraftMax(value?.max ?? "");
+	}, [value?.min, value?.max]);
+
+	return (
+		<FilterFieldWrapper label={label} helpText={helpText}>
+			<div className="flex items-center gap-2">
+				<Input
+					type="number"
+					placeholder="Min"
+					min={min}
+					max={max}
+					value={draftMin}
+					onChange={(e) => {
+						setDraftMin(e.target.value);
+						debouncedRef.current?.(e.target.value, draftMax);
+					}}
+					aria-label={`${label} minimum`}
+				/>
+				<span className="text-sm text-muted-foreground">–</span>
+				<Input
+					type="number"
+					placeholder="Max"
+					min={min}
+					max={max}
+					value={draftMax}
+					onChange={(e) => {
+						setDraftMax(e.target.value);
+						debouncedRef.current?.(draftMin, e.target.value);
+					}}
+					aria-label={`${label} maximum`}
+				/>
+			</div>
+		</FilterFieldWrapper>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/filters/inputs/SelectFilter.tsx

@@ -0,0 +1,46 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../../components/ui/select";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+
+const ALL_VALUE = "__all__";
+
+interface SelectFilterProps {
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
+}
+
+export function SelectFilter({ field, label, options, helpText }: SelectFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	const id = `filter-${field}`;
+	return (
+		<FilterFieldWrapper label={label} htmlFor={id} helpText={helpText}>
+			<Select
+				value={value?.value ?? ALL_VALUE}
+				onValueChange={(v) => {
+					if (v === ALL_VALUE) onChange(undefined);
+					else onChange({ field, label, type: "picklist", value: v });
+				}}
+			>
+				<SelectTrigger id={id} className="w-full">
+					<SelectValue placeholder={`Select ${label.toLowerCase()}`} />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value={ALL_VALUE}>All</SelectItem>
+					{options.map((opt) => (
+						<SelectItem key={opt.value} value={opt.value}>
+							{opt.label}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+		</FilterFieldWrapper>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/filters/inputs/TextFilter.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from "react";
+import { Input } from "../../../../../components/ui/input";
+import { useFilterField } from "../FilterContext";
+import { FilterFieldWrapper } from "./FilterFieldWrapper";
+import { debounce, FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
+
+interface TextFilterProps {
+	field: string;
+	label: string;
+	placeholder?: string;
+	helpText?: string;
+}
+
+export function TextFilter({ field, label, placeholder, helpText }: TextFilterProps) {
+	const { value, onChange } = useFilterField(field);
+	const [draft, setDraft] = useState(value?.value ?? "");
+
+	const onChangeRef = useRef(onChange);
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	});
+	// Build the debounced caller in a mount effect, not during render: creating it
+	// inline would read onChangeRef.current at render time (react-hooks/refs). It
+	// stays a single stable instance and always calls the latest onChange via the ref.
+	const debouncedRef = useRef<((next: string) => void) | undefined>(undefined);
+	useEffect(() => {
+		debouncedRef.current = debounce((next: string) => {
+			if (next === "") onChangeRef.current(undefined);
+			else onChangeRef.current({ field, label, type: "text", value: next });
+		}, FILTER_DEBOUNCE_MS);
+	}, [field, label]);
+
+	useEffect(() => {
+		setDraft(value?.value ?? "");
+	}, [value?.value]);
+
+	const id = `filter-${field}`;
+	return (
+		<FilterFieldWrapper label={label} htmlFor={id} helpText={helpText}>
+			<Input
+				id={id}
+				type="text"
+				value={draft}
+				placeholder={placeholder}
+				onChange={(e) => {
+					setDraft(e.target.value);
+					debouncedRef.current?.(e.target.value);
+				}}
+			/>
+		</FilterFieldWrapper>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/results/DefaultResultRow.tsx

@@ -0,0 +1,109 @@
+/**
+ * Default per-node row used when no `renderResult` is supplied for a source.
+ *
+ * Layout:
+ *   - Title: first entry in `displayFields` (preferring displayValue).
+ *   - Subtitle: remaining display fields joined with " · ".
+ *   - When `routePattern` is configured on the source, the row is wrapped in
+ *     a react-router `<Link>` whose `to` is built by substituting `:fieldName`
+ *     tokens with the corresponding field values (special token `:id`
+ *     resolves to the configured `idField`, default "Id").
+ *
+ * Applications can still pass `renderResult[sourceKey]` to override.
+ */
+
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import { fieldValue } from "../../utils/fieldUtils";
+import type { DisplayField, SObjectSourceConfig } from "../../types";
+
+const ROUTE_TOKEN = /:([A-Za-z_][A-Za-z0-9_]*)/g;
+
+function fieldName(f: DisplayField): string {
+	return typeof f === "string" ? f : f.name;
+}
+
+/** Resolves a single dot-path against a node, returning a string or null. */
+function readPath(node: unknown, path: string): string | null {
+	if (!node || typeof node !== "object") return null;
+	const parts = path.split(".");
+	let cursor: unknown = node;
+	for (let i = 0; i < parts.length - 1; i++) {
+		if (!cursor || typeof cursor !== "object") return null;
+		cursor = (cursor as Record<string, unknown>)[parts[i]];
+	}
+	const leaf = (cursor as Record<string, unknown> | null)?.[parts[parts.length - 1]];
+	if (leaf == null) return null;
+	if (typeof leaf === "object") {
+		return fieldValue(leaf as { value?: unknown; displayValue?: string | null });
+	}
+	return String(leaf);
+}
+
+/** Reads the user-facing string for a top-level display field. */
+function readDisplayField(node: unknown, field: DisplayField): string | null {
+	if (typeof field === "string") return readPath(node, field);
+	if ("raw" in field) return readPath(node, field.name);
+	// Relationship: prefer the first scalar subfield's display value.
+	const sub = field.subfields[0];
+	if (!sub) return null;
+	const subName = fieldName(sub);
+	return readPath(node, `${field.name}.${subName}`);
+}
+
+/** Substitutes `:fieldName` tokens in routePattern with node values. */
+function resolveRoute(pattern: string, node: unknown, idField: string): string | null {
+	let failed = false;
+	const out = pattern.replace(ROUTE_TOKEN, (_, token) => {
+		const path = token === "id" ? idField : token;
+		const value = readPath(node, path);
+		if (value == null) {
+			failed = true;
+			return "";
+		}
+		return encodeURIComponent(value);
+	});
+	return failed ? null : out;
+}
+
+interface DefaultResultRowProps {
+	node: unknown;
+	source: SObjectSourceConfig;
+}
+
+export function DefaultResultRow({ node, source }: DefaultResultRowProps) {
+	const idField = source.idField ?? "Id";
+	const fields = source.displayFields;
+	const titleField = fields[0];
+	const title = titleField ? readDisplayField(node, titleField) : null;
+
+	const subtitleParts = fields
+		.slice(1)
+		.map((f) => readDisplayField(node, f))
+		.filter((s): s is string => s != null && s !== "");
+
+	const content: ReactNode = (
+		<>
+			<span className="font-medium">{title ?? "—"}</span>
+			{subtitleParts.length > 0 && (
+				<p className="text-sm text-muted-foreground">{subtitleParts.join(" · ")}</p>
+			)}
+		</>
+	);
+
+	if (source.routePattern) {
+		const href = resolveRoute(source.routePattern, node, idField);
+		if (href) {
+			return (
+				<Link
+					to={href}
+					className="block hover:bg-accent rounded-md px-3 -mx-3 py-1 transition-colors"
+				>
+					{content}
+				</Link>
+			);
+		}
+	}
+
+	return <div className="px-3 -mx-3 py-1">{content}</div>;
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/config.json

@@ -0,0 +1,83 @@
+{
+  "pagination": {
+    "pageSize": 10,
+    "pageSizeOptions": [5, 10, 20]
+  },
+  "sources": [
+    {
+      "kind": "sobject",
+      "key": "accounts",
+      "objectName": "Account",
+      "label": "Accounts",
+      "labelSingular": "Account",
+      "routePattern": "/accounts/:id",
+      "searchableFields": ["Name", "Phone", "Industry"],
+      "displayFields": [
+        "Name",
+        "Industry",
+        "Type",
+        "Phone",
+        "AnnualRevenue",
+        { "name": "Owner", "subfields": ["Name"] }
+      ],
+      "filterBy": [
+        { "field": "Industry", "label": "Industry", "type": "picklist" },
+        { "field": "Type", "label": "Type", "type": "picklist" },
+        { "field": "AnnualRevenue", "label": "Annual Revenue", "type": "numeric" }
+      ],
+      "sortBy": [
+        { "field": "Name", "label": "Name" },
+        { "field": "Industry", "label": "Industry" },
+        { "field": "AnnualRevenue", "label": "Annual Revenue" },
+        { "field": "CreatedDate", "label": "Created Date" }
+      ]
+    },
+    {
+      "kind": "sobject",
+      "key": "contacts",
+      "objectName": "Contact",
+      "label": "Contacts",
+      "labelSingular": "Contact",
+      "routePattern": "/contacts/:id",
+      "searchableFields": ["Name", "Email", "Phone"],
+      "displayFields": [
+        "Name",
+        "Title",
+        "Email",
+        "Phone",
+        { "name": "Account", "subfields": ["Name"] }
+      ],
+      "sortBy": [
+        { "field": "Name", "label": "Name" },
+        { "field": "CreatedDate", "label": "Created Date" }
+      ]
+    },
+    {
+      "kind": "sobject",
+      "key": "opportunities",
+      "objectName": "Opportunity",
+      "label": "Opportunities",
+      "labelSingular": "Opportunity",
+      "routePattern": "/opportunities/:id",
+      "searchableFields": ["Name"],
+      "displayFields": [
+        "Name",
+        "StageName",
+        "Amount",
+        "CloseDate",
+        { "name": "Account", "subfields": ["Name"] }
+      ],
+      "filterBy": [
+        { "field": "StageName", "label": "Stage", "type": "picklist" },
+        { "field": "Amount", "label": "Amount", "type": "numeric" },
+        { "field": "CloseDate", "label": "Close Date", "type": "daterange" }
+      ],
+      "sortBy": [
+        { "field": "CloseDate", "label": "Close Date" },
+        { "field": "Amount", "label": "Amount" },
+        { "field": "Name", "label": "Name" }
+      ],
+      "defaultSort": { "field": "CloseDate", "direction": "DESC" }
+    }
+  ]
+}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/{object-search → search}/hooks/useAsyncData.ts

@@ -7,13 +7,9 @@ interface UseAsyncDataResult<T> {
 }
 
 /**
- * Runs an async fetcher on mount and whenever `deps` change.
- * Returns the loading/error/data state. Does not cache — every call
- * to the fetcher hits the source directly.
- *
- * A cleanup flag prevents state updates if the component unmounts
- * or deps change before the fetch completes (avoids React warnings
- * and stale updates from out-of-order responses).
+ * Runs an async fetcher on mount and whenever `deps` change. Stale responses
+ * (deps changed during a fetch, or component unmounted) are dropped via a
+ * cancellation flag.
  */
 export function useAsyncData<T>(
 	fetcher: () => Promise<T>,
@@ -29,7 +25,6 @@ export function useAsyncData<T>(
 		fetcherRef.current = fetcher;
 	});
 
-	// Detect dep changes during render to reset loading state and bump generation
 	const [prevDeps, setPrevDeps] = useState(deps);
 	if (deps.length !== prevDeps.length || deps.some((d, i) => d !== prevDeps[i])) {
 		setPrevDeps(deps);
@@ -40,7 +35,6 @@ export function useAsyncData<T>(
 
 	useEffect(() => {
 		let cancelled = false;
-
 		fetcherRef
 			.current()
 			.then((result) => {
@@ -53,7 +47,6 @@ export function useAsyncData<T>(
 			.finally(() => {
 				if (!cancelled) setLoading(false);
 			});
-
 		return () => {
 			cancelled = true;
 		};