qbs-react-grid 2.2.0 → 2.2.3

package/es/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/es/less/qbs-table.less

@@ -202,6 +202,59 @@
   background-color: #262626;
   color: #f5f5f5;
 }
+
+.qbs-table[data-theme='dark'] {
+  .rs-table,
+  .rs-table-body-row-wrapper,
+  .rs-table-row,
+  .rs-table-cell,
+  .rs-table-cell-group,
+  .rs-table-row-header,
+  .rs-table-row-header .rs-table-cell {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+
+  .rs-table-cell-content {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+
+  .rs-table-row-header .rs-table-cell-content,
+  .rs-table-cell-header .rs-table-cell-content {
+    background-color: #1b2028;
+    color: #f5f5f5;
+  }
+
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell,
+  .rs-table-hover .rs-table-body-row-wrapper .rs-table-row:hover .rs-table-cell-content {
+    background-color: #1d2633;
+  }
+
+  .rs-table-cell {
+    border-color: #3d3d3d;
+  }
+
+  .rs-table-scrollbar {
+    background-color: #2d2d2d;
+  }
+
+  .rs-table-scrollbar-handle {
+    background-color: #5a5a5a;
+  }
+}
+
+.qbs-table[dir='rtl'] {
+  .rs-table-cell-header .rs-table-cell-content {
+    text-align: right;
+  }
+
+  .rs-table-cell-wrap {
+    justify-content: flex-start;
+    width: 100%;
+  }
+}
 /* Dropdown container */
 .qbs-table-menu-dropdown {
   position: relative;
@@ -334,71 +387,98 @@
 .qbs-table-tooltip {
   cursor: pointer;
   position: relative;
-  width: auto;
-  display: flex;
+  display: inline-flex;
 }
 
 .qbs-table-tooltip .tooltiptext {
   visibility: hidden;
-  background-color: black;
-  color: white;
+  background-color: var(--tooltip-bg, #222);
+  color: var(--tooltip-text, #fff);
   text-align: center;
-  padding: 6px;
-  border-radius: 4px;
+  padding: 6px 10px;
+  border-radius: 6px;
   position: absolute;
-  z-index: 9999;
+  z-index: 10050;
   opacity: 0;
-  transition: opacity 0.3s;
+  transition: opacity 0.15s ease;
   font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
+  font-weight: 500;
   line-height: 16px;
-  min-width: 100px;
-  max-width: 200px;
+  white-space: nowrap;
+  max-width: min(280px, 90vw);
+  pointer-events: none;
+  inset-inline-start: 50%;
+  translate: -50% 0;
 }
 
 .qbs-table-tooltip.up .tooltiptext {
-  bottom: calc(100% + 10px);
-  right: -8px;
-  left: unset;
+  bottom: calc(100% + 8px);
+  top: auto;
 }
 
 .qbs-table-tooltip.down .tooltiptext {
-  right: -10px;
   top: calc(100% + 8px);
+  bottom: auto;
 }
 
-// .qbs-table-tooltip:hover .tooltiptext {
-//   visibility: visible;
-//   opacity: 1;
-// }
-
 .qbs-table-tooltip .tooltiptext::after {
   content: '';
   position: absolute;
-  border-width: 5px;
-  border-style: solid;
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  border: 5px solid transparent;
 }
 
 .qbs-table-tooltip.up .tooltiptext::after {
-  border-color: black transparent transparent !important;
-  right: 12px !important;
-  margin-left: -5px !important;
-  top: 100% !important;
-  left: unset !important;
+  top: 100%;
+  border-top-color: var(--tooltip-bg, #222);
 }
 
 .qbs-table-tooltip.down .tooltiptext::after {
-  border-color: transparent transparent black;
-  bottom: 100% !important;
-  right: 12px !important;
-  margin-left: -5px !important;
-  left: unset !important;
+  bottom: 100%;
+  border-bottom-color: var(--tooltip-bg, #222);
 }
-.qbs-table-tooltip.down .tooltiptext {
-  top: 145% !important;
-  right: -10px !important;
-  left: auto !important;
+
+.qbs-table-tooltip-floating.tooltiptext {
+  position: fixed;
+  z-index: 10050;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  background-color: var(--tooltip-bg, #222);
+  color: var(--tooltip-text, #fff);
+  text-align: center;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+  max-width: min(280px, 90vw);
+  transition: opacity 0.15s ease;
+}
+
+.qbs-table-tooltip-floating.tooltiptext.is-positioned {
+  visibility: visible;
+  opacity: 1;
+}
+
+.qbs-table-tooltip-floating.tooltiptext::after {
+  content: '';
+  position: absolute;
+  left: var(--tooltip-arrow-offset, 50%);
+  translate: -50% 0;
+  border: 5px solid transparent;
+}
+
+.qbs-table-tooltip-floating--down.tooltiptext::after {
+  bottom: 100%;
+  border-bottom-color: var(--tooltip-bg, #222);
+}
+
+.qbs-table-tooltip-floating--up.tooltiptext::after {
+  top: 100%;
+  border-top-color: var(--tooltip-bg, #222);
 }
 .rs-table-row {
   overflow: visible !important;

package/es/qbsTable/QbsTable.js

@@ -6,6 +6,7 @@ import ColumnGroup from '../ColumnGroup';
 import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
+import isRTL from '../utils/isRTL';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { mergeLabels } from './labels';
 import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
@@ -66,6 +67,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$actionProps = _ref.actionProps,
     actionProps = _ref$actionProps === void 0 ? [] : _ref$actionProps,
     theme = _ref.theme,
+    rtlProp = _ref.rtl,
     handleMenuActions = _ref.handleMenuActions,
     onRowClick = _ref.onRowClick,
     expandedRowKeys = _ref.expandedRowKeys,
@@ -146,6 +148,7 @@ var QbsTable = function QbsTable(_ref) {
     var _ref2;
     return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
   }, [theme]);
+  var rtl = rtlProp != null ? rtlProp : isRTL();
   var _useState4 = useState(false),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
@@ -611,7 +614,8 @@ var QbsTable = function QbsTable(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table " + classes.tableContainerClass,
-    "data-theme": dataTheme
+    "data-theme": dataTheme,
+    dir: rtl ? 'rtl' : 'ltr'
   }, toolbar && /*#__PURE__*/React.createElement(ToolBar, toolbarProps), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
@@ -619,6 +623,7 @@ var QbsTable = function QbsTable(_ref) {
     key: tableKey + REFRESH_KEY,
     tableKey: tableKey,
     data: data,
+    rtl: rtl,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
     wordWrap: wordWrap,

package/es/qbsTable/commontypes.d.ts

@@ -71,6 +71,7 @@ export interface QbsTableProps {
     searchValue?: string;
     handleSearchValue?: (value?: string) => void;
     theme?: string;
+    rtl?: boolean;
     onRowClick?: (data: any) => void;
     cellBordered?: boolean;
     bordered?: boolean;

package/es/qbsTable/utilities/CardMenuDropdown.js

@@ -67,8 +67,7 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     ref: menuButtonRef
   }, /*#__PURE__*/React.createElement(TooltipComponent, {
     title: labels.actions,
-    enabled: false,
-    ref: menuButtonRef
+    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/ToolTip.d.ts

@@ -1,3 +1,10 @@
 import React from 'react';
-declare const TooltipComponent: React.FC<any>;
+type TooltipComponentProps = {
+    title?: React.ReactNode;
+    children: React.ReactNode;
+    tableBodyRef?: React.RefObject<HTMLDivElement | null>;
+    /** When false, renders children only (no tooltip). */
+    enabled?: boolean;
+};
+declare const TooltipComponent: React.FC<TooltipComponentProps>;
 export default TooltipComponent;

package/es/qbsTable/utilities/ToolTip.js

@@ -1,87 +1,117 @@
-// import React, { useRef, useState } from 'react';
-
-// const TooltipComponent: React.FC<any> = ({ title, children, tableBodyRef }) => {
-//   const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
-//   const dropRef = useRef(null);
-//   const menuButtonRef = useRef<HTMLElement>(null);
-//   const adjustDropdownPosition = () => {
-//     if (menuButtonRef.current && tableBodyRef?.current) {
-//       const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
-//       const tableRect = tableBodyRef.current.getBoundingClientRect();
-//       // Calculate positions relative to the table
-//       const spaceAbove = inputBoxRect.top - tableRect.top;
-//       const spaceBelow = tableRect.bottom - inputBoxRect.bottom;
-
-//       if (spaceAbove > spaceBelow) {
-//         setDropdownPosition('top-position');
-//       } else {
-//         setDropdownPosition('bottom-position');
-//       }
-//     }
-//   };
-
-//   return (
-//     <div className={`qbs-table-tooltip ${dropdownPosition == 'bottom-position' ? 'down' : 'up'} `}>
-//       <span
-//         ref={menuButtonRef}
-//         style={{ display: 'flex' }}
-//         onMouseEnter={() => adjustDropdownPosition()}
-//       >
-//         {children}
-//       </span>
-//       <span ref={dropRef} className={'tooltiptext'}>
-//         {title}
-//       </span>
-//     </div>
-//   );
-// };
-
-// export default TooltipComponent;
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+var VIEWPORT_PADDING = 8;
+var TOOLTIP_GAP = 8;
 var TooltipComponent = function TooltipComponent(_ref) {
   var title = _ref.title,
     children = _ref.children,
-    tableBodyRef = _ref.tableBodyRef;
-  var _useState = useState('down'),
-    dropdownPosition = _useState[0],
-    setDropdownPosition = _useState[1];
-  var menuButtonRef = useRef(null);
-  var adjustDropdownPosition = function adjustDropdownPosition() {
-    if (menuButtonRef.current && tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) {
-      var triggerRect = menuButtonRef.current.getBoundingClientRect();
-      var tableRect = tableBodyRef.current.getBoundingClientRect();
-      var spaceAbove = triggerRect.top - tableRect.top;
-      var spaceBelow = tableRect.bottom - triggerRect.bottom;
-      setDropdownPosition(spaceAbove > spaceBelow ? 'up' : 'down');
+    tableBodyRef = _ref.tableBodyRef,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
+  var _useState = useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  var _useState2 = useState(false),
+    positioned = _useState2[0],
+    setPositioned = _useState2[1];
+  var _useState3 = useState('down'),
+    placement = _useState3[0],
+    setPlacement = _useState3[1];
+  var _useState4 = useState({
+      top: 0,
+      left: 0
+    }),
+    coords = _useState4[0],
+    setCoords = _useState4[1];
+  var _useState5 = useState(0),
+    arrowOffset = _useState5[0],
+    setArrowOffset = _useState5[1];
+  var triggerRef = useRef(null);
+  var tooltipRef = useRef(null);
+  var updatePosition = useCallback(function () {
+    var _tableBodyRef$current, _tableBodyRef$current2, _trigger$closest;
+    var trigger = triggerRef.current;
+    var tooltip = tooltipRef.current;
+    if (!trigger || !tooltip) {
+      return;
     }
+    var triggerRect = trigger.getBoundingClientRect();
+    var tooltipRect = tooltip.getBoundingClientRect();
+    var boundaryRect = (_tableBodyRef$current = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.getBoundingClientRect()) != null ? _tableBodyRef$current : (_trigger$closest = trigger.closest('.qbs-table')) === null || _trigger$closest === void 0 ? void 0 : _trigger$closest.getBoundingClientRect();
+    var spaceAbove = boundaryRect ? triggerRect.top - boundaryRect.top : triggerRect.top;
+    var spaceBelow = boundaryRect ? boundaryRect.bottom - triggerRect.bottom : window.innerHeight - triggerRect.bottom;
+    var nextPlacement = spaceBelow >= tooltipRect.height + TOOLTIP_GAP || spaceBelow >= spaceAbove ? 'down' : 'up';
+    var triggerCenter = triggerRect.left + triggerRect.width / 2;
+    var left = triggerCenter - tooltipRect.width / 2;
+    if (left < VIEWPORT_PADDING) {
+      left = VIEWPORT_PADDING;
+    } else if (left + tooltipRect.width > window.innerWidth - VIEWPORT_PADDING) {
+      left = window.innerWidth - VIEWPORT_PADDING - tooltipRect.width;
+    }
+    var top = nextPlacement === 'down' ? triggerRect.bottom + TOOLTIP_GAP : triggerRect.top - tooltipRect.height - TOOLTIP_GAP;
+    setPlacement(nextPlacement);
+    setCoords({
+      top: top,
+      left: left
+    });
+    setArrowOffset(triggerCenter - left);
+    setPositioned(true);
+  }, [tableBodyRef]);
+  var showTooltip = function showTooltip() {
+    setPositioned(false);
+    setVisible(true);
+  };
+  var hideTooltip = function hideTooltip() {
+    setVisible(false);
+    setPositioned(false);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "qbs-table-tooltip " + dropdownPosition,
-    onMouseEnter: adjustDropdownPosition,
-    onMouseLeave: function onMouseLeave() {
-      var _menuButtonRef$curren;
-      var tooltip = menuButtonRef === null || menuButtonRef === void 0 ? void 0 : (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.querySelector('.tooltiptext');
-      if (tooltip) {
-        tooltip.style.visibility = 'hidden';
-        tooltip.style.opacity = '0';
-      }
+  useLayoutEffect(function () {
+    if (!visible) {
+      return;
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    ref: menuButtonRef,
+    updatePosition();
+    var frame = window.requestAnimationFrame(updatePosition);
+    return function () {
+      return window.cancelAnimationFrame(frame);
+    };
+  }, [visible, title, updatePosition]);
+  useEffect(function () {
+    if (!visible) {
+      return;
+    }
+    var handleReposition = function handleReposition() {
+      return updatePosition();
+    };
+    window.addEventListener('resize', handleReposition);
+    window.addEventListener('scroll', handleReposition, true);
+    return function () {
+      window.removeEventListener('resize', handleReposition);
+      window.removeEventListener('scroll', handleReposition, true);
+    };
+  }, [visible, updatePosition]);
+  if (!title || enabled === false) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  var portalRoot = typeof document !== 'undefined' ? document.body : null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    ref: triggerRef,
+    className: "qbs-table-tooltip-trigger",
     style: {
-      display: 'flex'
+      display: 'inline-flex'
     },
-    onMouseEnter: function onMouseEnter() {
-      var _menuButtonRef$curren2;
-      adjustDropdownPosition();
-      var tooltip = menuButtonRef === null || menuButtonRef === void 0 ? void 0 : (_menuButtonRef$curren2 = menuButtonRef.current) === null || _menuButtonRef$curren2 === void 0 ? void 0 : _menuButtonRef$curren2.querySelector('.tooltiptext');
-      if (tooltip) {
-        tooltip.style.visibility = 'visible';
-        tooltip.style.opacity = '1';
-      }
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip
+  }, children), visible && portalRoot && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("span", {
+    ref: tooltipRef,
+    role: "tooltip",
+    className: "qbs-table-tooltip-floating tooltiptext qbs-table-tooltip-floating--" + placement + " " + (positioned ? 'is-positioned' : ''),
+    style: {
+      top: coords.top,
+      left: coords.left,
+      '--tooltip-arrow-offset': arrowOffset + "px"
     }
-  }, children, /*#__PURE__*/React.createElement("span", {
-    className: "tooltiptext"
-  }, title)));
+  }, title), portalRoot));
 };
 export default TooltipComponent;

package/es/qbsTable/utilities/VerticalDropDownMenu.js

@@ -123,7 +123,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
   };
   var portalTarget = document.getElementById('portal-root');
   var dropdownContent = /*#__PURE__*/React.createElement("div", {
-    className: "absolute z-50 min-w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 vertical-menu-dropdown-content",
+    className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
     ref: menuRef,
     style: {
       width: 200,
@@ -137,7 +137,7 @@ var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
     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", {
       key: item.title,
-      className: "vertical-menu-item px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer flex items-center gap-2 transition-colors",
+      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();
@@ -158,7 +158,7 @@ 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", {
-    className: "vertical-menu-trigger-button p-2 rounded hover:bg-gray-100 transition-colors",
+    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,
     ref: menuButtonRef
   }, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/ReactDOM.createPortal(dropdownContent, portalTarget));

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: "#313131",
+    stroke: "currentColor",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"

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