@fluid-app/portal-sdk 0.1.191 → 0.1.192

package/dist/{ContactsScreen-Dw9G8Q3n.mjs → ContactsScreen-BtBNMZzG.mjs}

@@ -6,40 +6,14 @@ import { $ as DropdownMenuSeparator, $t as BreadcrumbPage, A as Select, C as Ske
 import { n as useScreenHeaderActions, r as useScreenHeaderBreadcrumbs } from "./ScreenHeaderContext-BD6Zo-ep.mjs";
 import { a as useEditor, n as Heading, o as Placeholder, r as EditorContent, t as StarterKit } from "./dist-tv6N_HgZ.mjs";
 import { t as SearchSort } from "./SearchSort-TmRTxK16.mjs";
-import { i as PaginationFooter } from "./order-status-badge-DK9GG8H-.mjs";
-import { n as TextAlign, t as Underline } from "./dist-DhOQb8en.mjs";
+import { t as InfiniteScrollSentinel } from "./InfiniteScrollSentinel-MgF-ldXy.mjs";
+import { n as TextAlign, t as Underline } from "./dist-wzcShuuv.mjs";
 import React, { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+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 { FormProvider, useFormContext, useWatch } from "react-hook-form";
 import { z } from "zod";
-//#region ../../contacts/ui/src/shared/components/contacts/statusBadge.tsx
-const statusStyles = {
-	new: "border-[var(--status-new-border)] bg-[var(--status-new)] text-[var(--status-new-foreground)]",
-	active: "border-[var(--status-active-border)] bg-[var(--status-active)] text-[var(--status-active-foreground)]",
-	inactive: "border-border bg-muted text-muted-foreground",
-	lead: "border-[var(--status-lead-border)] bg-[var(--status-lead)] text-[var(--status-lead-foreground)]",
-	customer: "border-[var(--status-customer-border)] bg-[var(--status-customer)] text-[var(--status-customer-foreground)]",
-	success: "border-[var(--badge-success-border)] bg-[var(--badge-success)] text-[var(--badge-success-foreground)]",
-	warning: "border-[var(--badge-warning-border)] bg-[var(--badge-warning)] text-[var(--badge-warning-foreground)]",
-	danger: "border-[var(--badge-danger-border)] bg-[var(--badge-danger)] text-[var(--badge-danger-foreground)]",
-	info: "border-[var(--badge-info-border)] bg-[var(--badge-info)] text-[var(--badge-info-foreground)]",
-	neutral: "border-border bg-muted text-muted-foreground",
-	notice: "border-[var(--badge-notice-border)] bg-[var(--badge-notice)] text-[var(--badge-notice-foreground)]",
-	accent: "border-[var(--badge-accent-border)] bg-[var(--badge-accent)] text-[var(--badge-accent-foreground)]"
-};
-const defaultStyle = "border-border bg-muted text-muted-foreground";
-function getStatusStyle(status) {
-	return statusStyles[status] ?? defaultStyle;
-}
-function StatusBadge({ status, label, className }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold capitalize", getStatusStyle(status), className),
-		children: label ?? status
-	});
-}
-//#endregion
 //#region ../../contacts/core/src/contacts-api-context.ts
 const ContactsApiContext = createContext(null);
 const ContactsApiProvider = ContactsApiContext.Provider;
@@ -101,6 +75,51 @@ const contactsKeys = {
 	groups: () => ["portal-contacts", "groups"]
 };
 //#endregion
