Improve table pagination (#1567)

* Switch to polymorphic type declaration for Pagination.

- Table Pagination Layout takes totalItems and itemsPerPage instead of
  totalPages.
- Navigation and Pagination Layouts remain the same, although they now
  extend BasePaginationProps.
- Update Tests

* Update the pagination stories.

* Export DefaultPaginationProps and TablePaginationProps to clients

* Check if paginationValues is defined in tablePaginationState().

* Add layout to BasePaginationProps to allow TS to handle it as a
discriminant key.

* Use status instead of meter for the table pagination's aria role.

* Handle zero items/improve tests.

* Validate pagination props (currentPage, totalPages, itemsPerPage, and
totalItems).

* Add aria-live="polite" to the table pagination info div

* Add itemsPerPage and totalItems to the table pagination story args.

---------

Co-authored-by: Joshua Mathews <[email protected]>

Author: jfacoustic

apps/storybook/src/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/react";
 import type { PaginationProps } from "flowbite-react";
-import { Pagination } from "flowbite-react";
+import { DefaultPaginationProps, Pagination, TablePaginationProps } from "flowbite-react";
 import { useEffect, useState } from "react";
 
 export default {
@@ -15,7 +15,9 @@ export default {
   ],
 } as Meta;
 
-const Template: StoryFn<PaginationProps> = ({ currentPage = 1, layout = "pagination", totalPages = 100, ...rest }) => {
+const Template: StoryFn<PaginationProps> = (props) => {
+  const { currentPage = 1, layout = "pagination" } = props;
+
   const [page, setPage] = useState(currentPage);
 
   const onPageChange = (page: number) => {
@@ -26,6 +28,21 @@ const Template: StoryFn<PaginationProps> = ({ currentPage = 1, layout = "paginat
     setPage(currentPage);
   }, [currentPage]);
 
+  if (layout === "table") {
+    const { itemsPerPage = 10, totalItems = 100, ...rest } = props as TablePaginationProps;
+    return (
+      <Pagination
+        {...rest}
+        currentPage={page}
+        layout={layout}
+        onPageChange={onPageChange}
+        itemsPerPage={itemsPerPage}
+        totalItems={totalItems}
+      />
+    );
+  }
+
+  const { totalPages = 100, ...rest } = props as DefaultPaginationProps;
   return (
     <Pagination {...rest} currentPage={page} layout={layout} onPageChange={onPageChange} totalPages={totalPages} />
   );
@@ -54,11 +71,15 @@ NavWithIcons.args = {
 export const Table = Template.bind({});
 Table.args = {
   layout: "table",
+  itemsPerPage: 10,
+  totalItems: 100,
 };
 
 export const TableWithIcons = Template.bind({});
 TableWithIcons.storyName = "Table with icons";
 TableWithIcons.args = {
   layout: "table",
   showIcons: true,
+  itemsPerPage: 10,
+  totalItems: 100,
 };

apps/web/examples/pagination/pagination.table.tsx

@@ -17,7 +17,7 @@ export function Component() {
 
   return (
     <div className="flex overflow-x-auto sm:justify-center">
-      <Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
+      <Pagination layout="table" currentPage={currentPage} itemsPerPage={10} totalItems={100} onPageChange={onPageChange} />
     </div>
   );
 }
@@ -30,7 +30,13 @@ export function Component() {
 
   return (
     <div className="flex overflow-x-auto sm:justify-center">
-      <Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
+      <Pagination
+        layout="table"
+        currentPage={currentPage}
+        itemsPerPage={10}
+        totalItems={100}
+        onPageChange={onPageChange}
+      />
     </div>
   );
 }

apps/web/examples/pagination/pagination.tableWithIcons.tsx

@@ -17,7 +17,7 @@ export function Component() {
 
   return (
     <div className="flex overflow-x-auto sm:justify-center">
-      <Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} showIcons />
+      <Pagination layout="table" currentPage={currentPage} itemsPerPage={10} totalItems={100} onPageChange={onPageChange} showIcons />
     </div>
   );
 }
@@ -30,7 +30,14 @@ export function Component() {
 
   return (
     <div className="flex overflow-x-auto sm:justify-center">
-      <Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} showIcons />
+      <Pagination
+        layout="table"
+        currentPage={currentPage}
+        itemsPerPage={10}
+        totalItems={100}
+        onPageChange={onPageChange}
+        showIcons
+      />
     </div>
   );
 }