playbook_ui 14.5.0.pre.rc.6 → 14.5.0.pre.rc.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2320898ed4171121a268e62bfac933bf34c936ed7bbd1eadc3d815a8225caa13
-  data.tar.gz: d05a4ddd57b7b7bdccbaf306bd639bbfb81c380a742cbf9ab7e09eb37e27eee4
+  metadata.gz: 33ef2240decffa4b8afdca5d241ca43a0d6195049579f814f3c206e0616b36e0
+  data.tar.gz: 96bb3204647ae8c8907eab771d446338cd2bd20042ea5ca3e7a05b891b9c43a6
 SHA512:
-  metadata.gz: d607e925a8f9672e7d120802051762cd82b3367bacebd96cacd396f117bd5e89a6d67c659b3b7f42b8033b724dfc86de56d754940e358092b8fd1dd87b344c38
-  data.tar.gz: 3b54a1ac3358502f0f6555bbbe936d5db88a6650089fb6f631c8235da55b3fefa963099e84f025bb2585a74d0e3b64c7e6e8351f88b7a5596ef389d3bca19a40
+  metadata.gz: 15ad5084d6bcf802be7c4c67c6d8a91cb03425fd1421a9eabc4310a844ed461ba6828e921037fb176df5f09bd17c85741525b5e0464228b69199fb5e7ad97c1c
+  data.tar.gz: 1b6875f325d3226739eebc6a6abde3b4299d3f23001597b4f3facef029e62c91b4bc3ab0e4de22b27709a5686fde38f2144f74a299b39474b098c59716ba84f6

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -22,6 +22,16 @@ const PaginationPageChange = (props) => {
 
     return (
       <div className="App">
+      <Pagination
+          current={activePage}
+          key={`pagination-top-${activePage}`}
+          marginBottom="xs"
+          onChange={onPageChange}
+          range={5}
+          total={totalPages}
+          {...props}
+      />
+
       <Table 
           marginBottom="xs"
           responsive="none" 
@@ -49,7 +59,8 @@ const PaginationPageChange = (props) => {
       </Table>
  
       <Pagination
-          current={1}
+          current={activePage}
+          key={`pagination-bottom-${activePage}`}
           onChange={onPageChange}
           range={5}
           total={totalPages}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md

@@ -1 +1,3 @@
-You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+
+To ensure synchronization between multiple pagination components on a single page, use unique, dynamic keys for each pagination instance. Each Pagination component should have its own dynamic key that reflects the current active page: this example uses `pagination-top-${activePage}` and `pagination-bottom-${activePage}`.