sag_components 2.0.0-beta117 → 2.0.0-beta118

package/dist/index.esm.js

@@ -41571,38 +41571,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 +41612,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 +41622,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;
@@ -41637,9 +41632,8 @@ const VendorNameAndPackagesContainer = styled.div`
   flex-direction: column;
 `;
 const VendorList$1 = styled.div`
-  flex: 1;
+  height: calc(100% - ${props => props.headerHeight}px);
   overflow-y: auto;
-  padding: 0 0 8px 0;
   background: #fff;
   width: 100%;
   border-radius: 0 0 8px 8px;
@@ -41709,6 +41703,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,14 +41723,18 @@ 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(VendorList$1, {
+    headerHeight: headerHeight
+  }, filteredItems.map((item, idx) => /*#__PURE__*/React$1.createElement(VendorItem, {
     onClick: e => {
       if (onVendorClick) onVendorClick(item);
     },