@burdenoff/microfe-bigconsole 2026.1004.3 → 2026.1004.4

package/dist/bigconsole/components/dashboard/ShareDialog/ShareDialog.js

@@ -1,25 +1,28 @@
-import e from "../../../hooks/useBigConsoleAnalytics.js";
-import t from "../../../hooks/useDashboardSharing.js";
+import { useBigConsole as e, useBigConsoleBasePath as t } from "../../../context/BigConsoleContext.js";
+import n from "../../../hooks/useBigConsoleAnalytics.js";
+import r from "../../../hooks/useDashboardSharing.js";
 import "../../../hooks/index.js";
-import n from "./EmbedTab.js";
-import { useCallback as r, useEffect as i, useMemo as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { createPortal as ee } from "react-dom";
-import { formatDistanceToNow as l } from "date-fns";
+import i from "./EmbedTab.js";
+import { useShareRecipients as a } from "../../../hooks/useShareRecipients.js";
+import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { ResponsiveDialog as ee, ResponsiveDialogContent as u, ResponsiveDialogDescription as d, ResponsiveDialogTitle as te } from "@burdenoff/fe-libs/ui";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useI18n as ne } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { formatDistanceToNow as m } from "date-fns";
 //#region src/bigconsole/components/dashboard/ShareDialog/ShareDialog.tsx
