qbs-react-grid 2.2.1 → 2.2.4

package/src/less/qbs-table.less

@@ -387,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/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

@@ -10,7 +10,7 @@ type Props = {
   handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
   rowData?: any;
   dataTheme?: string;
-  tableBodyRef: React.RefObject<HTMLDivElement>;
+  tableBodyRef: React.RefObject<HTMLDivElement | null>;
   rowIndex?: number;
   wheelWrapperRef?: React.RefObject<HTMLDivElement>;
 };
@@ -87,42 +87,33 @@ const VerticalMenuDropdown: React.FC<Props> = ({
   const toggleMenu = () => {
     if (!openMenu && menuButtonRef.current) {
       const rect = menuButtonRef.current.getBoundingClientRect();
-      const windowHeight = window.innerHeight;
-      const menuHeight =
-        actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex)).length *
-        40; // 40px per menu item
-
-      // Get table boundaries for RTL positioning
-      const tableRect = tableBodyRef.current?.getBoundingClientRect();
+      const viewportPadding = 8;
+      const menuGap = 4;
       const dropdownWidth = 200;
+      const visibleItems =
+        actionDropDown?.filter(item => !item.hidden && !item?.hide?.(rowData, rowIndex)) ?? [];
+      const menuHeight = visibleItems.length * 40;
 
-      // Check if there's enough space below
-      const spaceBelow = windowHeight - rect.bottom;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const openBelow = spaceBelow >= menuHeight + menuGap;
 
-      let leftPosition = rect.left - dropdownWidth;
+      // Anchor to trigger; prefer opening toward inline-start (left in LTR).
+      let left = rect.right - dropdownWidth;
 
-      // For RTL, adjust positioning to stay within table bounds
-      if (document.documentElement.dir === 'rtl' && tableRect) {
-        // Calculate the right edge position for RTL
-        const rightEdge = rect.right;
-        leftPosition = Math.min(rightEdge, tableRect.right - dropdownWidth);
-        // Ensure it doesn't go beyond the left edge of the table
-        leftPosition = Math.max(leftPosition, tableRect.left);
+      if (left < viewportPadding) {
+        left = rect.left;
       }
-
-      if (spaceBelow >= menuHeight) {
-        // Open below
-        setPosition({
-          top: rect.bottom + window.scrollY - rect.height,
-          left: leftPosition
-        });
-      } else {
-        // Open above
-        setPosition({
-          top: rect.top + window.scrollY - menuHeight,
-          left: leftPosition
-        });
+      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
+        left = Math.max(viewportPadding, rect.left - dropdownWidth);
       }
+      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
+        left = window.innerWidth - viewportPadding - dropdownWidth;
+      }
+
+      setPosition({
+        top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
+        left,
+      });
     }
     setTimeout(() => {
       setOpenMenu(prev => !prev);
@@ -132,13 +123,13 @@ 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,
         top: position.top,
         left: position.left,
-        position: 'absolute'
+        position: 'fixed',
       }}
     >
       <div className="py-1">
@@ -146,7 +137,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 +162,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"