@fluid-app/portal-sdk 0.1.227 → 0.1.228

package/dist/{ShareablesScreen-AMlPuFFk.cjs → ShareablesScreen-D6zYE_qj.cjs}

@@ -1617,6 +1617,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 = (0, react.useRef)(null);
+	(0, react.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;
@@ -1711,7 +1742,6 @@ function MediaListingScreen(_props) {
 		}, 300);
 		return () => clearTimeout(timer);
 	}, [searchTerm]);
-	const observerTarget = (0, react.useRef)(null);
 	const { mutate: deleteMedia, isPending: isDeleting } = (0, _tanstack_react_query.useMutation)({
 		mutationFn: (id) => api.media.deleteMedia(id),
 		onSuccess: () => {
@@ -1757,22 +1787,12 @@ function MediaListingScreen(_props) {
 	});
 	const allItems = (0, react.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");
-	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OwnerFilterTabs, {
@@ -1869,7 +1889,7 @@ function MediaListingScreen(_props) {
 		}),
 		filters: filterBar,
 		footer,
-		sentinelRef: observerTarget,
+		sentinelRef,
 		loadingFilterShape: "search-view",
 		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: SHAREABLE_GRID_CLASS,
@@ -12511,4 +12531,4 @@ Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ShareablesScreen-AMlPuFFk.cjs.map
+//# sourceMappingURL=ShareablesScreen-D6zYE_qj.cjs.map