diff --git a/.changeset/fresh-bees-hammer.md b/.changeset/fresh-bees-hammer.md new file mode 100644 index 000000000..7207bfe3a --- /dev/null +++ b/.changeset/fresh-bees-hammer.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +fix(Pagination): disable prev/next buttons when no prev/next page diff --git a/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts b/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts index 008540874..1e4bca5a4 100644 --- a/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts +++ b/packages/bits-ui/src/lib/bits/pagination/pagination.svelte.ts @@ -85,6 +85,9 @@ class PaginationRootState { return node.querySelector(`[data-pagination-${type}]`); }; + hasPrevPage = $derived.by(() => this.page.current > 1); + hasNextPage = $derived.by(() => this.page.current < this.totalPages); + prevPage = () => { this.page.current = Math.max(this.page.current - 1, 1); }; @@ -215,6 +218,13 @@ class PaginationButtonState { this.type === "prev" ? this.#root.prevPage() : this.#root.nextPage(); }; + #isDisabled = $derived.by(() => { + if (this.#disabled.current) return true; + if (this.type === "prev") return !this.#root.hasPrevPage; + if (this.type === "next") return !this.#root.hasNextPage; + return false; + }); + #onpointerdown = (e: PointerEvent) => { if (this.#disabled.current) return; if (e.pointerType === "touch") return e.preventDefault(); @@ -244,6 +254,7 @@ class PaginationButtonState { id: this.id.current, [PREV_ATTR]: this.type === "prev" ? "" : undefined, [NEXT_ATTR]: this.type === "next" ? "" : undefined, + disabled: this.#isDisabled, // onpointerdown: this.#onpointerdown, onpointerup: this.#onpointerup,