qbs-react-grid 2.2.1 → 2.2.3

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"