qbs-react-grid 2.2.16 → 2.2.18

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/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.16",
+  "version": "2.2.18",
   "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}

package/src/Table.tsx

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

package/src/customSelect.tsx

@@ -1,88 +1,88 @@
-import React, { FC, useState, useEffect, useRef } from 'react';
-
-type CustomSelectProps = {
-  options: number[];
-  selectedValue: number;
-  onChange: (value: number) => void;
-};
-
-const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState('bottom');
-  const ref = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLDivElement>(null);
-
-  const adjustDropdownPosition = () => {
-    if (inputRef.current) {
-      const inputBoxRect = inputRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-
-      const spaceAbove = inputBoxRect.top;
-      const spaceBelow = viewportHeight - inputBoxRect.bottom;
-
-      if (spaceAbove > spaceBelow) {
-        setDropdownPosition('top');
-      } else {
-        setDropdownPosition('bottom');
-      }
-    }
-  };
-
-  const handleToggle = () => {
-    setIsOpen(prevIsOpen => !prevIsOpen);
-  };
-
-  const handleSelect = (value: number) => {
-    onChange(value);
-    setIsOpen(false);
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      adjustDropdownPosition();
-      window.addEventListener('resize', adjustDropdownPosition);
-    } else {
-      window.removeEventListener('resize', adjustDropdownPosition);
-    }
-
-    return () => {
-      window.removeEventListener('resize', adjustDropdownPosition);
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div className="custom-select" ref={ref}>
-      <div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
-        {selectedValue}
-      </div>
-      {isOpen && (
-        <ul className={`custom-select-options ${dropdownPosition}`}>
-          {options.map(option => (
-            <li
-              key={option}
-              className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
-              onClick={() => handleSelect(option)}
-            >
-              {option}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default CustomSelect;
+import React, { FC, useState, useEffect, useRef } from 'react';
+
+type CustomSelectProps = {
+  options: number[];
+  selectedValue: number;
+  onChange: (value: number) => void;
+};
+
+const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState('bottom');
+  const ref = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  const adjustDropdownPosition = () => {
+    if (inputRef.current) {
+      const inputBoxRect = inputRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      const spaceAbove = inputBoxRect.top;
+      const spaceBelow = viewportHeight - inputBoxRect.bottom;
+
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top');
+      } else {
+        setDropdownPosition('bottom');
+      }
+    }
+  };
+
+  const handleToggle = () => {
+    setIsOpen(prevIsOpen => !prevIsOpen);
+  };
+
+  const handleSelect = (value: number) => {
+    onChange(value);
+    setIsOpen(false);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      adjustDropdownPosition();
+      window.addEventListener('resize', adjustDropdownPosition);
+    } else {
+      window.removeEventListener('resize', adjustDropdownPosition);
+    }
+
+    return () => {
+      window.removeEventListener('resize', adjustDropdownPosition);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="custom-select" ref={ref}>
+      <div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
+        {selectedValue}
+      </div>
+      {isOpen && (
+        <ul className={`custom-select-options ${dropdownPosition}`}>
+          {options.map(option => (
+            <li
+              key={option}
+              className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
+              onClick={() => handleSelect(option)}
+            >
+              {option}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;

package/src/index.ts

@@ -15,7 +15,9 @@ export type { QbsTableProps } from './qbsTable/commontypes';
 export type { QbsTableLabels } from './qbsTable/labels';
 export {
   mergeQbsTableLabels,
+  mergeLabels,
   defaultQbsTableLabels,
+  DEFAULT_QBS_TABLE_LABELS,
   formatSelectedItems,
 } from './qbsTable/labels';
 export type {

package/src/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;

package/src/less/qbs-table.less

@@ -644,8 +644,7 @@
 }
 
 .qbs-table-column-popup--rtl .qbs-table-container .qbs-table-checkbox {
-  flex: 0 0 28px;
-  min-width: 28px;
+  margin-left: 12px;
 }
 
 .qbs-table-reset-link {