From 812b75ffdf087e10ece4d6e0f78e090c7ddf4342 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Wed, 23 Oct 2024 15:06:26 +0200
Subject: [PATCH 1/2] Pagination: More precise type for renderItem

---
 .changeset/plenty-teachers-admire.md          |  5 +++++
 .../core/react/src/pagination/Pagination.tsx  | 21 +++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/plenty-teachers-admire.md

diff --git a/.changeset/plenty-teachers-admire.md b/.changeset/plenty-teachers-admire.md
new file mode 100644
index 00000000000..4166542ad00
--- /dev/null
+++ b/.changeset/plenty-teachers-admire.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Pagination: More precise type for renderItem
diff --git a/@navikt/core/react/src/pagination/Pagination.tsx b/@navikt/core/react/src/pagination/Pagination.tsx
index 1c7e1d1f585..cd2eb7db6c7 100644
--- a/@navikt/core/react/src/pagination/Pagination.tsx
+++ b/@navikt/core/react/src/pagination/Pagination.tsx
@@ -8,6 +8,17 @@ import PaginationItem, {
   PaginationItemType,
 } from "./PaginationItem";
 
+interface RenderItemProps
+  extends Pick<
+    PaginationItemProps,
+    "className" | "disabled" | "selected" | "icon" | "iconPosition"
+  > {
+  children: React.ReactNode;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  page: number;
+  size: Exclude<PaginationProps["size"], undefined>;
+}
+
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Current page.
@@ -45,9 +56,9 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   prevNextTexts?: boolean;
   /**
    * Override pagination item rendering.
-   * @default (item: PaginationItemProps) => <PaginationItem {...item} />
+   * @default PaginationItem
    */
-  renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+  renderItem?: (item: RenderItemProps) => ReturnType<React.FC>;
   /**
    * Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
    */
@@ -110,7 +121,7 @@ export const getSteps = ({
  * ```jsx
  * <Pagination
  *   page={pageState}
- *   onPageChange={(x) => setPageState(x)}
+ *   onPageChange={setPageState}
  *   count={9}
  *   boundaryCount={1}
  *   siblingCount={1}
@@ -130,9 +141,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       prevNextTexts = false,
       srHeading,
       "aria-labelledby": ariaLabelledBy,
-      renderItem: Item = (item: PaginationItemProps) => (
-        <PaginationItem {...item} />
-      ),
+      renderItem: Item = PaginationItem,
       ...rest
     },
     ref,

From e67fd5d4679800937ebd3d446dae72ce1558238d Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Wed, 23 Oct 2024 15:28:39 +0200
Subject: [PATCH 2/2] comment

---
 @navikt/core/react/src/pagination/Pagination.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/@navikt/core/react/src/pagination/Pagination.tsx b/@navikt/core/react/src/pagination/Pagination.tsx
index cd2eb7db6c7..f227b4e0226 100644
--- a/@navikt/core/react/src/pagination/Pagination.tsx
+++ b/@navikt/core/react/src/pagination/Pagination.tsx
@@ -225,6 +225,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               ) : (
                 <li key={step}>
                   <Item
+                    /* Remember to update RenderItemProps if you make changes to props sent into Item */
                     onClick={() => onPageChange?.(n)}
                     selected={page === n}
                     page={n}