sag_components 2.0.0-beta305 → 2.0.0-beta307

package/dist/index.esm.js

@@ -3796,11 +3796,14 @@ const SearchInput$1 = props => {
     position = 'left',
     iconColor = '#212121',
     onTyping = () => {},
+    onClear = () => {},
+    clearTrigger,
     className
   } = props;
 
   // Use internal state for uncontrolled mode
   const [internalValue, setInternalValue] = useState(defaultValue);
+  const previousValueRef = useRef(defaultValue);
 
   // Determine if component is controlled
   const isControlled = controlledValue !== undefined;
@@ -3812,12 +3815,33 @@ const SearchInput$1 = props => {
       setInternalValue(defaultValue);
     }
   }, [defaultValue, isControlled]);
+
+  // Clear the input when clearTrigger changes (external clear trigger)
+  useEffect(() => {
+    if (clearTrigger !== undefined) {
+      setInternalValue('');
+    }
+  }, [clearTrigger]);
   const handleInputChange = e => {
+    const newValue = e.target.value;
+
+    // Detect native clear button click (value was non-empty, now empty, via input event)
+    if (previousValueRef.current && newValue === '') {
+      onClear();
+    }
+    previousValueRef.current = newValue;
     if (!isControlled) {
-      setInternalValue(e.target.value);
+      setInternalValue(newValue);
     }
     onTyping(e);
   };
+
+  // Handle the 'search' event which fires when native clear button is clicked
+  const handleSearch = e => {
+    if (e.target.value === '') {
+      onClear();
+    }
+  };
   return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
     className: className,
     width: width
@@ -3832,6 +3856,7 @@ const SearchInput$1 = props => {
     height: height,
     placeholder: placeholder,
     onChange: handleInputChange,
+    onSearch: handleSearch,
     position: position
   }));
 };
@@ -37714,8 +37739,16 @@ const SearchInput = styled.input`
     }
 `;
 const ListWrapper = styled.div`
-    max-height: ${props => props.maxHeight || 'unset'};
-    overflow-y: auto;
+    max-height: ${props => {
+  const maxH = parseInt(props.maxHeight) || 400;
+  const actualH = (props.actualHeight || maxH) + 16;
+  return actualH < maxH ? `${actualH}px` : props.maxHeight;
+}};
+    overflow-y: ${props => {
+  const maxH = parseInt(props.maxHeight) || 400;
+  const actualH = (props.actualHeight || maxH) + 16;
+  return actualH < maxH ? 'hidden' : 'auto';
+}};
     position: relative;
 `;
 const CheckboxGroup = styled.div`
@@ -37760,6 +37793,7 @@ const CheckboxLabel = styled.label`
     color: #212121;
     cursor: pointer;
     flex-shrink: 0;