-var u = (e) => ({
-	bgPrimary: e ? "#1a1a2e" : "#ffffff",
-	bgSecondary: e ? "#252542" : "#f4f4f5",
-	bgTertiary: e ? "#2d2d4a" : "#e4e4e7",
-	textPrimary: e ? "#f4f4f5" : "#18181b",
-	textSecondary: e ? "#a1a1aa" : "#71717a",
-	textTertiary: e ? "#71717a" : "#a1a1aa",
-	borderDefault: e ? "#3f3f5c" : "#e4e4e7",
-	actionPrimaryBg: "#6366f1",
-	actionPrimaryBgHover: "#4f46e5",
-	statusSuccessBg: "#22c55e",
-	statusErrorText: "#ef4444"
-}), d = [
+var h = {
+	bgPrimary: "var(--color-bg-surface)",
+	bgSecondary: "var(--color-bg-sunken)",
+	bgTertiary: "var(--color-bg-canvas)",
+	textPrimary: "var(--color-text-primary)",
+	textSecondary: "var(--color-text-secondary)",
+	textTertiary: "var(--color-text-muted)",
+	borderDefault: "var(--color-border-default)",
+	actionPrimaryBg: "var(--color-action-primary-bg)",
+	actionPrimaryBgHover: "var(--color-action-primary-bgHover)",
+	statusSuccessBg: "var(--color-status-success-bg)",
+	statusErrorText: "var(--color-status-error-text)"
+}, g = [
 	{
 		value: "PRIVATE",
 		label: "Private",
@@ -35,7 +38,7 @@ var u = (e) => ({
 		label: "Public",
 		description: "Anyone with the link"
 	}
-], f = [{
+], _ = [{
 	value: "VIEW",
 	label: "View",
 	description: "Can view the dashboard"
@@ -44,162 +47,167 @@ var u = (e) => ({
 	label: "Edit",
 	description: "Can edit widgets, layout, and share"
 }];
-function p({ dashboardId: l, dashboardName: p, isOpen: m, onClose: g, visibility: _, onVisibilityChange: v, canChangeVisibility: y = !0 }) {
-	let { shares: b, loading: x, fetchShares: S, shareWithUser: C, shareWithGroup: w, updateShare: T, revokeShare: E, revokeAllShares: D } = t(), O = e(), [k, A] = o(""), [j, M] = o(null), [N, P] = o("VIEW"), [F, I] = o(""), [L, R] = o(!1), [z, B] = o("people"), [V, H] = o(!1), [U, W] = o(null);
-	i(() => {
-		m && l && (S(l), I(`${window.location.origin}/dashboard/${l}?shared=true`));
+function v(t) {
+	let { workspaceId: n, currentUser: r } = e(), i = c(null);
+	return /* @__PURE__ */ f(y, {
+		...t,
+		returnFocusRef: i
+	}, `${r?.id ?? ""}|${n ?? ""}|${t.dashboardId}`);
+}
+function y({ dashboardId: e, dashboardName: c, isOpen: m, onClose: v, visibility: y, onVisibilityChange: b, canChangeVisibility: x = !0, returnFocusRef: S }) {
+	let { t: C } = ne(), { shares: w, loading: T, error: ie, fetchShares: E, shareWithUser: D, shareWithGroup: O, updateShare: k, revokeShare: A, revokeAllShares: j } = r(), M = n(), [N, P] = l(""), [F, I] = l(null), [L, R] = l("VIEW"), [z, ae] = l(""), [B, V] = l(!1), [H, U] = l("people"), [W, G] = l(!1), [K, q] = l(null), [J, Y] = l(null), X = a(m, N), Z = t();
+	s(() => {
+		let e = !1;
+		return Promise.resolve().then(() => {
+			e || (I(null), P(""), Y(null));
+		}), () => {
+			e = !0;
+		};
+	}, [
+		X.owner,
+		e,
+		m
+	]), s(() => {
+		if (m && e) {
+			E(e);
+			let t = new URL(`${Z}/dashboards/${encodeURIComponent(e)}`, window.location.origin), n = new URLSearchParams(window.location.search);
+			for (let e of [
+				"org",
+				"workspace",
+				"project",
+				"tenant"
+			]) {
+				let r = n.get(e);
+				r && t.searchParams.set(e, r);
+			}
+			X.workspaceId && t.searchParams.set("workspace", X.workspaceId), ae(t.toString());
+		}
 	}, [
 		m,
-		l,
-		S
+		e,
+		E,
+		Z,
+		X.workspaceId
 	]);
-	let G = r(async () => {
-		if (!j) return;
-		O("bigconsole.dashboard.share_clicked", {
-			dashboardId: l,
-			permission: N,
-			recipientType: j.type
+	let oe = o(async () => {
+		if (!F || T || F.workspaceId !== X.workspaceId) return;
+		Y(null), M("bigconsole.dashboard.share_clicked", {
+			dashboardId: e,
+			permission: L,
+			recipientType: F.type
 		});
-		let e = null;
-		j.type === "USER" ? e = await C(l, j.id, N) : j.type === "GROUP" && (e = await w(l, j.id, N)), e && O("bigconsole.dashboard.shared", {
-			dashboardId: l,
-			permission: N,
-			recipientType: j.type
-		}), M(null), A("");
+		let t = null;
+		if (F.type === "USER" ? t = await D(e, F.id, L) : F.type === "GROUP" && (t = await O(e, F.id, L)), t && M("bigconsole.dashboard.shared", {
+			dashboardId: e,
+			permission: L,
+			recipientType: F.type
+		}), !t) {
+			Y(C("bigconsole.share.error.grantFailed", "Access could not be granted. Review the recipient and try again."));
+			return;
+		}
+		I(null), P("");
 	}, [
-		l,
+		X.workspaceId,
+		C,
+		T,
+		e,
+		M,
+		F,
+		L,
 		O,
-		j,
-		N,
-		w,
-		C
-	]), K = r(async (e, t) => {
-		await T({
+		D
+	]), se = o(async (e, t) => {
+		await k({
 			id: e,
 			permission: t
 		});
-	}, [T]), q = r(async (e) => {
-		window.confirm("Are you sure you want to revoke this access?") && await E(e);
-	}, [E]), J = r(async () => {
-		window.confirm("Are you sure you want to revoke all shared access?") && await D(l);
-	}, [l, D]), Y = r(async (e) => {
-		if (!(!v || e === _)) {
-			W(null), H(!0);
+	}, [k]), Q = o(async (e) => {
+		window.confirm("Are you sure you want to revoke this access?") && await A(e);
+	}, [A]), ce = o(async () => {
+		window.confirm("Are you sure you want to revoke all shared access?") && await j(e);
+	}, [e, j]), le = o(async (e) => {
+		if (!(!b || e === y)) {
+			q(null), G(!0);
 			try {
-				await v(e);
+				await b(e);
 			} catch (e) {
-				W(e instanceof Error ? e.message : "Could not update general access.");
+				q(e instanceof Error ? e.message : "Could not update general access.");
 			} finally {
-				H(!1);
+				G(!1);
 			}
 		}
-	}, [v, _]), X = r(async () => {
+	}, [b, y]), ue = o(async () => {
 		try {
-			await navigator.clipboard.writeText(F), R(!0), setTimeout(() => R(!1), 2e3);
-		} catch {}
-	}, [F]), Z = k ? [
-		{
-			id: "user-1",
-			name: "John Doe",
-			email: "john@example.com",
-			type: "USER"
-		},
-		{
-			id: "user-2",
-			name: "Jane Smith",
-			email: "jane@example.com",
-			type: "USER"
-		},
-		{
-			id: "group-admin",
-			name: "Administrators",
-			type: "GROUP"
-		},
-		{
-			id: "group-editor",
-			name: "Editors",
-			type: "GROUP"
+			await navigator.clipboard.writeText(z), V(!0), setTimeout(() => V(!1), 2e3);
+		} catch {
+			Y(C("bigconsole.share.error.copyFailed", "The link could not be copied. Select the link and copy it manually."));
 		}
-	].filter((e) => e.name.toLowerCase().includes(k.toLowerCase()) || e.email?.toLowerCase().includes(k.toLowerCase())) : [], Q = typeof document < "u" && document.documentElement.classList.contains("dark"), $ = a(() => u(Q), [Q]);
-	return m ? ee(/* @__PURE__ */ s("div", {
-		style: {
-			position: "fixed",
-			top: 0,
-			left: 0,
-			right: 0,
-			bottom: 0,
-			backgroundColor: "var(--color-overlay-scrim)",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			padding: "var(--space-formGap)",
-			zIndex: 99999,
-			isolation: "isolate"
+	}, [z, C]), $ = X.results;
+	return m ? /* @__PURE__ */ f(ee, {
+		open: m,
+		onOpenChange: (e) => {
+			e || v();
 		},
-		onClick: g,
-		role: "presentation",
-		children: /* @__PURE__ */ c("div", {
-			role: "dialog",
-			"aria-modal": "true",
-			"aria-labelledby": "share-dialog-title",
+		children: /* @__PURE__ */ p(u, {
+			showCloseButton: !1,
 			"data-testid": "share-dialog",
+			className: "flex w-full flex-col gap-0 overflow-hidden rounded-card p-0 sm:w-[calc(100%-2rem)] sm:max-w-[520px]",
+			onOpenAutoFocus: () => {
+				let e = document.activeElement;
+				e instanceof HTMLElement && e !== document.body && !e.closest("[role=dialog]") && (S.current = e);
+			},
+			onCloseAutoFocus: (e) => {
+				e.preventDefault(), S.current?.isConnected && S.current.focus();
+			},
 			style: {
-				width: "100%",
 				maxWidth: "520px",
-				maxHeight: "85vh",
-				display: "flex",
-				flexDirection: "column",
-				backgroundColor: $.bgPrimary,
-				borderRadius: "var(--radius-card)",
-				boxShadow: "var(--shadow-elevation-3)",
-				overflow: "hidden",
-				position: "relative",
-				zIndex: 1e5,
-				color: $.textPrimary
+				maxHeight: "85dvh",
+				backgroundColor: h.bgPrimary,
+				color: h.textPrimary
 			},
-			onClick: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ c("div", {
+				/* @__PURE__ */ p("div", {
 					style: {
 						flexShrink: 0,
 						padding: "20px 24px",
-						borderBottom: `1px solid ${$.borderDefault}`,
+						borderBottom: `1px solid ${h.borderDefault}`,
 						display: "flex",
 						alignItems: "center",
 						justifyContent: "space-between",
-						backgroundColor: $.bgPrimary
+						backgroundColor: h.bgPrimary
 					},
-					children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("h2", {
-						id: "share-dialog-title",
+					children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(te, {
 						style: {
 							margin: 0,
 							fontSize: "18px",
 							fontWeight: 600,
-							color: $.textPrimary
+							color: h.textPrimary
 						},
 						children: "Share Dashboard"
-					}), /* @__PURE__ */ s("p", {
+					}), /* @__PURE__ */ f(d, {
 						style: {
 							margin: "4px 0 0",
 							fontSize: "13px",
-							color: $.textSecondary
+							color: h.textSecondary
 						},
-						children: p
-					})] }), /* @__PURE__ */ s("button", {
-						onClick: g,
+						children: c
+					})] }), /* @__PURE__ */ f("button", {
+						type: "button",
+						"aria-label": C("bigconsole.share.closeLabel", "Close share dialog"),
+						onClick: v,
 						style: {
 							background: "none",
 							border: "none",
 							fontSize: "24px",
 							cursor: "pointer",
-							color: $.textSecondary,
+							color: h.textSecondary,
 							padding: "4px",
 							lineHeight: 1
 						},
 						children: "×"
 					})]
 				}),
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ f("div", {
 					role: "tablist",
 					"aria-label": "Share options",
 					style: {
@@ -207,20 +215,20 @@ function p({ dashboardId: l, dashboardName: p, isOpen: m, onClose: g, visibility
 						display: "flex",
 						gap: "4px",
 						padding: "0 24px",
-						borderBottom: `1px solid ${$.borderDefault}`,
-						backgroundColor: $.bgPrimary
+						borderBottom: `1px solid ${h.borderDefault}`,
+						backgroundColor: h.bgPrimary
 					},
-					children: ["people", "embed"].map((e) => /* @__PURE__ */ s("button", {
+					children: ["people", "embed"].map((e) => /* @__PURE__ */ f("button", {
 						type: "button",
 						role: "tab",
-						"aria-selected": z === e,
-						onClick: () => B(e),
+						"aria-selected": H === e,
+						onClick: () => U(e),
 						style: {
 							padding: "10px 12px",
 							background: "none",
 							border: "none",
-							borderBottom: `2px solid ${z === e ? $.actionPrimaryBg : "transparent"}`,
-							color: z === e ? $.textPrimary : $.textSecondary,
+							borderBottom: `2px solid ${H === e ? h.actionPrimaryBg : "transparent"}`,
+							color: H === e ? h.textPrimary : h.textSecondary,
 							fontSize: "13px",
 							fontWeight: 600,
 							cursor: "pointer"
@@ -228,111 +236,111 @@ function p({ dashboardId: l, dashboardName: p, isOpen: m, onClose: g, visibility
 						children: e === "people" ? "People" : "Publish to web"
 					}, e))
 				}),
-				z === "embed" && /* @__PURE__ */ s("div", {
+				H === "embed" && /* @__PURE__ */ f("div", {
 					className: "min-h-0 flex-1 overflow-y-auto",
-					style: { backgroundColor: $.bgPrimary },
-					children: /* @__PURE__ */ s(n, {
-						dashboardId: l,
-						colors: $
+					style: { backgroundColor: h.bgPrimary },
+					children: /* @__PURE__ */ f(i, {
+						dashboardId: e,
+						colors: h
 					})
 				}),
-				z === "people" && /* @__PURE__ */ c("div", {
+				H === "people" && /* @__PURE__ */ p("div", {
 					className: "flex min-h-0 flex-1 flex-col gap-section-gap overflow-y-auto p-card-padding",
-					style: { backgroundColor: $.bgPrimary },
+					style: { backgroundColor: h.bgPrimary },
 					children: [
-						_ && v && /* @__PURE__ */ c("section", {
+						y && b && /* @__PURE__ */ p("section", {
 							"aria-labelledby": "share-visibility-heading",
 							children: [
-								/* @__PURE__ */ s("h3", {
+								/* @__PURE__ */ f("h3", {
 									id: "share-visibility-heading",
 									className: "mb-form-gap text-sm font-semibold",
-									style: { color: $.textPrimary },
+									style: { color: h.textPrimary },
 									children: "General access"
 								}),
-								/* @__PURE__ */ c("div", {
+								/* @__PURE__ */ p("div", {
 									style: {
 										display: "flex",
 										alignItems: "center",
 										gap: "8px",
 										flexWrap: "wrap"
 									},
-									children: [/* @__PURE__ */ s("select", {
+									children: [/* @__PURE__ */ f("select", {
 										"aria-label": "General access",
 										"data-testid": "share-visibility",
-										value: _,
-										disabled: !y || V,
-										onChange: (e) => void Y(e.target.value),
+										value: y,
+										disabled: !x || W,
+										onChange: (e) => void le(e.target.value),
 										style: {
 											padding: "10px 12px",
-											border: `1px solid ${$.borderDefault}`,
+											border: `1px solid ${h.borderDefault}`,
 											borderRadius: "6px",
 											fontSize: "13px",
-											backgroundColor: $.bgPrimary,
-											color: $.textPrimary,
-											cursor: !y || V ? "not-allowed" : "pointer",
-											opacity: !y || V ? .6 : 1
+											backgroundColor: h.bgPrimary,
+											color: h.textPrimary,
+											cursor: !x || W ? "not-allowed" : "pointer",
+											opacity: !x || W ? .6 : 1
 										},
-										children: d.map((e) => /* @__PURE__ */ s("option", {
+										children: g.map((e) => /* @__PURE__ */ f("option", {
 											value: e.value,
 											children: e.label
 										}, e.value))
-									}), /* @__PURE__ */ s("span", {
+									}), /* @__PURE__ */ f("span", {
 										style: {
 											fontSize: "12px",
-											color: $.textSecondary
+											color: h.textSecondary
 										},
-										children: d.find((e) => e.value === _)?.description
+										children: g.find((e) => e.value === y)?.description
 									})]
 								}),
-								!y && /* @__PURE__ */ s("p", {
+								!x && /* @__PURE__ */ f("p", {
 									style: {
 										margin: "6px 0 0",
 										fontSize: "11px",
-										color: $.textSecondary
+										color: h.textSecondary
 									},
 									children: "You don't have permission to change general access."
 								}),
-								U && /* @__PURE__ */ s("p", {
+								K && /* @__PURE__ */ f("p", {
 									style: {
 										margin: "6px 0 0",
 										fontSize: "11px",
-										color: $.statusErrorText
+										color: h.statusErrorText
 									},
-									children: U
+									children: K
 								})
 							]
 						}),
-						/* @__PURE__ */ c("section", {
+						/* @__PURE__ */ p("section", {
 							"aria-labelledby": "share-link-heading",
-							children: [/* @__PURE__ */ s("h3", {
+							children: [/* @__PURE__ */ f("h3", {
 								id: "share-link-heading",
 								className: "mb-form-gap text-sm font-semibold",
-								style: { color: $.textPrimary },
+								style: { color: h.textPrimary },
 								children: "Share link"
-							}), /* @__PURE__ */ c("div", {
+							}), /* @__PURE__ */ p("div", {
 								style: {
 									display: "flex",
 									gap: "8px",
 									flexWrap: "wrap"
 								},
-								children: [/* @__PURE__ */ s("input", {
+								children: [/* @__PURE__ */ f("input", {
 									type: "text",
-									value: F,
+									value: z,
 									readOnly: !0,
 									style: {
 										flex: 1,
 										padding: "10px 12px",
-										border: `1px solid ${$.borderDefault}`,
+										border: `1px solid ${h.borderDefault}`,
 										borderRadius: "6px",
 										fontSize: "13px",
-										backgroundColor: $.bgSecondary,
-										color: $.textPrimary
+										backgroundColor: h.bgSecondary,
+										color: h.textPrimary
 									}
-								}), /* @__PURE__ */ s("button", {
-									onClick: X,
+								}), /* @__PURE__ */ f("button", {
+									onClick: ue,
 									style: {
 										padding: "10px 16px",
-										backgroundColor: L ? $.statusSuccessBg : $.actionPrimaryBg,
+										backgroundColor: B ? h.statusSuccessBg : h.actionPrimaryBg,
 										color: "var(--color-action-primary-text)",
 										border: "none",
 										borderRadius: "6px",
@@ -341,138 +349,180 @@ function p({ dashboardId: l, dashboardName: p, isOpen: m, onClose: g, visibility
 										fontWeight: 500,
 										minWidth: "80px"
 									},
-									children: L ? "Copied!" : "Copy"
+									children: B ? "Copied!" : "Copy"
 								})]
 							})]
 						}),
-						/* @__PURE__ */ c("section", {
+						(ie || J) && /* @__PURE__ */ f("p", {
+							role: "alert",
+							style: { color: h.statusErrorText },
+							children: J || C("bigconsole.share.error.loadFailed", "Dashboard access could not be loaded or updated. Try again.")
+						}),
+						/* @__PURE__ */ p("section", {
 							"aria-labelledby": "share-invite-heading",
-							children: [/* @__PURE__ */ s("h3", {
-								id: "share-invite-heading",
-								className: "mb-form-gap text-sm font-semibold",
-								style: { color: $.textPrimary },
-								children: "Invite people"
-							}), /* @__PURE__ */ c("div", {
-								style: {
-									display: "flex",
-									gap: "8px",
-									marginBottom: "8px",
-									flexWrap: "wrap"
-								},
-								children: [
-									/* @__PURE__ */ c("div", {
-										style: {
-											flex: 1,
-											position: "relative"
-										},
-										children: [/* @__PURE__ */ s("input", {
-											type: "text",
-											value: j ? j.name : k,
-											onChange: (e) => {
-												A(e.target.value), M(null);
+							children: [
+								/* @__PURE__ */ f("h3", {
+									id: "share-invite-heading",
+									className: "mb-form-gap text-sm font-semibold",
+									style: { color: h.textPrimary },
+									children: "Invite people"
+								}),
+								/* @__PURE__ */ f("p", {
+									style: {
+										color: h.textSecondary,
+										fontSize: "13px",
+										marginBottom: "8px"
+									},
+									children: C("bigconsole.share.directory.scopeHint", "Only members and groups from the current workspace are listed.")
+								}),
+								X.loading && /* @__PURE__ */ f("p", {
+									role: "status",
+									children: C("bigconsole.share.directory.loading", "Loading workspace recipients…")
+								}),
+								X.error && /* @__PURE__ */ p("div", {
+									role: "alert",
+									children: [/* @__PURE__ */ f("p", { children: C("bigconsole.share.directory.loadFailed", "The workspace directory could not be loaded. Your access may not allow directory lookup.") }), /* @__PURE__ */ f("button", {
+										type: "button",
+										onClick: X.retry,
+										children: C("bigconsole.share.directory.retry", "Retry directory")
+									})]
+								}),
+								N && !F && !X.loading && !X.error && $.length === 0 && /* @__PURE__ */ f("p", {
+									role: "status",
+									children: C("bigconsole.share.directory.empty", "No matching workspace members or groups.")
+								}),
+								X.hasMoreMembers && /* @__PURE__ */ f("button", {
+									type: "button",
+									disabled: X.loading,
+									onClick: X.loadMoreMembers,
+									children: C("bigconsole.share.directory.loadMore", "Load more workspace members")
+								}),
+								X.hasMoreGroups && /* @__PURE__ */ f("p", { children: C("bigconsole.share.directory.moreGroups", "More groups match. Narrow your search to find a specific group.") }),
+								/* @__PURE__ */ p("div", {
+									style: {
+										display: "flex",
+										gap: "8px",
+										marginBottom: "8px",
+										flexWrap: "wrap"
+									},
+									children: [
+										/* @__PURE__ */ p("div", {
+											style: {
+												flex: 1,
+												position: "relative"
 											},
-											placeholder: "Search by name or email...",
+											children: [/* @__PURE__ */ f("input", {
+												type: "text",
+												value: F ? F.name : N,
+												onChange: (e) => {
+													P(e.target.value), I(null);
+												},
+												"aria-label": C("bigconsole.share.directory.searchLabel", "Search workspace members and groups"),
+												placeholder: C("bigconsole.share.directory.searchPlaceholder", "Search workspace members or groups..."),
+												style: {
+													width: "100%",
+													padding: "10px 12px",
+													border: `1px solid ${h.borderDefault}`,
+													borderRadius: "6px",
+													fontSize: "13px",
+													backgroundColor: h.bgPrimary,
+													color: h.textPrimary
+												}
+											}), N && !F && $.length > 0 && /* @__PURE__ */ f("div", {
+												style: {
+													position: "absolute",
+													top: "100%",
+													left: 0,
+													right: 0,
+													marginTop: "4px",
+													backgroundColor: h.bgPrimary,
+													border: `1px solid ${h.borderDefault}`,
+													borderRadius: "6px",
+													boxShadow: "var(--shadow-elevation-3)",
+													zIndex: 100001,
+													maxHeight: "200px",
+													overflowY: "auto"
+												},
+												children: $.map((e) => /* @__PURE__ */ p("button", {
+													type: "button",
+													onClick: () => I(e),
+													style: {
+														display: "block",
+														width: "100%",
+														padding: "10px 12px",
+														textAlign: "left",
+														backgroundColor: "transparent",
+														border: "none",
+														cursor: "pointer",
+														borderBottom: `1px solid ${h.borderDefault}`
+													},
+													children: [
+														/* @__PURE__ */ f("div", {
+															style: {
+																fontSize: "13px",
+																fontWeight: 500,
+																color: h.textPrimary
+															},
+															children: e.name
+														}),
+														e.email && /* @__PURE__ */ f("div", {
+															style: {
+																fontSize: "11px",
+																color: h.textSecondary
+															},
+															children: e.email
+														}),
+														/* @__PURE__ */ f("span", {
+															style: {
+																fontSize: "10px",
+																color: h.textTertiary,
+																textTransform: "uppercase"
+															},
+															children: e.type
+														})
+													]
+												}, `${e.type}:${e.id}`))
+											})]
+										}),
+										/* @__PURE__ */ f("select", {
+											"aria-label": C("bigconsole.share.permissionLabel", "Access permission"),
+											value: L,
+											onChange: (e) => R(e.target.value),
 											style: {
-												width: "100%",
 												padding: "10px 12px",
-												border: `1px solid ${$.borderDefault}`,
+												border: `1px solid ${h.borderDefault}`,
 												borderRadius: "6px",
 												fontSize: "13px",
-												backgroundColor: $.bgPrimary,
-												color: $.textPrimary
-											}
-										}), k && !j && Z.length > 0 && /* @__PURE__ */ s("div", {
+												backgroundColor: h.bgPrimary,
+												color: h.textPrimary
+											},
+											children: _.map((e) => /* @__PURE__ */ f("option", {
+												value: e.value,
+												children: e.label
+											}, e.value))
+										}),
+										/* @__PURE__ */ f("button", {
+											onClick: oe,
+											disabled: !F || T || F.workspaceId !== X.workspaceId,
 											style: {
-												position: "absolute",
-												top: "100%",
-												left: 0,
-												right: 0,
-												marginTop: "4px",
-												backgroundColor: $.bgPrimary,
-												border: `1px solid ${$.borderDefault}`,
+												padding: "10px 16px",
+												backgroundColor: F ? h.actionPrimaryBg : h.bgTertiary,
+												color: F ? "var(--color-action-primary-text)" : h.textSecondary,
+												border: "none",
 												borderRadius: "6px",
-												boxShadow: "var(--shadow-elevation-3)",
-												zIndex: 100001,
-												maxHeight: "200px",
-												overflowY: "auto"
+												cursor: F ? "pointer" : "not-allowed",
+												fontSize: "13px",
+												fontWeight: 500
 											},
-											children: Z.map((e) => /* @__PURE__ */ c("button", {
-												onClick: () => M(e),
-												style: {
-													display: "block",
-													width: "100%",
-													padding: "10px 12px",
-													textAlign: "left",
-													backgroundColor: "transparent",
-													border: "none",
-													cursor: "pointer",
-													borderBottom: `1px solid ${$.borderDefault}`
-												},
-												children: [
-													/* @__PURE__ */ s("div", {
-														style: {
-															fontSize: "13px",
-															fontWeight: 500,
-															color: $.textPrimary
-														},
-														children: e.name
-													}),
-													e.email && /* @__PURE__ */ s("div", {
-														style: {
-															fontSize: "11px",
-															color: $.textSecondary
-														},
-														children: e.email
-													}),
-													/* @__PURE__ */ s("span", {
-														style: {
-															fontSize: "10px",
-															color: $.textTertiary,
-															textTransform: "uppercase"
-														},
-														children: e.type
-													})
-												]
-											}, e.id))
-										})]
-									}),
-									/* @__PURE__ */ s("select", {
-										value: N,
-										onChange: (e) => P(e.target.value),
-										style: {
-											padding: "10px 12px",
-											border: `1px solid ${$.borderDefault}`,
-											borderRadius: "6px",
-											fontSize: "13px",
-											backgroundColor: $.bgPrimary,
-											color: $.textPrimary
-										},
-										children: f.map((e) => /* @__PURE__ */ s("option", {
-											value: e.value,
-											children: e.label
-										}, e.value))
-									}),
-									/* @__PURE__ */ s("button", {
-										onClick: G,
-										disabled: !j || x,
-										style: {
-											padding: "10px 16px",
-											backgroundColor: j ? $.actionPrimaryBg : $.bgTertiary,
-											color: j ? "var(--color-action-primary-text)" : $.textSecondary,
-											border: "none",
-											borderRadius: "6px",
-											cursor: j ? "pointer" : "not-allowed",
-											fontSize: "13px",
-											fontWeight: 500
-										},
-										children: "Share"
-									})
-								]
-							})]
+											children: "Share"
+										})
+									]
+								})
+							]
 						}),
-						/* @__PURE__ */ c("section", {
+						/* @__PURE__ */ p("section", {
 							"aria-labelledby": "share-access-heading",
-							children: [/* @__PURE__ */ c("div", {
+							children: [/* @__PURE__ */ p("div", {
 								style: {
 									display: "flex",
 									alignItems: "center",
@@ -481,50 +531,50 @@ function p({ dashboardId: l, dashboardName: p, isOpen: m, onClose: g, visibility
 									gap: "8px",
 									marginBottom: "12px"
 								},
-								children: [/* @__PURE__ */ c("h3", {
+								children: [/* @__PURE__ */ p("h3", {
 									id: "share-access-heading",
 									className: "text-sm font-semibold",
-									style: { color: $.textPrimary },
+									style: { color: h.textPrimary },
 									children: [
 										"People with access (",
-										b.length,
+										w.length,
 										")"
 									]
-								}), b.length > 0 && /* @__PURE__ */ s("button", {
-									onClick: J,
+								}), w.length > 0 && /* @__PURE__ */ f("button", {
+									onClick: ce,
 									style: {
 										padding: "4px 8px",
 										backgroundColor: "transparent",
-										color: $.statusErrorText,
+										color: h.statusErrorText,
 										border: "none",
 										cursor: "pointer",
 										fontSize: "12px"
 									},
 									children: "Revoke All"
 								})]
-							}), x && b.length === 0 ? /* @__PURE__ */ s("p", {
+							}), T && w.length === 0 ? /* @__PURE__ */ f("p", {
 								style: {
-									color: $.textSecondary,
+									color: h.textSecondary,
 									fontSize: "13px"
 								},
 								children: "Loading..."
-							}) : b.length === 0 ? /* @__PURE__ */ s("p", {
+							}) : w.length === 0 ? /* @__PURE__ */ f("p", {
 								style: {
-									color: $.textSecondary,
+									color: h.textSecondary,
 									fontSize: "13px"
 								},
 								children: "No one has access to this dashboard yet."
-							}) : /* @__PURE__ */ s("div", {
+							}) : /* @__PURE__ */ f("div", {
 								style: {
 									display: "flex",
 									flexDirection: "column",
 									gap: "8px"
 								},
-								children: b.map((e) => /* @__PURE__ */ s(h, {
+								children: w.map((e) => /* @__PURE__ */ f(re, {
 									share: e,
-									onUpdatePermission: K,
-									onRevoke: q,
-									colors: $
+									onUpdatePermission: se,
+									onRevoke: Q,
+									colors: h
 								}, e.id))
 							})]
 						})
@@ -532,9 +582,9 @@ function p({ dashboardId: l, dashboardName: p, isOpen: m, onClose: g, visibility
 				})
 			]
 		})
-	}), document.body) : null;
+	}) : null;
 }
-function m(e) {
+function b(e) {
 	if (!e) return {
 		label: "No expiry",
 		expired: !1
@@ -544,16 +594,16 @@ function m(e) {
 		label: "No expiry",
 		expired: !1
 	} : t.getTime() <= Date.now() ? {
-		label: `Expired ${l(t, { addSuffix: !0 })}`,
+		label: `Expired ${m(t, { addSuffix: !0 })}`,
 		expired: !0
 	} : {
-		label: `Expires ${l(t, { addSuffix: !0 })}`,
+		label: `Expires ${m(t, { addSuffix: !0 })}`,
 		expired: !1
 	};
 }
-function h({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
-	let i = m(e.expiresAt);
-	return /* @__PURE__ */ c("div", {
+function re({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
+	let i = b(e.expiresAt);
+	return /* @__PURE__ */ p("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
@@ -562,13 +612,13 @@ function h({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
 			backgroundColor: r.bgSecondary,
 			borderRadius: "6px"
 		},
-		children: [/* @__PURE__ */ c("div", {
+		children: [/* @__PURE__ */ p("div", {
 			style: {
 				display: "flex",
 				alignItems: "center",
 				gap: "10px"
 			},
-			children: [/* @__PURE__ */ s("div", {
+			children: [/* @__PURE__ */ f("div", {
 				style: {
 					width: "36px",
 					height: "36px",
@@ -582,14 +632,14 @@ function h({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
 					fontSize: "14px"
 				},
 				children: e.recipientType === "USER" ? "U" : "R"
-			}), /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("div", {
 				style: {
 					fontSize: "13px",
 					fontWeight: 500,
 					color: r.textPrimary
 				},
 				children: e.recipientId
-			}), /* @__PURE__ */ c("div", {
+			}), /* @__PURE__ */ p("div", {
 				style: {
 					fontSize: "11px",
 					color: r.textSecondary
@@ -600,7 +650,7 @@ function h({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
 					new Date(e.createdAt).toLocaleDateString()
 				]
 			})] })]
-		}), /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ p("div", {
 			style: {
 				display: "flex",
 				alignItems: "center",
@@ -608,7 +658,7 @@ function h({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
 				flexWrap: "wrap"
 			},
 			children: [
-				/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ f("span", {
 					"data-testid": "share-expiry",
 					title: e.expiresAt ? new Date(e.expiresAt).toLocaleString() : "Access does not expire",
 					style: {
@@ -622,7 +672,7 @@ function h({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
 					},
 					children: i.label
 				}),
-				/* @__PURE__ */ s("select", {
+				/* @__PURE__ */ f("select", {
 					value: e.permission,
 					onChange: (n) => t(e.id, n.target.value),
 					style: {
@@ -633,12 +683,12 @@ function h({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
 						backgroundColor: r.bgPrimary,
 						color: r.textPrimary
 					},
-					children: f.map((e) => /* @__PURE__ */ s("option", {
+					children: _.map((e) => /* @__PURE__ */ f("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				}),
-				/* @__PURE__ */ s("button", {
+				/* @__PURE__ */ f("button", {
 					onClick: () => n(e.id),
 					style: {
 						padding: "6px 10px",
@@ -656,6 +706,6 @@ function h({ share: e, onUpdatePermission: t, onRevoke: n, colors: r }) {
 	});
 }
 //#endregion
-export { p as default };
+export { v as default };
 
 //# sourceMappingURL=ShareDialog.js.map