Repository: digdir/designsystemet (ts)

Issue:
usePagination shows negative page numbers when showPages > totalPages
### Version number

1.1.2

### Description of the bug

When `showPages` is greater than `totalPages`, `usePagination` returns a list containing negative page numbers.

### Steps To Reproduce

https://codesandbox.io/p/sandbox/c29d8p

### Additional Information

This can be fixed from the consumer by adding a conditional, but is negative numbers a good default?

```ts
const totalPages = 1 // some arbitrary which comes from somewhere else

const { pages, prevButtonProps, nextButtonProps } = usePagination({
    currentPage,
    setCurrentPage,
    onChange: handlePageChange,
    totalPages,
    showPages: totalPages > 1 ? 5 : 1,
  });
```


Pull request description:
fix(usePagination): don't send negative pages
<!--
	Thanks for submitting a Pull Request! We appreciate you spending the time to work on these changes.
	Read about contributing: https://github.com/digdir/designsystemet/blob/main/CONTRIBUTING.md
	Read our code of conduct: https://github.com/digdir/designsystemet/blob/main/CODE_OF_CONDUCT.md
-->

## Summary

resolves #3792

## Checks

- [ ] I have read the [contribution guidelines](https://github.com/digdir/designsystemet/blob/main/CONTRIBUTING.md)
- [ ] I have added a changeset (run `pnpm changeset` if relevant)


Patch:
diff --git a/.changeset/two-books-smash.md b/.changeset/two-books-smash.md
new file mode 100644
index 00000000..88fbab34
--- /dev/null
+++ b/.changeset/two-books-smash.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**usePagination**: Don't send negative pages if `showPages` is greater than `totalPages`
diff --git a/packages/react/src/utilities/hooks/usePagination/usePagination.ts b/packages/react/src/utilities/hooks/usePagination/usePagination.ts
index 14de87ca..325dbe4c 100644
--- a/packages/react/src/utilities/hooks/usePagination/usePagination.ts
+++ b/packages/react/src/utilities/hooks/usePagination/usePagination.ts
@@ -4,7 +4,10 @@ import type { PaginationButtonProps } from '../../../components';
 
 const getSteps = (now: number, max: number, show: number) => {
   const offset = (show - 1) / 2;
-  const start = Math.min(Math.max(now - Math.floor(offset), 1), max - show + 1);
+  const start = Math.max(
+    1,
+    Math.min(Math.max(now - Math.floor(offset), 1), max - show + 1),
+  );
   const end = Math.min(Math.max(now + Math.ceil(offset), show), max);
   const pages = Array.from({ length: end + 1 - start }, (_, i) => i + start);
 


Test patch:
diff --git a/packages/react/src/utilities/hooks/usePagination/usePagination.test.tsx b/packages/react/src/utilities/hooks/usePagination/usePagination.test.tsx
index 3c37e15e..7caa42a0 100644
--- a/packages/react/src/utilities/hooks/usePagination/usePagination.test.tsx
+++ b/packages/react/src/utilities/hooks/usePagination/usePagination.test.tsx
@@ -82,4 +82,26 @@ describe('usePagination', () => {
 
     expect(mockOnChange).not.toHaveBeenCalledWith(event, 2);
   });
+
+  it('should not render negative pages', () => {
+    const { result } = renderHook(() =>
+      usePagination({ totalPages: 5, currentPage: 1, showPages: 7 }),
+    );
+
+    expect(result.current.pages).not.toContainEqual({
+      page: -1,
+      itemKey: 'page--1',
+      buttonProps: expect.any(Object),
+    });
+    expect(result.current.pages).not.toContainEqual({
+      page: 0,
+      itemKey: 'page-0',
+      buttonProps: expect.any(Object),
+    });
+    expect(result.current.pages).toContainEqual({
+      page: 1,
+      itemKey: 'page-1',
+      buttonProps: expect.any(Object),
+    });
+  });
 });