@10x-media/impersonation 0.1.0-beta.0

package/dist/ui/ImpersonationAction.js

@@ -0,0 +1,48 @@
+import { collectionBySlug } from "../ids.js";
+import { cachedFindOpenBySid } from "../session/resolve.js";
+import "../plugin/constants.js";
+import { getRegistry } from "../plugin/registry.js";
+import { asAuthUser, boundSid } from "../types.js";
+import { readHintCookie } from "../plugin/lookup.js";
+import { isStartableAuthCollection } from "../plugin/startable.js";
+import { ImpersonationSwitcher } from "./ImpersonationSwitcher.js";
+import { getFromImportMap } from "payload/shared";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/ImpersonationAction.tsx
+const ImpersonationAction = async ({ payload, user }) => {
+	const options = getRegistry(payload.config);
+	if (!options?.ui.headerAction || !user) return null;
+	if (user.collection !== payload.config.admin.user) return null;
+	if (asAuthUser(user)._impersonation) return null;
+	const sid = boundSid(user, options.session.binding);
+	if (!sid) return null;
+	const hint = await readHintCookie(options.hintCookieName);
+	if (Boolean(options.session.issue) || Boolean(hint) || sid.startsWith("imp_")) {
+		if (await cachedFindOpenBySid(sid, options, payload)) return null;
+	}
+	const collections = payload.config.collections.flatMap((collection) => {
+		if (!isStartableAuthCollection(collection, options)) return [];
+		const plural = collectionBySlug(payload, collection.slug)?.config.labels?.plural;
+		return [{
+			label: plural ? String(plural) : collection.slug,
+			slug: collection.slug,
+			useAsTitle: collection.admin?.useAsTitle ?? "email"
+		}];
+	});
+	if (collections.length === 0) return null;
+	const Card = options.ui.card ? getFromImportMap({
+		importMap: payload.importMap,
+		PayloadComponent: options.ui.card,
+		silent: true
+	}) : void 0;
+	if (options.ui.card && !Card) payload.logger.warn("@10x-media/impersonation: ui.card is not in the admin import map. Run generate:importmap. The default card is shown until then.");
+	return /* @__PURE__ */ jsx(ImpersonationSwitcher, {
+		Card,
+		collections,
+		viewerId: user.id
+	});
+};
+//#endregion
+export { ImpersonationAction };
+
+//# sourceMappingURL=ImpersonationAction.js.map

package/dist/ui/ImpersonationAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImpersonationAction.js","names":[],"sources":["../../src/ui/ImpersonationAction.tsx"],"sourcesContent":["import type { ServerProps } from 'payload'\nimport { getFromImportMap } from 'payload/shared'\nimport type { ComponentType } from 'react'\n\nimport { collectionBySlug } from '../ids'\nimport { IMPERSONATION_SID_PREFIX } from '../plugin/constants'\nimport { readHintCookie } from '../plugin/lookup'\nimport { getRegistry } from '../plugin/registry'\nimport { isStartableAuthCollection } from '../plugin/startable'\nimport { cachedFindOpenBySid } from '../session/resolve'\nimport { asAuthUser, boundSid } from '../types'\nimport { ImpersonationSwitcher } from './ImpersonationSwitcher'\nimport type { ImpersonationUserCardProps } from './ImpersonationUserCard'\n\nexport const ImpersonationAction = async ({ payload, user }: ServerProps) => {\n\tconst options = getRegistry(payload.config)\n\tif (!options?.ui.headerAction || !user) {\n\t\treturn null\n\t}\n\n\tif (user.collection !== payload.config.admin.user) {\n\t\treturn null\n\t}\n\n\tif (asAuthUser(user)._impersonation) {\n\t\treturn null\n\t}\n\n\tconst sid = boundSid(user, options.session.binding)\n\tif (!sid) {\n\t\treturn null\n\t}\n\n\tconst hint = await readHintCookie(options.hintCookieName)\n\tconst shouldLookup =\n\t\tBoolean(options.session.issue) || Boolean(hint) || sid.startsWith(IMPERSONATION_SID_PREFIX)\n\tif (shouldLookup) {\n\t\tconst active = await cachedFindOpenBySid(sid, options, payload)\n\t\tif (active) {\n\t\t\treturn null\n\t\t}\n\t}\n\n\tconst collections = payload.config.collections.flatMap((collection) => {\n\t\tif (!isStartableAuthCollection(collection, options)) {\n\t\t\treturn []\n\t\t}\n\t\tconst registered = collectionBySlug(payload, collection.slug)\n\t\tconst plural = registered?.config.labels?.plural\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: plural ? String(plural) : collection.slug,\n\t\t\t\tslug: collection.slug,\n\t\t\t\tuseAsTitle: collection.admin?.useAsTitle ?? 'email',\n\t\t\t},\n\t\t]\n\t})\n\n\tif (collections.length === 0) {\n\t\treturn null\n\t}\n\n\tconst Card = options.ui.card\n\t\t? getFromImportMap<ComponentType<ImpersonationUserCardProps>>({\n\t\t\t\timportMap: payload.importMap,\n\t\t\t\tPayloadComponent: options.ui.card,\n\t\t\t\tsilent: true,\n\t\t\t})\n\t\t: undefined\n\tif (options.ui.card && !Card) {\n\t\tpayload.logger.warn(\n\t\t\t'@10x-media/impersonation: ui.card is not in the admin import map. Run generate:importmap. The default card is shown until then.'\n\t\t)\n\t}\n\n\treturn <ImpersonationSwitcher Card={Card} collections={collections} viewerId={user.id} />\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,sBAAsB,OAAO,EAAE,SAAS,WAAwB;CAC5E,MAAM,UAAU,YAAY,QAAQ,MAAM;CAC1C,IAAI,CAAC,SAAS,GAAG,gBAAgB,CAAC,MACjC,OAAO;CAGR,IAAI,KAAK,eAAe,QAAQ,OAAO,MAAM,MAC5C,OAAO;CAGR,IAAI,WAAW,IAAI,EAAE,gBACpB,OAAO;CAGR,MAAM,MAAM,SAAS,MAAM,QAAQ,QAAQ,OAAO;CAClD,IAAI,CAAC,KACJ,OAAO;CAGR,MAAM,OAAO,MAAM,eAAe,QAAQ,cAAc;CAGxD,IADC,QAAQ,QAAQ,QAAQ,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,WAAA,MAAmC;MAGtF,MADiB,oBAAoB,KAAK,SAAS,OAAO,GAE7D,OAAO;CAAA;CAIT,MAAM,cAAc,QAAQ,OAAO,YAAY,SAAS,eAAe;EACtE,IAAI,CAAC,0BAA0B,YAAY,OAAO,GACjD,OAAO,CAAC;EAGT,MAAM,SADa,iBAAiB,SAAS,WAAW,IAChC,GAAG,OAAO,QAAQ;EAC1C,OAAO,CACN;GACC,OAAO,SAAS,OAAO,MAAM,IAAI,WAAW;GAC5C,MAAM,WAAW;GACjB,YAAY,WAAW,OAAO,cAAc;EAC7C,CACD;CACD,CAAC;CAED,IAAI,YAAY,WAAW,GAC1B,OAAO;CAGR,MAAM,OAAO,QAAQ,GAAG,OACrB,iBAA4D;EAC5D,WAAW,QAAQ;EACnB,kBAAkB,QAAQ,GAAG;EAC7B,QAAQ;CACT,CAAC,IACA,KAAA;CACH,IAAI,QAAQ,GAAG,QAAQ,CAAC,MACvB,QAAQ,OAAO,KACd,iIACD;CAGD,OAAO,oBAAC,uBAAD;EAA6B;EAAmB;EAAa,UAAU,KAAK;CAAK,CAAA;AACzF"}

