qbs-react-grid 2.2.5 → 2.2.9

package/src/qbsTable/labels.ts

@@ -0,0 +1,55 @@
+export type QbsTableLabels = {
+  search?: string;
+  searchAriaLabel?: string;
+  clear?: string;
+  selectedItems?: string;
+  switchToDefaultView?: string;
+  switchToRelaxedView?: string;
+  switchToFullScreen?: string;
+  switchToTableView?: string;
+  switchToCardView?: string;
+  noDataFound?: string;
+  showingRange?: (start: number, end: number, total: number) => string;
+  itemsPerPage?: string;
+  fixedColumns?: string;
+  visibleColumns?: string;
+  availableColumns?: string;
+  resetToDefault?: string;
+  save?: string;
+  viewMore?: string;
+  viewLess?: string;
+  actions?: string;
+};
+
+export const defaultQbsTableLabels: QbsTableLabels = {
+  search: 'Search',
+  searchAriaLabel: 'Search',
+  clear: 'Clear',
+  selectedItems: 'Selected items',
+  switchToDefaultView: 'Switch to Default View',
+  switchToRelaxedView: 'Switch to Relaxed View',
+  switchToFullScreen: 'Switch to Full Screen',
+  switchToTableView: 'Switch to Table View',
+  switchToCardView: 'Switch to Card View',
+  noDataFound: 'No Data Found',
+  showingRange: (start, end, total) => `Showing ${start} to ${end} of ${total}`,
+  itemsPerPage: 'Items per page',
+  fixedColumns: 'FIXED COLUMNS',
+  visibleColumns: 'VISIBLE COLUMNS',
+  availableColumns: 'AVAILABLE COLUMNS',
+  resetToDefault: 'Reset to default',
+  save: 'Save',
+  viewMore: 'View More',
+  viewLess: 'View Less',
+  actions: 'Actions',
+};
+
+export const mergeQbsTableLabels = (overrides?: QbsTableLabels): QbsTableLabels => ({
+  ...defaultQbsTableLabels,
+  ...overrides,
+});
+
+export const formatSelectedItems = (count: number, labels?: QbsTableLabels): string => {
+  const merged = mergeQbsTableLabels(labels);
+  return `${merged.selectedItems} (${count})`;
+};

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -1,6 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 
 import { QbsColumnProps } from '../commontypes';
+import type { QbsTableLabels } from '../labels';
+import { mergeQbsTableLabels } from '../labels';
+import {
+  closeOtherColumnToggles,
+  COLUMN_TOGGLE_CLOSE_OTHERS,
+  type ColumnToggleCloseDetail,
+} from './columnToggleCoordinator';
 import { SettingsIcon } from './icons';
 
 interface ColumnToggleProps {
@@ -12,6 +20,8 @@ interface ColumnToggleProps {
   handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   handleResetColumns?: () => void;
   tableHeight?: number;
+  labels?: QbsTableLabels;
+  rtl?: boolean;
 }
 
 const ColumnToggle: React.FC<ColumnToggleProps> = ({
@@ -22,17 +32,64 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   setIsOpen,
   handleResetColumns,
   handleColumnToggle,
-  tableHeight = 450
+  tableHeight = 450,
+  labels: labelsProp,
+  rtl = false,
 }) => {
+  const labels = mergeQbsTableLabels(labelsProp);
+  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) => {
+      const detail = (event as CustomEvent<ColumnToggleCloseDetail>).detail;
+      if (detail?.exceptId !== toggleId) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener(COLUMN_TOGGLE_CLOSE_OTHERS, handleCloseOthers);
+    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);
     },
-    [onToggle]
+    [onToggle],
   );
 
   const onDragStart = useCallback((e: React.DragEvent, index: number) => {
@@ -59,22 +116,28 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
       }
       setDraggedItem(null);
     },
-    [columns, draggedItem]
+    [columns, draggedItem, onReorder],
   );
+
   const handleClickOutside = useCallback(
     (event: MouseEvent) => {
-      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
+      const target = event.target as Node;
+      if (
+        popupRef.current?.contains(target) ||
+        settingsBtnRef.current?.contains(target)
+      ) {
+        return;
       }
+      setIsOpen(false);
     },
-    [setIsOpen]
+    [setIsOpen],
   );
+
   useEffect(() => {
+    if (!isOpen) return;
     document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [handleClickOutside]);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [handleClickOutside, isOpen]);
 
   const renderFixedColumn = (column: QbsColumnProps, index: number) => (
     <div
@@ -101,13 +164,14 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
             <path
               d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
               fill="white"
-            ></path>
+            />
           </svg>
         </label>
       </div>
       <div className="qbs-table-popup-value">{column.title}</div>
     </div>
   );
