fix(pagination): add onChange to page buttons (#868)

.changeset/cold-coins-tie.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/pagination": patch
+---
+
+Invoke onChange after clicking on numbered pagination buttons

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")
+})

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>

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