@aurora-ds/components 0.18.1 → 0.18.2

package/dist/cjs/components/navigation/pagination/Pagination.props.d.ts

@@ -19,4 +19,6 @@ export type PaginationProps = {
 };
 export type PaginationStyleParams = {
     disabled?: boolean;
+    /** If true, apply the active (current page) styles */
+    active?: boolean;
 };

package/dist/cjs/index.js

@@ -2511,7 +2511,7 @@ const PAGINATION_STYLES = theme.createStyles((theme) => ({
         alignItems: 'center',
         gap: theme.spacing.xs,
     },
-    pageButton: ({ disabled = false }) => ({
+    pageButton: ({ disabled = false, active = false }) => ({
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -2527,17 +2527,24 @@ const PAGINATION_STYLES = theme.createStyles((theme) => ({
         fontFamily: 'inherit',
         fontSize: theme.fontSize.md,
         fontWeight: theme.fontWeight.medium,
-        backgroundColor: 'transparent',
-        color: theme.colors.text,
+        backgroundColor: active ? theme.colors.primary : 'transparent',
+        color: active ? theme.colors.onPrimary : theme.colors.text,
         border: 'none',
         opacity: disabled ? 0.4 : 1,
-        ':hover': disabled ? {} : {
+        ':hover': disabled ? {} : (active ? {
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.onPrimary,
+        } : {
             backgroundColor: theme.colors.surfaceHover,
-        },
-        ':active': disabled ? {} : {
+        }),
+        ':active': disabled ? {} : (active ? {
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.onPrimary,
+        } : {
             backgroundColor: theme.colors.surfaceActive,
-        },
+        }),
     }),
+    // kept for backward compatibility in case some usages relied on it directly
     activePageButton: {
         backgroundColor: theme.colors.primary,
         color: theme.colors.onPrimary,
@@ -2629,7 +2636,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, onPrevious, onNext,
     const isNextDisabled = currentPage === totalPages;
     return (jsxRuntime.jsxs("nav", { "aria-label": ariaLabel, className: styles.root, children: [jsxRuntime.jsx("button", { type: 'button', onClick: handlePrevious, disabled: isPreviousDisabled, "aria-label": 'Page précédente', className: styles.navigationButton({ disabled: isPreviousDisabled }), children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), visiblePages.map((page) => {
                 const isActive = page === currentPage;
-                return (jsxRuntime.jsx("button", { type: 'button', onClick: () => handlePageClick(page), "aria-label": `Page ${page}`, "aria-current": isActive ? 'page' : undefined, className: `${styles.pageButton({ disabled: false })} ${isActive ? styles.activePageButton : ''}`, children: page }, page));
+                return (jsxRuntime.jsx("button", { type: 'button', onClick: () => handlePageClick(page), "aria-label": `Page ${page}`, "aria-current": isActive ? 'page' : undefined, className: styles.pageButton({ disabled: false, active: isActive }), children: page }, page));
             }), jsxRuntime.jsx("button", { type: 'button', onClick: handleNext, disabled: isNextDisabled, "aria-label": 'Page suivante', className: styles.navigationButton({ disabled: isNextDisabled }), children: jsxRuntime.jsx(ChevronRightIcon, {}) })] }));
 };
 Pagination.displayName = 'Pagination';