@linzjs/lui 21.44.2 → 21.44.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [21.44.3](https://github.com/linz/lui/compare/v21.44.2...v21.44.3) (2024-08-27)
+
+
+### Bug Fixes
+
+* **LuiPagination:** pagination component improvements ([#1152](https://github.com/linz/lui/issues/1152)) ([139e3e8](https://github.com/linz/lui/commit/139e3e8375b2fa8b92fe262e01d4f59dde1465df))
+
 ## [21.44.2](https://github.com/linz/lui/compare/v21.44.1...v21.44.2) (2024-08-27)
 
 

package/dist/components/LuiPagination/LuiPagination.d.ts

@@ -1,10 +1,23 @@
-/// <reference types="react" />
 import './LuiPagination.scss';
+import React from 'react';
 declare type PaginationProps = {
     totalPages: number;
     currentPage: number;
     onPageChange: (page: number) => void;
     isMobileLayout?: boolean | null;
+    animate?: boolean;
 };
-export declare const LuiPagination: ({ totalPages, currentPage, onPageChange, isMobileLayout, }: PaginationProps) => JSX.Element;
+/**
+ * @description Pagination component for navigating through a list of items with multiple pages.
+ * @param currentPage - The currently selected page.
+ * @param totalPages - The total number of pages.
+ * @param onPageChange - Callback function that is triggered when a new page is selected.
+ *                       It uses the selected page number as an argument.
+ * @param isMobileLayout - Optional prop to override the responsive layout.
+ *                         By default, the responsive layout will be used, which shows the full component
+ *                         when the components container is >= 500px, and a mobile layout when < 500px.
+ * @param animate - Optional prop to enable or disable the animation when navigating through pages.
+ *                  A panning animation is shown for number values between two ellipsis buttons.
+ */
+export declare const LuiPagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/index.js

@@ -58458,51 +58458,57 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null, !(selectedNum === 0 && !countZero) && (React__default["default"].createElement("span", __assign({ ref: ref, className: determineCounterClassname(), "data-testid": "lui-counter-number-".concat(shape), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()))));
 });
 
-var css_248z$8 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n  display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n  display: flex;\n}\n\n.lui-pagination-controller {\n  container-type: inline-size;\n}\n@container (min-width: 500px) {\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: flex;\n  }\n}\n@container (max-width: 499px) {\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: flex;\n  }\n}\n\n.lui-pagination {\n  display: flex;\n  user-select: none;\n  justify-content: center;\n}\n.lui-pagination-page-counter {\n  display: flex;\n  align-items: center;\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n  color: #2a292c;\n  height: 40px;\n  padding: 0.5rem 0.75rem;\n  vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n  fill: #2a292c;\n}\n.lui-pagination .lui-button:hover {\n  color: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n  background-color: #007198;\n  color: #ffffff;\n}\n.lui-pagination-ellipsis {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n  fill: #989189 !important;\n}";
+var css_248z$8 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n  display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n  display: none;\n  visibility: hidden;\n  opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n  display: flex;\n}\n\n.lui-pagination-controller {\n  container-type: inline-size;\n}\n@container (min-width: 500px) {\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: flex;\n  }\n}\n@container (max-width: 499px) {\n  .lui-pagination-controller .lui-pagination-desktop {\n    display: none;\n    visibility: hidden;\n    opacity: 0;\n  }\n  .lui-pagination-controller .lui-pagination-mobile {\n    display: flex;\n  }\n}\n\n.lui-pagination {\n  display: flex;\n  user-select: none;\n  justify-content: center;\n}\n.lui-pagination-page-counter {\n  display: flex;\n  align-items: center;\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n  color: #2a292c;\n  height: 40px;\n  padding: 0.5rem 0.75rem;\n  vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n  fill: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n  background-color: #007198;\n  color: #ffffff;\n}\n.lui-pagination-ellipsis {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled {\n  pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n  padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n  fill: #989189 !important;\n}\n\n.pan-left {\n  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n  transform: perspective(1000px) rotateY(20deg) translateX(-10px);\n  opacity: 0.5;\n}\n\n.pan-right {\n  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n  transform: perspective(1000px) rotateY(-20deg) translateX(10px);\n  opacity: 0.5;\n}";
 styleInject(css_248z$8);
 
-var LuiPagination = function (_a) {
-    var totalPages = _a.totalPages, currentPage = _a.currentPage, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b;
+/**
+ * @description Pagination component for navigating through a list of items with multiple pages.
+ * @param currentPage - The currently selected page.
+ * @param totalPages - The total number of pages.
+ * @param onPageChange - Callback function that is triggered when a new page is selected.
+ *                       It uses the selected page number as an argument.
+ * @param isMobileLayout - Optional prop to override the responsive layout.
+ *                         By default, the responsive layout will be used, which shows the full component
+ *                         when the components container is >= 500px, and a mobile layout when < 500px.
+ * @param animate - Optional prop to enable or disable the animation when navigating through pages.
+ *                  A panning animation is shown for number values between two ellipsis buttons.
+ */
+var LuiPagination = React.forwardRef(function (_a, ref) {
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange, _b = _a.isMobileLayout, isMobileLayout = _b === void 0 ? null : _b, _c = _a.animate, animate = _c === void 0 ? true : _c;
+    var _d = React.useState(null), panDirection = _d[0], setPanDirection = _d[1];
     var visibleCount = 6; // potentially can be refined further, has issues if set to smaller values
+    totalPages = Math.round(totalPages); // Ensure that totalPages is always a whole number
     var mobileLayoutOverride = function () {
-        if (isMobileLayout !== null) {
-            if (isMobileLayout) {
+        switch (isMobileLayout) {
+            case true:
                 return 'lui-pagination-override-mobile';
-            }
-            else {
+            case false:
                 return 'lui-pagination-override-desktop';
-            }
+            default:
+                return 'lui-pagination-controller';
         }
-        return 'lui-pagination-controller';
-    };
-    var navigateButtonBefore = function () {
-        return (React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-before", className: currentPage > 1
-                ? 'lui-pagination-navigate'
-                : 'lui-pagination-navigate-disabled', "data-testid": currentPage > 1
-                ? 'lui-pagination-navigate-before'
-                : 'lui-pagination-navigate-before-disabled', onClick: function () { return handlePaginationPageChange(currentPage - 1); } },
-            React__default["default"].createElement(LuiIcon, { name: "ic_keyboard_arrow_left", alt: "Previous page", size: "md", className: "lui-pagination-navigation-icon" })));
-    };
-    var navigateButtonAfter = function () {
-        return (React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-after", className: currentPage < totalPages
-                ? 'lui-pagination-navigate'
-                : 'lui-pagination-navigate-disabled', "data-testid": currentPage < totalPages
-                ? 'lui-pagination-navigate-after'
-                : 'lui-pagination-navigate-after-disabled', onClick: function () { return handlePaginationPageChange(currentPage + 1); } },
-            React__default["default"].createElement(LuiIcon, { name: "ic_keyboard_arrow_right", alt: "Next page", size: "md", className: "lui-pagination-navigation-icon" })));
     };
     var handlePaginationPageChange = function (pageNumber) {
         if (pageNumber > 0 && pageNumber <= totalPages) {
-            // setCurrentPage(pageNumber);
-            onPageChange(pageNumber);
+            if (pageNumber > currentPage) {
+                setPanDirection('right');
+            }
+            else if (pageNumber < currentPage) {
+                setPanDirection('left');
+            }
+            else {
+                setPanDirection(null);
+            }
+            setTimeout(function () {
+                setPanDirection(null);
+                onPageChange(pageNumber);
+            }, 300); // Adjust the timeout to match the CSS transition duration
         }
     };
     var renderPaginationNumbers = function () {
         var paginationArray = [];
-        // calculate values before and after the currently selected page
         var startPage = Math.max(1, currentPage - 1);
         var endPage = Math.min(totalPages, currentPage + 1);
-        // trail pages at the beginning and end if close to the end
         if (currentPage <= visibleCount - 2) {
             startPage = 1;
             endPage = Math.min(totalPages, startPage + visibleCount - 2);
@@ -58511,24 +58517,21 @@ var LuiPagination = function (_a) {
             endPage = totalPages;
             startPage = Math.max(2, endPage - visibleCount + 2);
         }
-        // starting page if away from the start
+        paginationArray.push(navigateButtonBefore());
         if (startPage > 1) {
             paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-navigation-start", onClick: function () { return handlePaginationPageChange(1); } },
                 React__default["default"].createElement("b", null, "1")));
-            // add ellipsis if start away from beginning
             if (startPage > 2) {
                 paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", className: "lui-pagination-ellipsis", key: "lui-pagination-ellipsis-start", "data-testid": "lui-pagination-ellipsis" }, '...'));
             }
         }
         var _loop_1 = function (i) {
-            paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-".concat(i), className: i === currentPage ? 'lui-button-selected' : '', onClick: function () { return handlePaginationPageChange(i); } },
+            paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-".concat(i), className: "".concat(i === currentPage ? 'lui-button-selected' : ''), onClick: function () { return handlePaginationPageChange(i); } },
                 React__default["default"].createElement("b", null, i)));
         };
