@royaloperahouse/harmonic 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [0.12.1]
+- Table: improve the pagination
+
 ## [0.12.0]
 - AnchorBar: add visual improvements
 - Footer: align the grid

package/dist/harmonic.cjs.development.js

@@ -11791,7 +11791,7 @@ var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject
 var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  text-transform: uppercase;\n  border: 1px solid var(--color-primary-black);\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    min-width: 150px;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  text-transform: capitalize;\n  border: 1px solid var(--color-primary-black);\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    min-width: 150px;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
 var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  text-align: left;\n  vertical-align: middle;\n  border: 1px solid var(--color-primary-black);\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    min-width: 150px;\n  }\n"])), function (props) {
@@ -11902,20 +11902,53 @@ var Table = function Table(_ref) {
   var _useState2 = React.useState(false),
     showScrollButtons = _useState2[0],
     setShowScrollButtons = _useState2[1];
+  var tableRef = React.useRef(null);
+  var _useState3 = React.useState(true),
+    atStart = _useState3[0],
+    setAtStart = _useState3[1];
+  var _useState4 = React.useState(false),
+    atEnd = _useState4[0],
+    setAtEnd = _useState4[1];
+  var checkScrollPosition = function checkScrollPosition() {
+    if (tableRef.current) {
+      var _tableRef$current = tableRef.current,
+        scrollLeft = _tableRef$current.scrollLeft,
+        scrollWidth = _tableRef$current.scrollWidth,
+        clientWidth = _tableRef$current.clientWidth;
+      setAtStart(scrollLeft === 0);
+      setAtEnd(scrollLeft + clientWidth >= scrollWidth);
+    }
+  };
+  var handleNext = function handleNext() {
+    scrollTable(tableRef, 'right');
+  };
+  var handlePrev = function handlePrev() {
+    scrollTable(tableRef, 'left');
+  };
   var handlePageChange = function handlePageChange(page) {
     setCurrentPage(page - 1);
   };
-  var tableRef = React.useRef(null);
   React.useLayoutEffect(function () {
     var horizontalScroll = function horizontalScroll() {
       if (tableRef.current) {
         setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
+        checkScrollPosition();
       }
     };
+    var handleScroll = function handleScroll() {
+      checkScrollPosition();
+    };
     horizontalScroll();
     window.addEventListener('resize', horizontalScroll);
+    var table = tableRef.current;
+    if (table) {
+      table.addEventListener('scroll', handleScroll);
+    }
     return function () {
-      return window.removeEventListener('resize', horizontalScroll);
+      window.removeEventListener('resize', horizontalScroll);
+      if (table) {
+        table.removeEventListener('scroll', handleScroll);
+      }
     };
   }, []);
   var totalRows = Array.isArray(children) ? children.length : 1;
@@ -11942,12 +11975,10 @@ var Table = function Table(_ref) {
   return /*#__PURE__*/React__default.createElement(Wrapper$8, {
     className: className
   }, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
-    onClickPrev: function onClickPrev() {
-      return scrollTable(tableRef, 'left');
-    },
-    onClickNext: function onClickNext() {
-      return scrollTable(tableRef, 'right');
-    }
+    onClickPrev: handlePrev,
+    onClickNext: handleNext,
+    availablePrev: !atStart,
+    availableNext: !atEnd
   }))), /*#__PURE__*/React__default.createElement(Container$6, {
     role: "table",
     tabIndex: 0,