qbs-react-grid 2.2.4 → 2.2.6

package/es/qbsTable/utilities/VerticalDropDownMenu.js

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
 var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
+  var _actionDropDown$filte2, _document$getElementB;
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
     rowData = _ref.rowData,
@@ -22,35 +23,74 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     setPosition = _useState2[1];
   var menuButtonRef = useRef(null);
   var menuRef = 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
+    });
+  };
   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]);
+  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]);
   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);
         }
       }
     });
@@ -59,7 +99,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
       attributeFilter: ['style']
     });
     return function () {
-      observer.disconnect();
+      return observer.disconnect();
     };
   }, [openMenu]);
   var handleMenuItemClick = function handleMenuItemClick(slug) {
@@ -68,65 +108,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.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.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.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.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) {
@@ -140,7 +141,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
       tableBodyRef: tableBodyRef
     }, /*#__PURE__*/React.createElement("div", {
       className: "vertical-menu-icon-title flex items-center gap-2"
-    }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React.createElement("span", {
+    }, item.icon && /*#__PURE__*/React.createElement("span", {
       className: "vertical-menu-icon"
     }, item.icon), /*#__PURE__*/React.createElement("span", {
       className: "vertical-menu-title"
@@ -148,9 +149,16 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
   })));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "inline-block vertical-menu-dropdown-wrapper"
-  }, handleShowHideMenu() > 0 && /*#__PURE__*/React.createElement("button", {
+  }, visibleCount > 0 && /*#__PURE__*/React.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.createElement(ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/ReactDOM.createPortal(dropdownContent, portalTarget));
 };

package/es/qbsTable/utilities/empty.js

@@ -70,7 +70,7 @@ var NoData = function NoData(_ref) {
   }), /*#__PURE__*/React.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.createElement("p", {
+  })), " ", ' '), /*#__PURE__*/React.createElement("p", {
     className: "text-center text-common font-bold text-blackAlt nodata-title"
   }, title), /*#__PURE__*/React.createElement("span", {
     className: "text-xxs font-medium text-grey-medium nodata-sub-title"

package/es/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/es/qbsTable/utilities/icons.js

@@ -8,7 +8,7 @@ export var ThreeDotIcon = function ThreeDotIcon() {
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.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"
@@ -125,68 +125,4 @@ export var TableView = function TableView(_ref5) {
     stroke: "currentColor",
     strokeWidth: "1.5"
   }));
-};
-export var ExpandIcon = function ExpandIcon(_ref6) {
-  var className = _ref6.className;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    className: className,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.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"
-  }));
-};
-export var ContentView = function ContentView(_ref7) {
-  var className = _ref7.className;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "17",
-    className: className,
-    viewBox: "0 0 16 17",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.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.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"
-  }));
-};
-export var DefaultView = function DefaultView(_ref8) {
-  var className = _ref8.className;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "17",
-    className: className,
-    viewBox: "0 0 16 17",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.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.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.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"
-  }));
 };

package/es/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/es/qbsTable/utilities/tablecalc.js

