qbs-react-grid 2.2.4 → 2.2.6

package/lib/qbsTable/utilities/VerticalDropDownMenu.js

@@ -13,6 +13,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Sy
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
+  var _actionDropDown$filte2, _document$getElementB;
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
     rowData = _ref.rowData,
@@ -29,35 +30,74 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     setPosition = _useState2[1];
   var menuButtonRef = (0, _react.useRef)(null);
   var menuRef = (0, _react.useRef)(null);
+  var updateMenuPosition = function updateMenuPosition() {
+    var _actionDropDown$filte;
+    if (!menuButtonRef.current) return;
+    var rect = menuButtonRef.current.getBoundingClientRect();
+    var viewportPadding = 8;
+    var menuGap = 4;
+    var visibleItems = (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
+      var _item$hide$call, _item$hide;
+      return !item.hidden && !((_item$hide$call = (_item$hide = item.hide) === null || _item$hide === void 0 ? void 0 : _item$hide.call(item, rowData, rowIndex)) != null ? _item$hide$call : false);
+    })) != null ? _actionDropDown$filte : [];
+    var menuWidth = menuRef.current && menuRef.current.offsetWidth > 0 ? menuRef.current.offsetWidth : Math.max(120, visibleItems.length * 48);
+    var menuHeight = visibleItems.length * 40;
+    var spaceBelow = window.innerHeight - rect.bottom;
+    var openBelow = spaceBelow >= menuHeight + menuGap;
+    var left = rect.left;
+    if (left + menuWidth > window.innerWidth - viewportPadding) {
+      left = Math.max(viewportPadding, rect.right - menuWidth);
+    }
+    setPosition({
+      top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
+      left: left
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (!openMenu) return;
+    updateMenuPosition();
+    var frame = requestAnimationFrame(function () {
+      return updateMenuPosition();
+    });
+    var resizeObserver = menuRef.current && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
+      return updateMenuPosition();
+    }) : null;
+    if (resizeObserver && menuRef.current) {
+      resizeObserver.observe(menuRef.current);
+    }
+    return function () {
+      cancelAnimationFrame(frame);
+      resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    };
+  }, [openMenu]);
   (0, _react.useEffect)(function () {
+    if (!openMenu) return;
     var handleClickOutside = function handleClickOutside(event) {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setOpenMenu(false);
+      var _menuRef$current, _menuButtonRef$curren;
+      var target = event.target;
+      if ((_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(target) || (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(target)) {
+        return;
       }
+      setOpenMenu(false);
     };
     var handleScroll = function handleScroll() {
-      setOpenMenu(false);
+      return setOpenMenu(false);
     };
     document.addEventListener('click', handleClickOutside);
     window.addEventListener('scroll', handleScroll, true);
-    // Use capture phase to catch all scrolls
-
     return function () {
       document.removeEventListener('click', handleClickOutside);
       window.removeEventListener('scroll', handleScroll, true);
     };
-  }, []);
+  }, [openMenu]);
   (0, _react.useEffect)(function () {
-    var handleStyleChange = function handleStyleChange() {
-      setOpenMenu(false); // Close the dropdown
-    };
     var scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
     if (!scrollbarHandle) return;
     var observer = new MutationObserver(function (mutations) {
       for (var _iterator = _createForOfIteratorHelperLoose(mutations), _step; !(_step = _iterator()).done;) {
         var mutation = _step.value;
         if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-          handleStyleChange();
+          setOpenMenu(false);
         }
       }
     });
@@ -66,7 +106,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
       attributeFilter: ['style']
     });
     return function () {
-      observer.disconnect();
+      return observer.disconnect();
     };
   }, [openMenu]);
   var handleMenuItemClick = function handleMenuItemClick(slug) {
@@ -75,65 +115,26 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     (_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
     setOpenMenu(false);
   };
-  var handleShowHideMenu = function handleShowHideMenu() {
-    var _actionDropDown$filte, _actionDropDown$filte2;
-    return (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : (_actionDropDown$filte2 = actionDropDown.filter(function (item) {
-      var _item$hide;
-      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
-    })) === null || _actionDropDown$filte2 === void 0 ? void 0 : _actionDropDown$filte2.length) != null ? _actionDropDown$filte : 0;
-  };
-  var toggleMenu = function toggleMenu() {
-    if (!openMenu && menuButtonRef.current) {
-      var _actionDropDown$filte3;
-      var rect = menuButtonRef.current.getBoundingClientRect();
-      var viewportPadding = 8;
-      var menuGap = 4;
-      var dropdownWidth = 200;
-      var visibleItems = (_actionDropDown$filte3 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
-        var _item$hide2;
-        return !item.hidden && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex));
-      })) != null ? _actionDropDown$filte3 : [];
-      var menuHeight = visibleItems.length * 40;
-      var spaceBelow = window.innerHeight - rect.bottom;
-      var openBelow = spaceBelow >= menuHeight + menuGap;
-
-      // Anchor to trigger; prefer opening toward inline-start (left in LTR).
-      var left = rect.right - dropdownWidth;
-      if (left < viewportPadding) {
-        left = rect.left;
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = Math.max(viewportPadding, rect.left - dropdownWidth);
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = window.innerWidth - viewportPadding - dropdownWidth;
-      }
-      setPosition({
-        top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
-        left: left
-      });
-    }
-    setTimeout(function () {
-      setOpenMenu(function (prev) {
-        return !prev;
-      });
-    }, 200);
-  };
-  var portalTarget = document.getElementById('portal-root');
+  var visibleCount = (_actionDropDown$filte2 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
+    var _item$hide$call2, _item$hide2;
+    return !item.hidden && !((_item$hide$call2 = (_item$hide2 = item.hide) === null || _item$hide2 === void 0 ? void 0 : _item$hide2.call(item, rowData, rowIndex)) != null ? _item$hide$call2 : false);
+  }).length) != null ? _actionDropDown$filte2 : 0;
+  var portalTarget = (_document$getElementB = document.getElementById('portal-root')) != null ? _document$getElementB : document.body;
   var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", {
     className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
     ref: menuRef,
     style: {
-      width: 200,
       top: position.top,
       left: position.left,
-      position: 'fixed'
+      position: 'fixed',
+      minWidth: 120,
+      width: 'max-content'
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "py-1"
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
-    var _item$hide3;
-    return !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide3 = item.hide) !== null && _item$hide3 !== void 0 && _item$hide3.call(item, rowData, rowIndex)) ? /*#__PURE__*/_react["default"].createElement("div", {
+    var _item$hide$call3, _item$hide3;
+    return !item.hidden && !((_item$hide$call3 = (_item$hide3 = item.hide) === null || _item$hide3 === void 0 ? void 0 : _item$hide3.call(item, rowData, rowIndex)) != null ? _item$hide$call3 : false) ? /*#__PURE__*/_react["default"].createElement("div", {
       key: item.title,
       className: "vertical-menu-item px-4 py-2 text-sm text-base-black hover:bg-gray-light-1 cursor-pointer flex items-center gap-2 transition-colors",
       onClick: function onClick(e) {
@@ -147,7 +148,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
       tableBodyRef: tableBodyRef
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "vertical-menu-icon-title flex items-center gap-2"
-    }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/_react["default"].createElement("span", {
+    }, item.icon && /*#__PURE__*/_react["default"].createElement("span", {
       className: "vertical-menu-icon"
     }, item.icon), /*#__PURE__*/_react["default"].createElement("span", {
       className: "vertical-menu-title"
@@ -155,9 +156,16 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
   })));
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "inline-block vertical-menu-dropdown-wrapper"
-  }, handleShowHideMenu() > 0 && /*#__PURE__*/_react["default"].createElement("button", {
+  }, visibleCount > 0 && /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
     className: "vertical-menu-trigger-button p-2 rounded text-base-gray hover:bg-gray-light-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-    onClick: toggleMenu,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      if (!openMenu) updateMenuPosition();
+      setOpenMenu(function (prev) {
+        return !prev;
+      });
+    },
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/_reactDom["default"].createPortal(dropdownContent, portalTarget));
 };

