sag_components 2.0.0-beta319 → 2.0.0-beta320

package/dist/index.esm.js

@@ -41787,31 +41787,27 @@ const TableCell = styled.td`
       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(--cell-top, 0px) - var(--cell-offset, 40px));
-    left: calc(var(--cell-left, 0px) + var(--cell-width, 0px) / 2);
+    left: min(calc(100vw - 110px), max(110px, calc(var(--cell-left, 0px) + var(--cell-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(--cell-top, 0px) - var(--cell-offset, 40px) + var(--cell-height, 50px)
     );
-    left: calc(var(--cell-left, 0px) + var(--cell-width, 0px) / 2);
+    left: min(calc(100vw - 110px), max(110px, calc(var(--cell-left, 0px) + var(--cell-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;
   }
@@ -42315,6 +42311,16 @@ const CheckboxWrapper = styled.div`
   height: 100%;
 
   ${tooltipStyles$1}
+
+  &[data-tooltip]:hover::before {
+    left: min(calc(100vw - 110px), max(110px, calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2)));
+    z-index: 1002;
+  }
+
+  &[data-tooltip]:hover::after {
+    left: min(calc(100vw - 110px), max(110px, calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2)));
+    z-index: 1003;
+  }
 `;
 const CellContentWrapper = styled.div`
   display: flex;
@@ -42322,8 +42328,21 @@ const CellContentWrapper = styled.div`
   width: 100%;
   height: 100%;
   position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   ${tooltipStyles$1}
+
+  &[data-tooltip]:hover::before {
+    left: min(calc(100vw - 110px), max(110px, calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2)));
+    z-index: 1002;
+  }
+
+  &[data-tooltip]:hover::after {
+    left: min(calc(100vw - 110px), max(110px, calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2)));
+    z-index: 1003;
+  }
 `;
 const CheckboxInput = styled.input`
   width: 18px;
@@ -42357,7 +42376,7 @@ const EditableCell = styled.div`
   display: flex;
   gap: 10px;
   align-items: center;
-  justify-content: end;
+  justify-content: flex-start;
 `;
 const PencilButton = styled.button`
   display: flex;
@@ -43964,26 +43983,30 @@ const TableBody = /*#__PURE__*/forwardRef(({
       return /*#__PURE__*/React$1.createElement(TableCell, {
         key: `${column.key}-${rowIndex}`,
         ref: el => {
-          if (!fieldTooltip && isTextBasedField && el && formattedValue && shouldShowTooltip(el)) {
-            try {
-              const rect = el.getBoundingClientRect();
-              if (rect.width > 0 && rect.height > 0) {
-                const tooltipInfo = calculateTooltipOffset(String(formattedValue), true);
-                if (tooltipInfo) {
-                  const {
-                    offset,
-                    height
-                  } = tooltipInfo;
-                  el.style.setProperty("--cell-top", `${rect.top}px`);
-                  el.style.setProperty("--cell-left", `${rect.left}px`);
-                  el.style.setProperty("--cell-width", `${rect.width}px`);
-                  el.style.setProperty("--cell-offset", `${offset}px`);
-                  el.style.setProperty("--cell-height", `${height}px`);
-                  el.setAttribute("data-tooltip", String(formattedValue));
+          if (isTextBasedField && el && formattedValue) {
+            const hasOverflow = shouldShowTooltip(el);
+            const tooltipTextToShow = hasOverflow ? String(formattedValue) : fieldTooltip;
+            if (tooltipTextToShow) {
+              try {
+                const rect = el.getBoundingClientRect();
+                if (rect.width > 0 && rect.height > 0) {
+                  const tooltipInfo = calculateTooltipOffset(tooltipTextToShow, true);
+                  if (tooltipInfo) {
+                    const {
+                      offset,
+                      height
+                    } = tooltipInfo;
+                    el.style.setProperty("--cell-top", `${rect.top}px`);
+                    el.style.setProperty("--cell-left", `${rect.left}px`);
+                    el.style.setProperty("--cell-width", `${rect.width}px`);
+                    el.style.setProperty("--cell-offset", `${offset}px`);
+                    el.style.setProperty("--cell-height", `${height}px`);
+                    el.setAttribute("data-tooltip", tooltipTextToShow);
+                  }
                 }
+              } catch (e) {
+                console.warn("Error setting cell tooltip:", e);
               }
-            } catch (e) {
-              console.warn("Error setting cell tooltip:", e);
             }
           }
         },
@@ -43991,7 +44014,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
         $color: column.color,
         $minWidth: column.minWidth,
         $maxWidth: column.maxWidth
-      }, fieldTooltip ? /*#__PURE__*/React$1.createElement(CellContentWrapper, {
+      }, fieldTooltip && !isTextBasedField ? /*#__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, {