@fluid-app/portal-sdk 0.1.190 → 0.1.192

package/dist/{ContactsScreen-Euvu6Y8H.cjs → ContactsScreen-Cheiwaxn.cjs}

@@ -4,10 +4,9 @@ require("./src-D57IFKXU.cjs");
 require("./scroll-arrows-CzWtSS8l.cjs");
 require("./ScreenHeaderContext-BXgWydjB.cjs");
 require("./dist-CN_rfvBt.cjs");
-const require_ContactsScreen = require("./ContactsScreen-D2rOJ9Ra.cjs");
+const require_ContactsScreen = require("./ContactsScreen-DvohvoOE.cjs");
 require("./SearchSort-CUDMZIkf.cjs");
-require("./order-status-badge-DvZns1LY.cjs");
-require("./src-DOYe5GAF.cjs");
-require("./dist-Ib6pM5r3.cjs");
+require("./InfiniteScrollSentinel-CU801UfD.cjs");
+require("./dist-bL3uiYn3.cjs");
 exports.ContactsScreen = require_ContactsScreen.ContactsScreen;
 exports.contactsScreenPropertySchema = require_ContactsScreen.contactsScreenPropertySchema;

package/dist/{ContactsScreen-D2rOJ9Ra.cjs → ContactsScreen-DvohvoOE.cjs}

@@ -6,8 +6,8 @@ const require_src = require("./src-D57IFKXU.cjs");
 const require_ScreenHeaderContext = require("./ScreenHeaderContext-BXgWydjB.cjs");
 const require_dist = require("./dist-CN_rfvBt.cjs");
 const require_SearchSort = require("./SearchSort-CUDMZIkf.cjs");
-const require_order_status_badge = require("./order-status-badge-DvZns1LY.cjs");
-const require_dist$1 = require("./dist-Ib6pM5r3.cjs");
+const require_InfiniteScrollSentinel = require("./InfiniteScrollSentinel-CU801UfD.cjs");
+const require_dist$1 = require("./dist-bL3uiYn3.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let _tanstack_react_query = require("@tanstack/react-query");
@@ -15,32 +15,6 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 let react_hook_form = require("react-hook-form");
 let zod = require("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__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: require_src.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 = (0, react.createContext)(null);
 const ContactsApiProvider = ContactsApiContext.Provider;
@@ -102,6 +76,51 @@ const contactsKeys = {
 	groups: () => ["portal-contacts", "groups"]
 };
 //#endregion
+//#region ../../contacts/core/src/hooks/use-infinite-contacts.ts
+function useInfiniteContacts(params) {
+	const api = useContactsCrud();
+	return (0, _tanstack_react_query.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__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_src.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();
@@ -315,7 +334,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 = [] } = (0, _tanstack_react_query.useQuery)({
@@ -329,7 +348,6 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 		for (const group of availableGroups) map.set(group.name, group);
 		return map;
 	}, [availableGroups]);
-	const [currentPage, setCurrentPage] = (0, react.useState)(1);
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("name_asc");
 	const [selectedIds, setSelectedIds] = (0, react.useState)(/* @__PURE__ */ new Set());
@@ -341,32 +359,18 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 		};
 	}, [sortValue]);
 	(0, react.useEffect)(() => {
-		setCurrentPage(1);
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [searchTerm, sortValue]);
-	(0, react.useEffect)(() => {
-		setSelectedIds(/* @__PURE__ */ new Set());
-	}, [currentPage]);
 	(0, react.useEffect)(() => {
 		setSelectedIds(/* @__PURE__ */ new Set());
 	}, [resetKey]);
-	const { data, isLoading } = (0, _tanstack_react_query.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: _tanstack_react_query.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 = (0, react.useMemo)(() => data?.contacts ?? [], [data?.contacts]);
+	const items = (0, react.useMemo)(() => data?.pages.flatMap((p) => p.contacts) ?? [], [data?.pages]);
 	const displayItems = (0, react.useMemo)(() => {
 		const sortField = parsedSort.id;
 		const sortDir = parsedSort.desc ? "desc" : "asc";
@@ -377,8 +381,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 = (0, react.useRef)(null);
@@ -737,19 +739,17 @@ function ContactsTable({ listContacts, queryKeyPrefix, setSelectedContacts, setO
 					]
 				})
 			})] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_order_status_badge.PaginationFooter, {
-				currentPage,
-				totalPages,
-				pageSize: PAGE_SIZE,
-				totalItems,
-				onPageChange: setCurrentPage
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InfiniteScrollSentinel.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] = (0, react.useState)(false);
 	const [selectedContacts, setSelectedContacts] = (0, react.useState)([]);
 	const [resetKey, setResetKey] = (0, react.useState)(0);
@@ -762,7 +762,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) => {
 			require_src.fluidToast({
@@ -782,8 +782,6 @@ function ContactsPage({ listContacts, deleteContacts, queryKeyPrefix, header, on
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "mx-auto max-w-7xl space-y-6 px-4 py-4 md:px-10 md:py-8",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactsTable, {
-				listContacts,
-				queryKeyPrefix,
 				setSelectedContacts,
 				setOpenDeleteModal,
 				onEditContact,
@@ -810,7 +808,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 }) {
 	require_ScreenHeaderContext.useScreenHeaderActions((0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
 		onClick: onAddContact,
 		size: "sm",
@@ -824,9 +822,7 @@ function ContactsListScreen({ listContacts, deleteContacts, onEditContact, onRow
 		}) })
 	}) }), []));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactsPage, {
-		listContacts,
 		deleteContacts,
-		queryKeyPrefix,
 		tableLayout,
 		header,
 		onEditContact,
@@ -4202,16 +4198,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
 	};
@@ -4420,9 +4419,7 @@ function ContactListView({ onNavigate, onContactSelect }) {
 		});
 	}, [onNavigate, onContactSelect]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContactsListScreen, {
-		listContacts: (0, react.useCallback)((params) => api.listContacts(params), [api]),
 		deleteContacts: (0, react.useCallback)((ids) => api.bulkDeleteContacts(ids), [api]),
-		queryKeyPrefix: QUERY_KEY_PREFIX,
 		tableLayout: "members",
 		onEditContact: handleSelectContact,
 		onRowClick: handleSelectContact,
@@ -4607,4 +4604,4 @@ Object.defineProperty(exports, "contactsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ContactsScreen-D2rOJ9Ra.cjs.map
+//# sourceMappingURL=ContactsScreen-DvohvoOE.cjs.map