package/lib/qbsTable/utilities/empty.js

@@ -75,7 +75,7 @@ var NoData = function NoData(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("path", {
     fill: "#797979",
     d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
-  })), ' '), /*#__PURE__*/_react["default"].createElement("p", {
+  })), " ", ' '), /*#__PURE__*/_react["default"].createElement("p", {
     className: "text-center text-common font-bold text-blackAlt nodata-title"
   }, title), /*#__PURE__*/_react["default"].createElement("span", {
     className: "text-xxs font-medium text-grey-medium nodata-sub-title"

package/lib/qbsTable/utilities/icons.d.ts

@@ -6,6 +6,3 @@ export declare const TableIcon: React.FC<any>;
 export declare const CardIcon: React.FC<any>;
 export declare const CardView: React.FC<any>;
 export declare const TableView: React.FC<any>;
-export declare const ExpandIcon: React.FC<any>;
-export declare const ContentView: React.FC<any>;
-export declare const DefaultView: React.FC<any>;

package/lib/qbsTable/utilities/icons.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.ThreeDotIcon = exports.TableView = exports.TableIcon = exports.SettingsIcon = exports.ExpandIcon = exports.DefaultView = exports.ContentView = exports.CardView = exports.CardIcon = exports.ArrowUpIcon = void 0;
+exports.ThreeDotIcon = exports.TableView = exports.TableIcon = exports.SettingsIcon = exports.CardView = exports.CardIcon = exports.ArrowUpIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var ThreeDotIcon = function ThreeDotIcon() {
   return /*#__PURE__*/_react["default"].createElement("svg", {
@@ -13,7 +13,7 @@ var ThreeDotIcon = function ThreeDotIcon() {
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     d: "M2 2.16665L2 2.17498M2 7.99998L2 8.00831M2 13.8333L2 13.8416M2 2.99998C1.53976 2.99998 1.16667 2.62688 1.16667 2.16665C1.16667 1.70641 1.53976 1.33331 2 1.33331C2.46024 1.33331 2.83333 1.70641 2.83333 2.16665C2.83333 2.62688 2.46024 2.99998 2 2.99998ZM2 8.83331C1.53976 8.83331 1.16667 8.46022 1.16667 7.99998C1.16667 7.53974 1.53976 7.16665 2 7.16665C2.46024 7.16665 2.83333 7.53974 2.83333 7.99998C2.83333 8.46022 2.46024 8.83331 2 8.83331ZM2 14.6666C1.53976 14.6666 1.16666 14.2935 1.16666 13.8333C1.16666 13.3731 1.53976 13 2 13C2.46024 13 2.83333 13.3731 2.83333 13.8333C2.83333 14.2935 2.46024 14.6666 2 14.6666Z",
-    stroke: "currentColor",
+    stroke: "#313131",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
@@ -137,71 +137,4 @@ var TableView = function TableView(_ref5) {
     strokeWidth: "1.5"
   }));
 };
-exports.TableView = TableView;
-var ExpandIcon = function ExpandIcon(_ref6) {
-  var className = _ref6.className;
-  return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "16",
-    height: "16",
-    className: className,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668",
-    stroke: "#585858",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-exports.ExpandIcon = ExpandIcon;
-var ContentView = function ContentView(_ref7) {
-  var className = _ref7.className;
-  return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "16",
-    height: "17",
-    className: className,
-    viewBox: "0 0 16 17",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z",
-    stroke: "#585858",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z",
-    stroke: "#585858",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-exports.ContentView = ContentView;
-var DefaultView = function DefaultView(_ref8) {
-  var className = _ref8.className;
-  return /*#__PURE__*/_react["default"].createElement("svg", {
-    width: "16",
-    height: "17",
-    className: className,
-    viewBox: "0 0 16 17",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z",
-    fill: "#585858"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z",
-    fill: "#585858"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z",
-    fill: "#585858"
-  }));
-};
-exports.DefaultView = DefaultView;
+exports.TableView = TableView;

package/lib/qbsTable/utilities/tablecalc.d.ts

@@ -1 +1 @@
-export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number, formatRange?: (start: number, end: number, total: number) => string): string;
+export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number): string;

package/lib/qbsTable/utilities/tablecalc.js

@@ -2,13 +2,8 @@
 
 exports.__esModule = true;
 exports.getRowDisplayRange = getRowDisplayRange;
-function getRowDisplayRange(totalRows, rowsPerPage, pageNumber, formatRange) {
-  if (formatRange === void 0) {
-    formatRange = function formatRange(start, end, total) {
-      return "Showing " + start + " to " + end + " of " + total;
-    };
-  }
+function getRowDisplayRange(totalRows, rowsPerPage, pageNumber) {
   var start = (pageNumber - 1) * rowsPerPage + 1;
   var end = Math.min(pageNumber * rowsPerPage, totalRows);
-  return formatRange(start != null ? start : 0, end != null ? end : 0, totalRows != null ? totalRows : 0);
+  return "Showing " + (start != null ? start : 0) + " to " + (end != null ? end : 0) + " of " + (totalRows != null ? totalRows : 0);
 }

package/lib/utils/useCellDescriptor.js

@@ -158,6 +158,7 @@ var useCellDescriptor = function useCellDescriptor(props) {
       if (treeCol) {
         hasCustomTreeCol = true;
       }
+      console.log(columns);
       if ((columnChildren === null || columnChildren === void 0 ? void 0 : columnChildren.length) !== 2) {
         throw new Error("Component <HeaderCell> and <Cell> is required, column index: " + index + " ");
       }

package/lib/utils/useScrollListener.d.ts

@@ -31,7 +31,6 @@ interface ScrollListenerProps {
     onTouchStart?: (event: React.TouchEvent) => void;
     onTouchMove?: (event: React.TouchEvent) => void;
     onTouchEnd?: (event: React.TouchEvent) => void;
-    handleInfiniteScroll?: (value: number) => void;
 }
 /**
  * Add scroll, touch, and wheel monitoring events to the table,

package/lib/utils/useScrollListener.js

@@ -72,8 +72,7 @@ var useScrollListener = function useScrollListener(props) {
     contentHeight = props.contentHeight,
     headerHeight = props.headerHeight,
     rtl = props.rtl,
-    tableKey = props.tableKey,
-    handleInfiniteScroll = props.handleInfiniteScroll;
+    tableKey = props.tableKey;
   var wheelListener = (0, _react.useRef)(null);
   var touchStartListener = (0, _react.useRef)(null);
   var touchMoveListener = (0, _react.useRef)(null);
@@ -135,9 +134,6 @@ var useScrollListener = function useScrollListener(props) {
     var x = Math.min(0, nextScrollX < minScrollX.current ? minScrollX.current : nextScrollX);
     setScrollX(x);
     setScrollY(y);
-    if (typeof handleInfiniteScroll === 'function' && deltaY !== 0 && !loading && Math.abs(y) + getTableHeight() >= contentHeight.current - 12) {
-      handleInfiniteScroll(scrollY.current);
-    }
     onScroll === null || onScroll === void 0 ? void 0 : onScroll(Math.abs(x), Math.abs(y));
     if (virtualized) {
       // Add a state to the table during virtualized scrolling.
@@ -215,6 +211,7 @@ var useScrollListener = function useScrollListener(props) {
     if (!isTouching.current) {
       return;
     }
+    console.log('handleTouchMove');
     var _event$touches$2 = event.touches[0],
       pageX = _event$touches$2.pageX,
       pageY = _event$touches$2.pageY;
@@ -248,6 +245,7 @@ var useScrollListener = function useScrollListener(props) {
     if (!isTouching.current) {
       return;
     }
+    console.log('handleTouchEnd');
     isTouching.current = false;
     var touchDuration = new Date().getTime() - momentumStartTime.current;
     var absDeltaY = Math.abs(scrollY.current - momentumStartY.current);

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "qbs-react-grid",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "module": "es/index.js",
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./lib/index.js",
+      "default": "./es/index.js"
+    },
+    "./dist/css/qbs-react-grid.css": "./dist/css/qbs-react-grid.css"
+  },
   "scripts": {
     "format": "prettier --write \"{src,test}/**/*.{tsx,ts,js}\"",
     "format:check": "prettier --list-different \"{src,test}/**/*.{tsx,ts,js}\"",
@@ -72,7 +80,7 @@
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@faker-js/faker": "^7.6.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^13.4.0",
     "@types/lodash": "^4.14.165",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^19.0.11",

package/src/Cell.tsx

@@ -144,13 +144,11 @@ const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElem
   };
 
   const paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
-  const resolvedAlign =
-    rtl && align === 'left' ? 'right' : rtl && align === 'right' ? 'left' : align;
   const contentStyles: React.CSSProperties = {
     ...style,
     width: fullText ? width - 1 : width,
     height: nextHeight,
-    textAlign: resolvedAlign,
+    textAlign: align,
     [paddingKey]: isTreeCol ? depth * LAYER_WIDTH + 10 : style?.[paddingKey] || style?.padding
   };
 

package/src/HeaderCell.tsx

@@ -97,6 +97,7 @@ const HeaderCell = React.forwardRef((props: HeaderCellProps, ref: React.Ref<HTML
       onSortColumn?.(sortKey ?? dataKey);
     }
   }, [dataKey, onSortColumn, sortable, sortKey]);
+
   const handleColumnResizeStart = useCallback(() => {
     onColumnResizeStart?.(columnWidth, left, !!fixed);
   }, [columnWidth, fixed, left, onColumnResizeStart]);

package/src/Pagination.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useEffect, useState } from 'react';
 
 import CustomSelect from './customSelect';
-import { mergeLabels, type QbsTableLabels } from './qbsTable/labels';
 import { getRowDisplayRange } from './qbsTable/utilities/tablecalc';
 
 // Import the custom select component
@@ -16,8 +15,6 @@ type PageProps = {
     onRowsPerPage?: (row: number, page: number) => void;
     onPagination?: (row: number, page: number) => void;
   };
-  labels?: QbsTableLabels;
-  dataTheme?: string;
 };
 
 const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
