qbs-react-grid 2.2.6 → 2.2.11

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -1,6 +1,13 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 
 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 +19,8 @@ interface ColumnToggleProps {
   handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   handleResetColumns?: () => void;
   tableHeight?: number;
+  labels?: QbsTableLabels;
+  rtl?: boolean;
 }
 
 const ColumnToggle: React.FC<ColumnToggleProps> = ({
@@ -22,17 +31,32 @@ 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 [dragOverPosition, setDragOverPosition] = useState<number | null>();
 
+  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]);
+
   const handleToggle = useCallback(
     (columnName: string) => {
       onToggle(columnName);
     },
-    [onToggle]
+    [onToggle],
   );
 
   const onDragStart = useCallback((e: React.DragEvent, index: number) => {
@@ -59,22 +83,25 @@ 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)) {
+        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
@@ -88,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"
@@ -101,13 +128,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}
@@ -124,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"
@@ -137,7 +165,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,84 +190,93 @@ 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)}>
+    <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>
-          <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
+          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 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 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>
-              {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>
-                </>
-              )}
             </div>
-            {handleResetColumns && (
+            {handleAvailableColumns() && (
               <>
-                <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 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

@@ -1,9 +1,14 @@
-import React, { useEffect, useRef, useState } from 'react';
+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[];
@@ -22,9 +27,22 @@ const VerticalMenuDropdown: React.FC<VerticalMenuDropdownProps> = ({
 }) => {
   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;
 
@@ -44,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);
     }
@@ -173,11 +199,16 @@ 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) updateMenuPosition();
-              setOpenMenu(prev => !prev);
+              if (openMenu) {
+                setOpenMenu(false);
+                return;
+              }
+              closeOtherVerticalMenus(menuId);
+              updateMenuPosition();
+              setOpenMenu(true);
             }}
             ref={menuButtonRef}
           >

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 },
+    }),
+  );
+};

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"
@@ -21,14 +21,14 @@ export const SettingsIcon: React.FC<any> = () => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10 12.5C8.61929 12.5 7.5 11.3807 7.5 10C7.5 8.61929 8.61929 7.5 10 7.5C11.3807 7.5 12.5 8.61929 12.5 10C12.5 11.3807 11.3807 12.5 10 12.5Z"
-        stroke="#313131"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M1.66797 9.26718C1.66797 8.40052 2.3763 7.68385 3.2513 7.68385C4.75964 7.68385 5.3763 6.61718 4.61797 5.30885C4.18464 4.55885 4.44297 3.58385 5.2013 3.15052L6.64297 2.32552C7.3013 1.93385 8.1513 2.16718 8.54297 2.82552L8.63463 2.98385C9.38463 4.29218 10.618 4.29218 11.3763 2.98385L11.468 2.82552C11.8596 2.16718 12.7096 1.93385 13.368 2.32552L14.8096 3.15052C15.568 3.58385 15.8263 4.55885 15.393 5.30885C14.6346 6.61718 15.2513 7.68385 16.7596 7.68385C17.6263 7.68385 18.343 8.39218 18.343 9.26718V10.7338C18.343 11.6005 17.6346 12.3172 16.7596 12.3172C15.2513 12.3172 14.6346 13.3838 15.393 14.6922C15.8263 15.4505 15.568 16.4172 14.8096 16.8505L13.368 17.6755C12.7096 18.0672 11.8596 17.8339 11.468 17.1755L11.3763 17.0172C10.6263 15.7089 9.39297 15.7089 8.63463 17.0172L8.54297 17.1755C8.1513 17.8339 7.3013 18.0672 6.64297 17.6755L5.2013 16.8505C4.44297 16.4172 4.18464 15.4422 4.61797 14.6922C5.3763 13.3838 4.75964 12.3172 3.2513 12.3172C2.3763 12.3172 1.66797 11.6005 1.66797 10.7338V9.26718Z"
-        stroke="#313131"
+        stroke="currentColor"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -134,3 +134,76 @@ export const TableView: React.FC<any> = ({ className }) => {
     </svg>
   );
 };
+
+export const ExpandIcon: React.FC<any> = ({ className }) => (
+  <svg
+    width="16"
+    height="16"
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const ContentView: React.FC<any> = ({ className }) => (
+  <svg
+    width="16"
+    height="17"
+    className={className}
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const DefaultView: React.FC<any> = ({ className }) => (
+  <svg
+    width="16"
+    height="17"
+    className={className}
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/qbsTable/utilities/verticalMenuCoordinator.ts

@@ -0,0 +1,14 @@
+export const VERTICAL_MENU_CLOSE_OTHERS = 'qbs-vertical-menu-close-others';
+
+export type VerticalMenuCloseDetail = {
+  exceptId: string;
+};
+
+export const closeOtherVerticalMenus = (exceptId: string) => {
+  if (typeof document === 'undefined') return;
+  document.dispatchEvent(
+    new CustomEvent<VerticalMenuCloseDetail>(VERTICAL_MENU_CLOSE_OTHERS, {
+      detail: { exceptId },
+    }),
+  );
+};