@thecb/components 7.7.4-beta.5 → 7.7.4-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +9 -12
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +9 -12
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/pagination/Pagination.js +76 -77
- package/src/components/molecules/pagination/Pagination.theme.js +0 -2
- package/src/components/molecules/pagination/index.d.ts +23 -0
- package/src/components/molecules/pagination/Pagination.new.js +0 -187
package/dist/index.esm.js
CHANGED
|
@@ -45677,12 +45677,10 @@ var arrowColor = WHITE;
|
|
|
45677
45677
|
var numberColor = MATISSE_BLUE;
|
|
45678
45678
|
var hoverBackgroundColor$2 = ALABASTER_WHITE;
|
|
45679
45679
|
var activeBackgroundColor$1 = WHITE;
|
|
45680
|
-
var activeBorderColor$1 = MATISSE_BLUE;
|
|
45681
45680
|
var activeColor$8 = MATISSE_BLUE;
|
|
45682
45681
|
var fallbackValues$J = {
|
|
45683
45682
|
activeColor: activeColor$8,
|
|
45684
45683
|
activeBackgroundColor: activeBackgroundColor$1,
|
|
45685
|
-
activeBorderColor: activeBorderColor$1,
|
|
45686
45684
|
arrowColor: arrowColor,
|
|
45687
45685
|
hoverBackgroundColor: hoverBackgroundColor$2,
|
|
45688
45686
|
numberColor: numberColor
|
|
@@ -45782,11 +45780,11 @@ var Pagination = function Pagination(_ref3) {
|
|
|
45782
45780
|
_ref3$borderRadius = _ref3.borderRadius,
|
|
45783
45781
|
borderRadius = _ref3$borderRadius === void 0 ? "3px" : _ref3$borderRadius,
|
|
45784
45782
|
_ref3$buttonHeight = _ref3.buttonHeight,
|
|
45785
|
-
buttonHeight = _ref3$buttonHeight === void 0 ? "
|
|
45783
|
+
buttonHeight = _ref3$buttonHeight === void 0 ? "44px" : _ref3$buttonHeight,
|
|
45786
45784
|
_ref3$buttonWidth = _ref3.buttonWidth,
|
|
45787
|
-
buttonWidth = _ref3$buttonWidth === void 0 ? "
|
|
45785
|
+
buttonWidth = _ref3$buttonWidth === void 0 ? "44px" : _ref3$buttonWidth,
|
|
45788
45786
|
_ref3$childGap = _ref3.childGap,
|
|
45789
|
-
childGap = _ref3$childGap === void 0 ? "
|
|
45787
|
+
childGap = _ref3$childGap === void 0 ? "24px" : _ref3$childGap,
|
|
45790
45788
|
currentPage = _ref3.currentPage,
|
|
45791
45789
|
_ref3$fontSize = _ref3.fontSize,
|
|
45792
45790
|
fontSize = _ref3$fontSize === void 0 ? "17px" : _ref3$fontSize,
|
|
@@ -45816,10 +45814,10 @@ var Pagination = function Pagination(_ref3) {
|
|
|
45816
45814
|
}) : isMobile && /*#__PURE__*/React.createElement(PrevNextPlaceholder, {
|
|
45817
45815
|
buttonHeight: buttonHeight,
|
|
45818
45816
|
buttonWidth: buttonWidth
|
|
45819
|
-
}), isMobile ? /*#__PURE__*/React.createElement(Box, {
|
|
45817
|
+
}), isMobile ? pageCount > 0 && /*#__PURE__*/React.createElement(Box, {
|
|
45820
45818
|
padding: "0"
|
|
45821
|
-
}, /*#__PURE__*/React.createElement(
|
|
45822
|
-
|
|
45819
|
+
}, /*#__PURE__*/React.createElement(Cover, {
|
|
45820
|
+
singleChild: true
|
|
45823
45821
|
}, /*#__PURE__*/React.createElement(Text$1, {
|
|
45824
45822
|
variant: "pXL",
|
|
45825
45823
|
weight: fontWeight,
|
|
@@ -45834,14 +45832,14 @@ var Pagination = function Pagination(_ref3) {
|
|
|
45834
45832
|
key: item.index,
|
|
45835
45833
|
text: item.index,
|
|
45836
45834
|
disabled: item.active,
|
|
45837
|
-
extraDisabledStyles: "\n
|
|
45835
|
+
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 "),
|
|
45838
45836
|
action: !item.active ? function () {
|
|
45839
45837
|
return setCurrentPage({
|
|
45840
45838
|
pageNumber: item.index
|
|
45841
45839
|
});
|
|
45842
45840
|
} : noop,
|
|
45843
45841
|
textExtraStyles: "font-size: ".concat(fontSize, "; font-weight: ").concat(fontWeight, ";"),
|
|
45844
|
-
extraStyles: "\n
|
|
45842
|
+
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 &:focus {\n outline: none\n }\n "),
|
|
45845
45843
|
dataQa: index
|
|
45846
45844
|
}, item.index)) : /*#__PURE__*/React.createElement(Box, {
|
|
45847
45845
|
padding: "0 10px"
|
|
@@ -45851,8 +45849,7 @@ var Pagination = function Pagination(_ref3) {
|
|
|
45851
45849
|
key: index,
|
|
45852
45850
|
variant: "pXL",
|
|
45853
45851
|
weight: fontWeight,
|
|
45854
|
-
color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor
|
|
45855
|
-
extraStyles: "font-size: ".concat(fontSize)
|
|
45852
|
+
color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor
|
|
45856
45853
|
}, "...")));
|
|
45857
45854
|
}), currentPage < pageCount ? /*#__PURE__*/React.createElement(PrevNextButton, {
|
|
45858
45855
|
action: pageNext,
|