From 120cd295137f7b5887c07d1e72323e4faee03c7a Mon Sep 17 00:00:00 2001
From: Enrico Sacchetti <enrico@theetrain.ca>
Date: Wed, 12 Oct 2022 00:20:08 -0400
Subject: [PATCH] feat!: use 1-indexing for PaginationNav

- fix(PaginationNav): make 'change' event emit after user interaction instead of reactive event

BREAKING CHANGE: use 1-indexing for PaginationNav component
---
 COMPONENT_INDEX.md                            |  2 +-
 docs/src/COMPONENT_API.json                   |  2 +-
 .../PaginationNavReactive.svelte              |  4 +-
 src/PaginationNav/PaginationItem.svelte       |  2 +-
 src/PaginationNav/PaginationNav.svelte        | 66 ++++++++++++-------
 src/PaginationNav/PaginationOverflow.svelte   |  2 +-
 types/PaginationNav/PaginationNav.svelte.d.ts |  2 +-
 7 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 617a8ec6..554642a6 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2694,7 +2694,7 @@ None.
 
 | Prop name    | Required | Kind             | Reactive | Type                 | Default value                | Description                               |
 | :----------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | ----------------------------------------- |
-| page         | No       | <code>let</code> | Yes      | <code>number</code>  | <code>0</code>               | Specify the current page index            |
+| page         | No       | <code>let</code> | Yes      | <code>number</code>  | <code>1</code>               | Specify the current page index            |
 | total        | No       | <code>let</code> | No       | <code>number</code>  | <code>10</code>              | Specify the total number of pages         |
 | shown        | No       | <code>let</code> | No       | <code>number</code>  | <code>10</code>              | Specify the total number of pages to show |
 | loop         | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>           | Set to `true` to loop the navigation      |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 9272439b..851df27a 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -8431,7 +8431,7 @@
           "kind": "let",
           "description": "Specify the current page index",
           "type": "number",
-          "value": "0",
+          "value": "1",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
diff --git a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
index 8c98cf91..c8e51b10 100644
--- a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
+++ b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
@@ -7,8 +7,8 @@
 <PaginationNav bind:page />
 
 <div style="margin: var(--cds-layout-01) 0">
-  <Button on:click="{() => (page = 0)}" disabled="{page === 0}">
-    Set page to 0
+  <Button on:click="{() => (page = 1)}" disabled="{page === 0}">
+    Set page to 1
   </Button>
 </div>
 
diff --git a/src/PaginationNav/PaginationItem.svelte b/src/PaginationNav/PaginationItem.svelte
index 83a36046..4f98c855 100644
--- a/src/PaginationNav/PaginationItem.svelte
+++ b/src/PaginationNav/PaginationItem.svelte
@@ -1,6 +1,6 @@
 <script>
   /** Specify the current page index */
-  export let page = 0;
+  export let page = 1;
 
   /** Set to `true` to use the active state */
   export let active = false;
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index f49569d7..4e31aa10 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -1,12 +1,12 @@
 <script>
   /**
-   * @event {{ page: number; }} change
+   * @event {{ page: number; }} change - fires after every user interaction
    * @event {{ page: number; }} click:button--previous
    * @event {{ page: number; }} click:button--next
    */
 
   /** Specify the current page index */
-  export let page = 0;
+  export let page = 1;
 
   /** Specify the total number of pages */
   export let total = 10;
@@ -23,7 +23,7 @@
   /** Specify the backward button text */
   export let backwardText = "Previous page";
 
-  import { afterUpdate, createEventDispatcher } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import CaretLeft from "../icons/CaretLeft.svelte";
   import CaretRight from "../icons/CaretRight.svelte";
   import PaginationItem from "./PaginationItem.svelte";
@@ -33,13 +33,13 @@
   const dispatch = createEventDispatcher();
   const MIN = 4;
 
-  afterUpdate(() => {
-    dispatch("change", { page });
-  });
-
+  // number of overflow pages near the beginning of the nav
   let front = 0;
+
+  // number of overflow pages near the end of the nav
   let back = 0;
 
