playbook_ui 14.5.0.pre.rc.7 → 14.5.0.pre.rc.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9418151f7c2ed57fa2ecb769209b2d520c8c0a1b5b6e660c1da324b636dc0504
-  data.tar.gz: d591dc3699a4a8c092238156744b2de9e50040501773e5fd8489c1a42e1c4a9e
+  metadata.gz: a62f0f1d51a46b09f654e76b93956efb418bd9b43ac82794a97b9b825dd0b510
+  data.tar.gz: f674044ce7bb067a2502e934ec29fbec284e240e0b0862ca795996af8e452554
 SHA512:
-  metadata.gz: eab62490d4cfac26c6a27387d0b0b83833a914cfca6e510a275d9136495742f6217b8fd61c59b546ea09500088d6b5167e267aa46fdf22bfc063929a8867293f
-  data.tar.gz: c9de439a66a862a43abaef4f7cb5654c386c81b2cd5421706c4caef887a7a11ee2d03f53623f24e271f812e8cb23c924c78265bc90d1a2d6eca0251498cc6c8d
+  metadata.gz: 6f61e38bfb2c0a8da36c9aea427bd60ad7e811368fa35df5b04b188b977631079a3f3221e91082f502e348f361be7c331ffbb13f8f51fc3ea56a1c0f0b0780e0
+  data.tar.gz: ede31bf6c24826d45f55cf37b2225e3221cdaa2c2f47d40256065220f63631d276dd58e698bda067f57cb703fea1e06a831dc5aec8cf161b5ad3ce94404b77bc

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}`.