sag_components 2.0.0-beta307 → 2.0.0-beta309

package/dist/index.d.ts

@@ -1556,7 +1556,7 @@ declare function RangePop(props: any): react_jsx_runtime.JSX.Element;
 
 declare function SearchInput(props: any): react_jsx_runtime.JSX.Element;
 
-declare function ItemManagerPanel({ width, height, disableSection, onSendForms, editMode, disabledSendForms, AllFormsSent, itemAndPackage, setItemAndPackage, linkColor, backgroundColor, buttonTooltipText, trashTooltipText, maxVisibleVendors, componentText, SubTitleColor }: {
+declare function ItemManagerPanel({ width, height, disableSection, onSendForms, editMode, disabledSendForms, AllFormsSent, itemAndPackage, setItemAndPackage, linkColor, backgroundColor, buttonTooltipText, trashTooltipText, maxVisibleVendors, componentText, SubTitleColor, searchValue, onSearchChange, filteredVendors, isSearchLoading, isLoading, isLoadingText, onLastRowsReached, lastRowsThreshold, onBackFromList, }: {
     width?: string;
     height?: string;
     disableSection?: boolean;
@@ -1573,6 +1573,15 @@ declare function ItemManagerPanel({ width, height, disableSection, onSendForms,
     maxVisibleVendors?: number;
     componentText?: string;
     SubTitleColor?: string;
+    searchValue?: string;
+    onSearchChange?: any;
+    filteredVendors?: any;
+    isSearchLoading?: boolean;
+    isLoading?: boolean;
+    isLoadingText?: string;
+    onLastRowsReached?: () => void;
+    lastRowsThreshold?: number;
+    onBackFromList?: any;
 }): react_jsx_runtime.JSX.Element;
 
 /**

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);
   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`;
@@ -48242,112 +48308,6 @@ const CustomTooltip = styled(Tooltip$2)`
   }
 `;
 
-/* Custom properties */
-styled.div`
-  --tooltip-text-color: white;
-  --tooltip-background-color: rgba(0, 0, 0, 0.9);
-  --tooltip-margin: 30px;
-  --tooltip-arrow-size: 6px;
-`;
-
-/* Text wrapper with ellipsis */
-styled.div`
-  display: inline-block;
-  position: relative;
-  cursor: ${props => props.isOverflowing ? 'help' : 'default'};
-`;
-styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: ${props => props.maxWidth}px;
-`;
-
-/* Absolute positioning */
-styled.div`
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
-  position: absolute;
-  border-radius: 6px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 8px 12px;
-  color: var(--tooltip-text-color);
-  background: var(--tooltip-background-color);
-  font-size: 14px;
-  font-family: inherit;
-  line-height: 1.4;
-  z-index: 99999;
-  max-width: 300px;
-  white-space: normal;
-  word-wrap: break-word;
-  opacity: ${props => props.show ? 1 : 0};
-  visibility: ${props => props.show ? 'visible' : 'hidden'};
-  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
-  
-  /* CSS border triangles */
-  &.controls::before {
-    content: " ";
-    left: 50%;
-    border: solid transparent;
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: var(--tooltip-arrow-size);
-    margin-left: calc(var(--tooltip-arrow-size) * -1);
-  }
-
-  &.controls.top {
-    bottom: calc(100% + var(--tooltip-margin));
-    transform: translateX(-50%) ${props => props.show ? 'translateY(0)' : 'translateY(-4px)'};
-  }
-
-  /* CSS border triangles */
-  &.controls.top::before {
-    top: 100%;
-    border-top-color: var(--tooltip-background-color);
-  }
-
-  &.controls.right {
-    left: calc(100% + var(--tooltip-margin));
-    top: 50%;
-    transform: translateY(-50%) ${props => props.show ? 'translateX(0)' : 'translateX(-4px)'};
-  }
-
-  /* CSS border triangles */
-  &.controls.right::before {
-    left: calc(var(--tooltip-arrow-size) * -1);
-    top: 50%;
-    transform: translateY(-50%);
-    border-right-color: var(--tooltip-background-color);
-  }
-
-  &.controls.bottom {
-    top: calc(100% + var(--tooltip-margin));
-    transform: translateX(-50%) ${props => props.show ? 'translateY(0)' : 'translateY(4px)'};
-  }
-
-  /* CSS border triangles */
-  &.controls.bottom::before {
-    bottom: 100%;
-    border-bottom-color: var(--tooltip-background-color);
-  }
-
-  &.controls.left {
-    right: calc(100% + var(--tooltip-margin));
-    top: 50%;
-    transform: translateY(-50%) ${props => props.show ? 'translateX(0)' : 'translateX(4px)'};
-  }
-
-  /* CSS border triangles */
-  &.controls.left::before {
-    right: calc(var(--tooltip-arrow-size) * -1);
-    top: 50%;
-    transform: translateY(-50%);
-    border-left-color: var(--tooltip-background-color);
-  }
-`;
-
 const NewSubitemList = props => {
   const {
     vendor,
@@ -57358,12 +57318,21 @@ 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,
+    onBackFromList = null
   } = _ref;
   const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
@@ -57371,12 +57340,39 @@ 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(() => {
+    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 +57407,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 +57460,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,
@@ -57551,9 +57546,20 @@ const ItemManagerPanel = _ref => {
       height: height,
       backgroundColor: backgroundColor
     }, /*#__PURE__*/React$1.createElement(NewItemList, {
-      onBack: () => setScreen("initial"),
+      onBack: () => {
+        if (onBackFromList) {
+          onBackFromList();
+        }
+        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 +57596,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 +57606,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 +57656,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))));
   }
 };