sag_components 2.0.0-beta322 → 2.0.0-beta323

package/dist/index.esm.js

@@ -47808,6 +47808,49 @@ const CustomTooltip$1 = styled$1(Tooltip$2)`
     }
   }
 `;
+const FixedPositionTooltip = ({
+  children,
+  content,
+  topFactor = -1,
+  direction = "top",
+  delay = 400,
+  className
+}) => {
+  const handleMouseEnter = e => {
+    const r = e.currentTarget.getBoundingClientRect();
+    e.currentTarget.style.setProperty("--tt-top", `${r.top + 40 * topFactor}px`);
+    e.currentTarget.style.setProperty("--tt-left", `${r.left + r.width / 2}px`);
+  };
+  return /*#__PURE__*/React$1.createElement("span", {
+    onMouseEnter: handleMouseEnter,
+    style: {
+      display: "block",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React$1.createElement(Tooltip$2, {
+    content,
+    direction,
+    topFactor,
+    delay,
+    className
+  }, children));
+};
+const TextTooltip = styled$1(FixedPositionTooltip)`
+  --tooltip-arrow-size: 8px;
+  .tooltip-wrapper {
+    display: block !important;
+    width: 100%;
+    text-align: left;
+  }
+  .controls.top {
+    position: fixed !important;
+    top: var(--tt-top) !important;
+    left: var(--tt-left) !important;
+    transform: translateX(-50%) !important;
+    padding: 5px 11px;
+    pointer-events: none;
+  }
+`;
 const TooltipContent$1 = styled$1.span`
   color: #212121;
   font-family: Poppins;
@@ -48523,9 +48566,10 @@ const NewSubitemList = props => {
     onClick: e => {
       handleEditExistingPackage(item);
     }
-  }, item.brands && /*#__PURE__*/React$1.createElement(Title$6, {
-    title: item.brands
-  }, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(CustomTooltip, {
+  }, item.brands && /*#__PURE__*/React$1.createElement(TextTooltip, {
+    content: /*#__PURE__*/React$1.createElement(TooltipContent, null, item.brands),
+    topFactor: -1
+  }, /*#__PURE__*/React$1.createElement(Title$6, null, item.brands)), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(CustomTooltip, {
     hideTooltip: trashIsHovered,
     content: /*#__PURE__*/React$1.createElement(TooltipContent, {
       dangerouslySetInnerHTML: {
@@ -57776,9 +57820,10 @@ const ItemManagerPanel = _ref => {
         onClick: e => {
           handleVendorClick(item);
         }
-      }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, {
-        title: item.name
-      }, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, {
+      }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(TextTooltip, {
+        content: /*#__PURE__*/React$1.createElement(TooltipContent$1, null, item.name),
+        topFactor: -1
+      }, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name)), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, {
         color: SubTitleColor
       }, (() => {
         const noPackagesSent = sentPackagesLength === 0;