@@ -55,8 +52,7 @@ const PageIndex = ({ currentPage, handleFirst, pageCount }) => {
   return <>{renderPageNumbers()}</>;
 };
 
-const Pagination: FC<PageProps> = ({ paginationProps, labels: labelsProp, dataTheme }) => {
-  const labels = mergeLabels(labelsProp);
+const Pagination: FC<PageProps> = ({ paginationProps }) => {
   const {
     dropOptions = [10, 20, 50, 100, 200],
     currentPage = 1,
@@ -100,12 +96,9 @@ const Pagination: FC<PageProps> = ({ paginationProps, labels: labelsProp, dataTh
   return (
     <div
       className="qbs-table-custom-pagination"
-      data-theme={dataTheme}
       style={{ display: 'flex', justifyContent: 'space-between' }}
     >
-      <div className="rows-count">
-        {getRowDisplayRange(total, rowsPerPageState, currentPage, labels.showingRange)}
-      </div>
+      <div className="rows-count">{getRowDisplayRange(total, rowsPerPageState, currentPage)}</div>
       <div className="qbs-table-pagination-right-block">
         <button
           className="qbs-table-icon-container"
@@ -201,7 +194,7 @@ const Pagination: FC<PageProps> = ({ paginationProps, labels: labelsProp, dataTh
         </button>
       </div>
       <div className="qbs-table-pagination-flexBox">
-        <span className="qbs-table-pagination-text">{labels.itemsPerPage}</span>
+        <span className="qbs-table-pagination-text">Items per page</span>
         <CustomSelect
           options={dropData}
           selectedValue={rowsPerPageState}

package/src/Table.tsx

@@ -224,7 +224,6 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     expanded?: boolean
   ) => React.ReactNode;
   tableKey?: string;
-  infiniteLoading?: boolean;
   /** Customize what you can do to expand a zone */
   renderRowExpanded?: (rowData?: Row) => React.ReactNode;
 
@@ -260,16 +259,13 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
 
   /** Callback for the `touchend` event. */
   onTouchEnd?: (event: React.TouchEvent) => void;
-  handleInfiniteScroll?: (value: number) => void;
+
   /**
    * Callback after table data update.
    * @deprecated use `shouldUpdateScroll` instead
    **/
   onDataUpdated?: (nextData: Row[], scrollTo: (coord: { x: number; y: number }) => void) => void;
   tableBodyRef: React.RefObject<HTMLDivElement>;
-
-  wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
-
   bodyRef?: (ref: HTMLElement) => void;
 }
 
@@ -306,7 +302,8 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
       loading: 'Loading...'
     },
     showHeader = true,
-
+    pagination = true,
+    paginationProps = {},
     sortColumn,
     rowHeight = ROW_HEIGHT,
     sortType: sortTypeProp,
@@ -338,21 +335,21 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     onTouchStart,
     onTouchMove,
     onTouchEnd,
+    dataTheme,
     tableBodyHeight,
     columns,
     tableBodyRef,
     tableKey,
-    handleInfiniteScroll,
-    infiniteLoading,
-    wheelWrapperRef,
     ...rest
   } = props;
+
   const {
     withClassPrefix,
     merge: mergeCls,
     prefix
   } = useClassNames(classPrefix, typeof classPrefix !== 'undefined');
   const childTableRef = useRef<HTMLDivElement>(null);
+
   // Use `forceUpdate` to force the component to re-render after manipulating the DOM.
   const [, forceUpdate] = useReducer(x => x + 1, 0);
   const [expandedRowKeys, setExpandedRowKeys] = useControlled(
@@ -411,6 +408,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
   const affixHeaderWrapperRef = useRef<HTMLDivElement>(null);
   const headerWrapperRef = useRef<HTMLDivElement>(null);
   // const tableBodyRef = useRef<HTMLDivElement>(null);
+  const wheelWrapperRef = useRef<HTMLDivElement>(null);
   const scrollbarXRef = useRef<ScrollbarInstance>(null);
   const scrollbarYRef = useRef<ScrollbarInstance>(null);
 
@@ -535,8 +533,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     onScroll,
     onTouchStart,
     onTouchMove,
-    onTouchEnd,
-    handleInfiniteScroll
+    onTouchEnd
   });
 
   const { headerCells, bodyCells, allColumnsWidth, hasCustomTreeCol } = useCellDescriptor({
@@ -956,9 +953,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
           tableId={id}
           style={{ width: tableWidth.current }}
           length={tableWidth.current}
-          onScroll={delta => {
-            onScrollHorizontal(delta);
-          }}
+          onScroll={onScrollHorizontal}
           scrollLength={contentWidth.current}
           ref={scrollbarXRef}
         />
@@ -1137,21 +1132,13 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
         role="rowgroup"
         className={prefix('body-row-wrapper')}
         style={bodyStyles}
-        onScroll={e => {
-          onScrollBody?.(e); // existing handler
-        }}
+        onScroll={onScrollBody}
       >
         {!loading && (
           <div style={wheelStyles} className={prefix('body-wheel-area')} ref={wheelWrapperRef}>
             {topHideHeight ? <Row style={topRowStyles} className="virtualized" /> : null}
             {visibleRows.current}
             {bottomHideHeight ? <Row style={bottomRowStyles} className="virtualized" /> : null}
-
-            {infiniteLoading && (
-              <div style={{ padding: 12, textAlign: 'center' }}>
-                <span>Loading more rows…</span>
-              </div>
-            )}
           </div>
         )}