-        // add all the visible page numbers
         for (var i = startPage; i <= endPage; i++) {
             _loop_1(i);
         }
-        // show ellipsis if away from the end
         if (endPage < totalPages) {
             if (endPage < totalPages - 1) {
                 paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", className: "lui-pagination-ellipsis", key: "lui-pagination-ellipsis-end", "data-testid": "lui-pagination-ellipsis" }, '...'));
@@ -58536,12 +58539,45 @@ var LuiPagination = function (_a) {
             paginationArray.push(React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-last", onClick: function () { return handlePaginationPageChange(totalPages); } },
                 React__default["default"].createElement("b", null, totalPages)));
         }
-        // add back and forward icons to the beginning and end
-        paginationArray.unshift(navigateButtonBefore());
         paginationArray.push(navigateButtonAfter());
-        return paginationArray;
+        var ellipsisStart = -1;
+        var ellipsisEnd = -1;
+        paginationArray.forEach(function (button, index) {
+            if (button.props.children === '...') {
+                if (ellipsisStart === -1) {
+                    ellipsisStart = index;
+                }
+                else {
+                    ellipsisEnd = index;
+                }
+            }
+        });
+        return paginationArray.map(function (button, index) {
+            if (index > ellipsisStart && index < ellipsisEnd) {
+                return React__default["default"].cloneElement(button, {
+                    className: "".concat(button.props.className, " ").concat(panDirection && animate ? "pan-".concat(panDirection) : '')
+                });
+            }
+            return button;
+        });
+    };
+    var navigateButtonBefore = function () {
+        return (React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-before", className: currentPage > 1
+                ? 'lui-pagination-navigate'
+                : 'lui-pagination-navigate-disabled', "data-testid": currentPage > 1
+                ? 'lui-pagination-navigate-before'
+                : 'lui-pagination-navigate-before-disabled', onClick: function () { return handlePaginationPageChange(currentPage - 1); } },
+            React__default["default"].createElement(LuiIcon, { name: "ic_keyboard_arrow_left", alt: "Previous page", size: "md", className: "lui-pagination-navigation-icon" })));
     };
