@linzjs/lui 21.44.2 → 21.44.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [21.44.4](https://github.com/linz/lui/compare/v21.44.3...v21.44.4) (2024-08-28)
+
+
+### Bug Fixes
+
+* **LuiSearchBox:** search results panel closed when click arrows to scroll up and down ([#1151](https://github.com/linz/lui/issues/1151)) ([d75b9a1](https://github.com/linz/lui/commit/d75b9a1fe525db4b1bec56142d326ac3000108da))
+
+## [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

@@ -42541,11 +42541,11 @@ var LuiSearchInput = function (props) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
-                        if (!(input !== '' && input.length >= props.minCharactersForSearch)) return [3 /*break*/, 5];
+                        if (!(input !== '' && input.length >= props.minCharactersForSearch)) return [3 /*break*/, 6];
                         setIsLoading(true);
                         _b.label = 1;
                     case 1:
-                        _b.trys.push([1, , 3, 4]);
+                        _b.trys.push([1, 3, 4, 5]);
                         return [4 /*yield*/, props.getOptions(input)];
                     case 2:
                         results_1 = _b.sent();
@@ -42555,12 +42555,17 @@ var LuiSearchInput = function (props) {
                         if (!selectedIdInResults) {
                             setSelectedId(items.length ? items[0].id : '');
                         }
-                        return [3 /*break*/, 4];
+                        return [3 /*break*/, 5];
                     case 3:
+                        _b.sent();
+                        // failed to get results, clear the last search results to avoid misleading
+                        setResults([]);
+                        return [3 /*break*/, 5];
+                    case 4:
                         setIsLoading(false);
                         return [7 /*endfinally*/];
-                    case 4: return [3 /*break*/, 6];
-                    case 5:
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
                         if (input !== '' &&
                             input.length < props.minCharactersForSearch &&
                             results.length > 0) {
@@ -42571,8 +42576,8 @@ var LuiSearchInput = function (props) {
                             (_a = props.onClearCallback) === null || _a === void 0 ? void 0 : _a.call(props);
                             setResults([]);
                         }
-                        _b.label = 6;
-                    case 6: return [2 /*return*/];
+                        _b.label = 7;
+                    case 7: return [2 /*return*/];
                 }
             });
         });
@@ -58458,51 +58463,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 +58522,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 +58544,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 +58608,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);