@fluid-app/portal-sdk 0.1.227 → 0.1.228

package/dist/{ShareablesScreen-CNARhXTE.mjs → ShareablesScreen-DaOvfu8L.mjs}

@@ -1615,6 +1615,37 @@ function ProductDetailScreen({ productId, countryCode, fetchProduct: fetchPortal
 	});
 }
 //#endregion
+//#region ../../shareables/ui/src/hooks/use-infinite-list-sentinel.ts
+/**
+* Wires a sentinel `<div>` to TanStack Query infinite-pagination state.
+*
+* Returns a ref the caller attaches to a 1px sentinel element rendered below
+* the list. When the sentinel scrolls into view (with a 200px root margin)
+* and the query has a next page, isn't already fetching, and hasn't errored,
+* `fetchNextPage()` is invoked.
+*/
+function useInfiniteListSentinel({ hasNextPage, isFetchingNextPage, fetchNextPage, error }) {
+	const sentinelRef = useRef(null);
+	useEffect(() => {
+		const target = sentinelRef.current;
+		if (!target) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage && !error) fetchNextPage();
+		}, {
+			threshold: 0,
+			rootMargin: "200px"
+		});
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+		error
+	]);
+	return sentinelRef;
+}
+//#endregion
 //#region ../../shareables/ui/src/components/OwnerFilterTabs.tsx
 function getFilteredEmptyMessage({ searchTerm, ownerFilter, hasOtherFilters = false, entityName = "items", defaultMessage = "Nothing available at the moment." }) {
 	const isFiltered = ownerFilter !== "all" || hasOtherFilters;
@@ -1709,7 +1740,6 @@ function MediaListingScreen(_props) {
 		}, 300);
 		return () => clearTimeout(timer);
 	}, [searchTerm]);
-	const observerTarget = useRef(null);
 	const { mutate: deleteMedia, isPending: isDeleting } = useMutation({
 		mutationFn: (id) => api.media.deleteMedia(id),
 		onSuccess: () => {
@@ -1755,22 +1785,12 @@ function MediaListingScreen(_props) {
 	});
 	const allItems = useMemo(() => data?.pages.flatMap((p) => p.media) ?? [], [data?.pages]);
 	const filteredItems = ownerFilter === "all" ? allItems : ownerFilter === "my" ? allItems.filter((item) => item.owner_type === "user") : allItems.filter((item) => item.owner_type === "company");
-	useEffect(() => {
-		const target = observerTarget.current;
-		if (!target) return;
-		const observer = new IntersectionObserver((entries) => {
-			if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
-		}, {
-			threshold: 0,
-			rootMargin: "200px"
-		});
-		observer.observe(target);
-		return () => observer.disconnect();
-	}, [
-		fetchNextPage,
+	const sentinelRef = useInfiniteListSentinel({
 		hasNextPage,
-		isFetchingNextPage
-	]);
+		isFetchingNextPage,
+		fetchNextPage,
+		error
+	});
 	const filterBar = /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-3",
 		children: [/* @__PURE__ */ jsx(OwnerFilterTabs, {
@@ -1867,7 +1887,7 @@ function MediaListingScreen(_props) {
 		}),
 		filters: filterBar,
 		footer,
-		sentinelRef: observerTarget,
+		sentinelRef,
 		loadingFilterShape: "search-view",
 		children: viewMode === "grid" ? /* @__PURE__ */ jsx("div", {
 			className: SHAREABLE_GRID_CLASS,
@@ -12499,4 +12519,4 @@ const shareablesScreenPropertySchema = {
 //#endregion
 export { ShareablesScreen_exports as n, shareablesScreenPropertySchema as r, ShareablesScreen as t };
 
-//# sourceMappingURL=ShareablesScreen-CNARhXTE.mjs.map
+//# sourceMappingURL=ShareablesScreen-DaOvfu8L.mjs.map