sag_components 2.0.0-beta318 → 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;
@@ -43089,7 +43107,6 @@ const TableBody = /*#__PURE__*/forwardRef(({
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {},
-  disableCheckboxTooltipText = "",
   onHeroClick = () => {},
   onEditableClick = () => {},
   isEditMode = false,
@@ -43223,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');
@@ -43691,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,
@@ -43742,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) {
@@ -43902,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) {
@@ -43938,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, {