@fluid-app/portal-sdk 0.1.207 → 0.1.209

package/dist/{ContactsScreen-DSnGEWTK.cjs → ContactsScreen-By3ap4Bv.cjs}

@@ -4,7 +4,7 @@ require("./src-D57IFKXU.cjs");
 require("./scroll-arrows-CzWtSS8l.cjs");
 require("./ScreenHeaderContext-BXgWydjB.cjs");
 require("./dist-CGuUUVNt.cjs");
-const require_ContactsScreen = require("./ContactsScreen-BXWnpPXj.cjs");
+const require_ContactsScreen = require("./ContactsScreen-BozwvGrb.cjs");
 require("./SearchSort-ztRXlRwu.cjs");
 require("./InfiniteScrollSentinel-D_be3mzf.cjs");
 require("./dist-DDZMFlal.cjs");

package/dist/{ContactsScreen-C25kLBcG.mjs → ContactsScreen-CCsst8bb.mjs}

@@ -2,7 +2,7 @@ import { r as __exportAll } from "./es-DmEK0Umf.mjs";
 import { k as useCountriesApi, y as getContrastingTextColor } from "./src-BjCPR0aG.mjs";
 import { t as parseApiErrors } from "./parse-api-errors-BLAAn3cQ.mjs";
 import { n as usePortalTenantClient } from "./PortalTenantClientProvider-4ZmY6hac.mjs";
