sag_components 2.0.0-beta155 → 2.0.0-beta157

package/dist/index.d.ts

@@ -1590,10 +1590,11 @@ declare function ToasterMessageBox({ color, messageText, linkText, duration, wid
     onClose?: () => void;
 }): react_jsx_runtime.JSX.Element;
 
-declare function QuickFilterCards({ data, onCardToggle, width, }: {
+declare function QuickFilterCards({ data, onCardToggle, width, CardsContainerClassName, }: {
     data?: any[];
     onCardToggle?: () => void;
     width?: string;
+    CardsContainerClassName?: string;
 }): react_jsx_runtime.JSX.Element;
 
 declare function RangePicker({ label, onChange, borderRadius, required, width, height, placeholder, disabled, borderColor, borderColorFocus, textColor, selectedValue, }: {

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React$1, { useState, useRef, useEffect, useMemo, useCallback, useImperativeHandle } from 'react';
-import styled, { keyframes, css } from 'styled-components';
+import styled, { keyframes, css, styled as styled$1 } from 'styled-components';
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip as Tooltip$3, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Bar, LabelList, ReferenceLine, LineChart, Line, AreaChart as AreaChart$1, Legend, Area, ScatterChart, ZAxis, Scatter, Brush, ComposedChart } from 'recharts';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -1816,6 +1816,32 @@ const getNumberWithCommas = x => {
   return param;
 };
 
+// Function to calculate tooltip height based on text length
+const calculateTooltipOffset = function (text) {
+  let isRegularCell = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (!text) return {
+    offset: 60,
+    height: 50
+  };
+  const tooltipWidth = 200;
+  const avgCharWidth = 7; // Approximate character width in pixels
+  const charsPerLine = Math.floor(tooltipWidth / avgCharWidth);
+  const estimatedLines = Math.ceil(text.length / charsPerLine);
+
+  // Calculate tooltip height
+  const lineHeight = 25; // Approximate line height
+  const padding = 20; // Top + bottom padding
+  const tooltipHeight = estimatedLines * lineHeight + padding;
+
+  // Base offset - smaller for regular cells
+  const baseOffset = isRegularCell ? 40 : 60;
+  const extraOffset = Math.max(0, (estimatedLines - 1) * lineHeight);
+  return {
+    offset: baseOffset + extraOffset,
+    height: tooltipHeight
+  };
+};
+
 const NoDataFoundIcon = ({
   width = '66',
   height = '66'
@@ -37992,7 +38018,7 @@ const TableHeader = ({
 // TableBody.styles.js
 
 // Shared tooltip styles
-const tooltipStyles = css`
+const tooltipStyles$1 = css`
   /* CSS-only tooltip */
   &[data-tooltip]:hover::before {
     content: attr(data-tooltip);
@@ -38264,7 +38290,7 @@ const ButtonWrapper = styled.div`
   display: inline-block;
   position: relative;
 
-  ${tooltipStyles}
+  ${tooltipStyles$1}
 `;
 const SentStatus = styled.div`
   display: flex;
@@ -38275,9 +38301,9 @@ const SentStatus = styled.div`
   user-select: none;
   position: relative;
 
-  ${tooltipStyles}
+  ${tooltipStyles$1}
 `;
-const TrashIconWrapper = styled.div`
+const TrashIconWrapper$1 = styled.div`
   cursor: pointer;
   transition: color 0.2s ease;
   display: inline-flex;
@@ -38287,7 +38313,7 @@ const TrashIconWrapper = styled.div`
   height: 100%;
   position: relative;
 
-  ${tooltipStyles}
+  ${tooltipStyles$1}
 
   /* Override tooltip position to move left */
   &[data-tooltip]:hover::before {
@@ -38314,7 +38340,7 @@ const CommentIconWrapper = styled.div`
   height: 100%;
   position: relative;
 
-  ${tooltipStyles}
+  ${tooltipStyles$1}
 
   /* Override tooltip position to move left */
   &[data-tooltip]:hover::before {
@@ -38325,7 +38351,7 @@ const CommentIconWrapper = styled.div`
     left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
   }
 `;
-const DisabledTrashIconWrapper = styled.div`
+const DisabledTrashIconWrapper$1 = styled.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -38333,7 +38359,7 @@ const DisabledTrashIconWrapper = styled.div`
   height: 100%;
   position: relative;
 
-  ${tooltipStyles}
+  ${tooltipStyles$1}
 
   /* Override tooltip position to move left */
   &[data-tooltip]:hover::before {
@@ -38845,31 +38871,6 @@ const TableBody = ({
   // Determine if save button should be enabled
   const isSaveEnabled = hasUserInteracted && (commentText.length > 0 || hasInitialValue);
 
-  // Function to calculate tooltip height based on text length
-  const calculateTooltipOffset = (text, isRegularCell = false) => {
-    if (!text) return {
-      offset: 60,
-      height: 50
-    };
-    const tooltipWidth = 200;
-    const avgCharWidth = 7; // Approximate character width in pixels
-    const charsPerLine = Math.floor(tooltipWidth / avgCharWidth);
-    const estimatedLines = Math.ceil(text.length / charsPerLine);
-
-    // Calculate tooltip height
-    const lineHeight = 25; // Approximate line height
-    const padding = 20; // Top + bottom padding
-    const tooltipHeight = estimatedLines * lineHeight + padding;
-
-    // Base offset - smaller for regular cells
-    const baseOffset = isRegularCell ? 40 : 60;
-    const extraOffset = Math.max(0, (estimatedLines - 1) * lineHeight);
-    return {
-      offset: baseOffset + extraOffset,
-      height: tooltipHeight
-    };
-  };
-
   // Helper function to format tag text
   const formatTagText = tag => {
     if (typeof tag !== 'string') return tag;
@@ -39089,7 +39090,7 @@ const TableBody = ({
         }
         const trashTooltipText = getTooltipText(value);
         if (value === 'ENABLED') {
-          return /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
+          return /*#__PURE__*/React$1.createElement(TrashIconWrapper$1, {
             $buttonColor: buttonColor,
             ref: el => {
               if (el && trashTooltipText) {
@@ -39115,7 +39116,7 @@ const TableBody = ({
             height: "18"
           }));
         } else if (value === 'DISABLED') {
-          return /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
+          return /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper$1, {
             ref: el => {
               if (el && trashTooltipText) {
                 const rect = el.getBoundingClientRect();
@@ -42576,7 +42577,7 @@ const Table = props => {
 // Add displayName for better debugging
 Table.displayName = 'Table';
 
-const Card = styled.div`
+const Card = styled$1.div`
   background: ${props => props.backgroundColor};
   border-radius: 8px;
   /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
@@ -42591,44 +42592,44 @@ const Card = styled.div`
     cursor: not-allowed;
   }
 `;
-const TitleContainer = styled.div`
+const TitleContainer = styled$1.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 `;
-const SectionTitle$1 = styled.div`
+const SectionTitle$1 = styled$1.div`
   color: #212121;
   font-size: 18px;
   font-weight: 700;
 `;
-const SubtitleContainer = styled.div`
+const SubtitleContainer = styled$1.div`
   display: flex;
   align-items: center;
   gap: 6px;
   color: #8B8989;
 `;
-const Subtitle$1 = styled.span`
+const Subtitle$1 = styled$1.span`
   color: ${props => props.color};
   font-size: 14px;
   font-weight: 400;
 `;
-const AddButtonContainer$1 = styled.div`
+const AddButtonContainer$1 = styled$1.div`
   display: flex;
   align-items: flex-start;
 `;
 
 // Vendor selection screen styles
-styled(Card)`
+styled$1(Card)`
   display: flex;
   flex-direction: column;
   background: #faf9fb;
   padding: 0;
   overflow: hidden;
 `;
-const VendorHeader$2 = styled.div`
+const VendorHeader$2 = styled$1.div`
   padding: 16px 24px;
 `;
-styled.button`
+styled$1.button`
   border: none;
   background: none;
   font-size: 22px;
@@ -42637,7 +42638,7 @@ styled.button`
   padding: 0 8px 0 0;
   margin-right: 4px;
 `;
-styled.input`
+styled$1.input`
   margin: 16px;
   margin-bottom: 8px;
   padding: 10px 14px;
@@ -42646,16 +42647,16 @@ styled.input`
   font-size: 15px;
   outline: none;
 `;
-const VendorListWrapper$2 = styled.div`
+const VendorListWrapper$2 = styled$1.div`
   height: calc(100% - ${props => props.headerHeight}px);
   background: ${props => props.disabled ? '#f2f2f2' : '#fff'};
   width: 100%;
   overflow: auto;
   border-radius: 0 0 8px 8px;
 `;
-const VendorList$2 = styled.div`
+const VendorList$2 = styled$1.div`
 `;
-const VendorItem$1 = styled.div`
+const VendorItem$1 = styled$1.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -42666,50 +42667,53 @@ const VendorItem$1 = styled.div`
   &:hover {
     background: #f7f7fa;
       .trash-icon svg path {
-      fill: #B1B1B1;
-    }
+        fill: #B1B1B1;
+      }
+      .trash-icon-disabled svg path {
+        fill: #D9D9D9;
+      }
   }
 `;
-const VendorName$2 = styled.div`
+const VendorName$2 = styled$1.div`
   color: #212121;
   font-size: 16px;
   font-weight: 500;
 `;
-styled.div`
+styled$1.div`
   color: #b0b0b0;
   font-size: 13px;
   margin-top: 2px;
 `;
-const VendorChevron$1 = styled.div`
+const VendorChevron$1 = styled$1.div`
   align-items: center;
   display: flex;
 `;
-const VendorNameAndPackagesContainer$1 = styled.div`
+const VendorNameAndPackagesContainer$1 = styled$1.div`
   display: flex;
   margin-left: 12px;
   flex-direction: column;
   align-items: flex-start;
 `;
-const DotContainer = styled.div`
+const DotContainer = styled$1.div`
   text-align: center;
   margin-top: 10px;
   width: 40px;
   height: 100%;
 `;
-const LineContainer = styled.div`
+const LineContainer = styled$1.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 `;
-const ButtonContainer = styled.div`
+const ButtonContainer = styled$1.div`
   .ButtonContainer {
     label {
       white-space: nowrap;
     }
   }
 `;
-const CustomTooltip = styled(Tooltip$2)`
+const CustomTooltip = styled$1(Tooltip$2)`
   .controls {
     padding: 12px 16px;
     font-size: 14px;
@@ -42717,20 +42721,74 @@ const CustomTooltip = styled(Tooltip$2)`
     &::before {
       left: 90%;
     }
-    ${props => props.trashIcon && `width: 150px;
-      white-space: normal;
-      max-height: 50px;
-      margin-top: 8px;`}
   }
 `;
-const Container$1 = styled.div`
+const Container$1 = styled$1.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 38px 0 20px;
   box-sizing: border-box;
 `;
-const Trash$1 = styled.div`
+const tooltipStyles = css`
+  /* CSS-only tooltip */
+  &[data-tooltip]:hover::before {
+    content: attr(data-tooltip);
+    position: fixed;
+    background-color: white;
+    color: #333;
+    padding: 10px 16px;
+    border-radius: 4px;
+    font-family: "Poppins", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    z-index: 1000;
+    pointer-events: none;
+    width: 200px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    line-height: 1.8;
+    box-shadow:
+      0 -2px 8px rgba(0, 0, 0, 0.15),
+      0 2px 8px rgba(0, 0, 0, 0.15);
+
+    /* Position above the element - using dynamic offset */
+    top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px));
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2);
+    transform: translateX(-50%);
+
+    /* Add delay */
+    opacity: 0;
+    animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+  }
+
+  /* Tooltip arrow */
+  &[data-tooltip]:hover::after {
+    content: "";
+    position: fixed;
+    top: calc(
+      var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) +
+        var(--tooltip-height, 50px)
+    ); /* Use estimated tooltip height */
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2);
+    transform: translateX(-50%);
+    border: 8px solid transparent;
+    border-top-color: white;
+    z-index: 1001;
+    pointer-events: none;
+
+    /* Add delay */
+    opacity: 0;
+    animation: showTooltip 0.3s ease-in-out 0.5s forwards;
+  }
+
+  @keyframes showTooltip {
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const baseIconWrapperStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42738,9 +42796,6 @@ const Trash$1 = styled.div`
   height: 24px;
   padding: 0 12px;
   cursor: pointer;
-  ${props => props.disabled && `opacity: 0.5;
-      pointer-events: none;
-      user-select: none;`};
   svg {
     pointer-events: none;
   }
@@ -42748,6 +42803,23 @@ const Trash$1 = styled.div`
   svg path {
     fill: white;
   }
+`;
+const DisabledTrashIconWrapper = styled$1.div`
+  ${baseIconWrapperStyles}
+  ${tooltipStyles}
+  
+  /* Tooltip customization */
+  &[data-tooltip]:hover::before {
+    text-align: left;
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
+  }
+  
+  &[data-tooltip]:hover::after {
+    left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
+  }
+`;
+const TrashIconWrapper = styled$1.div`
+  ${baseIconWrapperStyles}
   
   &:hover {
     svg path {
@@ -52078,6 +52150,21 @@ const ItemManagerPanel = _ref => {
     setSelectedVendor(modifiedVendor);
     setScreen("subitem");
   };
+  const setupTooltip = (el, tooltipText) => {
+    if (el && tooltipText) {
+      const rect = el.getBoundingClientRect();
+      const {
+        offset,
+        height
+      } = calculateTooltipOffset(tooltipText);
+      el.style.setProperty('--tooltip-top', `${rect.top}px`);
+      el.style.setProperty('--tooltip-left', `${rect.left}px`);
+      el.style.setProperty('--tooltip-width', `${rect.width}px`);
+      el.style.setProperty('--tooltip-offset', `${offset}px`);
+      el.style.setProperty('--tooltip-height', `${height}px`);
+      el.setAttribute('data-tooltip', tooltipText);
+    }
+  };
   const addNewPackage = (vendorName, packageName, component) => {
     setItemAndPackage(prev => {
       const vendorIndex = prev.findIndex(item => item.name === vendorName);
@@ -52301,27 +52388,22 @@ const ItemManagerPanel = _ref => {
         } else {
           return `${sentPackagesLength}/${packagesLength} sent`;
         }
-      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(CustomTooltip, {
-        hideTooltip: !sentPackagesLength > 0,
-        content: trashTooltipText,
-        topFactor: 2,
-        direction: "left",
-        trashIcon: true
-      }, /*#__PURE__*/React$1.createElement(Trash$1, {
-        disabled: sentPackagesLength > 0,
+      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), sentPackagesLength > 0 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
+        className: "trash-icon-disabled",
+        ref: el => setupTooltip(el, trashTooltipText)
+      }, /*#__PURE__*/React$1.createElement(DisabledTrashIcon, {
+        width: "22",
+        height: "22"
+      })) : /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
         className: "trash-icon",
-        onClick: () => {
+        onClick: e => {
+          e.stopPropagation();
           onDeleteVendor(item);
         }
-      }, /*#__PURE__*/React$1.createElement("svg", {
+      }, /*#__PURE__*/React$1.createElement(TrashIcon, {
         width: "14",
-        height: "18",
-        viewBox: "0 0 14 18",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, /*#__PURE__*/React$1.createElement("path", {
-        d: "M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM14 1H10.5L9.5 0H4.5L3.5 1H0V3H14V1Z"
-      })))));
+        height: "18"
+      })));
     }))));
   }
 };
@@ -53348,7 +53430,8 @@ const QuickFilterCards = _ref => {
   let {
     data = [],
     onCardToggle = () => {},
-    width = "100%"
+    width = "100%",
+    CardsContainerClassName = "QuickFilterCardsContainer"
   } = _ref;
   // local mirror so UI updates immediately even if parent is slow/not controlling
   const [items, setItems] = useState(data);
@@ -53367,7 +53450,7 @@ const QuickFilterCards = _ref => {
   };
   return /*#__PURE__*/React$1.createElement(CardsContainer, {
     width: width,
-    className: "QuickFilterCardsContainer"
+    className: CardsContainerClassName
   }, items.map(_ref2 => {
     let {
       status,