qbs-react-grid 2.2.17 → 2.2.18

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

@@ -23,9 +23,18 @@ export var defaultQbsTableLabels = {
   viewLess: 'View Less',
   actions: 'Actions'
 };
+
+/** @deprecated Use defaultQbsTableLabels */
+export var DEFAULT_QBS_TABLE_LABELS = defaultQbsTableLabels;
 export var mergeQbsTableLabels = function mergeQbsTableLabels(overrides) {
-  return _extends({}, defaultQbsTableLabels, overrides);
+  var _overrides$showingRan;
+  return _extends({}, defaultQbsTableLabels, overrides, {
+    showingRange: (_overrides$showingRan = overrides === null || overrides === void 0 ? void 0 : overrides.showingRange) != null ? _overrides$showingRan : defaultQbsTableLabels.showingRange
+  });
 };
+
+/** @deprecated Use mergeQbsTableLabels */
+export var mergeLabels = mergeQbsTableLabels;
 export var formatSelectedItems = function formatSelectedItems(count, labels) {
   var merged = mergeQbsTableLabels(labels);
   return merged.selectedItems + " (" + count + ")";

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

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { mergeLabels } from '../labels';
 import CardMenuDropdown from './CardMenuDropdown';
 import { handleCellFormat } from './handleFormatCell';
 import { ArrowUpIcon } from './icons';
@@ -15,7 +16,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 = mergeLabels(labelsProp);
   var _useState = useState(false),
     viewMore = _useState[0],
     setViewMore = _useState[1];
@@ -64,10 +67,11 @@ var CardComponent = function CardComponent(_ref) {
     rowData: data,
     iconName: "more",
     rowIndex: index,
-    handleMenuActions: handleMenuActions
+    handleMenuActions: handleMenuActions,
+    labels: labels
   })), columns.length > initialDisplayCount && /*#__PURE__*/React.createElement(TooltipComponent, {
     tableBodyRef: useCardRef,
-    title: viewMore ? ' View Less' : 'View More',
+    title: viewMore ? labels.viewLess : labels.viewMore,
     enabled: false
   }, /*#__PURE__*/React.createElement("button", {
     onClick: toggleViewMore,

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

@@ -1,11 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { mergeLabels } from '../labels';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
-    rowData = _ref.rowData;
+    rowData = _ref.rowData,
+    labelsProp = _ref.labels;
+  var labels = mergeLabels(labelsProp);
   var _useState = useState(false),
     openMenu = _useState[0],
     setOpenMenu = _useState[1];
@@ -32,7 +34,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',
@@ -65,9 +66,8 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     onClick: toggleMenu,
     ref: menuButtonRef
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
-    title: "Actions",
-    enabled: false,
-    ref: menuButtonRef
+    title: labels.actions,
+    enabled: false
   }, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && /*#__PURE__*/React.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/es/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/es/qbsTable/utilities/SearchInput.js

@@ -1,6 +1,8 @@
 import React, { memo, useCallback } from 'react';
 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;
@@ -24,7 +26,7 @@ var SearchInput = function SearchInput(_ref) {
     placeholder: placeholder,
     value: searchValue != null ? searchValue : '',
     onChange: handleInputChange,
-    "aria-label": "Search"
+    "aria-label": searchAriaLabel
   }), /*#__PURE__*/React.createElement("button", {
     className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
     onClick: function onClick() {

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

@@ -1,5 +1,10 @@
-export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber) {
+export 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/es/utils/useCellDescriptor.js

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

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

@@ -86,10 +86,11 @@ 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: align
+    textAlign: resolvedAlign
   }, _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,4 +1,5 @@
 import { FC } from 'react';
+import { type QbsTableLabels } from './qbsTable/labels';
 type PageProps = {
     paginationProps: {
         total?: number;
@@ -9,6 +10,8 @@ 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,6 +5,7 @@ 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; }
@@ -41,7 +42,10 @@ var PageIndex = function PageIndex(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderPageNumbers());
 };
 var Pagination = function Pagination(_ref2) {
-  var paginationProps = _ref2.paginationProps;
+  var paginationProps = _ref2.paginationProps,
+    labelsProp = _ref2.labels,
+    dataTheme = _ref2.dataTheme;
+  var labels = (0, _labels.mergeLabels)(labelsProp);
   var _paginationProps$drop = paginationProps.dropOptions,
     dropOptions = _paginationProps$drop === void 0 ? [10, 20, 50, 100, 200] : _paginationProps$drop,
     _paginationProps$curr = paginationProps.currentPage,
@@ -82,13 +86,14 @@ 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)), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage, labels.showingRange)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-pagination-right-block"
   }, /*#__PURE__*/_react["default"].createElement("button", {
     className: "qbs-table-icon-container",
@@ -167,7 +172,7 @@ var Pagination = function Pagination(_ref2) {
     className: "qbs-table-pagination-flexBox"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "qbs-table-pagination-text"
-  }, "Items per page"), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
+  }, labels.itemsPerPage), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
     options: dropData,
     selectedValue: rowsPerPageState,
     onChange: handleRowsPerPage

package/lib/Table.d.ts

@@ -99,6 +99,7 @@ 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 */
@@ -123,6 +124,7 @@ 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
@@ -132,6 +134,7 @@ 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", "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"],
+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"],
   _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,10 +77,6 @@ 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,
@@ -118,18 +114,19 @@ 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;
@@ -188,7 +185,6 @@ 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) {
@@ -300,7 +296,8 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       onScroll: onScroll,
       onTouchStart: onTouchStart,
       onTouchMove: onTouchMove,
-      onTouchEnd: onTouchEnd
+      onTouchEnd: onTouchEnd,
+      handleInfiniteScroll: handleInfiniteScroll
     }),
     isScrolling = _useScrollListener.isScrolling,
     isChildFocused = _useScrollListener.isChildFocused,
