qbs-react-grid 2.2.0 → 2.2.3

package/src/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/src/qbsTable/QbsTable.tsx

@@ -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 { QbsColumnProps, QbsTableProps } from './commontypes';
 import { mergeLabels } from './labels';
@@ -61,6 +62,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   rowExpand = false,
   actionProps = [],
   theme,
+  rtl: rtlProp,
   handleMenuActions,
   onRowClick,
   expandedRowKeys,
@@ -118,6 +120,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
     () => theme ?? (typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) ?? 'light',
     [theme]
   );
+  const rtl = rtlProp ?? isRTL();
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
@@ -629,7 +632,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
   };
 
   return (
-    <div className={`qbs-table ${classes.tableContainerClass}`} data-theme={dataTheme}>
+    <div
+      className={`qbs-table ${classes.tableContainerClass}`}
+      data-theme={dataTheme}
+      dir={rtl ? 'rtl' : 'ltr'}
+    >
       {toolbar && <ToolBar {...toolbarProps} />}
       <div className="qbs-table-border-wrap">
         {tableViewToggle ? (
@@ -638,6 +645,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
             key={tableKey + REFRESH_KEY}
             tableKey={tableKey}
             data={data}
+            rtl={rtl}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
             wordWrap={wordWrap}

package/src/qbsTable/commontypes.ts

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

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -81,7 +81,7 @@ const CardMenuDropdown: React.FC<Props> = ({
   return (
     <div className="dropdown text-black dark:text-white dark:bg-[#424242] bg-white" ref={menuRef}>
       <button className="dropdown-toggle" onClick={toggleMenu} ref={menuButtonRef}>
-        <TooltipComponent title={labels.actions} enabled={false} ref={menuButtonRef}>
+        <TooltipComponent title={labels.actions} enabled={false}>
           <ThreeDotIcon />
         </TooltipComponent>
       </button>

package/src/qbsTable/utilities/ToolTip.tsx

@@ -1,88 +1,149 @@
-// 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';
-
-const TooltipComponent: React.FC<any> = ({ title, children, tableBodyRef }) => {
-  const [dropdownPosition, setDropdownPosition] = useState<'up' | 'down'>('down');
-  const menuButtonRef = useRef<HTMLElement>(null);
-
-  const adjustDropdownPosition = () => {
-    if (menuButtonRef.current && tableBodyRef?.current) {
-      const triggerRect = menuButtonRef.current.getBoundingClientRect();
-      const tableRect = tableBodyRef.current.getBoundingClientRect();
-
-      const spaceAbove = triggerRect.top - tableRect.top;
-      const spaceBelow = tableRect.bottom - triggerRect.bottom;
-
-      setDropdownPosition(spaceAbove > spaceBelow ? 'up' : 'down');
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+type TooltipComponentProps = {
+  title?: React.ReactNode;
+  children: React.ReactNode;
+  tableBodyRef?: React.RefObject<HTMLDivElement | null>;
+  /** When false, renders children only (no tooltip). */
+  enabled?: boolean;
+};
+
+const VIEWPORT_PADDING = 8;
+const TOOLTIP_GAP = 8;
+
+const TooltipComponent: React.FC<TooltipComponentProps> = ({
+  title,
+  children,
+  tableBodyRef,
+  enabled = true,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [positioned, setPositioned] = useState(false);
+  const [placement, setPlacement] = useState<'up' | 'down'>('down');
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  const [arrowOffset, setArrowOffset] = useState(0);
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const tooltipRef = useRef<HTMLSpanElement>(null);
+
+  const updatePosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    if (!trigger || !tooltip) {
+      return;
+    }
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const boundaryRect =
+      tableBodyRef?.current?.getBoundingClientRect() ??
+      trigger.closest('.qbs-table')?.getBoundingClientRect();
+
+    const spaceAbove = boundaryRect
+      ? triggerRect.top - boundaryRect.top
+      : triggerRect.top;
+    const spaceBelow = boundaryRect
+      ? boundaryRect.bottom - triggerRect.bottom
+      : window.innerHeight - triggerRect.bottom;
+
+    const nextPlacement =
+      spaceBelow >= tooltipRect.height + TOOLTIP_GAP || spaceBelow >= spaceAbove ? 'down' : 'up';
+
+    const triggerCenter = triggerRect.left + triggerRect.width / 2;
+    let 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;
     }
+
+    const top =
+      nextPlacement === 'down'
+        ? triggerRect.bottom + TOOLTIP_GAP
+        : triggerRect.top - tooltipRect.height - TOOLTIP_GAP;
+
+    setPlacement(nextPlacement);
+    setCoords({ top, left });
+    setArrowOffset(triggerCenter - left);
+    setPositioned(true);
+  }, [tableBodyRef]);
+
+  const showTooltip = () => {
+    setPositioned(false);
+    setVisible(true);
+  };
+
+  const hideTooltip = () => {
+    setVisible(false);
+    setPositioned(false);
   };
 
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    updatePosition();
+    const frame = window.requestAnimationFrame(updatePosition);
+    return () => window.cancelAnimationFrame(frame);
+  }, [visible, title, updatePosition]);
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    const handleReposition = () => updatePosition();
+    window.addEventListener('resize', handleReposition);
+    window.addEventListener('scroll', handleReposition, true);
+    return () => {
+      window.removeEventListener('resize', handleReposition);
+      window.removeEventListener('scroll', handleReposition, true);
+    };
+  }, [visible, updatePosition]);
+
+  if (!title || enabled === false) {
+    return <>{children}</>;
+  }
+
+  const portalRoot = typeof document !== 'undefined' ? document.body : null;
+
   return (
-    <div
-      className={`qbs-table-tooltip ${dropdownPosition}`}
-      onMouseEnter={adjustDropdownPosition}
-      onMouseLeave={() => {
-        const tooltip = menuButtonRef?.current?.querySelector('.tooltiptext') as HTMLElement;
-        if (tooltip) {
-          tooltip.style.visibility = 'hidden';
-          tooltip.style.opacity = '0';
-        }
-      }}
-    >
+    <>
       <span
-        ref={menuButtonRef}
-        style={{ display: 'flex' }}
-        onMouseEnter={() => {
-          adjustDropdownPosition();
-          const tooltip = menuButtonRef?.current?.querySelector('.tooltiptext') as HTMLElement;
-          if (tooltip) {
-            tooltip.style.visibility = 'visible';
-            tooltip.style.opacity = '1';
-          }
-        }}
+        ref={triggerRef}
+        className="qbs-table-tooltip-trigger"
+        style={{ display: 'inline-flex' }}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onFocus={showTooltip}
+        onBlur={hideTooltip}
       >
         {children}
-        <span className="tooltiptext">{title}</span>
       </span>
-    </div>
+      {visible &&
+        portalRoot &&
+        ReactDOM.createPortal(
+          <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`,
+              } as React.CSSProperties
+            }
+          >
+            {title}
+          </span>,
+          portalRoot,
+        )}
+    </>
   );
 };
 

package/src/qbsTable/utilities/VerticalDropDownMenu.tsx

@@ -132,7 +132,7 @@ const VerticalMenuDropdown: React.FC<Props> = ({
   const portalTarget = document.getElementById('portal-root');
   const dropdownContent = (
     <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,
@@ -146,7 +146,7 @@ const VerticalMenuDropdown: React.FC<Props> = ({
           !item?.hidden && !item?.hide?.(rowData, rowIndex) ? (
             <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={e => {
                 e.preventDefault();
                 item.action?.(item);
@@ -171,7 +171,7 @@ const VerticalMenuDropdown: React.FC<Props> = ({
       <div className="inline-block vertical-menu-dropdown-wrapper">
         {handleShowHideMenu() > 0 && (
           <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}
           >

package/src/qbsTable/utilities/icons.tsx

@@ -5,7 +5,7 @@ export const ThreeDotIcon: React.FC<any> = () => {
     <svg width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <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"