@fluid-app/portal-sdk 0.1.227 → 0.1.229

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

@@ -46,12 +46,13 @@ function useRepContext() {
 const shareablesKeys = {
 	media: {
 		all: ["media"],
-		list: (search, sortDesc, repContext) => [
+		list: (search, sortDesc, repContext, ownership) => [
 			"media",
 			"list",
 			search,
 			sortDesc,
-			repContext
+			repContext,
+			ownership
 		],
 		detail: (id, repContext) => [
 			"media",
@@ -691,6 +692,37 @@ function ToggleButton({ active, label, onClick, children }) {
 	});
 }
 //#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/screens/ProductsScreen.tsx
 const PAGE_SIZE$5 = 24;
 const SORT_OPTIONS$1 = [
@@ -733,7 +765,6 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
 	const [sortValue, setSortValue] = (0, react.useState)("created_at_desc");
 	const [viewMode, setViewMode] = (0, react.useState)("grid");
-	const observerTarget = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const timer = setTimeout(() => {
 			setDebouncedSearch(searchTerm);
@@ -782,23 +813,12 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 	});
 	const usePortal = !!fetchPortalProducts;
 	const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, error } = usePortal ? portalQuery : legacyQuery;
-	const handleIntersect = (0, react.useCallback)((entries) => {
-		if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
-	}, [
+	const sentinelRef = useInfiniteListSentinel({
 		hasNextPage,
 		isFetchingNextPage,
-		fetchNextPage
-	]);
-	(0, react.useEffect)(() => {
-		const target = observerTarget.current;
-		if (!target) return;
-		const observer = new IntersectionObserver(handleIntersect, {
-			threshold: .1,
-			rootMargin: "200px"
-		});
-		observer.observe(target);
-		return () => observer.disconnect();
-	}, [handleIntersect]);
+		fetchNextPage,
+		error
+	});
 	const products = (0, react.useMemo)(() => {
 		if (!data) return [];
 		if (usePortal) return data?.pages.flatMap((page) => (page.products ?? []).map((p) => ({
@@ -814,11 +834,16 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 			media_count: void 0
 		})) ?? [];
 	}, [data, usePortal]);
+	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex justify-center py-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
+	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
+		children: "Failed to load products. Please try again."
+	})] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
 		isLoading,
-		error,
-		errorMessage: "Failed to load products. Please try again.",
-		isEmpty: products.length === 0,
+		isEmpty: !error && products.length === 0 && !isFetchingNextPage && !hasNextPage,
 		emptyMessage: debouncedSearch ? "No products match your search." : "No products available.",
 		filters: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center justify-end gap-2",
@@ -838,11 +863,8 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 			})]
 		}),
 		loadingFilterShape: "search-view",
