@btst/stack 3.1.2 → 4.1.0

package/src/plugins/ai-chat/__tests__/hooks.test.tsx

@@ -177,58 +177,74 @@ describe("useRenameConversationForm", () => {
 });
 
 describe("useDeleteConversation", () => {
-	it("refreshes the list and evicts only the deleted detail in the starting identity partition", async () => {
-		const identityPartition = "anonymous" as const;
-		const otherConversation = { ...conversation, id: "conv-2", title: "Other" };
-		const otherIdentity = { id: "other-user", role: "user" } as const;
-		const listKey = buildQueryKey(
-			"conversations",
-			"list",
-			aiChatResources.conversations.queries.list,
-			[identityPartition],
-		);
-		const deletedDetailKey = buildQueryKey(
-			"conversations",
-			"detail",
-			aiChatResources.conversations.queries.detail,
-			[conversation.id, identityPartition],
-		);
-		const otherDetailKey = buildQueryKey(
-			"conversations",
-			"detail",
-			aiChatResources.conversations.queries.detail,
-			[otherConversation.id, identityPartition],
-		);
-		const otherIdentityDetailKey = buildQueryKey(
-			"conversations",
-			"detail",
-			aiChatResources.conversations.queries.detail,
-			[conversation.id, otherIdentity],
-		);
-		let listFetches = 0;
-		await queryClient.fetchQuery({
-			queryKey: listKey,
-			queryFn: async () => {
-				listFetches += 1;
-				return [conversation, otherConversation];
-			},
-		});
-		listFetches = 0;
-		queryClient.setQueryData(deletedDetailKey, conversation);
-		queryClient.setQueryData(otherDetailKey, otherConversation);
-		queryClient.setQueryData(otherIdentityDetailKey, conversation);
-		fetchMock.mockResolvedValue(jsonResponse({ success: true }));
-		const getMutation = await renderDeleteProbe();
-
-		await act(async () => {
-			await getMutation().mutateAsync({ id: conversation.id });
-		});
-
-		expect(listFetches).toBe(1);
-		expect(queryClient.getQueryData(deletedDetailKey)).toBeUndefined();
-		expect(queryClient.getQueryData(otherDetailKey)).toEqual(otherConversation);
-		expect(queryClient.getQueryData(otherIdentityDetailKey)).toEqual(
-			conversation,
-		);
-	});
+	it.each(["mutate", "mutateAsync"] as const)(
+		"%s forwards callbacks and evicts only the deleted detail in the starting identity partition",
+		async (method) => {
+			const identityPartition = "anonymous" as const;
+			const otherConversation = {
+				...conversation,
+				id: "conv-2",
+				title: "Other",
+			};
+			const otherIdentity = { id: "other-user", role: "user" } as const;
+			const listKey = buildQueryKey(
+				"conversations",
+				"list",
+				aiChatResources.conversations.queries.list,
+				[identityPartition],
+			);
+			const deletedDetailKey = buildQueryKey(
+				"conversations",
+				"detail",
+				aiChatResources.conversations.queries.detail,
+				[conversation.id, identityPartition],
+			);
+			const otherDetailKey = buildQueryKey(
+				"conversations",
+				"detail",
+				aiChatResources.conversations.queries.detail,
+				[otherConversation.id, identityPartition],
+			);
+			const otherIdentityDetailKey = buildQueryKey(
+				"conversations",
+				"detail",
+				aiChatResources.conversations.queries.detail,
+				[conversation.id, otherIdentity],
+			);
+			let listFetches = 0;
+			await queryClient.fetchQuery({
+				queryKey: listKey,
+				queryFn: async () => {
+					listFetches += 1;
+					return [conversation, otherConversation];
+				},
+			});
+			listFetches = 0;
+			queryClient.setQueryData(deletedDetailKey, conversation);
+			queryClient.setQueryData(otherDetailKey, otherConversation);
+			queryClient.setQueryData(otherIdentityDetailKey, conversation);
+			fetchMock.mockResolvedValue(jsonResponse({ success: true }));
+			const getMutation = await renderDeleteProbe();
+			const onSuccess = vi.fn();
+
+			await act(async () => {
+				await getMutation()[method]({ id: conversation.id }, { onSuccess });
+				await vi.waitFor(() =>
+					expect(queryClient.getQueryData(deletedDetailKey)).toBeUndefined(),
+				);
+			});
+
+			expect(onSuccess).toHaveBeenCalledTimes(1);
+			expect(onSuccess.mock.calls[0]?.[1]).toEqual({ id: conversation.id });
+
+			expect(listFetches).toBe(1);
+			expect(queryClient.getQueryData(deletedDetailKey)).toBeUndefined();
+			expect(queryClient.getQueryData(otherDetailKey)).toEqual(
+				otherConversation,
+			);
+			expect(queryClient.getQueryData(otherIdentityDetailKey)).toEqual(
+				conversation,
+			);
+		},
+	);
 });

