sag_components 2.0.0-beta117 → 2.0.0-beta119

package/dist/index.esm.js

@@ -41469,12 +41469,15 @@ styled.input`
   font-size: 15px;
   outline: none;
 `;
-const VendorList$2 = styled.div`
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 0 8px 0;
+const VendorListWrapper$2 = styled.div`
+  height: calc(100% - ${props => props.headerHeight}px);
+  background: #fff;
+  width: 100%;
+  overflow: auto;
   border-radius: 0 0 8px 8px;
 `;
+const VendorList$2 = styled.div`
+`;
 const VendorItem$1 = styled.div`
   display: flex;
   align-items: center;
@@ -41571,38 +41574,37 @@ const Trash$1 = styled.div`
 `;
 
 const VendorSelectionContainer = styled(Card)`
-  display: flex;
-  flex-direction: column;
+  /* display: flex;
+  flex-direction: column; */
   background: #faf9fb;
   width: 100%;
   height: 100%;
   overflow: hidden;
+  font-family: 'Poppins', sans-serif;
 `;
-const VendorSelectionTitle = styled.span`
-  margin-left: 8px;
+const VendorSelectionTitle = styled.h5`
+  text-align: left; 
   color: #212121;
+  margin: 0 0 16px;
   font-size: 18px;
-  align-self: start;
-  padding-left: 16px;
+  padding-left: 6px;
   font-weight: 700;
 `;
 const VendorBackTitle = styled.span`
   margin-left: 4px;
   color: #212121;
-  font-feature-settings: "liga" off;
-  font-family: Poppins;
   font-size: 16px;
-  font-style: normal;
   font-weight: 400;
-  line-height: normal;
 `;
 const VendorHeader$1 = styled.div`
+  padding: 12px 16px 20px;
+  text-align: left;
+`;
+const VendorRoute = styled.div`
   display: flex;
   align-items: center;
-  padding-left: 16px;
-  padding-bottom: 14px;
   gap: 4px;
-  padding-top: 12px;
+  margin-bottom: 16px;
   background: #faf9fb;
 `;
 const VendorBackButton = styled.button`
@@ -41613,7 +41615,7 @@ const VendorBackButton = styled.button`
   cursor: pointer;
 `;
 const VendorSearch = styled.input`
-  margin: 16px;
+  width: 100%;
   margin-bottom: 8px;
   padding: 10px 14px;
   border-radius: 9px;
@@ -41623,10 +41625,6 @@ const VendorSearch = styled.input`
   outline: none;
 `;
 const VendorSearchResult = styled.span`
-  margin-left: 18px;
-  margin-bottom: 8px;
-  text-align: start;
-  height: 30px;
   color: #212121;
   font-size: 16px;
   font-weight: 400;
@@ -41636,14 +41634,15 @@ const VendorNameAndPackagesContainer = styled.div`
   margin-left: 52px;
   flex-direction: column;
 `;
-const VendorList$1 = styled.div`
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 0 8px 0;
+const VendorListWrapper$1 = styled.div`
+  height: calc(100% - ${props => props.headerHeight}px);
   background: #fff;
   width: 100%;
+  overflow: auto;
   border-radius: 0 0 8px 8px;
 `;
+const VendorList$1 = styled.div`
+`;
 const VendorItem = styled.div`
   display: flex;
   align-items: center;
@@ -41709,6 +41708,13 @@ const NewItemList = ({
   itemAndPackage
 }) => {
   const [search, setSearch] = useState("");
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const headerRef = useRef(null);
+  useEffect(() => {
+    if (headerRef.current) {
+      setHeaderHeight(headerRef.current.offsetHeight);
+    }
+  }, []);
   const searchLower = search.toLowerCase();
   const startsWithMatches = itemAndPackage.filter(i => i.name.toLowerCase().startsWith(searchLower));
   const includesMatches = itemAndPackage.filter(i => !i.name.toLowerCase().startsWith(searchLower) && i.name.toLowerCase().includes(searchLower));
@@ -41722,19 +41728,23 @@ const NewItemList = ({
       key: i
     }, part) : part);
   };
-  return /*#__PURE__*/React$1.createElement(VendorSelectionContainer, null, /*#__PURE__*/React$1.createElement(VendorHeader$1, null, /*#__PURE__*/React$1.createElement(VendorBackButton, {
+  return /*#__PURE__*/React$1.createElement(VendorSelectionContainer, null, /*#__PURE__*/React$1.createElement(VendorHeader$1, {
+    ref: headerRef
+  }, /*#__PURE__*/React$1.createElement(VendorRoute, null, /*#__PURE__*/React$1.createElement(VendorBackButton, {
     onClick: onBack
   }, /*#__PURE__*/React$1.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React$1.createElement(VendorBackTitle, null, "Selected Vendors")), /*#__PURE__*/React$1.createElement(VendorSelectionTitle, null, "Add New Vendor"), /*#__PURE__*/React$1.createElement(VendorSearch, {
     type: "search",
     placeholder: "Search",
     value: search,
     onChange: e => setSearch(e.target.value)
-  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, search !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " "), /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem, {
+  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, search !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
+    headerHeight: headerHeight
+  }, /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem, {
     onClick: e => {
       if (onVendorClick) onVendorClick(item);
     },
     key: idx
-  }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, searchLower)), item.packages && /*#__PURE__*/React$1.createElement(VendorPackages, null, `0/${item.packages.length} Packages Sent`)), /*#__PURE__*/React$1.createElement(VendorChevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))))));
+  }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, searchLower)), item.packages && /*#__PURE__*/React$1.createElement(VendorPackages, null, `0/${item.packages.length} Packages Sent`)), /*#__PURE__*/React$1.createElement(VendorChevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null)))))));
 };
 
 const NewSubitemContainer$1 = styled(Card)`
@@ -50837,6 +50847,13 @@ const ItemManagerPanel = _ref => {
   const [selectedVendor, setSelectedVendor] = useState(null);
   const [selectedPackage, setSelectedPackage] = useState(null);
   const [isEditingExisting, setIsEditingExisting] = useState(false);
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const headerRef = useRef(null);
+  useEffect(() => {
+    if (headerRef.current) {
+      setHeaderHeight(headerRef.current.offsetHeight);
+    }
+  }, []);
   const handleVendorClick = vendor => {
     // console.log("Vendor clicked:", vendor);
     setSelectedVendor(vendor);
@@ -51021,7 +51038,9 @@ const ItemManagerPanel = _ref => {
       text: "First Vendor",
       type: "primary",
       textColor: linkColor
-    })), /*#__PURE__*/React$1.createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem$1, {
+    })), /*#__PURE__*/React$1.createElement(VendorListWrapper$2, {
+      headerHeight: headerHeight
+    }, /*#__PURE__*/React$1.createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem$1, {
       key: idx
     }, /*#__PURE__*/React$1.createElement(DotContainer, null, item.packages.length === 0 && /*#__PURE__*/React$1.createElement(RedDot, null)), /*#__PURE__*/React$1.createElement(LineContainer, {
       onClick: e => {
@@ -51040,7 +51059,7 @@ const ItemManagerPanel = _ref => {
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React$1.createElement("path", {
       d: "M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM14 1H10.5L9.5 0H4.5L3.5 1H0V3H14V1Z"
-    })))))));
+    }))))))));
   }
 };