@@ -1,10 +1,5 @@
-export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber, formatRange) {
-  if (formatRange === void 0) {
-    formatRange = function formatRange(start, end, total) {
-      return "Showing " + start + " to " + end + " of " + total;
-    };
-  }
+export 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/es/utils/useCellDescriptor.js

@@ -151,6 +151,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/es/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/es/utils/useScrollListener.js

@@ -68,8 +68,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 = useRef(null);
   var touchStartListener = useRef(null);
   var touchMoveListener = useRef(null);
@@ -131,9 +130,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.
@@ -211,6 +207,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;
@@ -244,6 +241,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/lib/Cell.js

@@ -86,11 +86,10 @@ var Cell = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var nextHeight = isHeaderCell ? headerHeight : cellHeight;
   var styles = (0, _extends4["default"])({}, predefinedStyle, (_extends2 = {}, _extends2[fullText ? 'minWidth' : 'width'] = width, _extends2.height = nextHeight, _extends2.zIndex = depth, _extends2[rtl ? 'right' : 'left'] = left, _extends2));
   var paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
-  var resolvedAlign = rtl && align === 'left' ? 'right' : rtl && align === 'right' ? 'left' : align;
   var contentStyles = (0, _extends4["default"])({}, style, (_extends3 = {
     width: fullText ? width - 1 : width,
     height: nextHeight,
-    textAlign: resolvedAlign
+    textAlign: align
   }, _extends3[paddingKey] = isTreeCol ? depth * _constants.LAYER_WIDTH + 10 : (style === null || style === void 0 ? void 0 : style[paddingKey]) || (style === null || style === void 0 ? void 0 : style.padding), _extends3));
   if (verticalAlign) {
     contentStyles.display = 'table-cell';

package/lib/Pagination.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { type QbsTableLabels } from './qbsTable/labels';
 type PageProps = {
     paginationProps: {
         total?: number;
@@ -10,8 +9,6 @@ type PageProps = {
         onRowsPerPage?: (row: number, page: number) => void;
         onPagination?: (row: number, page: number) => void;
     };
-    labels?: QbsTableLabels;
-    dataTheme?: string;
 };
 declare const Pagination: FC<PageProps>;
 export default Pagination;

package/lib/Pagination.js

@@ -5,7 +5,6 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _customSelect = _interopRequireDefault(require("./customSelect"));
-var _labels = require("./qbsTable/labels");
 var _tablecalc = require("./qbsTable/utilities/tablecalc");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,10 +41,7 @@ var PageIndex = function PageIndex(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderPageNumbers());
 };
 var Pagination = function Pagination(_ref2) {
-  var paginationProps = _ref2.paginationProps,
-    labelsProp = _ref2.labels,
-    dataTheme = _ref2.dataTheme;
-  var labels = (0, _labels.mergeLabels)(labelsProp);
+  var paginationProps = _ref2.paginationProps;
   var _paginationProps$drop = paginationProps.dropOptions,
     dropOptions = _paginationProps$drop === void 0 ? [10, 20, 50, 100, 200] : _paginationProps$drop,
     _paginationProps$curr = paginationProps.currentPage,
@@ -86,14 +82,13 @@ var Pagination = function Pagination(_ref2) {
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-custom-pagination",
-    "data-theme": dataTheme,
     style: {
       display: 'flex',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "rows-count"
-  }, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage, labels.showingRange)), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-pagination-right-block"
   }, /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
@@ -172,7 +167,7 @@ var Pagination = function Pagination(_ref2) {
     className: "qbs-table-pagination-flexBox"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "qbs-table-pagination-text"
-  }, labels.itemsPerPage), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
+  }, "Items per page"), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
     options: dropData,
     selectedValue: rowsPerPageState,
     onChange: handleRowsPerPage

package/lib/Table.d.ts

@@ -99,7 +99,6 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     /** Tree table, the callback function in the expanded node */
     renderTreeToggle?: (expandButton: React.ReactNode, rowData?: Row, expanded?: boolean) => React.ReactNode;
     tableKey?: string;
-    infiniteLoading?: boolean;
     /** Customize what you can do to expand a zone */
     renderRowExpanded?: (rowData?: Row) => React.ReactNode;
     /** Custom row element */
@@ -124,7 +123,6 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     onTouchMove?: (event: React.TouchEvent) => void;
     /** Callback for the `touchend` event. */
     onTouchEnd?: (event: React.TouchEvent) => void;
