sag_components 2.0.0-beta306 → 2.0.0-beta308

package/dist/index.esm.js

@@ -37097,7 +37097,7 @@ const NoEventsMessage = styled.span`
         font-weight: 500;
     }
 `;
-const LoadingWrapper = styled.div`
+const LoadingWrapper$1 = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -37108,7 +37108,7 @@ const LoadingWrapper = styled.div`
     font-size: 14px;
     font-weight: 400;    
 `;
-const LoadingText = styled.span`
+const LoadingText$1 = styled.span`
     color: #066768;
     font-family: 'Poppins', sans-serif;
     font-size: 14px;
@@ -47498,14 +47498,14 @@ const Table = props => {
     backgroundColor: buttonColor,
     hoverBackgroundColor: buttonHoverColor,
     onClick: onButtonClick
-  }))), isLoading && /*#__PURE__*/React$1.createElement(LoadingWrapper, null, /*#__PURE__*/React$1.createElement(Lottie, {
+  }))), isLoading && /*#__PURE__*/React$1.createElement(LoadingWrapper$1, null, /*#__PURE__*/React$1.createElement(Lottie, {
     style: {
       width: "24px",
       height: "24px"
     },
     animationData: LoadingAnimation,
     loop: true
-  }), /*#__PURE__*/React$1.createElement(LoadingText, null, isLoadingText)), isLoadingSpinner && /*#__PURE__*/React$1.createElement(LoaderWrapper, {
+  }), /*#__PURE__*/React$1.createElement(LoadingText$1, null, isLoadingText)), isLoadingSpinner && /*#__PURE__*/React$1.createElement(LoaderWrapper, {
     id: "LoaderWrapper"
   }, /*#__PURE__*/React$1.createElement(Loader, null)))));
 };
@@ -47520,7 +47520,7 @@ const Card = styled$1.div`
   width: ${props => props.width || "auto"};
   height: ${props => props.height || "auto"};
   margin: 0 auto;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   &:disabled {
     background: #f2f2f2;
     cursor: not-allowed;
@@ -47540,7 +47540,7 @@ const SubtitleContainer = styled$1.div`
   display: flex;
   align-items: center;
   gap: 6px;
-  color: #8B8989;
+  color: #8b8989;
 `;
 const Subtitle$1 = styled$1.span`
   color: ${props => props.color};
@@ -47583,32 +47583,48 @@ styled$1.input`
 `;
 const VendorListWrapper$2 = styled$1.div`
   height: calc(100% - ${props => props.headerHeight}px);
-  background: ${props => props.disabled ? '#f2f2f2' : '#fff'};
+  background: ${props => props.disabled ? "#f2f2f2" : "#fff"};
   width: 100%;
   overflow: auto;
   border-radius: 0 0 8px 8px;
 `;
-const VendorList$2 = styled$1.div`
-`;
+const VendorList$2 = styled$1.div``;
 const VendorItem$1 = styled$1.div`
   display: grid;
-  grid-template-columns: 10% 75% 15%;  
+  grid-template-columns: 10% 75% 15%;
   align-items: center;
   padding: 16px 8px;
   border-bottom: 1px solid #f2f2f2;
-  width: ${props => `${Number(props.width.replace('px', '')) - 16}px` || "100%"};
+  width: ${props => `${Number(props.width.replace("px", "")) - 16}px` || "100%"};
   cursor: pointer;
-  
+
   &:hover {
-    background: #E6F0F0;
-      .trash-icon svg path {
-        fill: #B1B1B1;
-      }
-      .trash-icon-disabled svg path {
-        fill: #B1B1B1;
-      }
+    background: #e6f0f0;
+    .trash-icon svg path {
+      fill: #b1b1b1;
+    }
+    .trash-icon-disabled svg path {
+      fill: #b1b1b1;
+    }
   }
 `;
+const LoadingWrapper = styled$1.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  color: #066768;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+`;
+const LoadingText = styled$1.span`
+  color: #066768;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+`;
 const VendorName$2 = styled$1.div`
   color: #212121;
   font-size: 14px;
@@ -47627,7 +47643,6 @@ const VendorChevron$1 = styled$1.div`
   align-items: center;
   display: flex;
   width: 15%;
-
 `;
 const VendorNameAndPackagesContainer$1 = styled$1.div`
   display: flex;
@@ -47754,7 +47769,7 @@ const baseIconWrapperStyles = css`
   svg {
     pointer-events: none;
   }
-  
+
   svg path {
     fill: white;
   }
@@ -47768,15 +47783,14 @@ const DisabledTrashIconWrapper = styled$1.div`
     text-align: left;
     left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
   }