package/dist/ui/ImpersonationBar.d.ts

@@ -0,0 +1,36 @@
+//#region src/ui/ImpersonationBar.d.ts
+type ImpersonationBarProps = {
+  actingAs: string;
+  adminRoute: string;
+  apiPath: string;
+  frontendUrl?: string;
+  impersonatorLocale?: null | string;
+  openWebsite: string;
+  pluginName: string;
+  returnTo: string;
+  sessionEndsAt?: null | string;
+  sessionEndsAtTemplate: string;
+  sessionEndsInTemplate: string;
+  showFrontendLink?: boolean; /** Collapsed chip label. */
+  targetName: string;
+  tone?: 'quiet' | 'warning';
+};
+declare const ImpersonationBar: ({
+  actingAs,
+  adminRoute,
+  apiPath,
+  frontendUrl,
+  impersonatorLocale,
+  openWebsite,
+  pluginName,
+  returnTo,
+  sessionEndsAt,
+  sessionEndsAtTemplate,
+  sessionEndsInTemplate,
+  showFrontendLink,
+  targetName,
+  tone
+}: ImpersonationBarProps) => import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { ImpersonationBar };
+//# sourceMappingURL=ImpersonationBar.d.ts.map

package/dist/ui/ImpersonationBar.js

@@ -0,0 +1,357 @@
+"use client";
+import { CLIENT_FETCH_TIMEOUT_MS } from "../plugin/constants.js";
+import { keys } from "../translations/keys.js";
+import { errorKey, goAfterSwitch, postImpersonation } from "./api.js";
+import { useImpersonation } from "./useImpersonation.js";
+import { fillTemplate, messageFor } from "../translations/lookup.js";
+import { anchorsFor, nearestEdge, projectThrow, readBarPlacement, readViewport, writeBarPlacement } from "./barPlacement.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Pill, toast } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import "./impersonation.css";
+//#region src/ui/ImpersonationBar.tsx
+const SESSION_GONE = new Set([
+	"forbidden",
+	"impersonatorGone",
+	"impersonatorSessionExpired",
+	"notImpersonating"
+]);
+const formatCountdown = (expiresAt, now) => {
+	const remaining = new Date(expiresAt).getTime() - now;
+	if (!Number.isFinite(remaining) || remaining <= 0) return "0s";
+	const totalSeconds = Math.floor(remaining / 1e3);
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor(totalSeconds % 3600 / 60);
+	const seconds = totalSeconds % 60;
+	if (hours > 0) return `${hours}h ${String(minutes).padStart(2, "0")}m ${String(seconds).padStart(2, "0")}s`;
+	if (minutes > 0) return `${minutes}m ${String(seconds).padStart(2, "0")}s`;
+	return `${seconds}s`;
+};
+const ImpersonationBar = ({ actingAs, adminRoute, apiPath, frontendUrl, impersonatorLocale, openWebsite, pluginName, returnTo, sessionEndsAt, sessionEndsAtTemplate, sessionEndsInTemplate, showFrontendLink, targetName, tone = "warning" }) => {
+	const { setStatus } = useImpersonation();
+	const [mounted, setMounted] = useState(false);
+	const onLogin = (usePathname() ?? "") === `${adminRoute}/login`;
+	const [busy, setBusy] = useState(false);
+	const [visible, setVisible] = useState(true);
+	const [collapsed, setCollapsed] = useState(false);
+	const [edge, setEdge] = useState("right");
+	const [viewport, setViewport] = useState(() => typeof document === "undefined" ? {
+		height: 800,
+		width: 1200
+	} : readViewport());
+	const [dragPoint, setDragPoint] = useState(null);
+	const [now, setNow] = useState(() => Date.now());
+	const chipRef = useRef(null);
+	const expiredProbe = useRef(false);
+	const dragOffset = useRef(null);
+	const dragPointRef = useRef(null);
+	const dragOrigin = useRef(null);
+	const dragged = useRef(false);
+	const lastSample = useRef(null);
+	const velocity = useRef({
+		x: 0,
+		y: 0
+	});
+	const endChipDragRef = useRef(() => {});
+	const onWindowPointerEnd = useRef(() => {
+		endChipDragRef.current();
+	});
+	useEffect(() => {
+		const stored = readBarPlacement();
+		setCollapsed(stored.collapsed);
+		setEdge(stored.edge);
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		if (!collapsed) return;
+		const update = () => setViewport(readViewport());
+		update();
+		window.addEventListener("resize", update);
+		return () => window.removeEventListener("resize", update);
+	}, [collapsed]);
+	const probe = useCallback(async () => {
+		try {
+			const body = await (await fetch(apiPath, {
+				credentials: "include",
+				signal: AbortSignal.timeout(CLIENT_FETCH_TIMEOUT_MS)
+			})).json();
+			if (typeof body.active !== "boolean") return;
+			setStatus(body.active ? body : { active: false });
+			setVisible(body.active);
+		} catch {}
+	}, [apiPath, setStatus]);
+	useEffect(() => {
+		if (onLogin) {
+			setVisible(false);
+			return;
+		}
+		probe();
+	}, [onLogin, probe]);
+	useEffect(() => {
+		if (!sessionEndsAt || !visible || onLogin) return;
+		expiredProbe.current = false;
+		const timer = window.setInterval(() => {
+			const next = Date.now();
+			setNow(next);
+			if (expiredProbe.current) return;
+			if (new Date(sessionEndsAt).getTime() - next <= 0) {
+				expiredProbe.current = true;
+				probe();
+			}
+		}, 1e3);
+		return () => window.clearInterval(timer);
+	}, [
+		onLogin,
+		probe,
+		sessionEndsAt,
+		visible
+	]);
+	const onExit = async () => {
+		if (busy) return;
+		setBusy(true);
+		try {
+			const result = await postImpersonation(`${apiPath}/exit`, {});
+			if (!result.ok) {
+				toast.error(messageFor(impersonatorLocale, errorKey(result.error ?? "failed")));
+				if (result.error && SESSION_GONE.has(result.error)) {
+					setStatus({ active: false });
+					setVisible(false);
+					goAfterSwitch(adminRoute);
+				}
+				return;
+			}
+			goAfterSwitch(adminRoute);
+		} finally {
+			setBusy(false);
+		}
+	};
+	const collapse = () => {
+		const next = {
+			collapsed: true,
+			edge
+		};
+		setCollapsed(true);
+		writeBarPlacement(next);
+	};
+	const expand = () => {
+		const next = {
+			collapsed: false,
+			edge
+		};
+		setCollapsed(false);
+		setDragPoint(null);
+		writeBarPlacement(next);
+	};
+	const endChipDrag = () => {
+		if (!dragOffset.current && !dragOrigin.current) return;
+		window.removeEventListener("pointerup", onWindowPointerEnd.current);
+		window.removeEventListener("pointercancel", onWindowPointerEnd.current);
+		const point = dragPointRef.current;
+		const didDrag = dragged.current;
+		dragOffset.current = null;
+		dragOrigin.current = null;
+		dragPointRef.current = null;
+		if (!didDrag) {
+			expand();
+			return;
+		}
+		const rect = chipRef.current?.getBoundingClientRect();
+		if (!point || !rect) {
+			setDragPoint(null);
+			return;
+		}
+		const header = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--app-header-height"));
+		const anchors = anchorsFor({
+			header: Number.isFinite(header) ? header : 48,
+			size: {
+				height: rect.height,
+				width: rect.width
+			},
+			viewport: readViewport()
+		});
+		const nextEdge = nearestEdge(projectThrow(point, velocity.current), anchors);
+		setEdge(nextEdge);
+		setDragPoint(null);
+		writeBarPlacement({
+			collapsed: true,
+			edge: nextEdge
+		});
+	};
+	endChipDragRef.current = endChipDrag;
+	const onChipPointerDown = (event) => {
+		if (event.button !== 0) return;
+		const rect = chipRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		dragged.current = false;
+		dragOrigin.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		dragOffset.current = {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+		lastSample.current = {
+			t: event.timeStamp,
+			x: event.clientX,
+			y: event.clientY
+		};
+		velocity.current = {
+			x: 0,
+			y: 0
+		};
+		window.addEventListener("pointerup", onWindowPointerEnd.current);
+		window.addEventListener("pointercancel", onWindowPointerEnd.current);
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const onChipPointerMove = (event) => {
+		if (!dragOffset.current || !dragOrigin.current) return;
+		if (event.pointerType !== "touch" && event.buttons === 0) {
+			endChipDrag();
+			return;
+		}
+		const travel = Math.hypot(event.clientX - dragOrigin.current.x, event.clientY - dragOrigin.current.y);
+		if (!dragged.current && travel < 4) return;
+		dragged.current = true;
+		const next = {
+			x: event.clientX - dragOffset.current.x,
+			y: event.clientY - dragOffset.current.y
+		};
+		const previous = lastSample.current;
+		const dt = previous ? event.timeStamp - previous.t : 0;
+		if (previous && dt > 0) velocity.current = {
+			x: (event.clientX - previous.x) / dt,
+			y: (event.clientY - previous.y) / dt
+		};
+		lastSample.current = {
+			t: event.timeStamp,
+			x: event.clientX,
+			y: event.clientY
+		};
+		dragPointRef.current = next;
+		setDragPoint(next);
+	};
+	if (!visible || onLogin) return null;
+	if (collapsed) {
+		const rect = chipRef.current?.getBoundingClientRect();
+		const header = mounted ? Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--app-header-height")) : 48;
+		const anchors = anchorsFor({
+			header: Number.isFinite(header) ? header : 48,
+			size: {
+				height: rect?.height ?? 36,
+				width: rect?.width ?? 168
+			},
+			viewport
+		});
+		const point = dragPoint ?? anchors[edge];
+		return /* @__PURE__ */ jsxs("div", {
+			"aria-label": actingAs,
+			"aria-live": "polite",
+			className: [
+				"impersonation-chip",
+				tone === "quiet" ? "impersonation-chip--quiet" : null,
+				dragPoint ? "impersonation-chip--dragging" : null
+			].filter(Boolean).join(" "),
+			onPointerCancel: endChipDrag,
+			onPointerDown: onChipPointerDown,
+			onPointerMove: onChipPointerMove,
+			onPointerUp: endChipDrag,
+			ref: chipRef,
+			role: "status",
+			style: {
+				left: point.x,
+				top: point.y
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "impersonation-chip__name",
+				children: targetName
+			}), /* @__PURE__ */ jsx("button", {
+				"aria-label": messageFor(impersonatorLocale, keys.expandBar),
+				className: "impersonation-bar__icon",
+				onClick: (event) => {
+					if (dragged.current) {
+						event.preventDefault();
+						return;
+					}
+					expand();
+				},
+				type: "button",
+				children: /* @__PURE__ */ jsx(ExpandIcon, {})
+			})]
+		});
+	}
+	const countdown = sessionEndsAt ? formatCountdown(sessionEndsAt, now) : null;
+	const endsLabel = countdown && countdown !== "0s" ? fillTemplate(sessionEndsInTemplate, "{{countdown}}", countdown) : sessionEndsAt && countdown !== "0s" ? fillTemplate(sessionEndsAtTemplate, "{{time}}", new Date(sessionEndsAt).toLocaleTimeString(impersonatorLocale ?? void 0)) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-live": "polite",
+		className: tone === "quiet" ? "impersonation-bar impersonation-bar--quiet" : "impersonation-bar",
+		role: "status",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "impersonation-bar__meta",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "impersonation-bar__copy",
+				children: [/* @__PURE__ */ jsx(Pill, {
+					pillStyle: tone === "quiet" ? "success" : "warning",
+					size: "small",
+					children: pluginName
+				}), /* @__PURE__ */ jsx("span", { children: actingAs })]
+			}), endsLabel ? /* @__PURE__ */ jsx("div", {
+				className: "impersonation-bar__time",
+				children: endsLabel
+			}) : null]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "impersonation-bar__actions",
+			children: [
+				showFrontendLink && frontendUrl ? /* @__PURE__ */ jsx("a", {
+					className: "impersonation-bar__link",
+					href: frontendUrl,
+					children: openWebsite
+				}) : null,
+				/* @__PURE__ */ jsx(Button, {
+					buttonStyle: "pill",
+					disabled: busy,
+					margin: false,
+					onClick: () => void onExit(),
+					size: "small",
+					children: returnTo
+				}),
+				/* @__PURE__ */ jsx("button", {
+					"aria-label": messageFor(impersonatorLocale, keys.collapseBar),
+					className: "impersonation-bar__icon",
+					onClick: collapse,
+					type: "button",
+					children: /* @__PURE__ */ jsx(CollapseIcon, {})
+				})
+			]
+		})]
+	});
+};
+const CollapseIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	height: "16",
+	viewBox: "0 0 16 16",
+	width: "16",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M3.5 6 8 10.5 12.5 6",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	})
+});
+const ExpandIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	height: "16",
+	viewBox: "0 0 16 16",
+	width: "16",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M3 6h10M3 10h10",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	})
+});
+//#endregion
+export { ImpersonationBar };
+
+//# sourceMappingURL=ImpersonationBar.js.map