-import { $ as DropdownMenuSeparator, A as Select, C as Skeleton, Cn as AlertDialogFooter, D as SheetHeader, E as SheetFooter, En as Button, Et as CardContent, G as FormMessage, H as FormField, J as DropdownMenuContent, L as Input, M as SelectItem, N as SelectTrigger, Nn as useZodForm, O as SheetTitle, P as SelectValue, Pn as cn, Sn as AlertDialogDescription, T as SheetContent, Tn as AlertDialogTitle, U as FormItem, V as FormControl, W as FormLabel, Y as DropdownMenuItem, _n as AvatarImage, b as fluidToast, bn as AlertDialogCancel, cn as Breadcrumb, ct as DialogFooter, d as Table$1, dn as BreadcrumbList, f as TableBody, fn as BreadcrumbPage, ft as DialogTitle, g as TableRow, gn as AvatarFallback, h as TableHeader, hn as Avatar, i as TooltipTrigger, it as Dialog, j as SelectContent, ln as BreadcrumbItem, lt as DialogHeader, m as TableHead, n as TooltipContent, ot as DialogContent, p as TableCell, pn as BreadcrumbSeparator, q as DropdownMenu, r as TooltipProvider, rt as DropdownMenuTrigger, t as Tooltip, un as BreadcrumbLink, vn as AlertDialog, w as Sheet, wn as AlertDialogHeader, wt as Card, xn as AlertDialogContent, y as Spinner, yn as AlertDialogAction } from "./src-BEx23d86.mjs";
+import { $ as DropdownMenuSeparator, A as Select, C as Skeleton, Cn as AlertDialogFooter, D as SheetHeader, E as SheetFooter, En as Button, Et as CardContent, G as FormMessage, H as FormField, J as DropdownMenuContent, L as Input, M as SelectItem, N as SelectTrigger, Nn as useZodForm, O as SheetTitle, P as SelectValue, Pn as cn, Sn as AlertDialogDescription, T as SheetContent, Tn as AlertDialogTitle, U as FormItem, V as FormControl, W as FormLabel, X as DropdownMenuLabel, Y as DropdownMenuItem, _n as AvatarImage, b as fluidToast, bn as AlertDialogCancel, cn as Breadcrumb, ct as DialogFooter, d as Table$1, dn as BreadcrumbList, f as TableBody, fn as BreadcrumbPage, ft as DialogTitle, g as TableRow, gn as AvatarFallback, h as TableHeader, hn as Avatar, i as TooltipTrigger, it as Dialog, j as SelectContent, ln as BreadcrumbItem, lt as DialogHeader, m as TableHead, n as TooltipContent, ot as DialogContent, p as TableCell, pn as BreadcrumbSeparator, q as DropdownMenu, r as TooltipProvider, rt as DropdownMenuTrigger, t as Tooltip, un as BreadcrumbLink, vn as AlertDialog, w as Sheet, wn as AlertDialogHeader, wt as Card, xn as AlertDialogContent, y as Spinner, yn as AlertDialogAction } from "./src-BEx23d86.mjs";
 import { n as useScreenHeaderActions, r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-FYyYk97y.mjs";
 import { a as useEditor, n as Heading, o as Placeholder, r as EditorContent, t as StarterKit } from "./dist-BETEuYfn.mjs";
 import { t as SearchSort } from "./SearchSort-TmuNOCwA.mjs";
@@ -11,7 +11,7 @@ import { n as TextAlign, t as Underline } from "./dist-DBPpJ567.mjs";
 import React, { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { keepPreviousData, useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, Building, Calendar, CalendarDays, Check, ChevronLeft, ChevronRight, CircleCheck, ClipboardList, EllipsisVertical, ExternalLink, List, ListChecks, ListOrdered, Mail, MessageSquare, Paperclip, Pen, Pencil, Phone, Plus, Repeat2, ShoppingCart, SquareCheckBig, StickyNote, Trash2, X } from "lucide-react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, Building, Calendar, CalendarDays, Check, ChevronLeft, ChevronRight, CircleCheck, ClipboardList, EllipsisVertical, ExternalLink, List, ListChecks, ListOrdered, Mail, MessageSquare, Paperclip, Pen, Pencil, Phone, Plus, Repeat2, ShoppingCart, SquareCheckBig, StickyNote, Tag, Trash2, X } from "lucide-react";
 import { FormProvider, useFormContext, useWatch } from "react-hook-form";
 import { z } from "zod";
 //#region ../../contacts/core/src/contacts-api-context.ts
@@ -354,7 +354,11 @@ function ContactsTable({ setSelectedContacts, setOpenDeleteModal, onEditContact,
 	}, [availableGroups]);
 	const [searchTerm, setSearchTerm] = useState("");
 	const [sortValue, setSortValue] = useState("name_asc");
+	const [selectedTagNames, setSelectedTagNames] = useState([]);
 	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+	const toggleTag = useCallback((name) => {
+		setSelectedTagNames((prev) => prev.includes(name) ? prev.filter((n) => n !== name) : [...prev, name]);
+	}, []);
 	const parsedSort = useMemo(() => {
 		const lastUnderscore = sortValue.lastIndexOf("_");
 		return {
@@ -364,12 +368,25 @@ function ContactsTable({ setSelectedContacts, setOpenDeleteModal, onEditContact,
 	}, [sortValue]);
 	useEffect(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
-	}, [searchTerm, sortValue]);
+	}, [
+		searchTerm,
+		sortValue,
+		selectedTagNames
+	]);
 	useEffect(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [resetKey]);
+	useEffect(() => {
+		setSelectedTagNames((prev) => {
+			if (availableGroups.length === 0) return prev.length > 0 ? [] : prev;
+			const validNames = new Set(availableGroups.map((g) => g.name));
+			const next = prev.filter((n) => validNames.has(n));
+			return next.length !== prev.length ? next : prev;
+		});
+	}, [availableGroups]);
 	const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteContacts({
 		search_query: searchTerm || void 0,
+		tags: isMemberLayout && selectedTagNames.length > 0 ? selectedTagNames : void 0,
 		per_page: PAGE_SIZE,
 		sort_by: parsedSort.id,
 		sort_direction: parsedSort.desc ? "desc" : "asc"
@@ -422,9 +439,9 @@ function ContactsTable({ setSelectedContacts, setOpenDeleteModal, onEditContact,
 	return /* @__PURE__ */ jsxs("div", {
 		className: "border-border overflow-hidden rounded-lg border shadow-sm",
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "flex justify-end p-3",
-				children: /* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-end gap-2 p-3",
+				children: [/* @__PURE__ */ jsx("div", {
 					className: "w-full max-w-sm",
 					children: /* @__PURE__ */ jsx(SearchSort, {
 						searchValue: searchTerm,
@@ -440,7 +457,48 @@ function ContactsTable({ setSelectedContacts, setOpenDeleteModal, onEditContact,
 						sortValue,
 						onSortChange: setSortValue
 					})
-				})
+				}), isMemberLayout && availableGroups.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						"aria-label": selectedTagNames.length > 0 ? `Filter by group (${selectedTagNames.length} selected)` : "Filter by group",
+						children: [
+							/* @__PURE__ */ jsx(Tag, { className: "size-4" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "hidden sm:inline",
+								children: "Groups"
+							}),
+							selectedTagNames.length > 0 && /* @__PURE__ */ jsx("span", {
+								className: "bg-primary text-primary-foreground inline-flex size-5 items-center justify-center rounded-full text-xs font-medium",
+								children: selectedTagNames.length
+							})
+						]
+					})
+				}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+					align: "end",
+					className: "max-h-80 overflow-y-auto",
+					children: [
+						/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Filter by group" }),
+						/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+						availableGroups.map((group) => {
+							const isSelected = selectedTagNames.includes(group.name);
+							return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+								onSelect: (e) => {
+									e.preventDefault();
+									toggleTag(group.name);
+								},
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "flex flex-1 items-center gap-2 capitalize",
+									children: [group.avatar && /* @__PURE__ */ jsx("span", { children: group.avatar }), group.name]
+								}), /* @__PURE__ */ jsx(Check, { className: cn("text-muted-foreground size-4", !isSelected && "invisible") })]
+							}, group.id);
+						}),
+						selectedTagNames.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+							onSelect: () => setSelectedTagNames([]),
+							children: "Clear filters"
+						})] })
+					]
+				})] })]
 			}),
 			isMemberLayout ? /* @__PURE__ */ jsxs("div", {
 				className: "space-y-3 p-3",
@@ -503,7 +561,7 @@ function ContactsTable({ setSelectedContacts, setOpenDeleteModal, onEditContact,
 					})
 				}, `card-skel-${i}`)) : items.length === 0 ? /* @__PURE__ */ jsx("div", {
 					className: "text-muted-foreground py-10 text-center text-sm",
-					children: "No contacts found"
+					children: selectedTagNames.length > 0 ? "No contacts found for the selected group filter." : "No contacts found"
 				}) : displayItems.map((contact) => /* @__PURE__ */ jsx(RepContactCard, {
 					contact,
 					selected: selectedIds.has(contact.id),
@@ -4602,4 +4660,4 @@ const contactsScreenPropertySchema = {
 //#endregion
 export { ContactsScreen_exports as n, contactsScreenPropertySchema as r, ContactsScreen as t };
 
-//# sourceMappingURL=ContactsScreen-C25kLBcG.mjs.map
+//# sourceMappingURL=ContactsScreen-CCsst8bb.mjs.map