@fluid-app/portal-sdk 0.1.222 → 0.1.224

package/dist/{ShareablesScreen-D59m6muE.cjs → ShareablesScreen-C3JkUXfG.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-DjA2eYY7.cjs");
+const require_ShareablesScreen = require("./ShareablesScreen-DtR0PfSD.cjs");
 require("./PortalProductsApiProvider-DzjO6yix.cjs");
 exports.ShareablesScreen = require_ShareablesScreen.ShareablesScreen;
 exports.shareablesScreenPropertySchema = require_ShareablesScreen.shareablesScreenPropertySchema;

package/dist/{ShareablesScreen-DjA2eYY7.cjs → ShareablesScreen-DtR0PfSD.cjs}

@@ -1667,15 +1667,7 @@ function MediaRowActionsMenu({ onDelete }) {
 		})
 	})] });
 }
-/** Normalize a raw `kind` string into one of our filter buckets. Anything
-*  that isn't explicitly video/pdf is treated as image (matches the label
-*  fallback in getMediaKindLabel). */
-function kindBucket(kind) {
-	if (kind === "video") return "video";
-	if (kind === "pdf") return "pdf";
-	return "image";
-}
-function MediaListingScreen({ onNavigate }) {
+function MediaListingScreen(_props) {
 	const api = useShareablesApi();
 	const repContext = useRepContext();
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
@@ -1695,9 +1687,8 @@ function MediaListingScreen({ onNavigate }) {
 	}) }), []));
 	const [searchTerm, setSearchTerm] = (0, react.useState)("");
 	const [debouncedSearch, setDebouncedSearch] = (0, react.useState)("");
-	const [sortValue, setSortValue] = (0, react.useState)("title_asc");
+	const [sortValue, setSortValue] = (0, react.useState)("newest");
 	const [viewMode, setViewMode] = (0, react.useState)("grid");
-	const [page, setPage] = (0, react.useState)(1);
 	const [ownerFilter, setOwnerFilter] = (0, react.useState)("all");
 	const [kindFilter, setKindFilter] = (0, react.useState)("all");
 	(0, react.useEffect)(() => {
@@ -1706,14 +1697,7 @@ function MediaListingScreen({ onNavigate }) {
 		}, 300);
 		return () => clearTimeout(timer);
 	}, [searchTerm]);
-	(0, react.useEffect)(() => {
-		setPage(1);
-	}, [
-		debouncedSearch,
-		sortValue,
-		ownerFilter,
-		kindFilter
-	]);
+	const observerTarget = (0, react.useRef)(null);
 	const { mutate: deleteMedia, isPending: isDeleting } = (0, _tanstack_react_query.useMutation)({
 		mutationFn: (id) => api.media.deleteMedia(id),
 		onSuccess: () => {
@@ -1736,23 +1720,45 @@ function MediaListingScreen({ onNavigate }) {
 	const confirmDelete = (0, react.useCallback)(() => {
 		if (pendingDeleteId != null) deleteMedia(pendingDeleteId);
 	}, [pendingDeleteId, deleteMedia]);
-	const { data, isLoading, isFetching, error } = (0, _tanstack_react_query.useQuery)({
-		queryKey: [...shareablesKeys.media.list(debouncedSearch, sortValue === "title_desc", repContext), page],
-		queryFn: async () => {
-			return await api.media.getMedia({
-				page,
-				per_page: PAGE_SIZE$3,
-				search_query: debouncedSearch || void 0,
-				sorted_by: sortValue
+	const bffSort = sortValue === "title_asc" ? "title_asc" : sortValue === "title_desc" ? "title_desc" : void 0;
+	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),
+			sortValue,
+			kindFilter
+		],
+		queryFn: async ({ pageParam }) => {
+			return await api.media.list({
+				"filter[title]": debouncedSearch || void 0,
+				"filter[content_format]": bffKind,
+				"page[cursor]": pageParam,
+				"page[limit]": PAGE_SIZE$3,
+				sort: bffSort
 			});
 		},
+		getNextPageParam: (lastPage) => lastPage.nextCursor ?? void 0,
+		initialPageParam: void 0,
 		placeholderData: _tanstack_react_query.keepPreviousData
 	});
-	const totalCount = data?.meta?.total_count ?? 0;
-	const hasNextPage = page * PAGE_SIZE$3 < totalCount;
-	const allItems = data?.media ?? [];
-	const ownerFiltered = ownerFilter === "all" ? allItems : ownerFilter === "my" ? allItems.filter((item) => item.owner_type === "user") : allItems.filter((item) => item.owner_type === "company");
-	const filteredItems = kindFilter === "all" ? ownerFiltered : ownerFiltered.filter((item) => kindBucket(item.kind) === kindFilter);
+	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,
+		hasNextPage,
+		isFetchingNextPage
+	]);
 	const filterBar = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-3",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OwnerFilterTabs, {
@@ -1768,13 +1774,20 @@ function MediaListingScreen({ onNavigate }) {
 						searchValue: searchTerm,
 						onSearchChange: setSearchTerm,
 						placeholder: "Search media...",
-						sortOptions: [{
-							label: "Name (A-Z)",
-							value: "title_asc"
-						}, {
-							label: "Name (Z-A)",
-							value: "title_desc"
-						}],
+						sortOptions: [
+							{
+								label: "Newest",
+								value: "newest"
+							},
+							{
+								label: "Name (A-Z)",
+								value: "title_asc"
+							},
+							{
+								label: "Name (Z-A)",
+								value: "title_desc"
+							}
+						],
 						sortValue,
 						onSortChange: setSortValue
 					})
@@ -1823,34 +1836,16 @@ function MediaListingScreen({ onNavigate }) {
 			]
 		})]
 	});