+//#region ../../contacts/core/src/hooks/use-infinite-contacts.ts
+function useInfiniteContacts(params) {
+	const api = useContactsCrud();
+	return useInfiniteQuery({
+		queryKey: [...CONTACTS_QUERY_KEYS.list("contacts"), params],
+		queryFn: ({ pageParam }) => api.listContacts({
+			...params,
+			page: pageParam
+		}),
+		getNextPageParam: (lastPage) => {
+			const currentPage = lastPage.meta.current_page;
+			if (currentPage == null) return void 0;
+			if (lastPage.meta.next_cursor) return currentPage + 1;
+			if (lastPage.meta.total_pages != null && currentPage < lastPage.meta.total_pages) return currentPage + 1;
+		},
+		initialPageParam: 1
+	});
+}
+//#endregion
+//#region ../../contacts/ui/src/shared/components/contacts/statusBadge.tsx
+const statusStyles = {
+	new: "border-[var(--status-new-border)] bg-[var(--status-new)] text-[var(--status-new-foreground)]",
+	active: "border-[var(--status-active-border)] bg-[var(--status-active)] text-[var(--status-active-foreground)]",
+	inactive: "border-border bg-muted text-muted-foreground",
+	lead: "border-[var(--status-lead-border)] bg-[var(--status-lead)] text-[var(--status-lead-foreground)]",
+	customer: "border-[var(--status-customer-border)] bg-[var(--status-customer)] text-[var(--status-customer-foreground)]",
+	success: "border-[var(--badge-success-border)] bg-[var(--badge-success)] text-[var(--badge-success-foreground)]",
+	warning: "border-[var(--badge-warning-border)] bg-[var(--badge-warning)] text-[var(--badge-warning-foreground)]",
+	danger: "border-[var(--badge-danger-border)] bg-[var(--badge-danger)] text-[var(--badge-danger-foreground)]",
+	info: "border-[var(--badge-info-border)] bg-[var(--badge-info)] text-[var(--badge-info-foreground)]",
+	neutral: "border-border bg-muted text-muted-foreground",
+	notice: "border-[var(--badge-notice-border)] bg-[var(--badge-notice)] text-[var(--badge-notice-foreground)]",
+	accent: "border-[var(--badge-accent-border)] bg-[var(--badge-accent)] text-[var(--badge-accent-foreground)]"
+};
+const defaultStyle = "border-border bg-muted text-muted-foreground";
+function getStatusStyle(status) {
+	return statusStyles[status] ?? defaultStyle;
+}
+function StatusBadge({ status, label, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold capitalize", getStatusStyle(status), className),
+		children: label ?? status
+	});
+}
+//#endregion
 //#region ../../contacts/ui/src/shared/components/contacts/allContacts/contactsTable.tsx
 function getInitials(fullName) {
 	const trimmed = fullName?.trim();
@@ -314,7 +333,7 @@ const CONTACT_SORT_COLUMNS = [{
 	id: "email",
 	name: "Email"
 }];
-function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setOpenDeleteModal, onEditContact, onRowClick, resetKey, tableLayout }) {
+function ContactsTable({ setSelectedContacts, setOpenDeleteModal, onEditContact, onRowClick, resetKey, tableLayout }) {
 	const isMemberLayout = tableLayout === "members";
 	const groupsApi = useGroupsApi();
 	const { data: availableGroups = [] } = useQuery({
@@ -328,7 +347,6 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 		for (const group of availableGroups) map.set(group.name, group);
 		return map;
 	}, [availableGroups]);
-	const [currentPage, setCurrentPage] = useState(1);
 	const [searchTerm, setSearchTerm] = useState("");
 	const [sortValue, setSortValue] = useState("name_asc");
 	const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
@@ -340,32 +358,18 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 		};
 	}, [sortValue]);
 	useEffect(() => {
-		setCurrentPage(1);
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [searchTerm, sortValue]);
-	useEffect(() => {
-		setSelectedIds(/* @__PURE__ */ new Set());
-	}, [currentPage]);
 	useEffect(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [resetKey]);
-	const { data, isLoading } = useQuery({
-		queryKey: [queryKeyPrefix, {
-			searchTerm,
-			currentPage,
-			sortField: parsedSort.id,
-			sortDesc: parsedSort.desc
-		}],
-		queryFn: () => listContacts({
-			search_query: searchTerm || void 0,
-			page: currentPage,
-			per_page: PAGE_SIZE,
-			sort_by: parsedSort.id,
-			sort_direction: parsedSort.desc ? "desc" : "asc"
-		}),
-		placeholderData: keepPreviousData
+	const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteContacts({
+		search_query: searchTerm || void 0,
+		per_page: PAGE_SIZE,
+		sort_by: parsedSort.id,
+		sort_direction: parsedSort.desc ? "desc" : "asc"
 	});
-	const items = useMemo(() => data?.contacts ?? [], [data?.contacts]);
+	const items = useMemo(() => data?.pages.flatMap((p) => p.contacts) ?? [], [data?.pages]);
 	const displayItems = useMemo(() => {
 		const sortField = parsedSort.id;
 		const sortDir = parsedSort.desc ? "desc" : "asc";
@@ -376,8 +380,6 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 			return sortDir === "asc" ? cmp : -cmp;
 		});
 	}, [items, parsedSort]);
-	const totalItems = data?.meta?.total_count ?? 0;
-	const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
 	const allSelected = displayItems.length > 0 && displayItems.every((c) => selectedIds.has(c.id));
 	const someSelected = selectedIds.size > 0 && !allSelected;
 	const selectAllRef = useRef(null);
@@ -736,19 +738,17 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 					]
 				})
 			})] }),