+    box-sizing: border-box;
     
     &:hover {
         background-color: #E6F0F0;   
@@ -37832,7 +37866,7 @@ const FilterPop = props => {
     selectedAttributes: propSelectedAttributes = {},
     showSearch = true,
     searchPlaceholder = "Search...",
-    itemHeight = 32,
+    itemHeight = 40,
     overscan = 5,
     hasActiveFilter = false // NEW: Indicates if this column has an active filter
   } = props;
@@ -37921,16 +37955,18 @@ const FilterPop = props => {
     offsetY
   } = useMemo(() => {
     const containerHeight = parseInt(maxHeight) || 400;
-    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-    const endIndex = Math.min(sortedList.length, Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan);
+    const gap = 8;
+    const itemWithGap = itemHeight + gap;
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemWithGap) - overscan);
+    const endIndex = Math.min(sortedList.length, Math.ceil((scrollTop + containerHeight) / itemWithGap) + overscan);
     const visible = sortedList.slice(startIndex, endIndex).map((item, idx) => ({
       ...item,
       index: startIndex + idx
     }));
     return {
       visibleItems: visible,
-      totalHeight: (sortedList.length + 1) * (itemHeight + 8),
-      offsetY: startIndex * itemHeight
+      totalHeight: sortedList.length * itemHeight + Math.max(0, sortedList.length - 1) * gap,
+      offsetY: startIndex * itemWithGap
     };
   }, [sortedList, scrollTop, itemHeight, overscan, maxHeight]);
   const areAllNonAllItemsSelected = function () {
@@ -38130,7 +38166,8 @@ const FilterPop = props => {
   }), /*#__PURE__*/React$1.createElement(ListWrapper, {
     ref: scrollContainerRef,
     onScroll: handleScroll,
-    maxHeight: maxHeight
+    maxHeight: maxHeight,
+    actualHeight: totalHeight
   }, sortedList.length === 1 ? /*#__PURE__*/React$1.createElement(NoResultsMessage, null, "No items match your search") : /*#__PURE__*/React$1.createElement("div", {
     style: {
       height: `${totalHeight}px`,
@@ -40982,10 +41019,12 @@ const TableHeader = ({
   const debouncedFilterState = useDebounce(filterState, debounceDelay);
   const iconRefs = useRef({});
   const popupRef = useRef(null);
+  const prevResetKeyRef = useRef(resetFiltersKey);
 
-  // Reset internal state when resetFiltersKey changes
+  // Reset internal state when resetFiltersKey changes (not when columns change)
   useEffect(() => {
-    if (resetFiltersKey > 0) {
+    // Only run reset when resetFiltersKey actually changed
+    if (resetFiltersKey !== prevResetKeyRef.current && resetFiltersKey > 0) {
       const resetSelections = {};
       columns.forEach(column => {
         if (column.filter && column.filterOptions) {
@@ -41007,6 +41046,7 @@ const TableHeader = ({
       setVisibleFilterPopWrapper(null);
       setVisibleSortPopWrapper(null);
     }
+    prevResetKeyRef.current = resetFiltersKey;
   }, [resetFiltersKey, columns]);
 
   // Track if we've already initialized from saved state
@@ -57679,6 +57719,21 @@ function ModalDrawer(_ref) {
   }, "\xD7"), children));
 }
 
+// Keyframes for rolling/marquee animation
+const scrollTextAnimation = 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;
@@ -57697,6 +57752,9 @@ const scrollableStyles = `
 `;
 const TooltipWrapper = styled(Tooltip$2)`
   width: 100%;
+  .tooltip-wrapper {
+    width: 100%;
+  }
 `;
 const DropdownContainer = styled.div`
   position: relative;
@@ -57794,6 +57852,41 @@ const Wrapper = styled.div`
   align-items: center;
   width: 100%;
 `;
+
+// Wrapper for scrollable truncated text
+const ScrollableTextWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+`;
+
+// Inner text that scrolls when truncated
+const ScrollableTextInner = styled.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 && 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.span`
   flex: 1; 
   min-width: 0; 
@@ -58110,7 +58203,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 = useRef(null);
+  const textRef = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [scrollDistance, setScrollDistance] = useState(0);
+  const [animationDuration, setAnimationDuration] = useState(3);
+  const checkTruncation = 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);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    checkTruncation();
+
+    // Recheck on window resize
+    window.addEventListener('resize', checkTruncation);
+    return () => window.removeEventListener('resize', checkTruncation);
+  }, [children, checkTruncation]);
+  return /*#__PURE__*/React$1.createElement(ScrollableTextWrapper, {
+    ref: wrapperRef
+  }, /*#__PURE__*/React$1.createElement(ScrollableTextInner, {
+    ref: textRef,
+    color: color,
+    $isTruncated: isTruncated,
+    $animationDuration: animationDuration,
+    style: {
+      '--scroll-distance': `${scrollDistance}px`
+    }
+  }, children));
+};
+const OverlayDropdown = _ref2 => {
   let {
     data = [],
     value,
@@ -58136,7 +58276,7 @@ const OverlayDropdown = _ref => {
     height = "auto",
     margin = "8px",
     ...props
-  } = _ref;
+  } = _ref2;
   const [open, setOpen] = useState(false);
   const [hoveredText, setHoveredText] = useState(null);
   const [templateDialog, setTemplateDialog] = useState(null);
@@ -58423,9 +58563,8 @@ const OverlayDropdown = _ref => {
           }
         }
       }
-    }, /*#__PURE__*/React$1.createElement(TruncatedText, {
-      onMouseEnter: () => setHoveredText(displayText),
-      onMouseLeave: () => setHoveredText(null)
+    }, /*#__PURE__*/React$1.createElement(ScrollingText, {
+      color: item.value === value ? '#fff' : '#212121'
     }, displayText), iconToShow);
   })))), templateDialog && /*#__PURE__*/React$1.createElement(OverlayTemplateDialog, {
     open: true,