package/src/plugins/ai-chat/client/components/chat-input.tsx

@@ -93,6 +93,7 @@ export function ChatInput({
 		uploadFile,
 		localization: customLocalization,
 		allowedFileTypes,
+		classNames,
 	} = usePluginOverrides<AiChatPluginOverrides, Partial<AiChatPluginOverrides>>(
 		"aiChat",
 		{},
@@ -314,7 +315,11 @@ export function ChatInput({
 					)}
 				</PermissionCheck>
 			)}
-			<form onSubmit={handleFormSubmit} className="space-y-2">
+			<form
+				onSubmit={handleFormSubmit}
+				className={cn("space-y-2", classNames?.input)}
+				data-testid="chat-input-form"
+			>
 				{/* Attached Files Preview */}
 				{attachedFiles.length > 0 && (
 					<div className="flex flex-wrap gap-2">

package/src/plugins/ai-chat/client/components/chat-interface.tsx

@@ -263,6 +263,7 @@ export function ChatInterface({
 		localization: customLocalization,
 		showAttribution,
 		chatSuggestions,
+		classNames,
 	} = usePluginOverrides<AiChatPluginOverrides, Partial<AiChatPluginOverrides>>(
 		"aiChat",
 		{ showAttribution: true },
@@ -1139,7 +1140,9 @@ export function ChatInterface({
 							className={cn(
 								"flex flex-col p-4",
 								isWidget ? "max-w-full" : "max-w-3xl mx-auto w-full",
+								classNames?.messageList,
 							)}
+							data-testid="chat-message-list"
 						>
 							{messages.length === 0 ? (
 								<div className="flex flex-col h-full min-h-[300px]">

package/src/plugins/ai-chat/client/components/chat-layout.tsx

@@ -86,7 +86,7 @@ export function ChatLayout(props: ChatLayoutProps) {
 		onMessagesChange,
 		onClear,
 	} = props;
-	const { localization } = usePluginOverrides<
+	const { localization, classNames } = usePluginOverrides<
 		AiChatPluginOverrides,
 		Partial<AiChatPluginOverrides>
 	>("aiChat", {});
@@ -133,7 +133,13 @@ export function ChatLayout(props: ChatLayoutProps) {
 
 	if (layout === "widget") {
 		return (
-			<div className={cn("flex flex-col items-end gap-3", className)}>
+			<div
+				className={cn(
+					"flex flex-col items-end gap-3",
+					className,
+					classNames?.container,
+				)}
+			>
 				{/* Chat panel — always mounted to preserve conversation state, hidden when closed */}
 				<div
 					className={cn(
@@ -238,6 +244,7 @@ export function ChatLayout(props: ChatLayoutProps) {
 			className={cn(
 				"flex h-[calc(100vh-4rem)] w-full overflow-hidden",
 				className,
+				classNames?.container,
 			)}
 			data-testid="chat-layout"
 		>

package/src/plugins/ai-chat/client/components/chat-message.tsx

@@ -133,11 +133,14 @@ export function ChatMessage({
 }: ChatMessageProps) {
 	const isUser = message.role === "user";
 
-	const { localization: customLocalization, toolRenderers } =
-		usePluginOverrides<AiChatPluginOverrides, Partial<AiChatPluginOverrides>>(
-			"aiChat",
-			{},
-		);
+	const {
+		localization: customLocalization,
+		toolRenderers,
+		classNames,
+	} = usePluginOverrides<AiChatPluginOverrides, Partial<AiChatPluginOverrides>>(
+		"aiChat",
+		{},
+	);
 	const { router } = useStack();
 	const Link = router?.Link;
 	const Image = router?.Image;
@@ -265,7 +268,10 @@ export function ChatMessage({
 				"flex gap-3 w-full",
 				isCompact ? "mb-3" : "mb-4",
 				isUser ? "justify-end" : "justify-start",
+				classNames?.message,
 			)}
+			data-testid="chat-message"
+			data-role={message.role}
 			aria-label={
 				isUser
 					? tr("A11Y_USER_MESSAGE", "aiChat.a11y.userMessage", "Your message")
@@ -295,7 +301,9 @@ export function ChatMessage({
 						"rounded-lg",
 						isCompact ? "px-3 py-2" : "px-4 py-3",
 						isUser ? "bg-primary text-primary-foreground" : "bg-muted",
+						isUser ? classNames?.userMessage : classNames?.assistantMessage,
 					)}
+					data-testid="chat-message-bubble"
 				>
 					{isUser ? (
 						// User messages: files + images + text (or edit mode)

package/src/plugins/ai-chat/client/components/chat-sidebar.tsx

@@ -67,7 +67,7 @@ export function ChatSidebar({
 	onNewChat,
 	className,
 }: ChatSidebarProps) {
-	const { localization: customLocalization } = usePluginOverrides<
+	const { localization: customLocalization, classNames } = usePluginOverrides<
 		AiChatPluginOverrides,
 		Partial<AiChatPluginOverrides>
 	>("aiChat", {});
@@ -208,7 +208,11 @@ export function ChatSidebar({
 	return (
 		<div
 			data-testid="chat-sidebar"
-			className={cn("flex flex-col h-full bg-muted/30 border-r", className)}
+			className={cn(
+				"flex flex-col h-full bg-muted/30 border-r",
+				className,
+				classNames?.sidebar,
+			)}
 		>
 			{/* Header */}
 			<div className="p-4 border-b">

package/src/plugins/ai-chat/client/hooks/chat-hooks.tsx

@@ -146,25 +146,22 @@ function withCurrentHistoryRefresh<TData, TVariables>(
 	refresh: ReturnType<typeof useCurrentHistoryRefresh>,
 	queryKey?: readonly unknown[],
 	afterSuccess?: (
-		variables: TVariables,
+		variables: Parameters<typeof mutation.mutateAsync>[0],
 		startedAs: ReturnType<typeof useAiChatIdentityPartition>,
 	) => void,
 ): UseMutationResult<TData, Error, TVariables> {
-	const mutateAsync: typeof mutation.mutateAsync = async (
-		variables,
-		options,
-	) => {
+	const mutateAsync: typeof mutation.mutateAsync = async (...args) => {
 		const startedAs = refresh.currentPartition();
-		const result = await mutation.mutateAsync(variables, options);
+		const result = await mutation.mutateAsync(...args);
 		try {
 			await refresh.refreshAfterSuccess(startedAs, queryKey);
 		} finally {
-			afterSuccess?.(variables, startedAs);
+			afterSuccess?.(args[0], startedAs);
 		}
 		return result;
 	};
-	const mutate: typeof mutation.mutate = (variables, options) => {
-		void mutateAsync(variables, options).catch(() => {});
+	const mutate: typeof mutation.mutate = (...args) => {
+		void mutateAsync(...args).catch(() => {});
 	};
 	return { ...mutation, mutate, mutateAsync };
 }

package/src/plugins/ai-chat/client/overrides.ts

@@ -201,6 +201,27 @@ export interface AiChatPluginOverrides {
 	 */
 	toolRenderers?: Record<string, ToolCallRenderer>;
 
+	/**
+	 * Optional class names merged onto specific UI elements.
+	 * Use these for targeted styling without replacing whole components.
+	 */
+	classNames?: {
+		/** Root of `ChatLayout` (full-page or widget mode) */
+		container?: string;
+		/** Conversation sidebar root */
+		sidebar?: string;
+		/** Wrapper around the list of messages */
+		messageList?: string;
+		/** Each message row (user and assistant) */
+		message?: string;
+		/** The bubble of a user message */
+		userMessage?: string;
+		/** The bubble of an assistant message */
+		assistantMessage?: string;
+		/** The composer form at the bottom of the chat */
+		input?: string;
+	};
+
 	// ============== Lifecycle Hooks (optional) ==============
 
 	/**

package/src/plugins/blog/__tests__/classnames-overrides.test.tsx

@@ -0,0 +1,206 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+// Core primitives MUST be imported from the package entry (not relative src
+// paths) so they share module identity — and React context — with the blog
+// components, which resolve `@btst/stack/*` via package self-reference.
+import { StackProvider } from "@btst/stack/context";
+import { PageWrapper } from "../client/components/shared/page-wrapper";
+import { PostsList } from "../client/components/shared/posts-list";
+import type { SerializedPost } from "../types";
+import { createTestClientStack } from "../../../__tests__/client-stack-test-utils";
+import { blogClientPlugin } from "../client/plugin";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+// jsdom lacks these APIs used by Radix / cmdk inside SearchInput
+(globalThis as any).ResizeObserver ??= class {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+};
+Element.prototype.scrollIntoView ??= () => {};
+
+const hooks = vi.hoisted(() => ({
+	useSuspensePost: vi.fn(),
+	useDeletePost: vi.fn(),
+	usePostForm: vi.fn(),
+	usePostSearch: vi.fn(),
+	useSuspensePosts: vi.fn(),
+	useTags: vi.fn(),
+}));
+
+vi.mock("../client/hooks/blog-hooks", () => hooks);
+
+const CLASS_NAMES = {
+	container: "bg-red-100",
+	postCard: "bg-blue-100",
+	postTitle: "text-purple-700",
+	postMeta: "text-green-600",
+	tagsList: "bg-yellow-50",
+	pagination: "border-4 border-orange-500",
+} as const;
+
+const post: SerializedPost = {
+	id: "p1",
+	title: "Hello World",
+	content: "# Hello",
+	excerpt: "An excerpt",
+	slug: "hello-world",
+	published: true,
+	image: "",
+	tags: [{ id: "t1", name: "Release", slug: "release" }],
+	authorId: null,
+	publishedAt: new Date("2024-01-01").toISOString(),
+	createdAt: new Date("2024-01-01").toISOString(),
+	updatedAt: new Date("2024-01-01").toISOString(),
+} as unknown as SerializedPost;
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+	container = document.createElement("div");
+	document.body.appendChild(container);
+	root = createRoot(container);
+
+	hooks.usePostSearch.mockReturnValue({ data: [], isLoading: false });
+});
+
+afterEach(async () => {
+	await act(async () => {
+		root.unmount();
+	});
+	container.remove();
+	vi.clearAllMocks();
+});
+
+async function render(ui: React.ReactElement) {
+	await act(async () => {
+		root.render(ui);
+	});
+}
+
+function withBlogOverrides(children: React.ReactNode) {
+	return (
+		<StackProvider
+			stack={createTestClientStack({ blog: blogClientPlugin() })}
+			overrides={{
+				blog: {
+					uploadImage: async () => "",
+					classNames: CLASS_NAMES,
+				},
+			}}
+		>
+			{children}
+		</StackProvider>
+	);
+}
+
+function query(selector: string): HTMLElement {
+	const el = container.querySelector<HTMLElement>(selector);
+	expect(el, `expected to find ${selector}`).toBeTruthy();
+	return el!;
+}
+
+describe("blog classNames overrides (issue #36)", () => {
+	it("applies classNames.container to the page container", async () => {
+		await render(
+			withBlogOverrides(
+				<PageWrapper testId="blog-container">
+					<span>content</span>
+				</PageWrapper>,
+			),
+		);
+
+		const el = query('[data-testid="blog-container"]');
+		expect(el.className).toContain(CLASS_NAMES.container);
+		// The override must merge with the layout's own classes, not replace them.
+		expect(el.className).toContain("container");
+		expect(el.className).toContain("mx-auto");
+	});
+
+	it("applies classNames.postCard, postTitle, postMeta and tagsList inside a post card", async () => {
+		await render(withBlogOverrides(<PostsList posts={[post]} />));
+
+		// postCard — anchored on the Card primitive's structural slot.
+		const card = query('[data-slot="card"]');
+		expect(card.className).toContain(CLASS_NAMES.postCard);
+		expect(card.className).toContain("group");
+
+		// postTitle — anchored on the CardTitle primitive's structural slot.
+		const title = query('[data-slot="card-title"]');
+		expect(title.className).toContain(CLASS_NAMES.postTitle);
+		expect(title.className).toContain("line-clamp-3");
+		expect(title.textContent).toBe(post.title);
+
+		// postMeta — the wrapper holding the published date.
+		const meta = query("time").parentElement!;
+		expect(meta.className).toContain(CLASS_NAMES.postMeta);
+		// `cn` runs tailwind-merge, so the conflicting `text-muted-foreground`
+		// is intentionally replaced by the override; non-conflicting base
+		// classes must survive.
+		expect(meta.className).toContain("items-center");
+		expect(meta.className).not.toContain("text-muted-foreground");
+
+		// tagsList — the wrapper immediately following the metadata block.
+		const tags = meta.nextElementSibling as HTMLElement;
+		expect(tags.className).toContain(CLASS_NAMES.tagsList);
+		expect(tags.className).toContain("flex-wrap");
+		expect(tags.textContent).toContain("Release");
+	});
+
+	it("applies classNames.pagination to the load-more wrapper", async () => {
+		await render(
+			withBlogOverrides(
+				<PostsList posts={[post]} onLoadMore={() => {}} hasMore />,
+			),
+		);
+
+		const button = [...container.querySelectorAll("button")].find((b) =>
+			b.textContent?.includes("Load more posts"),
+		);
+		expect(button, "expected a load-more button").toBeTruthy();
+
+		const pagination = button!.parentElement!;
+		expect(pagination.className).toContain("border-4");
+		expect(pagination.className).toContain("border-orange-500");
+		expect(pagination.className).toContain("justify-center");
+	});
+
+	it("leaves base classes untouched when no classNames override is supplied", async () => {
+		await render(
+			<StackProvider
+				stack={createTestClientStack({ blog: blogClientPlugin() })}
+				overrides={{ blog: { uploadImage: async () => "" } }}
+			>
+				<PostsList
+					posts={[
+						{
+							...post,
+							tags: [
+								...post.tags!,
+								{ ...post.tags![0]!, id: "t2", name: "News", slug: "news" },
+							],
+						},
+					]}
+					onLoadMore={() => {}}
+					hasMore
+				/>
+			</StackProvider>,
+		);
+
+		const card = query('[data-slot="card"]');
+		expect(card.className).toContain("group");
+		expect(card.className).not.toContain(CLASS_NAMES.postCard);
+		const metadata = query("time").parentElement!;
+		const tags = metadata.parentElement!.querySelectorAll(
+			'[data-slot="badge"]',
+		);
+		expect(tags).toHaveLength(2);
+		for (const tag of tags) {
+			expect(tag.parentElement).toBe(metadata.parentElement);
+		}
+	});
+});

package/src/plugins/blog/client/components/shared/page-wrapper.tsx

@@ -4,6 +4,7 @@ import { usePluginOverrides } from "@btst/stack/context";
 import { PageWrapper as SharedPageWrapper } from "@workspace/ui/components/page-wrapper";
 import type { BlogPluginOverrides } from "../../overrides";
 import { BLOG_PLUGIN_ID } from "../../constants";
+import { cn } from "../../../utils";
 
 export function PageWrapper({
 	children,
@@ -14,7 +15,7 @@ export function PageWrapper({
 	className?: string;
 	testId?: string;
 }) {
-	const { showAttribution } = usePluginOverrides<
+	const { showAttribution, classNames } = usePluginOverrides<
 		BlogPluginOverrides,
 		Partial<BlogPluginOverrides>
 	>(BLOG_PLUGIN_ID, {
@@ -23,7 +24,7 @@ export function PageWrapper({
 
 	return (
 		<SharedPageWrapper
-			className={className}
+			className={cn(className, classNames?.container)}
 			testId={testId}
 			showAttribution={showAttribution}
 		>

package/src/plugins/blog/client/components/shared/post-card.tsx

@@ -18,7 +18,7 @@ import { CalendarIcon } from "lucide-react";
 import type { BlogPluginOverrides } from "../../overrides";
 import { BLOG_PLUGIN_ID } from "../../constants";
 import { DefaultLink, DefaultImage } from "./defaults";
-
+import { cn } from "../../../utils";
 // Beautiful gradient color combinations
 const GRADIENT_PALETTES = [
 	{
@@ -222,7 +222,7 @@ function getGradientFromTitle(title: string) {
 
 export function PostCard({ post }: { post: SerializedPost }) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<
+	const { localization, classNames } = usePluginOverrides<
 		BlogPluginOverrides,
 		Partial<BlogPluginOverrides>
 	>(BLOG_PLUGIN_ID, {});
@@ -234,9 +234,19 @@ export function PostCard({ post }: { post: SerializedPost }) {
 	const timestamp = post.publishedAt || post.createdAt;
 	const postDate = formatPostDate(timestamp);
 	const gradient = post.image ? null : getGradientFromTitle(post.title);
+	const tags = post.tags?.map((tag) => (
+		<Badge key={tag.id} variant="secondary" className="text-xs">
+			{tag.name}
+		</Badge>
+	));
 
 	return (
-		<Card className="group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg">
+		<Card
+			className={cn(
+				"group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg",
+				classNames?.postCard,
+			)}
+		>
 			{/* Image or Placeholder */}
 			<Link
 				href={blogPath}
@@ -281,24 +291,34 @@ export function PostCard({ post }: { post: SerializedPost }) {
 				className="block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 grow"
 			>
 				<CardHeader className="flex-1">
-					<CardTitle className="line-clamp-3 text-lg leading-tight transition-colors group-hover:underline">
+					<CardTitle
+						className={cn(
+							"line-clamp-3 text-lg leading-tight transition-colors group-hover:underline",
+							classNames?.postTitle,
+						)}
+					>
 						{post.title}
 					</CardTitle>
 				</CardHeader>
 
 				<CardContent className="flex flex-1 flex-col gap-2">
 					<div className="flex flex-wrap gap-2">
-						<div className="flex items-center gap-2 text-muted-foreground text-xs">
+						<div
+							className={cn(
+								"flex items-center gap-2 text-muted-foreground text-xs",
+								classNames?.postMeta,
+							)}
+						>
 							<CalendarIcon className="h-3 w-3" />
 							<time dateTime={timestamp}>{postDate}</time>
 						</div>
-						{post.tags &&
-							post.tags.length > 0 &&
-							post.tags.map((tag) => (
-								<Badge key={tag.id} variant="secondary" className="text-xs">
-									{tag.name}
-								</Badge>
-							))}
+						{classNames?.tagsList ? (
+							<div className={cn("flex flex-wrap gap-2", classNames.tagsList)}>
+								{tags}
+							</div>
+						) : (
+							tags
+						)}
 					</div>
 				</CardContent>
 			</Link>

package/src/plugins/blog/client/components/shared/posts-list.tsx

@@ -6,6 +6,7 @@ import { SearchInput } from "./search-input";
 import type { BlogPluginOverrides } from "../../overrides";
 import { BLOG_PLUGIN_ID } from "../../constants";
 import { PostCard as DefaultPostCard } from "./post-card";
+import { cn } from "../../../utils";
 
 interface PostsListProps {
 	posts: SerializedPost[];
@@ -21,7 +22,7 @@ export function PostsList({
 	isLoadingMore,
 }: PostsListProps) {
 	const t = useTranslate();
-	const { localization, PostCard } =
+	const { localization, PostCard, classNames } =
 		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 
 	const PostCardComponent = PostCard || DefaultPostCard;
@@ -61,7 +62,7 @@ export function PostsList({
 			</div>
 
 			{onLoadMore && hasMore && (
-				<div className="flex justify-center">
+				<div className={cn("flex justify-center", classNames?.pagination)}>
 					<Button
 						onClick={onLoadMore}
 						disabled={isLoadingMore}