@thecb/components 7.8.2-beta.3 → 7.8.2-beta.5

package/dist/index.d.ts

@@ -259,6 +259,7 @@ interface ClusterProps {
   justifySelf?: string;
   alignSelf?: string;
   flexGrow?: string;
+  innerWrapperAs?: string;
 }
 
 declare const Cluster: React.FC<Expand<ClusterProps> &

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;
@@ -46648,6 +46652,7 @@ var Pagination = function Pagination(_ref3) {
       pageNext = _ref3.pageNext,
       pagePrevious = _ref3.pagePrevious,
       setCurrentPage = _ref3.setCurrentPage,
+      ariaLabel = _ref3.ariaLabel,
       themeValues = _ref3.themeValues;
 
   var _useContext = useContext(ThemeContext),
@@ -46660,7 +46665,9 @@ var Pagination = function Pagination(_ref3) {
     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,
@@ -46687,10 +46694,10 @@ var Pagination = function Pagination(_ref3) {
     return item.isButton ? /*#__PURE__*/React.createElement(Box, {
       padding: "0",
       extraStyles: "max-height: ".concat(buttonHeight, ";"),
-      as: "li"
+      as: "li",
+      key: item.id
     }, /*#__PURE__*/React.createElement(ButtonWithAction, {
       variant: "ghost",
-      key: item.index,
       text: item.index,
       disabled: item.active,
       extraDisabledStyles: extraDisabledStyles,
@@ -46705,11 +46712,12 @@ var Pagination = function Pagination(_ref3) {
       extraStyles: extraStyles,
       dataQa: index
     }, item.index)) : /*#__PURE__*/React.createElement(Box, {
-      padding: "0 10px"
+      padding: "0 10px",
+      as: "li",
+      key: item.id
     }, /*#__PURE__*/React.createElement(Cluster, {
       justify: "flex-end"
     }, /*#__PURE__*/React.createElement(Text$1, {
-      key: index,
       variant: "pXL",
       weight: fontWeight,
       color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor