sag_components 2.0.0-beta306 → 2.0.0-beta307

package/dist/index.js

@@ -57729,6 +57729,21 @@ function ModalDrawer(_ref) {
   }, "\xD7"), children));
 }
 
+// Keyframes for rolling/marquee animation
+const scrollTextAnimation = styled.keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(0);
+  }
+  90% {
+    transform: translateX(var(--scroll-distance, -30%));
+  }
+  100% {
+    transform: translateX(var(--scroll-distance, -30%));
+  }
+`;
 const scrollableStyles = `
   &::-webkit-scrollbar {
     height: 8px;
@@ -57747,6 +57762,9 @@ const scrollableStyles = `
 `;
 const TooltipWrapper = styled__default["default"](Tooltip$2)`
   width: 100%;
+  .tooltip-wrapper {
+    width: 100%;
+  }
 `;
 const DropdownContainer = styled__default["default"].div`
   position: relative;
@@ -57844,6 +57862,41 @@ const Wrapper = styled__default["default"].div`
   align-items: center;
   width: 100%;
 `;
+
+// Wrapper for scrollable truncated text
+const ScrollableTextWrapper = styled__default["default"].div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+`;
+
+// Inner text that scrolls when truncated
+const ScrollableTextInner = styled__default["default"].span`
+  display: inline-block;
+  white-space: nowrap;
+  line-height: 21px;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: ${props => props.color || 'inherit'};
+  max-width: 100%;
+  
+  /* Default state: show ellipsis */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  
+  ${props => props.$isTruncated && styled.css`
+    ${ScrollableTextWrapper}:hover & {
+      /* On hover: remove ellipsis and start animation */
+      overflow: visible;
+      text-overflow: clip;
+      animation: ${scrollTextAnimation} ${props.$animationDuration || 3}s linear infinite;
+    }
+  `}
+`;
 const TruncatedText = styled__default["default"].span`
   flex: 1; 
   min-width: 0; 
@@ -58160,7 +58213,54 @@ OverlayTemplateDialog.propTypes = {
   buttonHoverColor: PropTypes.string
 };
 
-const OverlayDropdown = _ref => {
+// Component for scrolling truncated text on hover
+const ScrollingText = _ref => {
+  let {
+    children,
+    color
+  } = _ref;
+  const wrapperRef = React$1.useRef(null);
+  const textRef = React$1.useRef(null);
+  const [isTruncated, setIsTruncated] = React$1.useState(false);
+  const [scrollDistance, setScrollDistance] = React$1.useState(0);
+  const [animationDuration, setAnimationDuration] = React$1.useState(3);
+  const checkTruncation = React$1.useCallback(() => {
+    if (wrapperRef.current && textRef.current) {
+      const wrapperWidth = wrapperRef.current.offsetWidth;
+      const textWidth = textRef.current.scrollWidth;
+      const isOverflowing = textWidth > wrapperWidth;
+      setIsTruncated(isOverflowing);
+      if (isOverflowing) {
+        // Calculate how much we need to scroll (extra width + small padding)
+        const extraWidth = textWidth - wrapperWidth + 20;
+        setScrollDistance(-extraWidth);
+
+        // Calculate animation duration based on text length (roughly 50px per second)
+        const duration = Math.max(2, Math.min(8, extraWidth / 50));
+        setAnimationDuration(duration);
+      }
+    }
+  }, []);
+  React$1.useEffect(() => {
+    checkTruncation();
+
+    // Recheck on window resize
+    window.addEventListener('resize', checkTruncation);
+    return () => window.removeEventListener('resize', checkTruncation);
+  }, [children, checkTruncation]);
+  return /*#__PURE__*/React__default["default"].createElement(ScrollableTextWrapper, {
+    ref: wrapperRef
+  }, /*#__PURE__*/React__default["default"].createElement(ScrollableTextInner, {
+    ref: textRef,
+    color: color,
+    $isTruncated: isTruncated,
+    $animationDuration: animationDuration,
+    style: {
+      '--scroll-distance': `${scrollDistance}px`
+    }
+  }, children));
+};
+const OverlayDropdown = _ref2 => {
   let {
     data = [],
     value,
@@ -58186,7 +58286,7 @@ const OverlayDropdown = _ref => {
     height = "auto",
     margin = "8px",
     ...props
-  } = _ref;
+  } = _ref2;
   const [open, setOpen] = React$1.useState(false);
   const [hoveredText, setHoveredText] = React$1.useState(null);
   const [templateDialog, setTemplateDialog] = React$1.useState(null);
@@ -58473,9 +58573,8 @@ const OverlayDropdown = _ref => {
           }
         }
       }
-    }, /*#__PURE__*/React__default["default"].createElement(TruncatedText, {
-      onMouseEnter: () => setHoveredText(displayText),
-      onMouseLeave: () => setHoveredText(null)
+    }, /*#__PURE__*/React__default["default"].createElement(ScrollingText, {
+      color: item.value === value ? '#fff' : '#212121'
     }, displayText), iconToShow);
   })))), templateDialog && /*#__PURE__*/React__default["default"].createElement(OverlayTemplateDialog, {
     open: true,