-    handleInfiniteScroll?: (value: number) => void;
     /**
      * Callback after table data update.
      * @deprecated use `shouldUpdateScroll` instead
@@ -134,7 +132,6 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
         y: number;
     }) => void) => void;
     tableBodyRef: React.RefObject<HTMLDivElement>;
-    wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
     bodyRef?: (ref: HTMLElement) => void;
 }
 export interface TableInstance<Row, Key> extends React.FunctionComponent<TableProps<Row, Key>> {

package/lib/Table.js

@@ -20,7 +20,7 @@ var _Row = _interopRequireDefault(require("./Row"));
 var _Scrollbar = _interopRequireDefault(require("./Scrollbar"));
 var _TableContext = _interopRequireDefault(require("./TableContext"));
 var _utils = require("./utils");
-var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "tableBodyHeight", "columns", "tableBodyRef", "tableKey", "handleInfiniteScroll", "infiniteLoading", "wheelWrapperRef"],
+var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight", "columns", "tableBodyRef", "tableKey"],
   _excluded2 = ["depth", "rowIndex"],
   _excluded3 = ["cellHeight"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -77,6 +77,10 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     } : _props$locale,
     _props$showHeader = props.showHeader,
     showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
+    _props$pagination = props.pagination,
+    pagination = _props$pagination === void 0 ? true : _props$pagination,
+    _props$paginationProp = props.paginationProps,
+    paginationProps = _props$paginationProp === void 0 ? {} : _props$paginationProp,
     sortColumn = props.sortColumn,
     _props$rowHeight = props.rowHeight,
     rowHeight = _props$rowHeight === void 0 ? _constants.ROW_HEIGHT : _props$rowHeight,
@@ -114,19 +118,18 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     onTouchStart = props.onTouchStart,
     onTouchMove = props.onTouchMove,
     onTouchEnd = props.onTouchEnd,
+    dataTheme = props.dataTheme,
     tableBodyHeight = props.tableBodyHeight,
     columns = props.columns,
     tableBodyRef = props.tableBodyRef,
     tableKey = props.tableKey,
-    handleInfiniteScroll = props.handleInfiniteScroll,
-    infiniteLoading = props.infiniteLoading,
-    wheelWrapperRef = props.wheelWrapperRef,
     rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix, typeof classPrefix !== 'undefined'),
     withClassPrefix = _useClassNames.withClassPrefix,
     mergeCls = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var childTableRef = (0, _react.useRef)(null);
+
   // Use `forceUpdate` to force the component to re-render after manipulating the DOM.
   var _useReducer = (0, _react.useReducer)(function (x) {
       return x + 1;
@@ -185,6 +188,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var affixHeaderWrapperRef = (0, _react.useRef)(null);
   var headerWrapperRef = (0, _react.useRef)(null);
   // const tableBodyRef = useRef<HTMLDivElement>(null);
+  var wheelWrapperRef = (0, _react.useRef)(null);
   var scrollbarXRef = (0, _react.useRef)(null);
   var scrollbarYRef = (0, _react.useRef)(null);
   var handleTableResizeChange = function handleTableResizeChange(_prevSize, event) {
@@ -296,8 +300,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       onScroll: onScroll,
       onTouchStart: onTouchStart,
       onTouchMove: onTouchMove,
-      onTouchEnd: onTouchEnd,
-      handleInfiniteScroll: handleInfiniteScroll
+      onTouchEnd: onTouchEnd
     }),
     isScrolling = _useScrollListener.isScrolling,
     isChildFocused = _useScrollListener.isChildFocused,
@@ -621,9 +624,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
           width: tableWidth.current
         },
         length: tableWidth.current,
-        onScroll: function onScroll(delta) {
-          onScrollHorizontal(delta);
-        },
+        onScroll: onScrollHorizontal,
         scrollLength: contentWidth.current,
         ref: scrollbarXRef
       }));
@@ -787,9 +788,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       role: "rowgroup",
       className: prefix('body-row-wrapper'),
       style: bodyStyles,
-      onScroll: function onScroll(e) {
-        onScrollBody === null || onScrollBody === void 0 ? void 0 : onScrollBody(e); // existing handler
-      }
+      onScroll: onScrollBody
     }, !loading && /*#__PURE__*/_react["default"].createElement("div", {
       style: wheelStyles,
       className: prefix('body-wheel-area'),
@@ -800,12 +799,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }) : null, visibleRows.current, bottomHideHeight ? /*#__PURE__*/_react["default"].createElement(_Row["default"], {
       style: bottomRowStyles,
       className: "virtualized"
-    }) : null, infiniteLoading && /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        padding: 12,
-        textAlign: 'center'
-      }
-    }, /*#__PURE__*/_react["default"].createElement("span", null, "Loading more rows\u2026"))), /*#__PURE__*/_react["default"].createElement(_EmptyMessage["default"], {
+    }) : null), /*#__PURE__*/_react["default"].createElement(_EmptyMessage["default"], {
       locale: locale,
       renderEmpty: renderEmpty,
       addPrefix: prefix,

package/lib/index.d.ts

@@ -11,5 +11,5 @@ export type { ColumnProps } from './Column';
 export type { CellProps } from './Cell';
 export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
-export type { QbsTableProps, QbsTableLabels } from './qbsTable/commontypes';
+export type { QbsTableProps } from './qbsTable/commontypes';
 export type { StandardProps, SortType, RowDataType, RowKeyType, TableSizeChangeEventName } from './@types/common';