qbs-react-grid 2.2.4 → 2.2.5

package/src/qbsTable/utilities/ToolTip.tsx

@@ -1,149 +1,38 @@
-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;
+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');
+      }
     }
-
-    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 == 'bottom-position' ? 'down' : 'up'} `}>
       <span
-        ref={triggerRef}
-        className="qbs-table-tooltip-trigger"
-        style={{ display: 'inline-flex' }}
-        onMouseEnter={showTooltip}
-        onMouseLeave={hideTooltip}
-        onFocus={showTooltip}
-        onBlur={hideTooltip}
+        ref={menuButtonRef}
+        style={{ display: 'flex' }}
+        onMouseEnter={() => adjustDropdownPosition()}
       >
         {children}
       </span>
-      {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,
-        )}
-    </>
+      <span ref={dropRef} className={'tooltiptext'}>
+        {title}
+      </span>
+    </div>
   );
 };
 

package/src/qbsTable/utilities/empty.tsx

@@ -18,7 +18,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
       }}
     >
       <div style={{ width: 145, marginBottom: 20 }} className="nodata-img">
-        <svg
+       <svg
           xmlns="http://www.w3.org/2000/svg"
           width="148"
           height="132"
@@ -71,7 +71,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
             fill="#797979"
             d="M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
           ></path>
-        </svg>{' '}
+        </svg> {' '}
       </div>
       <p className="text-center text-common font-bold text-blackAlt nodata-title">{title}</p>
       <span className="text-xxs font-medium text-grey-medium nodata-sub-title">{subtitle}</span>

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="currentColor"
+        stroke="#313131"
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
@@ -134,80 +134,3 @@ export const TableView: React.FC<any> = ({ className }) => {
     </svg>
   );
 };
-
-export const ExpandIcon: React.FC<any> = ({ className }) => {
-  return (
-    <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="#585858"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-export const ContentView: React.FC<any> = ({ className }) => {
-  return (
-    <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="#585858"
-        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="#585858"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-export const DefaultView: React.FC<any> = ({ className }) => {
-  return (
-    <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="#585858"
-      />
-      <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="#585858"
-      />
-      <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="#585858"
-      />
-    </svg>
-  );
-};

package/src/qbsTable/utilities/tablecalc.ts

@@ -1,12 +1,6 @@
-export function getRowDisplayRange(
-  totalRows: number,
-  rowsPerPage: number,
-  pageNumber: number,
-  formatRange: (start: number, end: number, total: number) => string = (start, end, total) =>
-    `Showing ${start} to ${end} of ${total}`
-) {
+export function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number) {
   const start = (pageNumber - 1) * rowsPerPage + 1;
   const end = Math.min(pageNumber * rowsPerPage, totalRows);
 
-  return formatRange(start ?? 0, end ?? 0, totalRows ?? 0);
+  return `Showing ${start ?? 0} to ${end ?? 0} of ${totalRows ?? 0}`;
 }

package/src/utils/useCellDescriptor.ts

@@ -205,6 +205,7 @@ const useCellDescriptor = <Row extends RowDataType>(
       if (treeCol) {
         hasCustomTreeCol = true;
       }
+      console.log(columns);
 
       if (columnChildren?.length !== 2) {
         throw new Error(`Component <HeaderCell> and <Cell> is required, column index: ${index} `);

package/src/utils/useScrollListener.ts

@@ -4,7 +4,6 @@ import scrollLeft from 'dom-lib/scrollLeft';
 import scrollTop from 'dom-lib/scrollTop';
 import WheelHandler from 'dom-lib/WheelHandler';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-
 import type { ListenerCallback, RowDataType } from '../@types/common';
 import { BEZIER, SCROLLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
 import type { ScrollbarInstance } from '../Scrollbar';
@@ -51,7 +50,6 @@ interface ScrollListenerProps {
   onTouchStart?: (event: React.TouchEvent) => void;
   onTouchMove?: (event: React.TouchEvent) => void;
   onTouchEnd?: (event: React.TouchEvent) => void;
-  handleInfiniteScroll?: (value: number) => void;
 }
 
 /**
@@ -108,8 +106,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
     contentHeight,
     headerHeight,
     rtl,
-    tableKey,
-    handleInfiniteScroll
+    tableKey
   } = props;
 
   const wheelListener = useRef<ListenerCallback>(null);
@@ -190,15 +187,6 @@ const useScrollListener = (props: ScrollListenerProps) => {
       setScrollX(x);
       setScrollY(y);
 
-      if (
-        typeof handleInfiniteScroll === 'function' &&
-        deltaY !== 0 &&
-        !loading &&
-        Math.abs(y) + getTableHeight() >= contentHeight.current - 12
-      ) {
-        handleInfiniteScroll(scrollY.current);
-      }
-
       onScroll?.(Math.abs(x), Math.abs(y));
 
       if (virtualized) {
@@ -309,6 +297,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
+      console.log('handleTouchMove');
 
       const { pageX, pageY } = event.touches[0];
       const deltaX = touchX.current - pageX;
@@ -349,6 +338,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
+      console.log('handleTouchEnd');
       isTouching.current = false;
       const touchDuration = new Date().getTime() - momentumStartTime.current;
       const absDeltaY = Math.abs(scrollY.current - momentumStartY.current);

package/src/utils/useTableRows.ts

@@ -8,7 +8,7 @@ import defer from './defer';
 
 interface TableRowsProps<Row, Key> {
   prefix: (str: string) => string;
-  wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all' | 'fit-content';
+  wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all'| 'fit-content';
   data: readonly Row[];
   expandedRowKeys: readonly Key[];
 }

package/es/qbsTable/labels.d.ts

@@ -1,48 +0,0 @@
-export interface 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 declare const DEFAULT_QBS_TABLE_LABELS: Required<Omit<QbsTableLabels, 'showingRange'>> & {
-    showingRange: (start: number, end: number, total: number) => string;
-};
-export declare const mergeLabels: (labels?: QbsTableLabels) => {
-    showingRange: (start: number, end: number, total: number) => string;
-    search: string;
-    searchAriaLabel: string;
-    clear: string;
-    selectedItems: string;
-    switchToDefaultView: string;
-    switchToRelaxedView: string;
-    switchToFullScreen: string;
-    switchToTableView: string;
-    switchToCardView: string;
-    noDataFound: string;
-    itemsPerPage: string;
-    fixedColumns: string;
-    visibleColumns: string;
-    availableColumns: string;
-    resetToDefault: string;
-    save: string;
-    viewMore: string;
-    viewLess: string;
-    actions: string;
-};
-export declare const formatSelectedItems: (selectedItemsLabel: string, count: number) => string;

package/es/qbsTable/labels.js

@@ -1,34 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export var DEFAULT_QBS_TABLE_LABELS = {
-  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: function showingRange(start, end, total) {
-    return "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 var mergeLabels = function mergeLabels(labels) {
-  var _labels$showingRange;
-  return _extends({}, DEFAULT_QBS_TABLE_LABELS, labels, {
-    showingRange: (_labels$showingRange = labels === null || labels === void 0 ? void 0 : labels.showingRange) != null ? _labels$showingRange : DEFAULT_QBS_TABLE_LABELS.showingRange
-  });
-};
-export var formatSelectedItems = function formatSelectedItems(selectedItemsLabel, count) {
-  return selectedItemsLabel + "(" + count + ") ";
-};

package/es/qbsTable/utilities/VerticalDropDownMenu.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ActionProps } from '../commontypes';
-type Props = {
-    actionDropDown: ActionProps[];
-    handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
-    rowData?: any;
-    dataTheme?: string;
-    tableBodyRef: React.RefObject<HTMLDivElement | null>;
-    rowIndex?: number;
-    wheelWrapperRef?: React.RefObject<HTMLDivElement>;
-};
-declare const VerticalMenuDropdown: React.FC<Props>;
-export default VerticalMenuDropdown;

package/es/qbsTable/utilities/VerticalDropDownMenu.js

@@ -1,157 +0,0 @@
-function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import React, { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { ThreeDotIcon } from './icons';
-import TooltipComponent from './ToolTip';
-var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
-  var actionDropDown = _ref.actionDropDown,
-    handleMenuActions = _ref.handleMenuActions,
-    rowData = _ref.rowData,
-    tableBodyRef = _ref.tableBodyRef,
-    rowIndex = _ref.rowIndex;
-  var _useState = useState(false),
-    openMenu = _useState[0],
-    setOpenMenu = _useState[1];
-  var _useState2 = useState({
-      top: 0,
-      left: 0
-    }),
-    position = _useState2[0],
-    setPosition = _useState2[1];
-  var menuButtonRef = useRef(null);
-  var menuRef = useRef(null);
-  useEffect(function () {
-    var handleClickOutside = function handleClickOutside(event) {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setOpenMenu(false);
-      }
-    };
-    var handleScroll = function handleScroll() {
-      setOpenMenu(false);
-    };
-    document.addEventListener('click', handleClickOutside);
-    window.addEventListener('scroll', handleScroll, true);
-    // Use capture phase to catch all scrolls
-
-    return function () {
-      document.removeEventListener('click', handleClickOutside);
-      window.removeEventListener('scroll', handleScroll, true);
-    };
-  }, []);
-  useEffect(function () {
-    var handleStyleChange = function handleStyleChange() {
-      setOpenMenu(false); // Close the dropdown
-    };
-    var scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
-    if (!scrollbarHandle) return;
-    var observer = new MutationObserver(function (mutations) {
-      for (var _iterator = _createForOfIteratorHelperLoose(mutations), _step; !(_step = _iterator()).done;) {
-        var mutation = _step.value;
-        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-          handleStyleChange();
-        }
-      }
-    });
-    observer.observe(scrollbarHandle, {
-      attributes: true,
-      attributeFilter: ['style']
-    });
-    return function () {
-      observer.disconnect();
-    };
-  }, [openMenu]);
-  var handleMenuItemClick = function handleMenuItemClick(slug) {
-    var _slug$action;
-    handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
-    (_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
-    setOpenMenu(false);
-  };
-  var handleShowHideMenu = function handleShowHideMenu() {
-    var _actionDropDown$filte, _actionDropDown$filte2;
-    return (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : (_actionDropDown$filte2 = actionDropDown.filter(function (item) {
-      var _item$hide;
-      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
-    })) === null || _actionDropDown$filte2 === void 0 ? void 0 : _actionDropDown$filte2.length) != null ? _actionDropDown$filte : 0;
-  };
-  var toggleMenu = function toggleMenu() {
-    if (!openMenu && menuButtonRef.current) {
-      var _actionDropDown$filte3;
-      var rect = menuButtonRef.current.getBoundingClientRect();
-      var viewportPadding = 8;
-      var menuGap = 4;
-      var dropdownWidth = 200;
-      var visibleItems = (_actionDropDown$filte3 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
-        var _item$hide2;
-        return !item.hidden && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex));
-      })) != null ? _actionDropDown$filte3 : [];
-      var menuHeight = visibleItems.length * 40;
-      var spaceBelow = window.innerHeight - rect.bottom;
-      var openBelow = spaceBelow >= menuHeight + menuGap;
-
-      // Anchor to trigger; prefer opening toward inline-start (left in LTR).
-      var left = rect.right - dropdownWidth;
-      if (left < viewportPadding) {
-        left = rect.left;
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = Math.max(viewportPadding, rect.left - dropdownWidth);
-      }
-      if (left + dropdownWidth > window.innerWidth - viewportPadding) {
-        left = window.innerWidth - viewportPadding - dropdownWidth;
-      }
-      setPosition({
-        top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
-        left: left
-      });
-    }
-    setTimeout(function () {
-      setOpenMenu(function (prev) {
-        return !prev;
-      });
-    }, 200);
-  };
-  var portalTarget = document.getElementById('portal-root');
-  var dropdownContent = /*#__PURE__*/React.createElement("div", {
-    className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
-    ref: menuRef,
-    style: {
-      width: 200,
-      top: position.top,
-      left: position.left,
-      position: 'fixed'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "py-1"
-  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
-    var _item$hide3;
-    return !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide3 = item.hide) !== null && _item$hide3 !== void 0 && _item$hide3.call(item, rowData, rowIndex)) ? /*#__PURE__*/React.createElement("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: function onClick(e) {
-        var _item$action;
-        e.preventDefault();
-        (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
-        handleMenuItemClick(item);
-      }
-    }, /*#__PURE__*/React.createElement(TooltipComponent, {
-      title: item.toolTip,
-      tableBodyRef: tableBodyRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "vertical-menu-icon-title flex items-center gap-2"
-    }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React.createElement("span", {
-      className: "vertical-menu-icon"
-    }, item.icon), /*#__PURE__*/React.createElement("span", {
-      className: "vertical-menu-title"
-    }, item.title)))) : null;
-  })));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "inline-block vertical-menu-dropdown-wrapper"
-  }, handleShowHideMenu() > 0 && /*#__PURE__*/React.createElement("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: toggleMenu,
-    ref: menuButtonRef
-  }, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/ReactDOM.createPortal(dropdownContent, portalTarget));
-};
-export default VerticalMenuDropdown;