@fluid-app/portal-sdk 0.1.227 → 0.1.229

package/dist/{ShareablesScreen-DyGQ-Yo_.cjs → ShareablesScreen-CTIe6EH0.cjs}

@@ -9,7 +9,7 @@ require("./es-nxOxb57F.cjs");
 require("./SearchSort-Hwga1dIi.cjs");
 require("./dist-5XPflEEG.cjs");
 require("./dist-FHf4OHgt.cjs");
-const require_ShareablesScreen = require("./ShareablesScreen-AMlPuFFk.cjs");
+const require_ShareablesScreen = require("./ShareablesScreen-o6frhZUM.cjs");
 require("./PortalProductsApiProvider-Bb5B1Hv5.cjs");
 exports.ShareablesScreen = require_ShareablesScreen.ShareablesScreen;
 exports.shareablesScreenPropertySchema = require_ShareablesScreen.shareablesScreenPropertySchema;

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

@@ -44,12 +44,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",
@@ -689,6 +690,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 = 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/screens/ProductsScreen.tsx
 const PAGE_SIZE$5 = 24;
 const SORT_OPTIONS$1 = [
@@ -731,7 +763,6 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 	const [debouncedSearch, setDebouncedSearch] = useState("");
 	const [sortValue, setSortValue] = useState("created_at_desc");
 	const [viewMode, setViewMode] = useState("grid");
-	const observerTarget = useRef(null);
 	useEffect(() => {
 		const timer = setTimeout(() => {
 			setDebouncedSearch(searchTerm);
@@ -780,23 +811,12 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 	});
 	const usePortal = !!fetchPortalProducts;
 	const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, error } = usePortal ? portalQuery : legacyQuery;
-	const handleIntersect = useCallback((entries) => {
-		if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
-	}, [
+	const sentinelRef = useInfiniteListSentinel({
 		hasNextPage,
 		isFetchingNextPage,
-		fetchNextPage
-	]);
-	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 = useMemo(() => {
 		if (!data) return [];
 		if (usePortal) return data?.pages.flatMap((page) => (page.products ?? []).map((p) => ({
@@ -812,11 +832,16 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 			media_count: void 0
 		})) ?? [];
 	}, [data, usePortal]);
+	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [isFetchingNextPage && /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center py-4",
+		children: /* @__PURE__ */ jsx("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
+	}), error && /* @__PURE__ */ jsx("p", {
+		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
+		children: "Failed to load products. Please try again."
+	})] });
 	return /* @__PURE__ */ 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__ */ jsxs("div", {
 			className: "flex items-center justify-end gap-2",
@@ -836,11 +861,8 @@ function ProductsScreen({ countryCode, fetchProducts: fetchPortalProducts, onNav
 			})]
 		}),
 		loadingFilterShape: "search-view",
-		footer: isFetchingNextPage && /* @__PURE__ */ jsx("div", {
-			className: "flex justify-center py-4",
-			children: /* @__PURE__ */ 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__ */ jsx("div", {
 			className: SHAREABLE_GRID_CLASS,
 			children: products.map((product) => /* @__PURE__ */ jsx(ShareProductCard, {
@@ -1633,7 +1655,7 @@ function OwnerFilterTabs({ value, onValueChange, myLabel = "Mine" }) {
 				children: "All"
 			}),
 			/* @__PURE__ */ jsx(TabsTrigger, {
-				value: "my",
+				value: "mine",
 				children: myLabel
 			}),
 			/* @__PURE__ */ jsx(TabsTrigger, {
@@ -1709,7 +1731,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: () => {
@@ -1717,7 +1738,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) => {
@@ -1736,13 +1757,14 @@ function MediaListingScreen(_props) {
 	const bffKind = kindFilter === "all" ? void 0 : kindFilter;
 	const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, error } = 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,
@@ -1753,24 +1775,13 @@ function MediaListingScreen(_props) {
 		initialPageParam: void 0,
 		placeholderData: keepPreviousData
 	});
-	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 filteredItems = useMemo(() => data?.pages.flatMap((p) => p.media) ?? [], [data?.pages]);
+	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 +1878,7 @@ function MediaListingScreen(_props) {
 		}),
 		filters: filterBar,
 		footer,
-		sentinelRef: observerTarget,
+		sentinelRef,
 		loadingFilterShape: "search-view",
 		children: viewMode === "grid" ? /* @__PURE__ */ jsx("div", {
 			className: SHAREABLE_GRID_CLASS,
@@ -9069,7 +9080,7 @@ function PlaylistsListingScreen(_props) {
 	const allPlaylists = useMemo(() => data?.pages.flatMap((page) => page.playlists) ?? [], [data?.pages]);
 	const filteredPlaylists = 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,
@@ -10821,7 +10832,6 @@ function FilesListingScreen({ onNavigate }) {
 	}) }), []));
 	const [searchTerm, setSearchTerm] = useState("");
 	const [debouncedSearch, setDebouncedSearch] = useState("");
-	const observerTarget = useRef(null);
 	useEffect(() => {
 		const timer = setTimeout(() => {
 			setDebouncedSearch(searchTerm);
@@ -10844,28 +10854,22 @@ function FilesListingScreen({ onNavigate }) {
 		initialPageParam: 1
 	});
 	const files = useMemo(() => data?.pages.flatMap((page) => page.file_resources) ?? [], [data?.pages]);
-	const handleIntersect = useCallback((entries) => {
-		if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
-	}, [
+	const sentinelRef = useInfiniteListSentinel({
 		hasNextPage,
 		isFetchingNextPage,
-		fetchNextPage
-	]);
-	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__ */ jsxs(Fragment$1, { children: [isFetchingNextPage && /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center py-4",
+		children: /* @__PURE__ */ jsx("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
+	}), error && /* @__PURE__ */ jsx("p", {
+		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
+		children: "Failed to load files. Please try again."
+	})] });
 	return /* @__PURE__ */ 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__ */ jsx("div", {
 			className: "flex justify-end",
@@ -10878,11 +10882,8 @@ function FilesListingScreen({ onNavigate }) {
 				})
 			})
 		}),
-		footer: isFetchingNextPage && /* @__PURE__ */ jsx("div", {
-			className: "flex justify-center py-4",
-			children: /* @__PURE__ */ jsx("div", { className: "border-primary h-6 w-6 animate-spin rounded-full border-2 border-t-transparent" })
-		}),
-		sentinelRef: observerTarget,
+		footer,
+		sentinelRef,
 		children: /* @__PURE__ */ jsx("div", {
 			className: SHAREABLE_GRID_CLASS,
 			children: files.map((file) => {
@@ -11378,6 +11379,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
 			});
@@ -11550,6 +11552,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
 			});
@@ -11560,7 +11563,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;
@@ -11570,10 +11573,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;
@@ -12499,4 +12505,4 @@ const shareablesScreenPropertySchema = {
 //#endregion
 export { ShareablesScreen_exports as n, shareablesScreenPropertySchema as r, ShareablesScreen as t };
 
-//# sourceMappingURL=ShareablesScreen-CNARhXTE.mjs.map
+//# sourceMappingURL=ShareablesScreen-DjRtywMv.mjs.map