-	const paginationFooter = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center justify-center gap-4 pt-4",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-				variant: "outline",
-				size: "sm",
-				onClick: () => setPage((p) => p - 1),
-				disabled: page === 1 || isFetching,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "h-4 w-4" }), "Previous"]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "text-muted-foreground text-sm",
-				children: ["Page ", page]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
-				variant: "outline",
-				size: "sm",
-				onClick: () => setPage((p) => p + 1),
-				disabled: !hasNextPage || isFetching,
-				children: ["Next", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-4 w-4" })]
-			})
-		]
-	});
+	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.jsxs)("p", {
+		className: "bg-destructive/10 text-destructive rounded-lg px-3 py-2",
+		children: ["Error: ", error.message]
+	})] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShareableListLayout, {
 		isLoading,
-		error,
-		errorMessage: "Failed to load media. Please try again.",
-		isEmpty: filteredItems.length === 0,
+		isEmpty: !error && filteredItems.length === 0 && !isFetchingNextPage && !hasNextPage,
 		emptyMessage: getFilteredEmptyMessage({
 			searchTerm: debouncedSearch,
 			ownerFilter,
@@ -1859,7 +1854,8 @@ function MediaListingScreen({ onNavigate }) {
 			defaultMessage: "No media available."
 		}),
 		filters: filterBar,
-		footer: paginationFooter,
+		footer,
+		sentinelRef: observerTarget,
 		loadingFilterShape: "search-view",
 		children: viewMode === "grid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: SHAREABLE_GRID_CLASS,
@@ -11153,6 +11149,7 @@ function createRawMediaAdapter(client) {
 				"page[cursor]": params?.cursor,
 				"page[limit]": params?.limit,
 				"filter[title]": params?.["filter[title]"],
+				"filter[content_format]": params?.["filter[content_format]"],
 				sort: params?.sort
 			});
 			return {
@@ -11319,6 +11316,19 @@ function createMediaAdapter(client) {
 	const cursorByPage = /* @__PURE__ */ new Map();
 	let lastFilterKey = "";
 	return {
+		list: async (options) => {
+			const response = await portAdapter.listMedia({
+				cursor: options?.["page[cursor]"],
+				limit: options?.["page[limit]"],
+				"filter[title]": options?.["filter[title]"],
+				"filter[content_format]": options?.["filter[content_format]"],
+				sort: options?.sort
+			});
+			return {
+				media: response.media.map(toBffMediumResponse),
+				nextCursor: response.meta.pagination?.next_cursor ?? null
+			};
+		},
 		getMedia: async (options) => {
 			const pageNumber = options?.page ?? 1;
 			const filterKey = `${options?.search_query ?? ""}|${options?.sorted_by ?? ""}`;
@@ -12209,4 +12219,4 @@ Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ShareablesScreen-DjA2eYY7.cjs.map
+//# sourceMappingURL=ShareablesScreen-DtR0PfSD.cjs.map