sag_components 2.0.0-beta317 → 2.0.0-beta319

package/dist/index.esm.js

@@ -42307,6 +42307,24 @@ styled.div`
     }
   `}
 `;
+const CheckboxWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  ${tooltipStyles$1}
+`;
+const CellContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  ${tooltipStyles$1}
+`;
 const CheckboxInput = styled.input`
   width: 18px;
   height: 18px;
@@ -42640,6 +42658,16 @@ const DropdownButton$1 = styled.button`
     white-space: nowrap;
     text-align: left;
     flex: 1;
+
+    /* Map --cell-* variables (set by Dropdown.jsx) to --tooltip-* variables (expected by tooltipStyles) */
+    --tooltip-top: var(--cell-top);
+    --tooltip-left: var(--cell-left);
+    --tooltip-width: var(--cell-width);
+    --tooltip-offset: calc(var(--cell-offset) + 20px); /* Add 20px to move tooltip up */
+    --tooltip-height: var(--cell-height);
+
+    /* Import shared tooltip styles from TableBody */
+    ${tooltipStyles$1}
   }
 `;
 const DropdownIcon = styled.div`
@@ -42761,10 +42789,19 @@ const Dropdown = ({
   showSelectAll = true // New prop to show/hide "Select All" option
 }) => {
   const [isDropdownHovered, setIsDropdownHovered] = useState(false);
+  const displayTextRef = useRef(null);
 
   // Normalize selectedValue to always be an array for consistency
   const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue ? [selectedValue] : [];
 
+  // Generate display text based on selections
+  const getDisplayText = () => {
+    if (selectedValues.length === 0) {
+      return placeholder;
+    }
+    return `${selectedValues.map(val => options.find(opt => opt.value === val).label).join(', ')}`;
+  };
+
   // Reset dropdown hover state when dropdown closes
   useEffect(() => {
     if (!isOpen) {
@@ -42772,6 +42809,46 @@ const Dropdown = ({
     }
   }, [isOpen]);
 
+  // Apply tooltip when text overflows
+  useEffect(() => {
+    const element = displayTextRef.current;
+    if (element) {
+      const fullText = displayText || getDisplayText();
+
+      // Check if text overflows
+      if (element.scrollWidth > element.clientWidth && fullText && fullText.trim() !== "") {
+        try {
+          const rect = element.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) {
+            const tooltipInfo = calculateTooltipOffset(fullText, true);
+            if (tooltipInfo) {
+              const {
+                offset,
+                height
+              } = tooltipInfo;
+              element.style.setProperty("--cell-top", `${rect.top}px`);
+              element.style.setProperty("--cell-left", `${rect.left}px`);
+              element.style.setProperty("--cell-width", `${rect.width}px`);
+              element.style.setProperty("--cell-offset", `${offset}px`);
+              element.style.setProperty("--cell-height", `${height}px`);
+              element.setAttribute("data-tooltip", fullText);
+            }
+          }
+        } catch (e) {
+          console.warn("Error applying dropdown tooltip:", e);
+        }
+      } else {
+        // Remove tooltip if text doesn't overflow
+        element.removeAttribute("data-tooltip");
+        element.style.removeProperty("--cell-top");
+        element.style.removeProperty("--cell-left");
+        element.style.removeProperty("--cell-width");
+        element.style.removeProperty("--cell-offset");
+        element.style.removeProperty("--cell-height");
+      }
+    }
+  }, [displayText, selectedValues, options, placeholder]);
+
   // Check if an option is selected
   const isOptionSelected = optionValue => {
     return selectedValues.includes(optionValue);
@@ -42814,20 +42891,6 @@ const Dropdown = ({
       }, e);
     }
   };
-
-  // Generate display text based on selections
-  const getDisplayText = () => {
-    if (selectedValues.length === 0) {
-      return placeholder;
-    }
-
-    // if (selectedValues.length === 1) {
-    //     const selectedOption = options.find(opt => opt.value === selectedValues[0]);
-    //     return selectedOption ? selectedOption.label : displayText;
-    // }
-
-    return `${selectedValues.map(val => options.find(opt => opt.value === val).label).join(', ')}`;
-  };
   return /*#__PURE__*/React$1.createElement(DropdownContainer$1, {
     onMouseEnter: () => setIsDropdownHovered(true),
     onMouseLeave: () => setIsDropdownHovered(false)
@@ -42837,7 +42900,9 @@ const Dropdown = ({
     $isRowFocused: isRowFocused,
     $isRowHovered: isRowHovered,
     $selectedColor: selectedColor
-  }, /*#__PURE__*/React$1.createElement("span", null, displayText || getDisplayText()), /*#__PURE__*/React$1.createElement(DropdownIcon, {
+  }, /*#__PURE__*/React$1.createElement("span", {
+    ref: displayTextRef
+  }, displayText || getDisplayText()), /*#__PURE__*/React$1.createElement(DropdownIcon, {
     $isOpen: isOpen,
     $isRowFocused: isRowFocused,
     $isRowHovered: isRowHovered,
@@ -43042,7 +43107,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {},
-  disableCheckboxTooltipText = "",
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
@@ -43176,6 +43240,29 @@ const TableBody = /*#__PURE__*/forwardRef(({
     if (typeof tag !== "string") return String(tag || "");
     return tag.replace(/-/g, " ").replace(/\b\w/g, l => l.toUpperCase());
   };
+  const applyTooltip = (element, tooltipText) => {
+    if (!element || !tooltipText || tooltipText.trim() === "") return;
+    try {
+      const rect = element.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        const tooltipInfo = calculateTooltipOffset(tooltipText);
+        if (tooltipInfo) {
+          const {
+            offset,
+            height
+          } = tooltipInfo;
+          element.style.setProperty("--tooltip-top", `${rect.top}px`);
+          element.style.setProperty("--tooltip-left", `${rect.left}px`);
+          element.style.setProperty("--tooltip-width", `${rect.width}px`);
+          element.style.setProperty("--tooltip-offset", `${offset}px`);
+          element.style.setProperty("--tooltip-height", `${height}px`);
+          element.setAttribute("data-tooltip", tooltipText);
+        }
+      }
+    } catch (e) {
+      console.warn("Error applying tooltip:", e);
+    }
+  };
   const formatValue = (value, column, row, rowIndex) => {
     if (!column) {
       console.warn('formatValue called with null/undefined column');
@@ -43644,12 +43731,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
           try {
             const isChecked = Boolean(value);
             const isDisabled = row[`checkboxDisabled_${column.key}`] === true || column.key && row[`checkboxDisabled_${column.key}`] === true;
-            return /*#__PURE__*/React$1.createElement("div", {
-              style: {
-                display: "flex",
-                alignItems: "center"
-              }
-            }, /*#__PURE__*/React$1.createElement(CheckboxInput, {
+            return /*#__PURE__*/React$1.createElement(CheckboxWrapper, null, /*#__PURE__*/React$1.createElement(CheckboxInput, {
               type: "checkbox",
               checked: isChecked,
               disabled: isDisabled,
@@ -43695,6 +43777,15 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const shouldShowTooltip = (element, content) => {
     return element && element.scrollWidth > element.clientWidth;
   };
+  const renderCellContent = (formattedValue, isTextBasedField, shouldShimmer) => {
+    if (isTextBasedField && shouldShimmer) {
+      return typeof ChromeShimmerText === 'function' ? /*#__PURE__*/React$1.createElement(ChromeShimmerText, {
+        text: String(formattedValue || ""),
+        isShimmering: true
+      }) : String(formattedValue || "");
+    }
+    return formattedValue || "";
+  };
   const handleExpandClick = (row, rowIndex, event) => {
     event.stopPropagation();
     if (onExpandRow) {
@@ -43855,20 +43946,25 @@ const TableBody = /*#__PURE__*/forwardRef(({
           key: `invalid-${columnIndex}`
         }, "Invalid Column");
       }
-      let value, formattedValue;
+      let value, formattedValue, fieldTooltip;
       try {
         value = column.key.includes('.') ? getNestedValue(row, column.key) : row[column.key];
+        fieldTooltip = null;
+        if (row.tooltips && row.tooltips[column.key]) {
+          fieldTooltip = row.tooltips[column.key];
+        }
         formattedValue = formatValue(value, column, row, rowIndex) || "";
       } catch (e) {
         console.error("Error formatting value:", e);
         formattedValue = "";
       }
-      const isTextBasedField = column.fieldType?.toLowerCase() === "text" || column.fieldType?.toLowerCase() === "currency" || column.fieldType?.toLowerCase() === "number" || column.fieldType?.toLowerCase() === "percentage" || column.fieldType?.toLowerCase() === "date" || !column.fieldType;
+      const fieldType = column.fieldType?.toLowerCase();
+      const isTextBasedField = fieldType === "text" || fieldType === "currency" || fieldType === "number" || fieldType === "percentage" || fieldType === "date" || fieldType === "array" || fieldType === "boolean" || !fieldType;
       const shouldShimmer = isTextBasedField && rowIndex === shimmerRowIndex && shimmerStartTime !== null;
       return /*#__PURE__*/React$1.createElement(TableCell, {
         key: `${column.key}-${rowIndex}`,
         ref: el => {
-          if (el && formattedValue && shouldShowTooltip(el)) {
+          if (!fieldTooltip && isTextBasedField && el && formattedValue && shouldShowTooltip(el)) {
             try {
               const rect = el.getBoundingClientRect();
               if (rect.width > 0 && rect.height > 0) {
@@ -43891,14 +43987,13 @@ const TableBody = /*#__PURE__*/forwardRef(({
             }
           }
         },
-        $fieldType: column.fieldType?.toLowerCase(),
+        $fieldType: fieldType,
         $color: column.color,
         $minWidth: column.minWidth,
         $maxWidth: column.maxWidth
-      }, isTextBasedField && shouldShimmer ? typeof ChromeShimmerText === 'function' ? /*#__PURE__*/React$1.createElement(ChromeShimmerText, {
-        text: String(formattedValue || ""),
-        isShimmering: true
-      }) : String(formattedValue || "") : formattedValue || "");
+      }, fieldTooltip ? /*#__PURE__*/React$1.createElement(CellContentWrapper, {
+        ref: el => applyTooltip(el, fieldTooltip)
+      }, renderCellContent(formattedValue, isTextBasedField, shouldShimmer)) : renderCellContent(formattedValue, isTextBasedField, shouldShimmer));
     })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React$1.createElement(ExpandedRow, {
       $expandedBackgroundColor: expandedBackgroundColor
     }, /*#__PURE__*/React$1.createElement(TableCell, {
@@ -57401,8 +57496,6 @@ const ItemManagerPanel = _ref => {
     setScreen("subitem");
   };
   const addNewPackage = (vendorName, packageName, component) => {
-    console.log('🟢 addNewPackage called');
-    console.log('onPackageAdded exists?', !!onPackageAdded);
     setItemAndPackage(prev => {
       const vendorIndex = prev.findIndex(item => item.name === vendorName);
       if (vendorIndex === -1) {
@@ -57423,8 +57516,6 @@ const ItemManagerPanel = _ref => {
         }, ...prev.slice(vendorIndex + 1)];
       }
     });
-
-    // DON'T clear search here - REMOVE THIS
     if (onPackageAdded) {
       onPackageAdded();
     }
@@ -57461,10 +57552,9 @@ const ItemManagerPanel = _ref => {
       });
     });
     if (onPackageAdded) {
-      console.log('🟢 Calling onPackageAdded');
       onPackageAdded();
     } else {
-      console.log('🔴 onPackageAdded is null/undefined!');
+      console.log('onPackageAdded is null/undefined!');
     }
     setScreen("subitem");
   };
@@ -57509,7 +57599,7 @@ const ItemManagerPanel = _ref => {
           } : item));
         }
 
-        // Clear search when going back to initial screen
+        // clear search when going back to initial screen
         if (onSearchChange) {
           onSearchChange("");
         }