@aurora-ds/components 0.18.0 → 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

@@ -2188,7 +2188,7 @@ const Modal = ({ isOpen, onClose, label, children, isForm, action }) => {
         }
     };
     // body of the modal
-    const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsxRuntime.jsx(Text, { variant: 'h3', children: label }), !action && (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxRuntime.jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsxRuntime.jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsxRuntime.jsx(Button, { label: action.label, onClick: !isForm ? action.onClick : undefined, type: isForm ? 'submit' : 'button', disabled: action.disabled })] }))] }));
+    const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsxRuntime.jsx(Text, { variant: 'h3', children: label }), !action && (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxRuntime.jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsxRuntime.jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsxRuntime.jsx(Button, { ...action, type: isForm ? 'submit' : 'button' })] }))] }));
     return reactDom.createPortal(jsxRuntime.jsx(React.Fragment, { children: isVisible ? (jsxRuntime.jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsxRuntime.jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: isForm ? (jsxRuntime.jsx(Form$1, { onSubmit: (e) => { e.preventDefault(); safeInvokeAction(); }, children: body })) : (jsxRuntime.jsx(React.Fragment, { children: body })) }) })) : null }), document.body);
 };
 Modal.displayName = 'Modal';
@@ -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';