package/dist/ui/ImpersonationBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImpersonationBar.js","names":[],"sources":["../../src/ui/ImpersonationBar.tsx"],"sourcesContent":["'use client'\n\nimport { Button, Pill, toast } from '@payloadcms/ui'\nimport { usePathname } from 'next/navigation'\nimport {\n\ttype PointerEvent as ReactPointerEvent,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\n\nimport type { ImpersonationStatus } from '../getImpersonation'\nimport { CLIENT_FETCH_TIMEOUT_MS } from '../plugin/constants'\nimport { keys } from '../translations/keys'\nimport { fillTemplate, messageFor } from '../translations/lookup'\nimport { errorKey, goAfterSwitch, postImpersonation } from './api'\nimport {\n\tanchorsFor,\n\ttype BarEdge,\n\tnearestEdge,\n\ttype Point,\n\tprojectThrow,\n\treadBarPlacement,\n\treadViewport,\n\twriteBarPlacement,\n} from './barPlacement'\nimport { useImpersonation } from './useImpersonation'\nimport './impersonation.css'\n\nconst SESSION_GONE = new Set([\n\t'forbidden',\n\t'impersonatorGone',\n\t'impersonatorSessionExpired',\n\t'notImpersonating',\n])\n\nconst formatCountdown = (expiresAt: string, now: number): string | null => {\n\tconst remaining = new Date(expiresAt).getTime() - now\n\tif (!Number.isFinite(remaining) || remaining <= 0) {\n\t\treturn '0s'\n\t}\n\tconst totalSeconds = Math.floor(remaining / 1000)\n\tconst hours = Math.floor(totalSeconds / 3600)\n\tconst minutes = Math.floor((totalSeconds % 3600) / 60)\n\tconst seconds = totalSeconds % 60\n\tif (hours > 0) {\n\t\treturn `${hours}h ${String(minutes).padStart(2, '0')}m ${String(seconds).padStart(2, '0')}s`\n\t}\n\tif (minutes > 0) {\n\t\treturn `${minutes}m ${String(seconds).padStart(2, '0')}s`\n\t}\n\treturn `${seconds}s`\n}\n\nexport type ImpersonationBarProps = {\n\tactingAs: string\n\tadminRoute: string\n\tapiPath: string\n\tfrontendUrl?: string\n\timpersonatorLocale?: null | string\n\topenWebsite: string\n\tpluginName: string\n\treturnTo: string\n\tsessionEndsAt?: null | string\n\tsessionEndsAtTemplate: string\n\tsessionEndsInTemplate: string\n\tshowFrontendLink?: boolean\n\t/** Collapsed chip label. */\n\ttargetName: string\n\ttone?: 'quiet' | 'warning'\n}\n\nexport const ImpersonationBar = ({\n\tactingAs,\n\tadminRoute,\n\tapiPath,\n\tfrontendUrl,\n\timpersonatorLocale,\n\topenWebsite,\n\tpluginName,\n\treturnTo,\n\tsessionEndsAt,\n\tsessionEndsAtTemplate,\n\tsessionEndsInTemplate,\n\tshowFrontendLink,\n\ttargetName,\n\ttone = 'warning',\n}: ImpersonationBarProps) => {\n\tconst { setStatus } = useImpersonation()\n\tconst [mounted, setMounted] = useState(false)\n\tconst pathname = usePathname() ?? ''\n\tconst onLogin = pathname === `${adminRoute}/login`\n\tconst [busy, setBusy] = useState(false)\n\tconst [visible, setVisible] = useState(true)\n\tconst [collapsed, setCollapsed] = useState(false)\n\tconst [edge, setEdge] = useState<BarEdge>('right')\n\tconst [viewport, setViewport] = useState(() =>\n\t\ttypeof document === 'undefined' ? { height: 800, width: 1200 } : readViewport()\n\t)\n\tconst [dragPoint, setDragPoint] = useState<null | Point>(null)\n\tconst [now, setNow] = useState(() => Date.now())\n\tconst chipRef = useRef<HTMLDivElement>(null)\n\tconst expiredProbe = useRef(false)\n\tconst dragOffset = useRef<null | Point>(null)\n\tconst dragPointRef = useRef<null | Point>(null)\n\tconst dragOrigin = useRef<null | Point>(null)\n\tconst dragged = useRef(false)\n\tconst lastSample = useRef<null | { t: number; x: number; y: number }>(null)\n\tconst velocity = useRef<Point>({ x: 0, y: 0 })\n\tconst endChipDragRef = useRef<() => void>(() => {})\n\tconst onWindowPointerEnd = useRef(() => {\n\t\tendChipDragRef.current()\n\t})\n\n\tuseEffect(() => {\n\t\tconst stored = readBarPlacement()\n\t\tsetCollapsed(stored.collapsed)\n\t\tsetEdge(stored.edge)\n\t\tsetMounted(true)\n\t}, [])\n\n\tuseEffect(() => {\n\t\tif (!collapsed) {\n\t\t\treturn\n\t\t}\n\t\tconst update = () => setViewport(readViewport())\n\t\tupdate()\n\t\twindow.addEventListener('resize', update)\n\t\treturn () => window.removeEventListener('resize', update)\n\t}, [collapsed])\n\n\tconst probe = useCallback(async () => {\n\t\ttry {\n\t\t\tconst response = await fetch(apiPath, {\n\t\t\t\tcredentials: 'include',\n\t\t\t\tsignal: AbortSignal.timeout(CLIENT_FETCH_TIMEOUT_MS),\n\t\t\t})\n\t\t\tconst body = (await response.json()) as { active?: boolean }\n\t\t\tif (typeof body.active !== 'boolean') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tsetStatus(body.active ? (body as ImpersonationStatus) : { active: false })\n\t\t\tsetVisible(body.active)\n\t\t} catch {\n\t\t\t// A timeout or a non-JSON body leaves the painted bar in place.\n\t\t}\n\t}, [apiPath, setStatus])\n\n\tuseEffect(() => {\n\t\tif (onLogin) {\n\t\t\tsetVisible(false)\n\t\t\treturn\n\t\t}\n\t\tvoid probe()\n\t}, [onLogin, probe])\n\n\tuseEffect(() => {\n\t\tif (!sessionEndsAt || !visible || onLogin) {\n\t\t\treturn\n\t\t}\n\t\texpiredProbe.current = false\n\t\tconst timer = window.setInterval(() => {\n\t\t\tconst next = Date.now()\n\t\t\tsetNow(next)\n\t\t\tif (expiredProbe.current) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (new Date(sessionEndsAt).getTime() - next <= 0) {\n\t\t\t\texpiredProbe.current = true\n\t\t\t\tvoid probe()\n\t\t\t}\n\t\t}, 1000)\n\t\treturn () => window.clearInterval(timer)\n\t}, [onLogin, probe, sessionEndsAt, visible])\n\n\tconst onExit = async () => {\n\t\tif (busy) {\n\t\t\treturn\n\t\t}\n\t\tsetBusy(true)\n\t\ttry {\n\t\t\tconst result = await postImpersonation(`${apiPath}/exit`, {})\n\t\t\tif (!result.ok) {\n\t\t\t\ttoast.error(messageFor(impersonatorLocale, errorKey(result.error ?? 'failed')))\n\t\t\t\tif (result.error && SESSION_GONE.has(result.error)) {\n\t\t\t\t\tsetStatus({ active: false })\n\t\t\t\t\tsetVisible(false)\n\t\t\t\t\tgoAfterSwitch(adminRoute)\n\t\t\t\t}\n\t\t\t\treturn\n\t\t\t}\n\t\t\tgoAfterSwitch(adminRoute)\n\t\t} finally {\n\t\t\tsetBusy(false)\n\t\t}\n\t}\n\n\tconst collapse = () => {\n\t\tconst next = { collapsed: true, edge }\n\t\tsetCollapsed(true)\n\t\twriteBarPlacement(next)\n\t}\n\n\tconst expand = () => {\n\t\tconst next = { collapsed: false, edge }\n\t\tsetCollapsed(false)\n\t\tsetDragPoint(null)\n\t\twriteBarPlacement(next)\n\t}\n\n\tconst endChipDrag = () => {\n\t\tif (!dragOffset.current && !dragOrigin.current) {\n\t\t\treturn\n\t\t}\n\t\twindow.removeEventListener('pointerup', onWindowPointerEnd.current)\n\t\twindow.removeEventListener('pointercancel', onWindowPointerEnd.current)\n\t\tconst point = dragPointRef.current\n\t\tconst didDrag = dragged.current\n\t\tdragOffset.current = null\n\t\tdragOrigin.current = null\n\t\tdragPointRef.current = null\n\t\tif (!didDrag) {\n\t\t\texpand()\n\t\t\treturn\n\t\t}\n\t\tconst rect = chipRef.current?.getBoundingClientRect()\n\t\tif (!point || !rect) {\n\t\t\tsetDragPoint(null)\n\t\t\treturn\n\t\t}\n\t\tconst header = Number.parseFloat(\n\t\t\tgetComputedStyle(document.documentElement).getPropertyValue('--app-header-height')\n\t\t)\n\t\tconst anchors = anchorsFor({\n\t\t\theader: Number.isFinite(header) ? header : 48,\n\t\t\tsize: { height: rect.height, width: rect.width },\n\t\t\tviewport: readViewport(),\n\t\t})\n\t\tconst nextEdge = nearestEdge(projectThrow(point, velocity.current), anchors)\n\t\tsetEdge(nextEdge)\n\t\tsetDragPoint(null)\n\t\twriteBarPlacement({ collapsed: true, edge: nextEdge })\n\t}\n\tendChipDragRef.current = endChipDrag\n\n\tconst onChipPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (event.button !== 0) {\n\t\t\treturn\n\t\t}\n\t\tconst rect = chipRef.current?.getBoundingClientRect()\n\t\tif (!rect) {\n\t\t\treturn\n\t\t}\n\t\tdragged.current = false\n\t\tdragOrigin.current = { x: event.clientX, y: event.clientY }\n\t\tdragOffset.current = { x: event.clientX - rect.left, y: event.clientY - rect.top }\n\t\tlastSample.current = { t: event.timeStamp, x: event.clientX, y: event.clientY }\n\t\tvelocity.current = { x: 0, y: 0 }\n\t\twindow.addEventListener('pointerup', onWindowPointerEnd.current)\n\t\twindow.addEventListener('pointercancel', onWindowPointerEnd.current)\n\t\tevent.currentTarget.setPointerCapture(event.pointerId)\n\t}\n\n\tconst onChipPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n\t\tif (!dragOffset.current || !dragOrigin.current) {\n\t\t\treturn\n\t\t}\n\t\tif (event.pointerType !== 'touch' && event.buttons === 0) {\n\t\t\tendChipDrag()\n\t\t\treturn\n\t\t}\n\t\tconst travel = Math.hypot(\n\t\t\tevent.clientX - dragOrigin.current.x,\n\t\t\tevent.clientY - dragOrigin.current.y\n\t\t)\n\t\tif (!dragged.current && travel < 4) {\n\t\t\treturn\n\t\t}\n\t\tdragged.current = true\n\t\tconst next = {\n\t\t\tx: event.clientX - dragOffset.current.x,\n\t\t\ty: event.clientY - dragOffset.current.y,\n\t\t}\n\t\tconst previous = lastSample.current\n\t\tconst dt = previous ? event.timeStamp - previous.t : 0\n\t\tif (previous && dt > 0) {\n\t\t\tvelocity.current = {\n\t\t\t\tx: (event.clientX - previous.x) / dt,\n\t\t\t\ty: (event.clientY - previous.y) / dt,\n\t\t\t}\n\t\t}\n\t\tlastSample.current = { t: event.timeStamp, x: event.clientX, y: event.clientY }\n\t\tdragPointRef.current = next\n\t\tsetDragPoint(next)\n\t}\n\n\tif (!visible || onLogin) {\n\t\treturn null\n\t}\n\n\tif (collapsed) {\n\t\tconst rect = chipRef.current?.getBoundingClientRect()\n\t\tconst header = mounted\n\t\t\t? Number.parseFloat(\n\t\t\t\t\tgetComputedStyle(document.documentElement).getPropertyValue('--app-header-height')\n\t\t\t\t)\n\t\t\t: 48\n\t\tconst anchors = anchorsFor({\n\t\t\theader: Number.isFinite(header) ? header : 48,\n\t\t\tsize: { height: rect?.height ?? 36, width: rect?.width ?? 168 },\n\t\t\tviewport,\n\t\t})\n\t\tconst point = dragPoint ?? anchors[edge]\n\t\treturn (\n\t\t\t<div\n\t\t\t\taria-label={actingAs}\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclassName={[\n\t\t\t\t\t'impersonation-chip',\n\t\t\t\t\ttone === 'quiet' ? 'impersonation-chip--quiet' : null,\n\t\t\t\t\tdragPoint ? 'impersonation-chip--dragging' : null,\n\t\t\t\t]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(' ')}\n\t\t\t\tonPointerCancel={endChipDrag}\n\t\t\t\tonPointerDown={onChipPointerDown}\n\t\t\t\tonPointerMove={onChipPointerMove}\n\t\t\t\tonPointerUp={endChipDrag}\n\t\t\t\tref={chipRef}\n\t\t\t\trole=\"status\"\n\t\t\t\tstyle={{ left: point.x, top: point.y }}\n\t\t\t>\n\t\t\t\t<span className=\"impersonation-chip__name\">{targetName}</span>\n\t\t\t\t<button\n\t\t\t\t\taria-label={messageFor(impersonatorLocale, keys.expandBar)}\n\t\t\t\t\tclassName=\"impersonation-bar__icon\"\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tif (dragged.current) {\n\t\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t\texpand()\n\t\t\t\t\t}}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t<ExpandIcon />\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t)\n\t}\n\n\tconst countdown = sessionEndsAt ? formatCountdown(sessionEndsAt, now) : null\n\tconst endsLabel =\n\t\tcountdown && countdown !== '0s'\n\t\t\t? fillTemplate(sessionEndsInTemplate, '{{countdown}}', countdown)\n\t\t\t: sessionEndsAt && countdown !== '0s'\n\t\t\t\t? fillTemplate(\n\t\t\t\t\t\tsessionEndsAtTemplate,\n\t\t\t\t\t\t'{{time}}',\n\t\t\t\t\t\tnew Date(sessionEndsAt).toLocaleTimeString(impersonatorLocale ?? undefined)\n\t\t\t\t\t)\n\t\t\t\t: null\n\n\treturn (\n\t\t<div\n\t\t\taria-live=\"polite\"\n\t\t\tclassName={\n\t\t\t\ttone === 'quiet' ? 'impersonation-bar impersonation-bar--quiet' : 'impersonation-bar'\n\t\t\t}\n\t\t\trole=\"status\"\n\t\t>\n\t\t\t<div className=\"impersonation-bar__meta\">\n\t\t\t\t<div className=\"impersonation-bar__copy\">\n\t\t\t\t\t<Pill pillStyle={tone === 'quiet' ? 'success' : 'warning'} size=\"small\">\n\t\t\t\t\t\t{pluginName}\n\t\t\t\t\t</Pill>\n\t\t\t\t\t<span>{actingAs}</span>\n\t\t\t\t</div>\n\t\t\t\t{endsLabel ? <div className=\"impersonation-bar__time\">{endsLabel}</div> : null}\n\t\t\t</div>\n\t\t\t<div className=\"impersonation-bar__actions\">\n\t\t\t\t{showFrontendLink && frontendUrl ? (\n\t\t\t\t\t<a className=\"impersonation-bar__link\" href={frontendUrl}>\n\t\t\t\t\t\t{openWebsite}\n\t\t\t\t\t</a>\n\t\t\t\t) : null}\n\t\t\t\t<Button\n\t\t\t\t\tbuttonStyle=\"pill\"\n\t\t\t\t\tdisabled={busy}\n\t\t\t\t\tmargin={false}\n\t\t\t\t\tonClick={() => void onExit()}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t{returnTo}\n\t\t\t\t</Button>\n\t\t\t\t<button\n\t\t\t\t\taria-label={messageFor(impersonatorLocale, keys.collapseBar)}\n\t\t\t\t\tclassName=\"impersonation-bar__icon\"\n\t\t\t\t\tonClick={collapse}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t<CollapseIcon />\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nconst CollapseIcon = () => (\n\t<svg aria-hidden=\"true\" fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\">\n\t\t<path d=\"M3.5 6 8 10.5 12.5 6\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n\t</svg>\n)\n\nconst ExpandIcon = () => (\n\t<svg aria-hidden=\"true\" fill=\"none\" height=\"16\" viewBox=\"0 0 16 16\" width=\"16\">\n\t\t<path d=\"M3 6h10M3 10h10\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n\t</svg>\n)\n"],"mappings":"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"}

package/dist/ui/ImpersonationConfig.js

@@ -0,0 +1,25 @@
+"use client";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/ImpersonationConfig.tsx
+const Context = createContext(null);
+const ImpersonationClientConfig = ({ children, value }) => {
+	const [status, setStatus] = useState(value.status);
+	useEffect(() => {
+		setStatus(value.status);
+	}, [value.status]);
+	const live = useMemo(() => ({
+		...value,
+		setStatus,
+		status
+	}), [status, value]);
+	return /* @__PURE__ */ jsx(Context.Provider, {
+		value: live,
+		children
+	});
+};
+const useImpersonationClient = () => useContext(Context);
+//#endregion
+export { ImpersonationClientConfig, useImpersonationClient };
+
+//# sourceMappingURL=ImpersonationConfig.js.map

package/dist/ui/ImpersonationConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImpersonationConfig.js","names":[],"sources":["../../src/ui/ImpersonationConfig.tsx"],"sourcesContent":["'use client'\n\nimport type { Where } from 'payload'\nimport { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from 'react'\n\nimport type { ImpersonationStatus } from '../getImpersonation'\n\nexport type TargetFilterMap = Record<string, true | Where>\n\nexport type ImpersonationClientOptions = {\n\tapiPath: string\n\tcardEmail: boolean\n\treasonMode: 'off' | 'optional' | 'required'\n\tsessionCollection: string\n\tsetStatus: (status: ImpersonationStatus) => void\n\tstatus: ImpersonationStatus\n\ttargetFilters: TargetFilterMap\n}\n\ntype ServerClientOptions = Omit<ImpersonationClientOptions, 'setStatus'>\n\nconst Context = createContext<ImpersonationClientOptions | null>(null)\n\nexport const ImpersonationClientConfig = ({\n\tchildren,\n\tvalue,\n}: {\n\tchildren: ReactNode\n\tvalue: ServerClientOptions\n}) => {\n\tconst [status, setStatus] = useState(value.status)\n\tuseEffect(() => {\n\t\tsetStatus(value.status)\n\t}, [value.status])\n\tconst live = useMemo(() => ({ ...value, setStatus, status }), [status, value])\n\treturn <Context.Provider value={live}>{children}</Context.Provider>\n}\n\nexport const useImpersonationClient = () => useContext(Context)\n"],"mappings":";;;;AAqBA,MAAM,UAAU,cAAiD,IAAI;AAErE,MAAa,6BAA6B,EACzC,UACA,YAIK;CACL,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM,MAAM;CACjD,gBAAgB;EACf,UAAU,MAAM,MAAM;CACvB,GAAG,CAAC,MAAM,MAAM,CAAC;CACjB,MAAM,OAAO,eAAe;EAAE,GAAG;EAAO;EAAW;CAAO,IAAI,CAAC,QAAQ,KAAK,CAAC;CAC7E,OAAO,oBAAC,QAAQ,UAAT;EAAkB,OAAO;EAAO;CAA2B,CAAA;AACnE;AAEA,MAAa,+BAA+B,WAAW,OAAO"}

package/dist/ui/ImpersonationDocumentButton.d.ts

@@ -0,0 +1,5 @@
+//#region src/ui/ImpersonationDocumentButton.d.ts
+declare const ImpersonationDocumentButton: () => import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { ImpersonationDocumentButton };
+//# sourceMappingURL=ImpersonationDocumentButton.d.ts.map

package/dist/ui/ImpersonationDocumentButton.js

@@ -0,0 +1,85 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { useImpersonation } from "./useImpersonation.js";
+import { ImpersonateIcon } from "./ImpersonateIcon.js";
+import { StartConfirmModal } from "./StartConfirmModal.js";
+import { useEffect, useMemo, useState } from "react";
+import { Button, useAuth, useConfig, useDocumentInfo, useDocumentTitle, useModal } from "@payloadcms/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/ImpersonationDocumentButton.tsx
+const CONFIRM_SLUG = "impersonation-confirm-document";
+const ImpersonationDocumentButton = () => {
+	const { collectionSlug, data, id } = useDocumentInfo();
+	const { title } = useDocumentTitle();
+	const { user } = useAuth();
+	const { config } = useConfig();
+	const { t } = useTranslation$1();
+	const { openModal } = useModal();
+	const { apiPath, reasonMode, status, targetFilters } = useImpersonation();
+	const filter = collectionSlug ? targetFilters[collectionSlug] : void 0;
+	const [matchesFilter, setMatchesFilter] = useState(filter === true);
+	useEffect(() => {
+		if (!collectionSlug || id === void 0 || filter === void 0 || filter === true) {
+			setMatchesFilter(filter === true);
+			return;
+		}
+		const controller = new AbortController();
+		const params = new URLSearchParams({
+			depth: "0",
+			limit: "1",
+			where: JSON.stringify({ and: [{ id: { equals: id } }, filter] })
+		});
+		fetch(`${config.routes.api}/${collectionSlug}?${params.toString()}`, {
+			credentials: "include",
+			signal: controller.signal
+		}).then(async (response) => {
+			if (!response.ok) return { docs: [] };
+			return await response.json();
+		}).then((body) => {
+			if (!controller.signal.aborted) setMatchesFilter((body.docs?.length ?? 0) > 0);
+		}).catch(() => {
+			if (!controller.signal.aborted) setMatchesFilter(false);
+		});
+		return () => controller.abort();
+	}, [
+		collectionSlug,
+		config.routes.api,
+		filter,
+		id
+	]);
+	const target = useMemo(() => {
+		if (!collectionSlug || id === void 0 || filter === void 0) return null;
+		return {
+			collection: collectionSlug,
+			id,
+			label: (data && typeof data === "object" ? String(data.name ?? data.email ?? "") : "") || title || String(id)
+		};
+	}, [
+		collectionSlug,
+		data,
+		filter,
+		id,
+		title
+	]);
+	const self = user && collectionSlug === user.collection && id !== void 0 && String(user.id) === String(id);
+	if (!target || !matchesFilter || status.active || self) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		buttonStyle: "subtle",
+		className: "impersonation-document-button",
+		icon: /* @__PURE__ */ jsx(ImpersonateIcon, {}),
+		iconPosition: "left",
+		margin: false,
+		onClick: () => openModal(CONFIRM_SLUG),
+		children: t(keys.switchToUser)
+	}), /* @__PURE__ */ jsx(StartConfirmModal, {
+		apiPath,
+		modalSlug: CONFIRM_SLUG,
+		reasonMode,
+		target
+	}, `${target.collection}:${target.id}`)] });
+};
+//#endregion
+export { ImpersonationDocumentButton };
+
+//# sourceMappingURL=ImpersonationDocumentButton.js.map

package/dist/ui/ImpersonationDocumentButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImpersonationDocumentButton.js","names":["useTranslation"],"sources":["../../src/ui/ImpersonationDocumentButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tButton,\n\tuseAuth,\n\tuseConfig,\n\tuseDocumentInfo,\n\tuseDocumentTitle,\n\tuseModal,\n} from '@payloadcms/ui'\nimport { useEffect, useMemo, useState } from 'react'\n\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport { ImpersonateIcon } from './ImpersonateIcon'\nimport { StartConfirmModal, type StartTarget } from './StartConfirmModal'\nimport { useImpersonation } from './useImpersonation'\n\nconst CONFIRM_SLUG = 'impersonation-confirm-document'\n\nexport const ImpersonationDocumentButton = () => {\n\tconst { collectionSlug, data, id } = useDocumentInfo()\n\tconst { title } = useDocumentTitle()\n\tconst { user } = useAuth()\n\tconst { config } = useConfig()\n\tconst { t } = useTranslation()\n\tconst { openModal } = useModal()\n\tconst { apiPath, reasonMode, status, targetFilters } = useImpersonation()\n\tconst filter = collectionSlug ? targetFilters[collectionSlug] : undefined\n\tconst [matchesFilter, setMatchesFilter] = useState(filter === true)\n\n\tuseEffect(() => {\n\t\tif (!collectionSlug || id === undefined || filter === undefined || filter === true) {\n\t\t\tsetMatchesFilter(filter === true)\n\t\t\treturn\n\t\t}\n\t\tconst controller = new AbortController()\n\t\tconst params = new URLSearchParams({\n\t\t\tdepth: '0',\n\t\t\tlimit: '1',\n\t\t\twhere: JSON.stringify({ and: [{ id: { equals: id } }, filter] }),\n\t\t})\n\t\tvoid fetch(`${config.routes.api}/${collectionSlug}?${params.toString()}`, {\n\t\t\tcredentials: 'include',\n\t\t\tsignal: controller.signal,\n\t\t})\n\t\t\t.then(async (response) => {\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\treturn { docs: [] }\n\t\t\t\t}\n\t\t\t\treturn (await response.json()) as { docs?: unknown[] }\n\t\t\t})\n\t\t\t.then((body) => {\n\t\t\t\tif (!controller.signal.aborted) {\n\t\t\t\t\tsetMatchesFilter((body.docs?.length ?? 0) > 0)\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(() => {\n\t\t\t\tif (!controller.signal.aborted) {\n\t\t\t\t\tsetMatchesFilter(false)\n\t\t\t\t}\n\t\t\t})\n\t\treturn () => controller.abort()\n\t}, [collectionSlug, config.routes.api, filter, id])\n\n\tconst target = useMemo<null | StartTarget>(() => {\n\t\tif (!collectionSlug || id === undefined || filter === undefined) {\n\t\t\treturn null\n\t\t}\n\t\tconst fromData =\n\t\t\tdata && typeof data === 'object'\n\t\t\t\t? String(\n\t\t\t\t\t\t(data as { email?: string; name?: string }).name ??\n\t\t\t\t\t\t\t(data as { email?: string }).email ??\n\t\t\t\t\t\t\t''\n\t\t\t\t\t)\n\t\t\t\t: ''\n\t\treturn {\n\t\t\tcollection: collectionSlug,\n\t\t\tid,\n\t\t\tlabel: fromData || title || String(id),\n\t\t}\n\t}, [collectionSlug, data, filter, id, title])\n\n\tconst self =\n\t\tuser && collectionSlug === user.collection && id !== undefined && String(user.id) === String(id)\n\n\tif (!target || !matchesFilter || status.active || self) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tbuttonStyle=\"subtle\"\n\t\t\t\tclassName=\"impersonation-document-button\"\n\t\t\t\ticon={<ImpersonateIcon />}\n\t\t\t\ticonPosition=\"left\"\n\t\t\t\tmargin={false}\n\t\t\t\tonClick={() => openModal(CONFIRM_SLUG)}\n\t\t\t>\n\t\t\t\t{t(keys.switchToUser)}\n\t\t\t</Button>\n\t\t\t<StartConfirmModal\n\t\t\t\tapiPath={apiPath}\n\t\t\t\tkey={`${target.collection}:${target.id}`}\n\t\t\t\tmodalSlug={CONFIRM_SLUG}\n\t\t\t\treasonMode={reasonMode}\n\t\t\t\ttarget={target}\n\t\t\t/>\n\t\t</>\n\t)\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAM,eAAe;AAErB,MAAa,oCAAoC;CAChD,MAAM,EAAE,gBAAgB,MAAM,OAAO,gBAAgB;CACrD,MAAM,EAAE,UAAU,iBAAiB;CACnC,MAAM,EAAE,SAAS,QAAQ;CACzB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,EAAE,MAAMA,iBAAe;CAC7B,MAAM,EAAE,cAAc,SAAS;CAC/B,MAAM,EAAE,SAAS,YAAY,QAAQ,kBAAkB,iBAAiB;CACxE,MAAM,SAAS,iBAAiB,cAAc,kBAAkB,KAAA;CAChE,MAAM,CAAC,eAAe,oBAAoB,SAAS,WAAW,IAAI;CAElE,gBAAgB;EACf,IAAI,CAAC,kBAAkB,OAAO,KAAA,KAAa,WAAW,KAAA,KAAa,WAAW,MAAM;GACnF,iBAAiB,WAAW,IAAI;GAChC;EACD;EACA,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,SAAS,IAAI,gBAAgB;GAClC,OAAO;GACP,OAAO;GACP,OAAO,KAAK,UAAU,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,EAAE,GAAG,MAAM,EAAE,CAAC;EAChE,CAAC;EACD,MAAW,GAAG,OAAO,OAAO,IAAI,GAAG,eAAe,GAAG,OAAO,SAAS,KAAK;GACzE,aAAa;GACb,QAAQ,WAAW;EACpB,CAAC,EACC,KAAK,OAAO,aAAa;GACzB,IAAI,CAAC,SAAS,IACb,OAAO,EAAE,MAAM,CAAC,EAAE;GAEnB,OAAQ,MAAM,SAAS,KAAK;EAC7B,CAAC,EACA,MAAM,SAAS;GACf,IAAI,CAAC,WAAW,OAAO,SACtB,kBAAkB,KAAK,MAAM,UAAU,KAAK,CAAC;EAE/C,CAAC,EACA,YAAY;GACZ,IAAI,CAAC,WAAW,OAAO,SACtB,iBAAiB,KAAK;EAExB,CAAC;EACF,aAAa,WAAW,MAAM;CAC/B,GAAG;EAAC;EAAgB,OAAO,OAAO;EAAK;EAAQ;CAAE,CAAC;CAElD,MAAM,SAAS,cAAkC;EAChD,IAAI,CAAC,kBAAkB,OAAO,KAAA,KAAa,WAAW,KAAA,GACrD,OAAO;EAUR,OAAO;GACN,YAAY;GACZ;GACA,QAVA,QAAQ,OAAO,SAAS,WACrB,OACC,KAA2C,QAC1C,KAA4B,SAC7B,EACF,IACC,OAIgB,SAAS,OAAO,EAAE;EACtC;CACD,GAAG;EAAC;EAAgB;EAAM;EAAQ;EAAI;CAAK,CAAC;CAE5C,MAAM,OACL,QAAQ,mBAAmB,KAAK,cAAc,OAAO,KAAA,KAAa,OAAO,KAAK,EAAE,MAAM,OAAO,EAAE;CAEhG,IAAI,CAAC,UAAU,CAAC,iBAAiB,OAAO,UAAU,MACjD,OAAO;CAGR,OACC,qBAAA,UAAA,EAAA,UAAA,CACC,oBAAC,QAAD;EACC,aAAY;EACZ,WAAU;EACV,MAAM,oBAAC,iBAAD,CAAkB,CAAA;EACxB,cAAa;EACb,QAAQ;EACR,eAAe,UAAU,YAAY;YAEpC,EAAE,KAAK,YAAY;CACb,CAAA,GACR,oBAAC,mBAAD;EACU;EAET,WAAW;EACC;EACJ;CACR,GAJK,GAAG,OAAO,WAAW,GAAG,OAAO,IAIpC,CACA,EAAA,CAAA;AAEJ"}