-			/* @__PURE__ */ jsx(PaginationFooter, {
-				currentPage,
-				totalPages,
-				pageSize: PAGE_SIZE,
-				totalItems,
-				onPageChange: setCurrentPage
+			/* @__PURE__ */ jsx(InfiniteScrollSentinel, {
+				onLoadMore: fetchNextPage,
+				hasMore: !!hasNextPage,
+				isLoading: isFetchingNextPage
 			})
 		]
 	});
 }
 //#endregion
 //#region ../../contacts/ui/src/shared/components/contacts/allContacts/contactsPage.tsx
-function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, onEditContact, onRowClick, tableLayout }) {
+function ContactsPage({ deleteContacts, header, onEditContact, onRowClick, tableLayout }) {
 	const [openDeleteModal, setOpenDeleteModal] = useState(false);
 	const [selectedContacts, setSelectedContacts] = useState([]);
 	const [resetKey, setResetKey] = useState(0);
@@ -761,7 +761,7 @@ function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, on
 				title: "Contacts deleted successfully",
 				type: "success"
 			});
-			queryClient.invalidateQueries({ queryKey: CONTACTS_QUERY_KEYS.all(queryKeyPrefix) });
+			queryClient.invalidateQueries({ queryKey: CONTACTS_QUERY_KEYS.all("contacts") });
 		},
 		onError: (error) => {
 			fluidToast({
@@ -781,8 +781,6 @@ function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, on
 		/* @__PURE__ */ jsx("div", {
 			className: "mx-auto max-w-7xl space-y-6 px-4 py-4 md:px-10 md:py-8",
 			children: /* @__PURE__ */ jsx(ContactsTable, {
-				listContacts,
-				queryKeyPrefix,
 				setSelectedContacts,
 				setOpenDeleteModal,
 				onEditContact,
@@ -809,7 +807,7 @@ function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, on
 }
 //#endregion
 //#region ../../contacts/ui/src/screens/ContactsListScreen.tsx
-function ContactsListScreen({ listContacts, deleteContacts, onEditContact, onRowClick, onAddContact, queryKeyPrefix = "contacts", tableLayout, header }) {
+function ContactsListScreen({ deleteContacts, onEditContact, onRowClick, onAddContact, tableLayout, header }) {
 	useScreenHeaderActions(useMemo(() => /* @__PURE__ */ jsxs(Button, {
 		onClick: onAddContact,
 		size: "sm",
@@ -823,9 +821,7 @@ function ContactsListScreen({ listContacts, deleteContacts, onEditContact, onRow
 		}) })
 	}) }), []));
 	return /* @__PURE__ */ jsx(ContactsPage, {
-		listContacts,
 		deleteContacts,
-		queryKeyPrefix,
 		tableLayout,
 		header,
 		onEditContact,
@@ -4197,16 +4193,19 @@ async function contacts_tasks_destroy(client, contact_id, id) {
 const EMPTY_META = {
 	total_count: 0,
 	total_pages: 0,
-	current_page: 1
+	current_page: 1,
+	next_cursor: null
 };
 function paginationFromBff(meta, itemCount, currentPage, pageSize) {
 	if (!meta) return EMPTY_META;
-	const hasNext = !!meta.pagination?.next_cursor;
+	const nextCursor = meta.pagination?.next_cursor ?? null;
+	const hasNext = !!nextCursor;
 	const totalCount = meta.total_count ?? (hasNext ? (currentPage + 1) * pageSize : (currentPage - 1) * pageSize + itemCount);
 	return {
 		total_count: totalCount,
 		total_pages: Math.max(1, Math.ceil(totalCount / pageSize)),
 		current_page: currentPage,
+		next_cursor: nextCursor,
 		request_id: meta.request_id ?? void 0,
 		timestamp: meta.timestamp ?? void 0
 	};
@@ -4419,9 +4418,7 @@ function ContactListView({ onNavigate, onContactSelect }) {
 		});
 	}, [onNavigate, onContactSelect]);
 	return /* @__PURE__ */ jsx(ContactsListScreen, {
-		listContacts: useCallback((params) => api.listContacts(params), [api]),
 		deleteContacts: useCallback((ids) => api.bulkDeleteContacts(ids), [api]),
-		queryKeyPrefix: QUERY_KEY_PREFIX,
 		tableLayout: "members",
 		onEditContact: handleSelectContact,
 		onRowClick: handleSelectContact,
@@ -4595,4 +4592,4 @@ const contactsScreenPropertySchema = {
 //#endregion
 export { ContactsScreen_exports as n, contactsScreenPropertySchema as r, ContactsScreen as t };
 
-//# sourceMappingURL=ContactsScreen-Dw9G8Q3n.mjs.map
+//# sourceMappingURL=ContactsScreen-BtBNMZzG.mjs.map