qbs-react-grid 2.2.9 → 2.2.11

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
 
 import { QbsColumnProps } from '../commontypes';
 import type { QbsTableLabels } from '../labels';
@@ -40,32 +39,7 @@ 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 || 272;
-    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) => {
@@ -78,13 +52,6 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
     return () => document.removeEventListener(COLUMN_TOGGLE_CLOSE_OTHERS, handleCloseOthers);
   }, [setIsOpen, toggleId]);
 
-  useEffect(() => {
-    if (!isOpen) return;
-    updatePopupPosition();
-    const frame = requestAnimationFrame(() => updatePopupPosition());
-    return () => cancelAnimationFrame(frame);
-  }, [isOpen, updatePopupPosition]);
-
   const handleToggle = useCallback(
     (columnName: string) => {
       onToggle(columnName);
@@ -122,10 +89,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
       const target = event.target as Node;
-      if (
-        popupRef.current?.contains(target) ||
-        settingsBtnRef.current?.contains(target)
-      ) {
+      if (popupRef.current?.contains(target)) {
         return;
       }
       setIsOpen(false);
@@ -151,9 +115,9 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
           checked={column.isVisible}
           onChange={() => handleToggle(column.title)}
           className="qbs-table-checkbox-input"
-          id={column.title}
+          id={`${toggleId}-${column.title}`}
         />
-        <label htmlFor={column.title}>
+        <label htmlFor={`${toggleId}-${column.title}`}>
           <svg
             width="8"
             height="6"
@@ -188,9 +152,9 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
           checked={column.isVisible}
           onChange={() => handleToggle(column.title)}
           className="qbs-table-checkbox-input"
-          id={column.title}
+          id={`${toggleId}-${column.title}`}
         />
-        <label htmlFor={column.title}>
+        <label htmlFor={`${toggleId}-${column.title}`}>
           <svg
             width="8"
             height="6"
@@ -235,85 +199,10 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
     handleColumnToggle?.(columns);
   };
 
-  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: tableHeight - 40,
-        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">
-            <div className="qbs-table-column">
-              {columns.map((column, index) =>
-                column.fixed ? renderFixedColumn(column, index) : null,
-              )}
-            </div>
-          </div>
-        </div>
-        <div className="qbs-table-divider" />
-        <div className="qbs-table-popup-item">
-          <div className="qbs-table-popup-label">{labels.visibleColumns}</div>
-          <div className="qbs-table-columns-container">
-            <div className="qbs-table-column">
-              {columns.map((column, index) =>
-                column.isVisible && !column.fixed ? renderColumn(column, index) : null,
-              )}
-            </div>
-          </div>
-        </div>
-        {handleAvailableColumns() && (
-          <>
-            <div className="qbs-table-divider" />
-            <div className="qbs-table-popup-item">
-              <div className="qbs-table-popup-label">{labels.availableColumns}</div>
-              <div className="qbs-table-columns-container">
-                <div className="qbs-table-column">
-                  {columns.map((column, index) =>
-                    !column.isVisible && !column.fixed ? renderFixedColumn(column, index) : null,
-                  )}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-      {handleResetColumns && (
-        <>
-          <div className="qbs-table-divider" />
-          <div className="qbs-table-popup-footer">
-            <button
-              type="button"
-              className="qbs-table-reset-link"
-              onClick={() => handleResetColumns?.()}
-            >
-              {labels.resetToDefault}
-            </button>
-            <button type="button" className="qbs-table-reset-link" onClick={() => handleColToggle()}>
-              {labels.save}
-            </button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-
   return (
     <div className="qbs-table-settings-wrapper">
       <button
         type="button"
-        className="qbs-table-settings-btn"
-        ref={settingsBtnRef}
         onClick={event => {
           event.stopPropagation();
           if (isOpen) {
@@ -321,13 +210,75 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
             return;
           }
           closeOtherColumnToggles(toggleId);
-          updatePopupPosition();
           setIsOpen(true);
         }}
       >
         <SettingsIcon />
       </button>
-      {isOpen && portalTarget && ReactDOM.createPortal(popupContent, portalTarget)}
+      {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">
+            <div className="qbs-table-popup-item">
+              <div className="qbs-table-popup-label">{labels.fixedColumns}</div>
+              <div className="qbs-table-columns-container">
+                <div className="qbs-table-column">
+                  {columns.map((column, index) =>
+                    column.fixed ? renderFixedColumn(column, index) : null,
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className="qbs-table-divider" />
+            <div className="qbs-table-popup-item">
+              <div className="qbs-table-popup-label">{labels.visibleColumns}</div>
+              <div className="qbs-table-columns-container">
+                <div className="qbs-table-column">
+                  {columns.map((column, index) =>
+                    column.isVisible && !column.fixed ? renderColumn(column, index) : null,
+                  )}
+                </div>
+              </div>
+            </div>
+            {handleAvailableColumns() && (
+              <>
+                <div className="qbs-table-divider" />
+                <div className="qbs-table-popup-item">
+                  <div className="qbs-table-popup-label">{labels.availableColumns}</div>
+                  <div className="qbs-table-columns-container">
+                    <div className="qbs-table-column">
+                      {columns.map((column, index) =>
+                        !column.isVisible && !column.fixed ? renderFixedColumn(column, index) : null,
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+          {handleResetColumns && (
+            <>
+              <div className="qbs-table-divider" />
+              <div className="qbs-table-popup-footer">
+                <button
+                  type="button"
+                  className="qbs-table-reset-link"
+                  onClick={() => handleResetColumns?.()}
+                >
+                  {labels.resetToDefault}
+                </button>
+                <button type="button" className="qbs-table-reset-link" onClick={() => handleColToggle()}>
+                  {labels.save}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
     </div>
   );
 };

package/src/qbsTable/utilities/ToolTip.tsx

@@ -29,7 +29,7 @@ const TooltipComponent: React.FC<any> = ({ title, children, tableBodyRef }) => {
       >
         {children}
       </span>
-      <span ref={dropRef} className={'tooltiptext'}>
+      <span ref={dropRef} className="tooltiptext" dir="auto">
         {title}
       </span>
     </div>

package/src/qbsTable/utilities/VerticalDropDownMenu.tsx

@@ -62,7 +62,15 @@ const VerticalMenuDropdown: React.FC<VerticalMenuDropdownProps> = ({
     const spaceBelow = window.innerHeight - rect.bottom;
     const openBelow = spaceBelow >= menuHeight + menuGap;
 
-    let left = rect.left;
+    const isRtl =
+      (document.documentElement.getAttribute('dir') ||
+        document.body.getAttribute('dir') ||
+        getComputedStyle(document.documentElement).direction) === 'rtl';
+
+    let left = isRtl ? rect.left : rect.left - menuWidth;
+    if (!isRtl && left < viewportPadding) {
+      left = rect.left;
+    }
     if (left + menuWidth > window.innerWidth - viewportPadding) {
       left = Math.max(viewportPadding, rect.right - menuWidth);
     }
@@ -191,7 +199,7 @@ const VerticalMenuDropdown: React.FC<VerticalMenuDropdownProps> = ({
         {visibleCount > 0 && (
           <button
             type="button"
-            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"
+            className="vertical-menu-trigger-button"
             onClick={event => {
               event.stopPropagation();
               if (openMenu) {