-		footer: isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex justify-center py-4",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
-		}),
-		sentinelRef: observerTarget,
+		footer,
+		sentinelRef,
 		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: SHAREABLE_GRID_CLASS,
 			children: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareProductCard, {
@@ -1635,7 +1657,7 @@ function OwnerFilterTabs({ value, onValueChange, myLabel = "Mine" }) {
 				children: "All"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TabsTrigger, {
-				value: "my",
+				value: "mine",
 				children: myLabel
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.TabsTrigger, {
@@ -1711,7 +1733,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: () => {
@@ -1719,7 +1740,7 @@ function MediaListingScreen(_props) {
 				title: "Media deleted",
 				type: "success"
 			});
-			queryClient.invalidateQueries({ queryKey: shareablesKeys.media.list(debouncedSearch, sortValue === "title_desc", repContext) });
+			queryClient.invalidateQueries({ queryKey: shareablesKeys.media.all });
 			setPendingDeleteId(null);
 		},
 		onError: (error) => {
@@ -1738,13 +1759,14 @@ function MediaListingScreen(_props) {
 	const bffKind = kindFilter === "all" ? void 0 : kindFilter;
 	const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, error } = (0, _tanstack_react_query.useInfiniteQuery)({
 		queryKey: [
-			...shareablesKeys.media.list(debouncedSearch, sortValue === "title_desc", repContext),
+			...shareablesKeys.media.list(debouncedSearch, sortValue === "title_desc", repContext, ownerFilter),
 			sortValue,
 			kindFilter
 		],
 		queryFn: async ({ pageParam }) => {
 			return await api.media.list({
 				"filter[title]": debouncedSearch || void 0,
+				"filter[ownership]": ownerFilter,
 				"filter[content_format]": bffKind,
 				"page[cursor]": pageParam,
 				"page[limit]": PAGE_SIZE$4,
@@ -1755,24 +1777,13 @@ function MediaListingScreen(_props) {
 		initialPageParam: void 0,
 		placeholderData: _tanstack_react_query.keepPreviousData
 	});
-	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 filteredItems = (0, react.useMemo)(() => data?.pages.flatMap((p) => p.media) ?? [], [data?.pages]);
+	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 +1880,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,
@@ -9071,7 +9082,7 @@ function PlaylistsListingScreen(_props) {
 	const allPlaylists = (0, react.useMemo)(() => data?.pages.flatMap((page) => page.playlists) ?? [], [data?.pages]);
 	const filteredPlaylists = (0, react.useMemo)(() => {
 		if (ownerFilter === "all" || !user?.id) return allPlaylists;
-		if (ownerFilter === "my") return allPlaylists.filter((p) => p.user_id === user.id);
+		if (ownerFilter === "mine") return allPlaylists.filter((p) => p.user_id === user.id);
 		return allPlaylists.filter((p) => p.user_id !== user.id);
 	}, [
 		allPlaylists,
@@ -10826,7 +10837,6 @@ function FilesListingScreen({ onNavigate }) {
 	}) }), []));
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
-	const observerTarget = (0, react.useRef)(null);
 	(0, react.useEffect)(() => {
 		const timer = setTimeout(() => {
 			setDebouncedSearch(searchTerm);
@@ -10849,28 +10859,22 @@ function FilesListingScreen({ onNavigate }) {
 		initialPageParam: 1
 	});
 	const files = (0, react.useMemo)(() => data?.pages.flatMap((page) => page.file_resources) ?? [], [data?.pages]);
-	const handleIntersect = (0, react.useCallback)((entries) => {
-		if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
-	}, [
+	const sentinelRef = useInfiniteListSentinel({
 		hasNextPage,
 		isFetchingNextPage,
-		fetchNextPage
-	]);
-	(0, react.useEffect)(() => {
-		const target = observerTarget.current;
-		if (!target) return;
-		const observer = new IntersectionObserver(handleIntersect, {
-			threshold: .1,
-			rootMargin: "200px"
-		});
-		observer.observe(target);
-		return () => observer.disconnect();
-	}, [handleIntersect]);
+		fetchNextPage,
+		error
+	});
+	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex justify-center py-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
+	}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
+		children: "Failed to load files. Please try again."
+	})] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
 		isLoading,
-		error,
-		errorMessage: "Failed to load files. Please try again.",
-		isEmpty: files.length === 0,
+		isEmpty: !error && files.length === 0 && !isFetchingNextPage && !hasNextPage,
 		emptyMessage: debouncedSearch ? `No files match "${debouncedSearch}". Try a different search term.` : "No files available.",
 		filters: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex justify-end",
@@ -10883,11 +10887,8 @@ function FilesListingScreen({ onNavigate }) {
 				})
 			})
 		}),
-		footer: isFetchingNextPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex justify-center py-4",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
-		}),
-		sentinelRef: observerTarget,
+		footer,
+		sentinelRef,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: SHAREABLE_GRID_CLASS,
 			children: files.map((file) => {
@@ -11383,6 +11384,7 @@ function createRawMediaAdapter(client) {
 				"page[cursor]": params?.cursor,
 				"page[limit]": params?.limit,
 				"filter[title]": params?.["filter[title]"],
+				"filter[ownership]": params?.["filter[ownership]"],
 				"filter[content_format]": params?.["filter[content_format]"],
 				sort: params?.sort
 			});
@@ -11555,6 +11557,7 @@ function createMediaAdapter(client) {
 				cursor: options?.["page[cursor]"],
 				limit: options?.["page[limit]"],
 				"filter[title]": options?.["filter[title]"],
+				"filter[ownership]": options?.["filter[ownership]"],
 				"filter[content_format]": options?.["filter[content_format]"],
 				sort: options?.sort
 			});
@@ -11565,7 +11568,7 @@ function createMediaAdapter(client) {
 		},
 		getMedia: async (options) => {
 			const pageNumber = options?.page ?? 1;
-			const filterKey = `${options?.search_query ?? ""}|${options?.sorted_by ?? ""}`;
+			const filterKey = `${options?.search_query ?? ""}|${options?.sorted_by ?? ""}|${options?.ownership ?? ""}`;
 			if (filterKey !== lastFilterKey) {
 				cursorByPage.clear();
 				lastFilterKey = filterKey;
@@ -11575,10 +11578,13 @@ function createMediaAdapter(client) {
 			let bffSort;
 			if (rawSort === "title_asc") bffSort = "title_asc";
 			else if (rawSort === "title_desc") bffSort = "title_desc";
+			const ownership = options?.ownership;
+			const bffOwnership = ownership === "all" || ownership === "mine" || ownership === "company" ? ownership : void 0;
 			const response = await portAdapter.listMedia({
 				cursor,
 				limit: options?.per_page,
 				"filter[title]": options?.search_query,
+				"filter[ownership]": bffOwnership,
 				sort: bffSort
 			});
 			const nextCursor = response.meta.pagination?.next_cursor;
@@ -12511,4 +12517,4 @@ Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ShareablesScreen-AMlPuFFk.cjs.map
+//# sourceMappingURL=ShareablesScreen-o6frhZUM.cjs.map