From eac4265e3e5ab5d3c99ecda721f1e356aef3e5ff Mon Sep 17 00:00:00 2001
From: Filip Sauer <sauer.filip@gmail.com>
Date: Wed, 13 Sep 2023 21:36:19 +0200
Subject: [PATCH] fix(pagination): add onChange to page buttons (#868)

---
 .changeset/cold-coins-tie.md                  |  5 +++++
 e2e/pagination.e2e.ts                         | 20 +++++++++++++++++++
 examples/solid-ts/src/pages/pagination.tsx    |  4 ++--
 .../pagination/src/pagination.machine.ts      |  2 +-
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/cold-coins-tie.md

diff --git a/.changeset/cold-coins-tie.md b/.changeset/cold-coins-tie.md
new file mode 100644
index 0000000000..d50a052d8a
--- /dev/null
+++ b/.changeset/cold-coins-tie.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/pagination": patch
+---
+
+Invoke onChange after clicking on numbered pagination buttons
diff --git a/e2e/pagination.e2e.ts b/e2e/pagination.e2e.ts
index 600907d061..d3a15f6410 100644
--- a/e2e/pagination.e2e.ts
+++ b/e2e/pagination.e2e.ts
@@ -47,3 +47,23 @@ test("should update page when prev button is clicked", async ({ page }) => {
   await page.click(prevButton)
   await expect(page.locator(item2)).toHaveAttribute("aria-current", "page")
 })
+
+test("should call onChange when item is clicked", async ({ page }) => {
+  const onChangeCallbackParams = page.waitForEvent("console")
+  await page.click(item2)
+  expect((await onChangeCallbackParams).text()).toContain("page: 2")
+})
+
+test("should call onChange when next button is clicked", async ({ page }) => {
+  const onChangeCallbackParams = page.waitForEvent("console")
+  await page.click(nextButton)
+  expect((await onChangeCallbackParams).text()).toContain("page: 2")
+})
+
+test("should call onChange when prev button is clicked", async ({ page }) => {
+  await page.click(item5)
+
+  const onChangeCallbackParams = page.waitForEvent("console")
+  await page.click(prevButton)
+  expect((await onChangeCallbackParams).text()).toContain("page: 4")
+})
diff --git a/examples/solid-ts/src/pages/pagination.tsx b/examples/solid-ts/src/pages/pagination.tsx
index f86d0d7f0e..ceca9f2bc8 100644
--- a/examples/solid-ts/src/pages/pagination.tsx
+++ b/examples/solid-ts/src/pages/pagination.tsx
@@ -23,7 +23,7 @@ export default function Page() {
 
   const api = createMemo(() => pagination.connect(state, send, normalizeProps))
 
-  const data = api().slice(paginationData)
+  const data = () => api().slice(paginationData)
 
   return (
     <>
@@ -39,7 +39,7 @@ export default function Page() {
             </tr>
           </thead>
           <tbody>
-            <For each={data}>
+            <For each={data()}>
               {(item) => (
                 <tr>
                   <td>{item.id}</td>
diff --git a/packages/machines/pagination/src/pagination.machine.ts b/packages/machines/pagination/src/pagination.machine.ts
index b61fbcacd4..e3f6f68ccd 100644
--- a/packages/machines/pagination/src/pagination.machine.ts
+++ b/packages/machines/pagination/src/pagination.machine.ts
@@ -85,7 +85,7 @@ export function machine(userContext: UserDefinedContext) {
           ctx.count = evt.count
         },
         setPage(ctx, evt) {
-          ctx.page = evt.page
+          set.page(ctx, evt.page)
         },
         setPageSize(ctx, evt) {
           ctx.pageSize = evt.size