+
   const renderColumn = (column: QbsColumnProps, index: number) => (
     <div
       key={column.title}
@@ -137,7 +201,7 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
             <path
               d="M0 3.21739L2.89883 6L8 1.06994L6.89494 0L2.89883 3.86768L1.09728 2.14745L0 3.21739Z"
               fill="white"
-            ></path>
+            />
           </svg>
         </label>
       </div>
@@ -162,88 +226,110 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
       )}
     </div>
   );
-  const handleAvailableColumns = () => {
-    return columns.filter(item => !item.isVisible)?.length > 0 ? true : false;
-  };
+
+  const handleAvailableColumns = () =>
+    columns.filter(item => !item.isVisible)?.length > 0;
+
   const handleColToggle = () => {
     setIsOpen(false);
     handleColumnToggle?.(columns);
   };
-  return (
-    <div>
-      <button onClick={() => setIsOpen(!isOpen)}>
-        <SettingsIcon />
-      </button>
-      {isOpen && (
-        <div>
-          <div
-            className="qbs-table-column-popup"
-            style={{ maxHeight: tableHeight - 40 }}
-            ref={popupRef}
-          >
-            <div className="qbs-table-popup-container">
-              <div className="qbs-table-popup-item">
-                <div className="qbs-table-popup-label">FIXED COLUMNS</div>
-                <div className="qbs-table-columns-container">
-                  <div className="qbs-table-column">
-                    {columns.map((column, index) =>
-                      column.fixed ? renderFixedColumn(column, index) : ''
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className="qbs-table-divider"></div>
-              <div className="qbs-table-popup-item">
-                <div className="qbs-table-popup-label">VISIBLE COLUMNS</div>
-                <div className="qbs-table-columns-container">
-                  <div className="qbs-table-column">
-                    {columns.map((column, index) =>
-                      column.isVisible && !column.fixed ? renderColumn(column, index) : ''
-                    )}
-                  </div>
-                </div>
-              </div>
-              {handleAvailableColumns() && (
-                <>
-                  <div className="qbs-table-divider"></div>
-                  <div className="qbs-table-popup-item">
-                    <div className="qbs-table-popup-label">AVAILABLE COLUMNS</div>
-                    <div className="qbs-table-columns-container">
-                      <div className="qbs-table-column">
-                        {columns.map((column, index) =>
-                          !column.isVisible && !column.fixed ? renderFixedColumn(column, index) : ''
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </>
+
+  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>
-            {handleResetColumns && (
-              <>
-                <div className="qbs-table-divider"></div>
-                <div
-                  className="qbs-table-popup-item"
-                  style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}
-                >
-                  <a
-                    className="qbs-table-reset-link"
-                    href="#"
-                    onClick={() => handleResetColumns?.()}
-                  >
-                    Reset to default
-                  </a>
-                  <a className="qbs-table-reset-link" href="#" onClick={() => handleColToggle()}>
-                    Save
-                  </a>
-                </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) {
+            setIsOpen(false);
+            return;
+          }
+          closeOtherColumnToggles(toggleId);
+          updatePopupPosition();
+          setIsOpen(true);
+        }}
+      >
+        <SettingsIcon />
+      </button>
+      {isOpen && portalTarget && ReactDOM.createPortal(popupContent, portalTarget)}
+    </div>
+  );
 };
 
 export default ColumnToggle;

package/src/qbsTable/utilities/VerticalDropDownMenu.tsx

@@ -0,0 +1,216 @@
+import React, { useEffect, useId, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import { ThreeDotIcon } from './icons';
+import TooltipComponent from './ToolTip';
+import type { ActionProps } from '../commontypes';
+import {
+  closeOtherVerticalMenus,
+  VERTICAL_MENU_CLOSE_OTHERS,
+  type VerticalMenuCloseDetail,
+} from './verticalMenuCoordinator';
+
+type VerticalMenuDropdownProps = {
+  actionDropDown?: readonly ActionProps[];
+  handleMenuActions?: (actions: ActionProps, rowData: any) => void;
+  rowData: any;
+  tableBodyRef?: React.RefObject<HTMLDivElement>;
+  rowIndex?: number;
+};
+
+const VerticalMenuDropdown: React.FC<VerticalMenuDropdownProps> = ({
+  actionDropDown,
+  handleMenuActions,
+  rowData,
+  tableBodyRef,
+  rowIndex,
+}) => {
+  const [openMenu, setOpenMenu] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const menuId = useId();
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleCloseOthers = (event: Event) => {
+      const detail = (event as CustomEvent<VerticalMenuCloseDetail>).detail;
+      if (detail?.exceptId !== menuId) {
+        setOpenMenu(false);
+      }
+    };
+
+    document.addEventListener(VERTICAL_MENU_CLOSE_OTHERS, handleCloseOthers);
+    return () => document.removeEventListener(VERTICAL_MENU_CLOSE_OTHERS, handleCloseOthers);
+  }, [menuId]);
+
+  const updateMenuPosition = () => {
+    if (!menuButtonRef.current) return;
+
+    const rect = menuButtonRef.current.getBoundingClientRect();
+    const viewportPadding = 8;
+    const menuGap = 4;
+    const visibleItems =
+      actionDropDown?.filter(
+        item =>
+          !item.hidden && !(item.hide?.call(item, rowData, rowIndex) ?? false),
+      ) ?? [];
+    const menuWidth =
+      menuRef.current && menuRef.current.offsetWidth > 0
+        ? menuRef.current.offsetWidth
+        : Math.max(120, visibleItems.length * 48);
+    const menuHeight = visibleItems.length * 40;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openBelow = spaceBelow >= menuHeight + menuGap;
+
+    let left = rect.left;
+    if (left + menuWidth > window.innerWidth - viewportPadding) {
+      left = Math.max(viewportPadding, rect.right - menuWidth);
+    }
+
+    setPosition({
+      top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
+      left,
+    });
+  };
+
+  useEffect(() => {
+    if (!openMenu) return;
+    updateMenuPosition();
+    const frame = requestAnimationFrame(() => updateMenuPosition());
+    const resizeObserver =
+      menuRef.current && typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(() => updateMenuPosition())
+        : null;
+    if (resizeObserver && menuRef.current) {
+      resizeObserver.observe(menuRef.current);
+    }
+    return () => {
+      cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+    };
+  }, [openMenu]);
+
+  useEffect(() => {
+    if (!openMenu) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (
+        menuRef.current?.contains(target) ||
+        menuButtonRef.current?.contains(target)
+      ) {
+        return;
+      }
+      setOpenMenu(false);
+    };
+    const handleScroll = () => setOpenMenu(false);
+
+    document.addEventListener('click', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [openMenu]);
+
+  useEffect(() => {
+    const scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
+    if (!scrollbarHandle) return;
+
+    const observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+          setOpenMenu(false);
+        }
+      }
+    });
+
+    observer.observe(scrollbarHandle, {
+      attributes: true,
+      attributeFilter: ['style'],
+    });
+
+    return () => observer.disconnect();
+  }, [openMenu]);
+
+  const handleMenuItemClick = (slug: ActionProps) => {
+    handleMenuActions?.(slug, rowData);
+    slug.action?.(rowData);
+    setOpenMenu(false);
+  };
+
+  const visibleCount =
+    actionDropDown?.filter(
+      item => !item.hidden && !(item.hide?.call(item, rowData, rowIndex) ?? false),
+    ).length ?? 0;
+
+  const portalTarget =
+    document.getElementById('portal-root') ?? document.body;
+
+  const dropdownContent = (
+    <div
+      className="absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content"
+      ref={menuRef}
+      style={{
+        top: position.top,
+        left: position.left,
+        position: 'fixed',
+        minWidth: 120,
+        width: 'max-content',
+      }}
+    >
+      <div className="py-1">
+        {actionDropDown?.map(item =>
+          !item.hidden && !(item.hide?.call(item, rowData, rowIndex) ?? false) ? (
+            <div
+              key={item.title}
+              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);
+                handleMenuItemClick(item);
+              }}
+            >
+              <TooltipComponent title={item.toolTip} tableBodyRef={tableBodyRef}>
+                <div className="vertical-menu-icon-title flex items-center gap-2">
+                  {item.icon && <span className="vertical-menu-icon">{item.icon}</span>}
+                  <span className="vertical-menu-title">{item.title}</span>
+                </div>
+              </TooltipComponent>
+            </div>
+          ) : null,
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <div className="inline-block vertical-menu-dropdown-wrapper">
+        {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"
+            onClick={event => {
+              event.stopPropagation();
+              if (openMenu) {
+                setOpenMenu(false);
+                return;
+              }
+              closeOtherVerticalMenus(menuId);
+              updateMenuPosition();
+              setOpenMenu(true);
+            }}
+            ref={menuButtonRef}
+          >
+            <ThreeDotIcon />
+          </button>
+        )}
+      </div>
+      {openMenu && portalTarget && ReactDOM.createPortal(dropdownContent, portalTarget)}
+    </>
+  );
+};
+
+export default VerticalMenuDropdown;

package/src/qbsTable/utilities/columnToggleCoordinator.ts

@@ -0,0 +1,14 @@
+export const COLUMN_TOGGLE_CLOSE_OTHERS = 'qbs-column-toggle-close-others';
+
+export type ColumnToggleCloseDetail = {
+  exceptId: string;
+};
+
+export const closeOtherColumnToggles = (exceptId: string) => {
+  if (typeof document === 'undefined') return;
+  document.dispatchEvent(
+    new CustomEvent<ColumnToggleCloseDetail>(COLUMN_TOGGLE_CLOSE_OTHERS, {
+      detail: { exceptId },
+    }),
+  );
+};