-  
+
   &[data-tooltip]:hover::after {
     left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
   }
-
 `;
 const TrashIconWrapper = styled$1.div`
   ${baseIconWrapperStyles}
-  
+
   &:hover {
     svg path {
       fill: #066768 !important;
@@ -47915,21 +47929,31 @@ styled.span`
 
 let FixedSizeList = null;
 try {
-  FixedSizeList = require('react-window').FixedSizeList;
+  FixedSizeList = require("react-window").FixedSizeList;
 } catch (e) {
-  console.error('react-window not found:', e);
+  console.error("react-window not found:", e);
 }
 const VENDOR_ITEM_HEIGHT = 72;
 const NewItemList = ({
   onBack,
   onVendorClick,
-  itemAndPackage
+  itemAndPackage,
+  searchValue = "",
+  onSearchChange = null,
+  filteredVendors = null,
+  isSearchLoading = false,
+  onLastRowsReached = () => {},
+  lastRowsThreshold = 3
 }) => {
-  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [internalSearch, setInternalSearch] = useState("");
   const [headerHeight, setHeaderHeight] = useState(0);
+  const [hasTriggered, setHasTriggered] = useState(false); // ADD THIS
   const headerRef = useRef(null);
   const searchInputRef = useRef(null);
   const timerRef = useRef(null);
+  const scrollWrapperRef = useRef(null);
+  const isExternalSearch = onSearchChange !== null;
+  const currentSearchValue = isExternalSearch ? searchValue : internalSearch;
   useEffect(() => {
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);
@@ -47937,16 +47961,31 @@ const NewItemList = ({
   }, []);
   const handleSearchChange = e => {
     const value = e.target.value;
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
+    if (isExternalSearch) {
+      onSearchChange(value);
+    } else {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        setInternalSearch(value);
+      }, 100);
     }
-    timerRef.current = setTimeout(() => {
-      setDebouncedSearch(value);
-    }, 100);
   };
+
+  // DEFINE filteredItems BEFORE using it
   const filteredItems = useMemo(() => {
-    if (!debouncedSearch) return itemAndPackage;
-    const searchLower = debouncedSearch.toLowerCase();
+    // Use external results if provided
+    if (filteredVendors !== null) {
+      return filteredVendors;
+    }
+
+    // Safety check
+    if (!itemAndPackage || !Array.isArray(itemAndPackage)) {
+      return [];
+    }
+
+    // Internal filtering
+    if (!currentSearchValue) return itemAndPackage;
+    const searchLower = currentSearchValue.toLowerCase();
     const results = [];
     const startsWithResults = [];
     for (let i = 0; i < itemAndPackage.length; i++) {
@@ -47958,7 +47997,33 @@ const NewItemList = ({
       }
     }
     return [...startsWithResults, ...results];
-  }, [debouncedSearch, itemAndPackage]);
+  }, [currentSearchValue, itemAndPackage, filteredVendors]);
+
+  // ONLY ONE scroll detection useEffect
+  useEffect(() => {
+    const scrollWrapper = scrollWrapperRef.current;
+    if (!scrollWrapper || !onLastRowsReached) return;
+    const handleScroll = () => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = scrollWrapper;
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - VENDOR_ITEM_HEIGHT * lastRowsThreshold;
+      if (isNearBottom && filteredItems.length > 0) {
+        if (!hasTriggered) {
+          onLastRowsReached();
+          setHasTriggered(true);
+        }
+      } else {
+        if (hasTriggered) {
+          setHasTriggered(false);
+        }
+      }
+    };
+    scrollWrapper.addEventListener("scroll", handleScroll);
+    return () => scrollWrapper.removeEventListener("scroll", handleScroll);
+  }, [onLastRowsReached, filteredItems.length, lastRowsThreshold, hasTriggered]);
   const highlightMatch = (text, query) => {
     if (!query) return text;
     const regex = new RegExp(`(${query})`, "ig");
@@ -47987,7 +48052,7 @@ const NewItemList = ({
           onVendorClick(item);
         }
       }
-    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, debouncedSearch.toLowerCase())), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
+    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, currentSearchValue.toLowerCase())), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
       const noPackagesSent = sentPackagesLength === 0;
       if (noPackagesSent) {
         return `0/${packagesLength} Packages Sent`;
@@ -48005,7 +48070,8 @@ const NewItemList = ({
     type: "search",
     placeholder: "Search",
     onChange: handleSearchChange
-  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, debouncedSearch !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
+  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, isSearchLoading ? "Searching..." : currentSearchValue !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
+    ref: scrollWrapperRef,
     headerHeight: headerHeight
   }, FixedSizeList ? /*#__PURE__*/React$1.createElement(FixedSizeList, {
     height: window.innerHeight - headerHeight - 48,
@@ -48026,7 +48092,7 @@ const NewItemList = ({
           onVendorClick(item);
         }
       }
-    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, debouncedSearch.toLowerCase())), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
+    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, currentSearchValue.toLowerCase())), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
       const noPackagesSent = sentPackagesLength === 0;
       if (noPackagesSent) {
         return `0/${packagesLength} Packages Sent`;
@@ -57358,12 +57424,20 @@ const ItemManagerPanel = _ref => {
     itemAndPackage = [],
     setItemAndPackage,
     linkColor = "#212121",
-    backgroundColor = 'white',
+    backgroundColor = "white",
     buttonTooltipText = "Please fill out all forms before sending.",
-    trashTooltipText = 'Vendor cannot be deleted since its  packages <br/> have already been sent as a form.',
+    trashTooltipText = "Vendor cannot be deleted since its  packages <br/> have already been sent as a form.",
     maxVisibleVendors = 12,
     componentText = "Scale",
-    SubTitleColor = "#8B8989"
+    SubTitleColor = "#8B8989",
+    searchValue = "",
+    onSearchChange = null,
+    filteredVendors = null,
+    isSearchLoading = false,
+    isLoading = false,
+    isLoadingText = "Loading Vendors...",
+    onLastRowsReached = () => {},
+    lastRowsThreshold = 3
   } = _ref;
   const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
@@ -57371,12 +57445,42 @@ const ItemManagerPanel = _ref => {
   const [isEditingExisting, setIsEditingExisting] = useState(false);
   const [trashIsHovered, setTrashIsHovered] = useState(false);
   const [headerHeight, setHeaderHeight] = useState(0);
+  const [hasTriggered, setHasTriggered] = useState(false);
+  const scrollWrapperRef = useRef(null);
   const headerRef = useRef(null);
   useEffect(() => {
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);
     }
   }, []);
+  useEffect(() => {
+    console.log("success");
+  }, []);
+  useEffect(() => {
+    const scrollWrapper = scrollWrapperRef.current;
+    if (!scrollWrapper || !onLastRowsReached) return;
+    const handleScroll = () => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = scrollWrapper;
+      const visibleVendors = itemAndPackage.filter(item => item.packages !== null).length;
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - 56 * lastRowsThreshold;
+      if (isNearBottom && visibleVendors > 0) {
+        if (!hasTriggered) {
+          onLastRowsReached();
+          setHasTriggered(true);
+        }
+      } else {
+        if (hasTriggered) {
+          setHasTriggered(false);
+        }
+      }
+    };
+    scrollWrapper.addEventListener("scroll", handleScroll);
+    return () => scrollWrapper.removeEventListener("scroll", handleScroll);
+  }, [onLastRowsReached, itemAndPackage, lastRowsThreshold, hasTriggered]);
   const hasVendorsWithPackages = () => {
     return itemAndPackage.some(item => item.packages !== null && Array.isArray(item.packages) && item.packages.length > 0);
   };
@@ -57411,7 +57515,7 @@ const ItemManagerPanel = _ref => {
     });
     setScreen("subitem");
   };
-  const hasValidStatus = pkg => pkg.hasOwnProperty('status') && pkg.status != null && pkg.status !== undefined && pkg.status !== '';
+  const hasValidStatus = pkg => pkg.hasOwnProperty("status") && pkg.status != null && pkg.status !== undefined && pkg.status !== "";
   const hasInvalidStatus = pkg => !hasValidStatus(pkg);
   const draftPackages = pkg => pkg.status === 1;
   const unsentPackages = () => {
@@ -57464,8 +57568,7 @@ const ItemManagerPanel = _ref => {
     if (screen === "success" && onSendForms) {
       onSendForms();
     }
-  }, [screen]); // Only run when screen changes
-
+  }, [screen]);
   if (screen === "subitem") {
     return /*#__PURE__*/React$1.createElement(Card, {
       width: width,
@@ -57553,7 +57656,13 @@ const ItemManagerPanel = _ref => {
     }, /*#__PURE__*/React$1.createElement(NewItemList, {
       onBack: () => setScreen("initial"),
       itemAndPackage: itemAndPackage,
-      onVendorClick: handleVendorClick
+      onVendorClick: handleVendorClick,
+      searchValue: searchValue,
+      onSearchChange: onSearchChange,
+      filteredVendors: filteredVendors,
+      isSearchLoading: isSearchLoading,
+      onLastRowsReached: onLastRowsReached,
+      lastRowsThreshold: lastRowsThreshold
     }));
   }
   const handleMouseEnter = () => setTrashIsHovered(true);
@@ -57590,7 +57699,7 @@ const ItemManagerPanel = _ref => {
       hoverBorderColor: linkColor
     })), /*#__PURE__*/React$1.createElement(Subtitle$1, {
       color: actuallyAllFormsSent ? "#90CE9C" : "#8b8989"
-    }, actuallyAllFormsSent ? '✔ All Forms Sent' : itemAndPackage.filter(item => item.packages !== null).length > 0 ? `${unsentPackages().reduce((acc, item) => acc + item.packages?.length, 0)} New Forms` : ''))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
+    }, actuallyAllFormsSent ? "All Forms Sent" : itemAndPackage.filter(item => item.packages !== null).length > 0 ? `${unsentPackages().reduce((acc, item) => acc + item.packages?.length, 0)} New Forms` : ""))), /*#__PURE__*/React$1.createElement(AddButtonContainer$1, null, /*#__PURE__*/React$1.createElement(LinkButton, {
       leftIcon: "Plus",
       onClick: () => setScreen("list"),
       rightIcon: "none",
@@ -57600,6 +57709,7 @@ const ItemManagerPanel = _ref => {
       textColor: linkColor,
       disabled: disableSection
     }))), /*#__PURE__*/React$1.createElement(VendorListWrapper$2, {
+      ref: scrollWrapperRef,
       disabled: disableSection,
       headerHeight: headerHeight
     }, /*#__PURE__*/React$1.createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => {
@@ -57649,7 +57759,14 @@ const ItemManagerPanel = _ref => {
         width: "14",
         height: "18"
       })));
-    }))));
+    })), isLoading && /*#__PURE__*/React$1.createElement(LoadingWrapper, null, /*#__PURE__*/React$1.createElement(Lottie, {
+      style: {
+        width: "24px",
+        height: "24px"
+      },
+      animationData: LoadingAnimation,
+      loop: true
+    }), /*#__PURE__*/React$1.createElement(LoadingText, null, isLoadingText))));
   }
 };
 
@@ -57719,6 +57836,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;
@@ -57737,6 +57869,9 @@ const scrollableStyles = `
 `;
 const TooltipWrapper = styled(Tooltip$2)`
   width: 100%;
+  .tooltip-wrapper {
+    width: 100%;
+  }
 `;
 const DropdownContainer = styled.div`
   position: relative;
@@ -57834,6 +57969,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; 
@@ -58150,7 +58320,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,
@@ -58176,7 +58393,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);
@@ -58463,9 +58680,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,