playbook_ui_docs 14.5.0.pre.rc.7 → 14.5.0.pre.rc.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76fe697913681d0ab37331e6cdbedeae4d19486eff68396aed21294a562e9407
-  data.tar.gz: f188c96e5177afea31491887e20cef44bf9b99e655a7d70a0e610b5c37f4af04
+  metadata.gz: fa3f231d2936cca8af5339c14deb751848015ef507aa6ca371b15343dc9dcfa3
+  data.tar.gz: 2028d5ad18d7533ad07d53a00a6dfb445739d4dfefd0a0bea0fa9951c2147cc9
 SHA512:
-  metadata.gz: 3b5627f530c2ef297a69d87498829c5ad34aecbbd3a1c752814587e8a89c5ecc8312c117ff425209832c50b65a69c3636dc3298e40e117c8390156e125e81bb5
-  data.tar.gz: 021453e597894a31ccd316a7da3fdfb6fb1b6ee1a029a2fedbdf41871b725955cf764b04d5946c04d326789d119090c7d77ce6e8e06738121498707a62dc0e22
+  metadata.gz: bfc41903eb0a2fcfd02e00249d39f569b294d64390cfdce74ed7371e7b73b16a9650453746b769bf0d19b66d1abd7ba17c61c60788371d3d35ec2f6d2780bf6d
+  data.tar.gz: 5a43773ab874bdc734acf1fdfe76b050f3c79508d22cf2e050591896db5f59f42a743dc5aedb9cdc82a6a65059baf6ff76ac20f0428b3600a5d6a12bc9f36a20

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