qbs-react-grid 2.2.17 → 2.2.19

package/lib/qbsTable/commontypes.d.ts

@@ -40,7 +40,7 @@ export interface PaginationProps {
 export interface ActionProps {
     title?: string;
     action?: (row: any) => void;
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     toolTip?: string;
     hidden?: boolean;
     hide?: (data: any, index?: number) => boolean;
@@ -70,6 +70,7 @@ export interface QbsTableProps {
     searchValue?: string;
     handleSearchValue?: (value?: string) => void;
     theme?: string;
+    rtl?: boolean;
     onRowClick?: (data: any) => void;
     cellBordered?: boolean;
     bordered?: boolean;
@@ -83,9 +84,8 @@ export interface QbsTableProps {
     expandedRowKeys?: readonly number[];
     setExpandedRowKeys?: (value: readonly number[]) => void;
     handleMenuActions?: (actions: ActionProps, rowData: any) => void;
-    dropType?: 'vertical' | string;
+    dropType?: 'horizondal' | 'vertical' | string;
     labels?: QbsTableLabels;
-    rtl?: boolean;
     handleRowExpanded?: (rowData: any) => React.ReactNode;
     shouldUpdateScroll?: boolean;
     rowExpand?: boolean;
@@ -99,6 +99,8 @@ export interface QbsTableProps {
         disabled?: boolean;
         hidden?: boolean;
         customHide?: string;
+        buttonClassName?: string;
+        icon?: ReactElement | ReactNode;
     }[];
     selectedRows?: (number | string)[];
     classes?: {
@@ -131,13 +133,18 @@ export interface QbsTableProps {
     handleTableCardView?: (data: any) => React.ReactNode;
     isCustomTableCardView?: boolean;
     handleCustomCardLoader?: () => React.ReactNode;
+    hasMoreData?: boolean;
+    loadMoreData?: () => void;
+    infiniteScroll?: boolean;
+    infiniteLoading?: boolean;
+    viewMode?: string;
     rowViewToggle?: boolean;
     defaultRowView?: boolean;
     fullWidthView?: boolean;
     setTableFullView?: (value: boolean) => void;
     setRowViewToggle?: (value: boolean) => void;
-    isFullScreen?: boolean;
     rowHeight?: number;
+    isFullScreen?: boolean;
     showHeader?: boolean;
 }
 export interface QbsTableToolbarProps {
@@ -163,24 +170,26 @@ export interface QbsTableToolbarProps {
     dataLength: number;
     headerHeight?: number;
     searchPlaceholder?: string;
+    labels?: QbsTableLabels;
+    rtl?: boolean;
     tableView?: boolean;
     enableTableToggle?: boolean;
     tableViewToggle?: boolean;
     setTableViewToggle?: (value: boolean) => void;
-    rowViewToggle?: boolean;
-    defaultRowView?: boolean;
-    fullWidthView?: boolean;
-    setTableFullView?: (value: boolean) => void;
-    setRowViewToggle?: (value: boolean) => void;
-    isFullScreen?: boolean;
-    labels?: QbsTableLabels;
-    rtl?: boolean;
     selectedRowActions?: {
         actionTitle?: string;
         action: (checked: (number | string)[]) => void;
         disabled?: boolean;
         hidden?: boolean;
         customHide?: string;
+        buttonClassName?: string;
+        icon?: ReactElement | ReactNode;
     }[];
+    rowViewToggle?: boolean;
+    defaultRowView?: boolean;
+    fullWidthView?: boolean;
+    setTableFullView?: (value: boolean) => void;
+    setRowViewToggle?: (value: boolean) => void;
+    isFullScreen?: boolean;
 }
 export {};

package/lib/qbsTable/labels.d.ts

@@ -1,4 +1,4 @@
-export type QbsTableLabels = {
+export interface QbsTableLabels {
     search?: string;
     searchAriaLabel?: string;
     clear?: string;
@@ -19,7 +19,11 @@ export type QbsTableLabels = {
     viewMore?: string;
     viewLess?: string;
     actions?: string;
-};
+}
 export declare const defaultQbsTableLabels: QbsTableLabels;
+/** @deprecated Use defaultQbsTableLabels */
+export declare const DEFAULT_QBS_TABLE_LABELS: QbsTableLabels;
 export declare const mergeQbsTableLabels: (overrides?: QbsTableLabels) => QbsTableLabels;
+/** @deprecated Use mergeQbsTableLabels */
+export declare const mergeLabels: (overrides?: QbsTableLabels) => QbsTableLabels;
 export declare const formatSelectedItems: (count: number, labels?: QbsTableLabels) => string;

package/lib/qbsTable/labels.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.mergeQbsTableLabels = exports.formatSelectedItems = exports.defaultQbsTableLabels = void 0;
+exports.mergeQbsTableLabels = exports.mergeLabels = exports.formatSelectedItems = exports.defaultQbsTableLabels = exports.DEFAULT_QBS_TABLE_LABELS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var defaultQbsTableLabels = {
   search: 'Search',
@@ -28,11 +28,22 @@ var defaultQbsTableLabels = {
   viewLess: 'View Less',
   actions: 'Actions'
 };
+
+/** @deprecated Use defaultQbsTableLabels */
 exports.defaultQbsTableLabels = defaultQbsTableLabels;
+var DEFAULT_QBS_TABLE_LABELS = defaultQbsTableLabels;
+exports.DEFAULT_QBS_TABLE_LABELS = DEFAULT_QBS_TABLE_LABELS;
 var mergeQbsTableLabels = function mergeQbsTableLabels(overrides) {
-  return (0, _extends2["default"])({}, defaultQbsTableLabels, overrides);
+  var _overrides$showingRan;
+  return (0, _extends2["default"])({}, defaultQbsTableLabels, overrides, {
+    showingRange: (_overrides$showingRan = overrides === null || overrides === void 0 ? void 0 : overrides.showingRange) != null ? _overrides$showingRan : defaultQbsTableLabels.showingRange
+  });
 };
+
+/** @deprecated Use mergeQbsTableLabels */
 exports.mergeQbsTableLabels = mergeQbsTableLabels;
+var mergeLabels = mergeQbsTableLabels;
+exports.mergeLabels = mergeLabels;
 var formatSelectedItems = function formatSelectedItems(count, labels) {
   var merged = mergeQbsTableLabels(labels);
   return merged.selectedItems + " (" + count + ")";

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { QbsColumnProps } from '../commontypes';
+import { type QbsTableLabels } from '../labels';
 type Props = {
     columns: QbsColumnProps[];
     data: any;
@@ -9,6 +10,7 @@ type Props = {
     handleMenuActions?: () => void;
     cardColumLimit?: number;
     childDetailHeading?: string;
+    labels?: QbsTableLabels;
 };
 declare const CardComponent: React.FC<Props>;
 export default CardComponent;

package/lib/qbsTable/utilities/CardComponent.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 var _CardMenuDropdown = _interopRequireDefault(require("./CardMenuDropdown"));
 var _handleFormatCell = require("./handleFormatCell");
 var _icons = require("./icons");
@@ -22,7 +23,9 @@ var CardComponent = function CardComponent(_ref) {
     cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
     handleMenuActions = _ref.handleMenuActions,
     _ref$childDetailHeadi = _ref.childDetailHeading,
-    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(false),
     viewMore = _useState[0],
     setViewMore = _useState[1];
@@ -71,10 +74,11 @@ var CardComponent = function CardComponent(_ref) {
     rowData: data,
     iconName: "more",
     rowIndex: index,
-    handleMenuActions: handleMenuActions
+    handleMenuActions: handleMenuActions,
+    labels: labels
   })), columns.length > initialDisplayCount && /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
     tableBodyRef: useCardRef,
-    title: viewMore ? ' View Less' : 'View More',
+    title: viewMore ? labels.viewLess : labels.viewMore,
     enabled: false
   }, /*#__PURE__*/_react["default"].createElement("button", {
     onClick: toggleViewMore,

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ActionProps } from '../commontypes';
+import { type QbsTableLabels } from '../labels';
 type Props = {
     iconName: string;
     actionDropDown: ActionProps[];
@@ -8,6 +9,7 @@ type Props = {
     dataTheme?: string;
     tableBodyRef: React.RefObject<HTMLDivElement>;
     rowIndex?: number;
+    labels?: QbsTableLabels;
 };
 declare const CardMenuDropdown: React.FC<Props>;
 export default CardMenuDropdown;

package/lib/qbsTable/utilities/CardMenuDropdown.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _labels = require("../labels");
 var _icons = require("./icons");
 var _ToolTip = _interopRequireDefault(require("./ToolTip"));
 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); }
@@ -11,7 +12,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
-    rowData = _ref.rowData;
+    rowData = _ref.rowData,
+    labelsProp = _ref.labels;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _useState = (0, _react.useState)(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
@@ -38,7 +41,6 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
         var dropdownHeight = 200; // Adjust this if your dropdown height varies
         var spaceBelow = window.innerHeight - buttonRect.bottom;
         var spaceAbove = buttonRect.top;
-        console.log(spaceAbove, spaceBelow, dropdownHeight);
         if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
           setMenuPositionStyles({
             bottom: '30px',
@@ -71,9 +73,8 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
-    title: "Actions",
-    enabled: false,
-    ref: menuButtonRef
+    title: labels.actions,
+    enabled: false
   }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
     className: " qbs-card-dropdown rounded absolute right-0 mt-2 w-auto min-w-11 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white",
     style: menuPositionStyles

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface SearchProps {
     placeholder: string;
+    searchAriaLabel?: string;
     handleChange: (value: string) => void;
     searchValue: string | undefined;
     handleSearch: (value?: string) => void;

package/lib/qbsTable/utilities/SearchInput.js

@@ -7,6 +7,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var SearchInput = function SearchInput(_ref) {
   var placeholder = _ref.placeholder,
+    _ref$searchAriaLabel = _ref.searchAriaLabel,
+    searchAriaLabel = _ref$searchAriaLabel === void 0 ? 'Search' : _ref$searchAriaLabel,
     handleChange = _ref.handleChange,
     searchValue = _ref.searchValue,
     handleSearch = _ref.handleSearch;
@@ -30,7 +32,7 @@ var SearchInput = function SearchInput(_ref) {
     placeholder: placeholder,
     value: searchValue != null ? searchValue : '',
     onChange: handleInputChange,
-    "aria-label": "Search"
+    "aria-label": searchAriaLabel
   }), /*#__PURE__*/_react["default"].createElement("button", {
     className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
     onClick: function onClick() {

package/lib/qbsTable/utilities/VerticalDropDownMenu.js

@@ -13,8 +13,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 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 isActionVisible = function isActionVisible(item, rowData, rowIndex) {
+  var _item$hide, _item$hide2;
+  return !item.hidden && !((_item$hide = (_item$hide2 = item.hide) === null || _item$hide2 === void 0 ? void 0 : _item$hide2.call(item, rowData, rowIndex)) != null ? _item$hide : false);
+};
 var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
-  var _actionDropDown$filte2, _document$getElementB;
+  var _actionDropDown$filte2;
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
     rowData = _ref.rowData,
@@ -51,11 +55,10 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     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);
+      return isActionVisible(item, rowData, rowIndex);
     })) != 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 menuHeight = Math.max(visibleItems.length, 1) * 40;
     var spaceBelow = window.innerHeight - rect.bottom;
     var openBelow = spaceBelow >= menuHeight + menuGap;
     var isRtl = (document.documentElement.getAttribute('dir') || document.body.getAttribute('dir') || getComputedStyle(document.documentElement).direction) === 'rtl';
@@ -87,10 +90,10 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
       cancelAnimationFrame(frame);
       resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     };
-  }, [openMenu]);
+  }, [openMenu, actionDropDown, rowData, rowIndex]);
   (0, _react.useEffect)(function () {
     if (!openMenu) return;
-    var handleClickOutside = function handleClickOutside(event) {
+    var handlePointerDown = function handlePointerDown(event) {
       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)) {
@@ -101,14 +104,20 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     var handleScroll = function handleScroll() {
       return setOpenMenu(false);
     };
-    document.addEventListener('click', handleClickOutside);
+
+    // Defer so the opening click does not immediately close the menu.
+    var timeoutId = window.setTimeout(function () {
+      document.addEventListener('mousedown', handlePointerDown);
+    }, 0);
     window.addEventListener('scroll', handleScroll, true);
     return function () {
-      document.removeEventListener('click', handleClickOutside);
+      window.clearTimeout(timeoutId);
+      document.removeEventListener('mousedown', handlePointerDown);
       window.removeEventListener('scroll', handleScroll, true);
     };
   }, [openMenu]);
   (0, _react.useEffect)(function () {
+    if (!openMenu) return;
     var scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
     if (!scrollbarHandle) return;
     var observer = new MutationObserver(function (mutations) {
@@ -134,10 +143,21 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     setOpenMenu(false);
   };
   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);
+    return isActionVisible(item, rowData, rowIndex);
   }).length) != null ? _actionDropDown$filte2 : 0;
-  var portalTarget = (_document$getElementB = document.getElementById('portal-root')) != null ? _document$getElementB : document.body;
+  var portalTarget = document.getElementById('portal-root');
+  var toggleMenu = function toggleMenu() {
+    if (openMenu) {
+      setOpenMenu(false);
+      return;
+    }
+    (0, _verticalMenuCoordinator.closeOtherVerticalMenus)(menuId);
+    updateMenuPosition();
+    // Delay open so table/document click handlers do not close it immediately.
+    window.setTimeout(function () {
+      setOpenMenu(true);
+    }, 0);
+  };
   var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", {
     className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
     ref: menuRef,
@@ -151,14 +171,12 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "py-1"
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
-    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", {
+    return isActionVisible(item, rowData, rowIndex) ? /*#__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) {
-        var _item$action;
         e.preventDefault();
-        (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
+        e.stopPropagation();
         handleMenuItemClick(item);
       }
     }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
@@ -176,16 +194,11 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     className: "inline-block vertical-menu-dropdown-wrapper"
   }, visibleCount > 0 && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
-    className: "vertical-menu-trigger-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: function onClick(event) {
       event.stopPropagation();
-      if (openMenu) {
-        setOpenMenu(false);
-        return;
-      }
-      (0, _verticalMenuCoordinator.closeOtherVerticalMenus)(menuId);
-      updateMenuPosition();
-      setOpenMenu(true);
+      event.preventDefault();
+      toggleMenu();
     },
     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/tablecalc.d.ts

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

package/lib/qbsTable/utilities/tablecalc.js

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

package/lib/utils/useCellDescriptor.js

@@ -158,7 +158,6 @@ 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,6 +31,7 @@ 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,7 +72,8 @@ var useScrollListener = function useScrollListener(props) {
     contentHeight = props.contentHeight,
     headerHeight = props.headerHeight,
     rtl = props.rtl,
-    tableKey = props.tableKey;
+    tableKey = props.tableKey,
+    handleInfiniteScroll = props.handleInfiniteScroll;
   var wheelListener = (0, _react.useRef)(null);
   var touchStartListener = (0, _react.useRef)(null);
   var touchMoveListener = (0, _react.useRef)(null);
@@ -134,6 +135,9 @@ 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,7 +215,6 @@ 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;
@@ -245,7 +248,6 @@ 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,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "2.2.17",
+  "version": "2.2.19",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -80,7 +80,7 @@
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@faker-js/faker": "^7.6.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.2.0",
     "@types/lodash": "^4.14.165",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^19.0.11",

package/src/Cell.tsx

@@ -144,11 +144,13 @@ 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: align,
+    textAlign: resolvedAlign,
     [paddingKey]: isTreeCol ? depth * LAYER_WIDTH + 10 : style?.[paddingKey] || style?.padding
   };
 

package/src/HeaderCell.tsx

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