+  // number of nav overflow or items that may appear
   $: fit = shown >= MIN ? shown : MIN;
   $: startOffset = fit <= MIN && page > 1 ? 0 : 1;
   $: if (fit >= total) {
@@ -49,8 +49,8 @@
   $: if (fit < total) {
     const split = Math.ceil(fit / 2) - 1;
 
-    front = page - split + 1;
-    back = total - page - (fit - split) + 1;
+    front = page - split;
+    back = total - page - (fit - split) + 2;
 
     if (front <= 1) {
       back -= front <= 0 ? Math.abs(front) + 1 : 0;
@@ -62,6 +62,9 @@
       back = 0;
     }
   }
+
+  // all enumerable items to render in between
+  // overflow menus
   $: items = Array.from({ length: total })
     .map((e, i) => i)
     .slice(startOffset + front, (back + 1) * -1);
@@ -75,37 +78,47 @@
         tooltipAlignment="center"
         tooltipPosition="bottom"
         iconDescription="{backwardText}"
-        disabled="{!loop && page === 0}"
+        disabled="{!loop && page === 1}"
         icon="{CaretLeft}"
         on:click="{() => {
-          if (page - 1 < 0) {
-            if (loop) page = total - 1;
+          if (page <= 1) {
+            if (loop) page = total;
           } else {
             page--;
           }
           dispatch('click:button--previous', { page });
+          dispatch('change', { page });
         }}"
       />
     </li>
     {#if fit > MIN || (fit <= MIN && page <= 1)}
       <PaginationItem
         page="{1}"
-        active="{page === 0}"
-        on:click="{() => (page = 0)}"
+        active="{page === 1}"
+        on:click="{() => {
+          page = 1;
+          dispatch('change', { page });
+        }}"
       >
-        {page === 0 ? "Active, Page" : "Page"}
+        {page === 1 ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
     <PaginationOverflow
       fromIndex="{startOffset}"
       count="{front}"
-      on:select="{({ detail }) => (page = detail.index)}"
+      on:select="{({ detail }) => {
+        page = detail.index;
+        dispatch('change', { page });
+      }}"
     />
     {#each items as item}
       <PaginationItem
         page="{item + 1}"
-        active="{page === item}"
-        on:click="{() => (page = item)}"
+        active="{page === item + 1}"
+        on:click="{() => {
+          page = item + 1;
+          dispatch('change', { page });
+        }}"
       >
         {page === item ? "Active, Page" : "Page"}
       </PaginationItem>
@@ -115,15 +128,19 @@
       count="{back}"
       on:select="{({ detail }) => {
         page = detail.index;
+        dispatch('change', { page });
       }}"
     />
     {#if total > 1}
       <PaginationItem
         page="{total}"
-        active="{page === total - 1}"
-        on:click="{() => (page = total - 1)}"
+        active="{page === total}"
+        on:click="{() => {
+          page = total;
+          dispatch('change', { page });
+        }}"
       >
-        {page === total - 1 ? "Active, Page" : "Page"}
+        {page === total ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
     <li class:bx--pagination-nav__list-item="{true}">
@@ -132,15 +149,16 @@
         tooltipAlignment="center"
         tooltipPosition="bottom"
         iconDescription="{forwardText}"
-        disabled="{!loop && page === total - 1}"
+        disabled="{!loop && page === total}"
         icon="{CaretRight}"
         on:click="{() => {
-          if (page + 1 >= total) {
-            if (loop) page = 0;
+          if (page >= total) {
+            if (loop) page = 1;
           } else {
             page++;
           }
           dispatch('click:button--next', { page });
+          dispatch('change', { page });
         }}"
       />
     </li>
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index 3bc6ceed..c5e099ad 100644
--- a/src/PaginationNav/PaginationOverflow.svelte
+++ b/src/PaginationNav/PaginationOverflow.svelte
@@ -34,7 +34,7 @@
       >
         <option value="" hidden></option>
         {#each Array.from({ length: count }, (_, i) => i) as i}
-          <option value="{fromIndex + i}" data-page="{fromIndex + i + 1}">
+          <option value="{fromIndex + i + 1}" data-page="{fromIndex + i + 1}">
             {fromIndex + i + 1}
           </option>
         {/each}
diff --git a/types/PaginationNav/PaginationNav.svelte.d.ts b/types/PaginationNav/PaginationNav.svelte.d.ts
index f2f005ab..15193cad 100644
--- a/types/PaginationNav/PaginationNav.svelte.d.ts
+++ b/types/PaginationNav/PaginationNav.svelte.d.ts
@@ -5,7 +5,7 @@ export interface PaginationNavProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
   /**
    * Specify the current page index
-   * @default 0
+   * @default 1
    */
   page?: number;