@fluid-app/portal-sdk 0.1.454 → 0.1.456

package/dist/{ContactsScreen-DhMQm4w2.mjs → ContactsScreen-D0l3-Xof.mjs}

@@ -300,6 +300,7 @@ function ContactsSidebarRow({ contact, isSelected, highlight, revealed = false,
 	const id = String(contact.id);
 	const secondary = contact.email ?? contact.status?.trim() ?? null;
 	const cardRef = useRef(null);
+	const deleteLayerRef = useRef(null);
 	const offsetRef = useRef(0);
 	const animateCloseRef = useRef(false);
 	const startXRef = useRef(0);
@@ -317,6 +318,11 @@ function ContactsSidebarRow({ contact, isSelected, highlight, revealed = false,
 	}, []);
 	const setOffset = useCallback((value, animate) => {
 		offsetRef.current = value;
+		const layer = deleteLayerRef.current;
+		if (layer) {
+			layer.style.opacity = value === 0 ? "0" : "1";
+			layer.style.pointerEvents = value <= -REVEAL_WIDTH ? "auto" : "none";
+		}
 		const el = cardRef.current;
 		if (!el) return;
 		if (animate === "open") el.style.transition = "transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1)";
@@ -476,9 +482,11 @@ function ContactsSidebarRow({ contact, isSelected, highlight, revealed = false,
 		onPointerTarget?.(contact);
 	}, [onPointerTarget, contact]);
 	const handleDelete = useCallback(() => {
+		if (!revealed) return;
 		onRevealChange?.(id, false);
 		onDelete?.(contact);
 	}, [
+		revealed,
 		onDelete,
 		onRevealChange,
 		contact,
@@ -486,21 +494,23 @@ function ContactsSidebarRow({ contact, isSelected, highlight, revealed = false,
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative overflow-hidden rounded-xl",
-		children: [onDelete && /* @__PURE__ */ jsxs("div", {
-			className: "bg-destructive text-destructive-foreground absolute inset-y-0 right-0 flex w-[88px] cursor-pointer flex-col items-center justify-center gap-1 pl-2",
+		children: [onDelete && /* @__PURE__ */ jsxs("button", {
+			ref: deleteLayerRef,
+			style: {
+				opacity: revealed ? 1 : 0,
+				pointerEvents: revealed ? "auto" : "none"
+			},
+			type: "button",
+			disabled: !revealed,
+			"aria-hidden": !revealed,
+			className: "bg-destructive text-destructive-foreground absolute inset-y-0 right-0 flex w-[88px] cursor-pointer appearance-none flex-col items-center justify-center gap-1 border-0 p-0 pl-2 transition-opacity disabled:cursor-default",
 			onPointerDown: (e) => {
 				e.stopPropagation();
-				e.preventDefault();
-				handleDelete();
 			},
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleDelete();
-				}
+			onClick: (e) => {
+				e.stopPropagation();
+				handleDelete();
 			},
-			role: "button",
-			tabIndex: 0,
 			"aria-label": t("delete_contact_aria", { name }),
 			children: [/* @__PURE__ */ jsx(Trash2, { className: "size-5" }), /* @__PURE__ */ jsx("span", {
 				className: "text-xs font-medium",
@@ -525,7 +535,7 @@ function ContactsSidebarRow({ contact, isSelected, highlight, revealed = false,
 					handleActivate();
 				}
 			},
-			className: cn("group relative flex w-full cursor-pointer items-center gap-3.5 rounded-l-xl rounded-r-none px-3 py-3 text-left select-none", isSelected ? "bg-muted" : "bg-background hover:bg-muted", highlight && "animate-highlight-fade"),
+			className: cn("group relative flex w-full cursor-pointer items-center gap-3.5 rounded-xl px-3 py-3 text-left select-none", isSelected ? "bg-muted" : "bg-background hover:bg-muted", highlight && "animate-highlight-fade"),
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: cn("text-muted-foreground relative flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-xl text-base font-semibold transition-colors", isSelected ? "bg-background" : "bg-muted"),
@@ -4765,4 +4775,4 @@ const contactsScreenPropertySchema = {
 //#endregion
 export { ContactsScreen_exports as n, contactsScreenPropertySchema as r, ContactsScreen as t };
 
-//# sourceMappingURL=ContactsScreen-DhMQm4w2.mjs.map
+//# sourceMappingURL=ContactsScreen-D0l3-Xof.mjs.map