@cashub/ui 0.12.3 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.12.3",
+  "version": "0.13.1",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/table/GridTable.js

@@ -31,7 +31,7 @@ var _Popover = _interopRequireDefault(require("../popover/Popover"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var _excluded = ["title", "fieldName", "render", "custom"];
 
@@ -83,8 +83,13 @@ var GridTable = function GridTable(_ref) {
 
   var _useState = (0, _react.useState)(0),
       _useState2 = _slicedToArray(_useState, 2),
-      restWidth = _useState2[0],
-      setRestWidth = _useState2[1];
+      tableWidth = _useState2[0],
+      setTableWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      restWidth = _useState4[0],
+      setRestWidth = _useState4[1];
 
   var texts = (0, _react.useMemo)(function () {
     var defaultTexts = {
@@ -99,6 +104,7 @@ var GridTable = function GridTable(_ref) {
     }
   }, [onSortChange]);
   var handleResize = (0, _react.useCallback)(function () {
+    setTableWidth(tableRef.current.offsetWidth);
     setRestWidth(function (previousWidth) {
       var containerWidth = wrapperRef.current.offsetWidth;
       var tableWidth = tableRef.current.offsetWidth - previousWidth;
@@ -110,6 +116,10 @@ var GridTable = function GridTable(_ref) {
       return 0;
     });
   }, []);
+  var handleScroll = (0, _react.useCallback)(function (event) {
+    var target = event.target;
+    wrapperRef.current.scrollLeft = target.scrollLeft;
+  }, []);
   var showFullValue = (0, _react.useCallback)(function (event) {
     var id = event.target.id;
 
@@ -225,6 +235,11 @@ var GridTable = function GridTable(_ref) {
   (0, _react.useEffect)(function () {
     handleResize();
   }, [columns, handleResize]);
+  (0, _react.useEffect)(function () {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [columns]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TableWrapper, {
       ref: wrapperRef,
@@ -239,6 +254,10 @@ var GridTable = function GridTable(_ref) {
           children: tableRows || generateEmptyMessage()
         })]
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Scrollbar, {
+      backgroundReverse: backgroundReverse,
+      width: tableWidth,
+      onScroll: handleScroll
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTableFooter.default, {
       backgroundReverse: backgroundReverse,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooterInfo.default, {
@@ -277,12 +296,10 @@ var GridTable = function GridTable(_ref) {
   });
 };
 
-var TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: auto;\n  background: ", ";\n\n  ", "\n"])), function (_ref2) {
+var TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  background: ", ";\n"])), function (_ref2) {
   var backgroundReverse = _ref2.backgroundReverse;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
-}, (0, _scrollbar.default)({
-  size: 'large'
-}));
+});
 
 var ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* make fixed width work */\n  width: 0px;\n  color: var(--font-on-primary);\n  table-layout: fixed;\n  border-collapse: collapse;\n"])));
 
@@ -294,5 +311,15 @@ var TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _t
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 });
 
+var Scrollbar = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 48px;\n  width: 100%;\n  overflow: auto;\n  background: ", ";\n\n  ::before {\n    display: block;\n    content: '';\n    width: ", ";\n    height: 1px;\n  }\n\n  ", "\n"])), function (_ref5) {
+  var backgroundReverse = _ref5.backgroundReverse;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}, function (_ref6) {
+  var width = _ref6.width;
+  return "".concat(width, "px");
+}, (0, _scrollbar.default)({
+  size: 'large'
+}));
+
 var _default = GridTable;
 exports.default = _default;

package/table/subComponent/GridTableFooter.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var GridTableFooter = (0, _styledComponents.default)(_TableFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  background: ", ";\n"])), function (_ref) {
+var GridTableFooter = (0, _styledComponents.default)(_TableFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: sticky;\n  bottom: 0;\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  background: ", ";\n"])), function (_ref) {
   var backgroundReverse = _ref.backgroundReverse;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 });