@@ -624,7 +621,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
           width: tableWidth.current
         },
         length: tableWidth.current,
-        onScroll: onScrollHorizontal,
+        onScroll: function onScroll(delta) {
+          onScrollHorizontal(delta);
+        },
         scrollLength: contentWidth.current,
         ref: scrollbarXRef
       }));
@@ -788,7 +787,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       role: "rowgroup",
       className: prefix('body-row-wrapper'),
       style: bodyStyles,
-      onScroll: onScrollBody
+      onScroll: function onScroll(e) {
+        onScrollBody === null || onScrollBody === void 0 ? void 0 : onScrollBody(e); // existing handler
+      }
     }, !loading && /*#__PURE__*/_react["default"].createElement("div", {
       style: wheelStyles,
       className: prefix('body-wheel-area'),
@@ -799,7 +800,12 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }) : null, visibleRows.current, bottomHideHeight ? /*#__PURE__*/_react["default"].createElement(_Row["default"], {
       style: bottomRowStyles,
       className: "virtualized"
-    }) : null), /*#__PURE__*/_react["default"].createElement(_EmptyMessage["default"], {
+    }) : 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"], {
       locale: locale,
       renderEmpty: renderEmpty,
       addPrefix: prefix,

package/lib/index.d.ts

@@ -13,5 +13,5 @@ export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
 export type { QbsTableProps } from './qbsTable/commontypes';
 export type { QbsTableLabels } from './qbsTable/labels';
-export { mergeQbsTableLabels, defaultQbsTableLabels, formatSelectedItems, } from './qbsTable/labels';
+export { mergeQbsTableLabels, mergeLabels, defaultQbsTableLabels, DEFAULT_QBS_TABLE_LABELS, formatSelectedItems, } from './qbsTable/labels';
 export type { StandardProps, SortType, RowDataType, RowKeyType, TableSizeChangeEventName } from './@types/common';

package/lib/index.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.mergeQbsTableLabels = exports.formatSelectedItems = exports.defaultQbsTableLabels = exports.Table = exports.QbsTable = exports.Pagination = exports.HeaderCell = exports.ColumnGroup = exports.Column = exports.Cell = void 0;
+exports.mergeQbsTableLabels = exports.mergeLabels = exports.formatSelectedItems = exports.defaultQbsTableLabels = exports.Table = exports.QbsTable = exports.Pagination = exports.HeaderCell = exports.DEFAULT_QBS_TABLE_LABELS = exports.ColumnGroup = exports.Column = exports.Cell = void 0;
 var _Table = _interopRequireDefault(require("./Table"));
 exports.Table = _Table["default"];
 var _Column = _interopRequireDefault(require("./Column"));
@@ -19,5 +19,7 @@ var _Pagination = _interopRequireDefault(require("./Pagination"));
 exports.Pagination = _Pagination["default"];
 var _labels = require("./qbsTable/labels");
 exports.mergeQbsTableLabels = _labels.mergeQbsTableLabels;
+exports.mergeLabels = _labels.mergeLabels;
 exports.defaultQbsTableLabels = _labels.defaultQbsTableLabels;
+exports.DEFAULT_QBS_TABLE_LABELS = _labels.DEFAULT_QBS_TABLE_LABELS;
 exports.formatSelectedItems = _labels.formatSelectedItems;

package/lib/less/pagination.less

@@ -5,8 +5,8 @@
   min-height: 40px;
   align-items: center;
   border-radius: 0 0 4px 4px;
-  border-top: 1px solid #d6d8dc;
-  background: #fff;
+  border-top: 1px solid var(--base-gray-border, #d6d8dc);
+  background: var(--table-bg, #fff);
   &-header {
     border-bottom: 1px solid #eee;
     position: absolute;
@@ -27,8 +27,8 @@
     font-weight: 500;
     line-height: 20px;
     border-radius: 6px;
-    border: 1px solid #d6d8dc;
-    background: #fff;
+    border: 1px solid var(--base-gray-border, #d6d8dc);
+    background: var(--gray-light-1, #fff);
   }
   .qbs-table-icon-container {
     padding: 0;
@@ -109,7 +109,7 @@
     font-style: normal;
     font-weight: 500;
     line-height: 20px;
-    color: #313131;
+    color: var(--gray-dark-3, #313131);
   }
 }
 
@@ -125,7 +125,7 @@
 .custom-select-trigger {
   padding: 2px 8px;
   cursor: pointer;
-  border: 1px solid #d6d8dc;
+  border: 1px solid var(--base-gray-border, #d6d8dc);
   border-radius: 4px;
   min-width: 65px;
   position: relative;
@@ -140,7 +140,7 @@
   list-style: none;
   margin: 2px 0 0;
   padding: 0;
-  background: #fff;
+  background: var(--gray-light-1, #fff);
   border-radius: 8px;
   box-shadow: 0 8px 20px 0 #00000026;
 }
@@ -158,7 +158,7 @@ ul.custom-select-options.top {
 
 .custom-select-option:hover,
 .custom-select-option.selected {
-  background-color: #f0f0f0;
+  background-color: var(--table-row-hover-bg, #f0f0f0);
 }
 
 .custom-select-trigger:before {
@@ -167,7 +167,7 @@ ul.custom-select-options.top {
   right: 10px;
   top: 6px;
   font-weight: bold;
-  border: solid black;
+  border: solid var(--gray-dark-3, black);
   border-width: 0 1px 1px 0;
   display: inline-block;
   padding: 3px;