qbs-react-grid 2.2.12 → 2.2.14

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 
 import { QbsColumnProps } from '../commontypes';
 import type { QbsTableLabels } from '../labels';
@@ -39,7 +40,32 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   const toggleId = useId();
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const popupRef = useRef<HTMLDivElement | null>(null);
+  const settingsBtnRef = useRef<HTMLButtonElement | null>(null);
   const [dragOverPosition, setDragOverPosition] = useState<number | null>();
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  const updatePopupPosition = useCallback(() => {
+    if (!settingsBtnRef.current) return;
+    const rect = settingsBtnRef.current.getBoundingClientRect();
+    const viewportPadding = 8;
+    const popupWidth = popupRef.current?.offsetWidth || 360;
+    const popupHeight = popupRef.current?.offsetHeight || 320;
+
+    let left = rtl ? rect.left : rect.right - popupWidth;
+    if (left + popupWidth > window.innerWidth - viewportPadding) {
+      left = Math.max(viewportPadding, window.innerWidth - popupWidth - viewportPadding);
+    }
+    if (left < viewportPadding) {
+      left = viewportPadding;
+    }
+
+    let top = rect.bottom + 4;
+    if (top + popupHeight > window.innerHeight - viewportPadding) {
+      top = Math.max(viewportPadding, rect.top - popupHeight - 4);
+    }
+
+    setPosition({ top, left });
+  }, [rtl]);
 
   useEffect(() => {
     const handleCloseOthers = (event: Event) => {
@@ -89,7 +115,10 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
       const target = event.target as Node;
-      if (popupRef.current?.contains(target)) {
+      if (
+        popupRef.current?.contains(target) ||
+        settingsBtnRef.current?.contains(target)
+      ) {
         return;
       }
       setIsOpen(false);
@@ -99,9 +128,18 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
 
   useEffect(() => {
     if (!isOpen) return;
+    updatePopupPosition();
+    const frame = requestAnimationFrame(() => updatePopupPosition());
     document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [handleClickOutside, isOpen]);
+    window.addEventListener('resize', updatePopupPosition);
+    window.addEventListener('scroll', updatePopupPosition, true);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('resize', updatePopupPosition);
+      window.removeEventListener('scroll', updatePopupPosition, true);
+    };
+  }, [handleClickOutside, isOpen, updatePopupPosition]);
 
   const renderFixedColumn = (column: QbsColumnProps, index: number) => (
     <div
@@ -199,30 +237,22 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
     handleColumnToggle?.(columns);
   };
 
-  return (
-    <div className="qbs-table-settings-wrapper">
-      <button
-        type="button"
-        onClick={event => {
-          event.stopPropagation();
-          if (isOpen) {
-            setIsOpen(false);
-            return;
-          }
-          closeOtherColumnToggles(toggleId);
-          setIsOpen(true);
-        }}
-      >
-        <SettingsIcon />
-      </button>
-      {isOpen && (
-        <div
-          className={`qbs-table-column-popup${rtl ? ' qbs-table-column-popup--rtl' : ''}`}
-          style={{ maxHeight: tableHeight - 40 }}
-          ref={popupRef}
-          dir={rtl ? 'rtl' : 'ltr'}
-        >
-          <div className="qbs-table-popup-container">
+  const portalTarget = document.getElementById('portal-root') ?? document.body;
+
+  const popupContent = (
+    <div
+      className={`qbs-table-column-popup${rtl ? ' qbs-table-column-popup--rtl' : ''}`}
+      style={{
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        maxHeight: Math.min(tableHeight - 40, window.innerHeight - position.top - 16),
+        zIndex: 10060,
+      }}
+      ref={popupRef}
+      dir={rtl ? 'rtl' : 'ltr'}
+    >
+      <div className="qbs-table-popup-container">
             <div className="qbs-table-popup-item">
               <div className="qbs-table-popup-label">{labels.fixedColumns}</div>
               <div className="qbs-table-columns-container">
@@ -277,8 +307,28 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
               </div>
             </>
           )}
-        </div>
-      )}
+    </div>
+  );
+
+  return (
+    <div className="qbs-table-settings-wrapper">
+      <button
+        type="button"
+        ref={settingsBtnRef}
+        onClick={event => {
+          event.stopPropagation();
+          if (isOpen) {
+            setIsOpen(false);
+            return;
+          }
+          closeOtherColumnToggles(toggleId);
+          updatePopupPosition();
+          setIsOpen(true);
+        }}
+      >
+        <SettingsIcon />
+      </button>
+      {isOpen && portalTarget && ReactDOM.createPortal(popupContent, portalTarget)}
     </div>
   );
 };