-    return (React__default["default"].createElement("div", { className: mobileLayoutOverride() },
+    var navigateButtonAfter = function () {
+        return (React__default["default"].createElement(LuiButton, { level: "tertiary", key: "lui-pagination-button-navigate-after", className: currentPage < totalPages
+                ? 'lui-pagination-navigate'
+                : 'lui-pagination-navigate-disabled', "data-testid": currentPage < totalPages
+                ? 'lui-pagination-navigate-after'
+                : 'lui-pagination-navigate-after-disabled', onClick: function () { return handlePaginationPageChange(currentPage + 1); } },
+            React__default["default"].createElement(LuiIcon, { name: "ic_keyboard_arrow_right", alt: "Next page", size: "md", className: "lui-pagination-navigation-icon" })));
+    };
+    return (React__default["default"].createElement("div", { className: mobileLayoutOverride(), ref: ref },
         (mobileLayoutOverride() === 'lui-pagination-override-mobile' ||
             mobileLayoutOverride() === 'lui-pagination-controller') && (React__default["default"].createElement("div", { className: "lui-pagination-mobile lui-pagination" },
             React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -58567,7 +58603,7 @@ var LuiPagination = function (_a) {
         (mobileLayoutOverride() === 'lui-pagination-override-desktop' ||
             mobileLayoutOverride() === 'lui-pagination-controller') && (React__default["default"].createElement("div", { className: "lui-pagination-desktop lui-pagination" },
             React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
-};
+});
 
 var css_248z$7 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Separator {\n  background-color: #eaeaea;\n  position: absolute;\n  display: flex;\n  justify-content: space-around;\n  transition-property: background-color;\n  transition-delay: 750ms;\n  transition-duration: 0ms;\n}\n.Separator-arrows {\n  align-self: center;\n  position: relative;\n  opacity: 0;\n  transition-property: opacity;\n  transition-delay: 750ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within, .Separator:hover, .Separator:focus, .Separator:active {\n  background-color: #73c8e1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within .Separator-arrows, .Separator:hover .Separator-arrows, .Separator:focus .Separator-arrows, .Separator:active .Separator-arrows {\n  opacity: 1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n  display: inline-block;\n}";
 styleInject(css_248z$7);