sag_components 2.0.0-beta227 → 2.0.0-beta229

package/dist/index.js

@@ -39322,6 +39322,25 @@ const StatusCellCircle = styled__default["default"].div`
     border: 1px solid white;
     background-color: ${props => props.backgroundColor};
 `;
+const DotIndicatorWrapper = styled__default["default"].div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  ${tooltipStyles$1}
+  
+  /* Override tooltip position */
+  &[data-tooltip]:hover::before {
+    top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) + 20px);
+  }
+
+  &[data-tooltip]:hover::after {
+    top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) + var(--tooltip-height, 50px) + 20px);
+  }
+`;
 
 // NEW TAG STYLES
 const TagContainer = styled__default["default"].div`
@@ -40553,14 +40572,40 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
             if (!value || typeof value !== 'object') return null;
             const {
               show,
-              color
+              color,
+              tooltip
             } = value;
 
             // Only show the dot if show is true
             if (!show) return null;
-            return /*#__PURE__*/React__default["default"].createElement(StatusCellCircle, {
+            return /*#__PURE__*/React__default["default"].createElement(DotIndicatorWrapper, {
+              ref: el => {
+                if (el && tooltip && tooltip.trim() !== "") {
+                  try {
+                    const rect = el.getBoundingClientRect();
+                    if (rect.width > 0 && rect.height > 0) {
+                      const tooltipInfo = calculateTooltipOffset(tooltip);
+                      if (tooltipInfo) {
+                        const {
+                          offset,
+                          height
+                        } = tooltipInfo;
+                        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", tooltip);
+                      }
+                    }
+                  } catch (e) {
+                    console.warn("Error applying dotIndicator tooltip:", e);
+                  }
+                }
+              }
+            }, /*#__PURE__*/React__default["default"].createElement(StatusCellCircle, {
               backgroundColor: color
-            });
+            }));
           } catch (e) {
             console.warn('Error formatting dotIndicator:', e);
             return null;
@@ -40572,7 +40617,7 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
               style: {
                 color: isDefine ? "#8B8989" : "inherit"
               }
-            }, value ?? "Define"), /*#__PURE__*/React__default["default"].createElement(PencilButton, {
+            }, value ? `$${value}` : "Define"), /*#__PURE__*/React__default["default"].createElement(PencilButton, {
               onClick: e => {
                 e.stopPropagation();
                 handleEditableClick(row, column.key, value, rowIndex);