@ceed/cds 1.16.0 → 1.17.1-next.1

package/dist/components/Pagination/Pagination.d.ts

@@ -21,6 +21,7 @@ interface PaginationProps extends React.ComponentProps<typeof PaginationRoot> {
     rowCount: number;
     onPageChange: (newPage: number) => void;
     size?: 'sm' | 'md' | 'lg';
+    variant?: 'standard' | 'compact';
 }
 declare function Pagination(props: PaginationProps): React.JSX.Element;
 declare namespace Pagination {

package/dist/components/navigation/Pagination.md

@@ -2,8 +2,8 @@
 
 ## Introduction
 
-```text
-// Unable to derive source for Default
+```
+<Canvas of={Pagination.Default} />
 ```
 
 | Field                        | Description | Default |

package/dist/index.cjs

@@ -3528,8 +3528,10 @@ TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
 var import_react27 = __toESM(require("react"));
-var import_ChevronLeft2 = __toESM(require("@mui/icons-material/ChevronLeft"));
-var import_ChevronRight2 = __toESM(require("@mui/icons-material/ChevronRight"));
+var import_ChevronLeftRounded = __toESM(require("@mui/icons-material/ChevronLeftRounded"));
+var import_ChevronRightRounded = __toESM(require("@mui/icons-material/ChevronRightRounded"));
+var import_FirstPageRounded = __toESM(require("@mui/icons-material/FirstPageRounded"));
+var import_LastPageRounded = __toESM(require("@mui/icons-material/LastPageRounded"));
 var import_joy35 = require("@mui/joy");
 var PaginationButton = (0, import_joy35.styled)(Button_default, {
   name: "Pagination",
@@ -3588,6 +3590,7 @@ function Pagination(props) {
     onPageChange,
     rowCount,
     size = "md",
+    variant = "standard",
     ...innerProps
   } = props;
   const [paginationModel, setPaginationModel] = useControlledState(
@@ -3614,6 +3617,87 @@ function Pagination(props) {
       setPaginationModel({ ...paginationModel, page: lastPage });
     }
   }, [rowCount, paginationModel, lastPage, setPaginationModel]);
+  const pageOptions = Array.from({ length: lastPage }, (_, i) => ({
+    label: `${i + 1}`,
+    value: `${i + 1}`
+  }));
+  if (variant === "compact") {
+    return /* @__PURE__ */ import_react27.default.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ import_react27.default.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ import_react27.default.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ import_react27.default.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(firstPage),
+        disabled: paginationModel.page === firstPage,
+        "aria-label": "First page"
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_FirstPageRounded.default, null)
+    ), /* @__PURE__ */ import_react27.default.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(paginationModel.page - 1),
+        disabled: paginationModel.page === firstPage,
+        "aria-label": "Previous page"
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeftRounded.default, null)
+    )), /* @__PURE__ */ import_react27.default.createElement(
+      Autocomplete_default,
+      {
+        size,
+        value: `${paginationModel.page}`,
+        onChange: (event) => {
+          if (event.target.value) {
+            handlePageChange(parseInt(event.target.value, 10));
+          }
+        },
+        options: pageOptions,
+        sx: {
+          width: {
+            sm: "80px",
+            md: "100px",
+            lg: "120px"
+          }[size]
+        }
+      }
+    ), /* @__PURE__ */ import_react27.default.createElement(
+      Typography_default,
+      {
+        level: `body-${size}`,
+        sx: (theme) => ({
+          color: theme.palette.text.secondary,
+          fontWeight: 500
+        })
+      },
+      "/ ",
+      lastPage
+    ), /* @__PURE__ */ import_react27.default.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ import_react27.default.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(paginationModel.page + 1),
+        disabled: paginationModel.page === lastPage,
+        "aria-label": "Next page"
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_ChevronRightRounded.default, null)
+    ), /* @__PURE__ */ import_react27.default.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(lastPage),
+        disabled: paginationModel.page === lastPage,
+        "aria-label": "Last page"
+      },
+      /* @__PURE__ */ import_react27.default.createElement(import_LastPageRounded.default, null)
+    ))));
+  }
   return /* @__PURE__ */ import_react27.default.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ import_react27.default.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ import_react27.default.createElement(
     PaginationIconButton,
     {
@@ -3624,7 +3708,7 @@ function Pagination(props) {
       disabled: paginationModel.page === firstPage,
       "aria-label": "Previous page"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeft2.default, null)
+    /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeftRounded.default, null)
   ), paginationModel.page !== firstPage && /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(firstPage) }, firstPage), isMoreBeforePages && /* @__PURE__ */ import_react27.default.createElement(
     PaginationButton,
     {
@@ -3655,7 +3739,7 @@ function Pagination(props) {
       disabled: paginationModel.page === lastPage,
       "aria-label": "Next page"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_ChevronRight2.default, null)
+    /* @__PURE__ */ import_react27.default.createElement(import_ChevronRightRounded.default, null)
   )));
 }
 Pagination.displayName = "Pagination";

package/dist/index.js

@@ -3466,8 +3466,10 @@ TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
 import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
-import PreviousIcon from "@mui/icons-material/ChevronLeft";
-import NextIcon from "@mui/icons-material/ChevronRight";
+import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
+import NextIcon from "@mui/icons-material/ChevronRightRounded";
+import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
+import LastPageIcon from "@mui/icons-material/LastPageRounded";
 import { styled as styled13 } from "@mui/joy";
 var PaginationButton = styled13(Button_default, {
   name: "Pagination",
@@ -3526,6 +3528,7 @@ function Pagination(props) {
     onPageChange,
     rowCount,
     size = "md",
+    variant = "standard",
     ...innerProps
   } = props;
   const [paginationModel, setPaginationModel] = useControlledState(
@@ -3552,6 +3555,87 @@ function Pagination(props) {
       setPaginationModel({ ...paginationModel, page: lastPage });
     }
   }, [rowCount, paginationModel, lastPage, setPaginationModel]);
+  const pageOptions = Array.from({ length: lastPage }, (_, i) => ({
+    label: `${i + 1}`,
+    value: `${i + 1}`
+  }));
+  if (variant === "compact") {
+    return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ React24.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(firstPage),
+        disabled: paginationModel.page === firstPage,
+        "aria-label": "First page"
+      },
+      /* @__PURE__ */ React24.createElement(FirstPageIcon, null)
+    ), /* @__PURE__ */ React24.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(paginationModel.page - 1),
+        disabled: paginationModel.page === firstPage,
+        "aria-label": "Previous page"
+      },
+      /* @__PURE__ */ React24.createElement(PreviousIcon, null)
+    )), /* @__PURE__ */ React24.createElement(
+      Autocomplete_default,
+      {
+        size,
+        value: `${paginationModel.page}`,
+        onChange: (event) => {
+          if (event.target.value) {
+            handlePageChange(parseInt(event.target.value, 10));
+          }
+        },
+        options: pageOptions,
+        sx: {
+          width: {
+            sm: "80px",
+            md: "100px",
+            lg: "120px"
+          }[size]
+        }
+      }
+    ), /* @__PURE__ */ React24.createElement(
+      Typography_default,
+      {
+        level: `body-${size}`,
+        sx: (theme) => ({
+          color: theme.palette.text.secondary,
+          fontWeight: 500
+        })
+      },
+      "/ ",
+      lastPage
+    ), /* @__PURE__ */ React24.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ React24.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(paginationModel.page + 1),
+        disabled: paginationModel.page === lastPage,
+        "aria-label": "Next page"
+      },
+      /* @__PURE__ */ React24.createElement(NextIcon, null)
+    ), /* @__PURE__ */ React24.createElement(
+      PaginationIconButton,
+      {
+        size,
+        variant: "plain",
+        color: "neutral",
+        onClick: () => handlePageChange(lastPage),
+        disabled: paginationModel.page === lastPage,
+        "aria-label": "Last page"
+      },
+      /* @__PURE__ */ React24.createElement(LastPageIcon, null)
+    ))));
+  }
   return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(
     PaginationIconButton,
     {