@thecb/components 7.8.2-beta.4 → 7.8.2-beta.6

package/dist/index.esm.js

@@ -46594,26 +46594,30 @@ var getPagesPanel = function getPagesPanel(page, pagesCount) {
 
   if (page > space + 1) {
     pages.push({
-      isDelimiter: true
+      isDelimiter: true,
+      id: "first-delimiter"
     });
   }
 
   for (var j = Math.max(1, page - space) + 1; j < Math.min(lastPageNumber, page + space); j++) {
     pages.push({
       index: j,
-      isButton: true
+      isButton: true,
+      id: "page-".concat(j)
     });
   }
 
   if (page < lastPageNumber - space) {
     pages.push({
-      isDelimiter: true
+      isDelimiter: true,
+      id: "last-delimiter"
     });
   }
 
   pages.push({
     index: lastPageNumber,
-    isButton: true
+    isButton: true,
+    id: "page-".concat(lastPageNumber)
   });
   var activePage = pages.find(function (p) {
     return p.index === page;
@@ -46655,18 +46659,19 @@ var Pagination = function Pagination(_ref3) {
       isMobile = _useContext.isMobile;
 
   var extraStyles = "\n    min-width: ".concat(buttonWidth, "; min-height: 100%; padding: 0;\n    border-radius: ").concat(borderRadius, ";\n    &:hover, &:focus {\n      text-decoration: none;\n      > * > span {\n        text-decoration: none;\n      }\n    }\n    > * > span {\n      color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n    }\n    margin: 0;\n    &:hover {\n        background-color: ").concat(themeValues.hoverBackgroundColor, "\n    }\n  ");
-  var extraDisabledStyles = "\n    border: ".concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n    color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.activeColor, ";\n    background-color: ").concat(themeValues.activeBackgroundColor, ";\n    &:focus {\n      box-shadow: none;\n    }\n    &:hover {\n      background-color: initial;\n    }\n  ");
+  var currentPageStyles = "\n    border: ".concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n    color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.activeColor, ";\n    background-color: ").concat(themeValues.activeBackgroundColor, ";\n    &:focus {\n      box-shadow: none;\n    }\n    &:hover {\n      background-color: initial;\n      border: ").concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n      background-color: ").concat(themeValues.activeBackgroundColor, ";\n    }\n  ");
   return /*#__PURE__*/React.createElement(Cluster, {
     justify: "center",
     childGap: childGap,
     overflow: true,
     as: "nav",
+    role: "navigation",
     innerWrapperAs: "ul",
     "aria-label": ariaLabel,
     extraStyles: "> ul { padding: 0px; > li { list-style-type: none; } };"
   }, currentPage > 1 ? /*#__PURE__*/React.createElement(PrevNextButton, {
     action: pagePrevious,
-    ariaLabel: "Previous Page Button",
+    ariaLabel: "Previous Page",
     arrowColor: arrowColor !== null && arrowColor !== void 0 ? arrowColor : themeValues.arrowColor,
     borderRadius: borderRadius,
     buttonHeight: buttonHeight,
@@ -46690,36 +46695,35 @@ var Pagination = function Pagination(_ref3) {
       padding: "0",
       extraStyles: "max-height: ".concat(buttonHeight, ";"),
       as: "li",
-      key: "pagination-button-".concat(item.index)
+      key: item.id
     }, /*#__PURE__*/React.createElement(ButtonWithAction, {
       variant: "ghost",
       text: item.index,
-      disabled: item.active,
-      extraDisabledStyles: extraDisabledStyles,
       "aria-current": item.active ? "page" : undefined,
-      "aria-label": "".concat(item.active ? "Current " : "", "Page ").concat(item.index, " Button"),
+      "aria-label": "".concat(item.index == pageCount ? "Last Page, " : "", "page ").concat(item.index),
       action: !item.active ? function () {
         return setCurrentPage({
           pageNumber: item.index
         });
       } : noop,
       textExtraStyles: "font-size: ".concat(fontSize, "; font-weight: ").concat(fontWeight, ";"),
-      extraStyles: extraStyles,
+      extraStyles: "".concat(extraStyles).concat(item.active ? currentPageStyles : ""),
       dataQa: index
     }, item.index)) : /*#__PURE__*/React.createElement(Box, {
       padding: "0 10px",
       as: "li",
-      key: "pagination-elipsis-".concat(index)
+      key: item.id
     }, /*#__PURE__*/React.createElement(Cluster, {
       justify: "flex-end"
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "pXL",
       weight: fontWeight,
-      color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor
+      color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor,
+      "aria-label": "ellipsis"
     }, "...")));
   }), currentPage < pageCount ? /*#__PURE__*/React.createElement(PrevNextButton, {
     action: pageNext,
-    ariaLabel: "Next Page Button",
+    ariaLabel: "Next Page",
     arrowColor: arrowColor !== null && arrowColor !== void 0 ? arrowColor : themeValues.arrowColor,
     borderRadius: borderRadius,
     buttonHeight: buttonHeight,