sag_components 2.0.0-beta117 → 2.0.0-beta118

package/dist/index.js

@@ -41581,38 +41581,37 @@ const Trash$1 = styled__default["default"].div`
 `;
 
 const VendorSelectionContainer = styled__default["default"](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__default["default"].span`
-  margin-left: 8px;
+const VendorSelectionTitle = styled__default["default"].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__default["default"].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__default["default"].div`
+  padding: 12px 16px 20px;
+  text-align: left;
+`;
+const VendorRoute = styled__default["default"].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__default["default"].button`
@@ -41623,7 +41622,7 @@ const VendorBackButton = styled__default["default"].button`
   cursor: pointer;
 `;
 const VendorSearch = styled__default["default"].input`
-  margin: 16px;
+  width: 100%;
   margin-bottom: 8px;
   padding: 10px 14px;
   border-radius: 9px;
@@ -41633,10 +41632,6 @@ const VendorSearch = styled__default["default"].input`
   outline: none;
 `;
 const VendorSearchResult = styled__default["default"].span`
-  margin-left: 18px;
-  margin-bottom: 8px;
-  text-align: start;
-  height: 30px;
   color: #212121;
   font-size: 16px;
   font-weight: 400;
@@ -41647,9 +41642,8 @@ const VendorNameAndPackagesContainer = styled__default["default"].div`
   flex-direction: column;
 `;
 const VendorList$1 = styled__default["default"].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;
@@ -41719,6 +41713,13 @@ const NewItemList = ({
   itemAndPackage
 }) => {
   const [search, setSearch] = React$1.useState("");
+  const [headerHeight, setHeaderHeight] = React$1.useState(0);
+  const headerRef = React$1.useRef(null);
+  React$1.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));
@@ -41732,14 +41733,18 @@ const NewItemList = ({
       key: i
     }, part) : part);
   };
-  return /*#__PURE__*/React__default["default"].createElement(VendorSelectionContainer, null, /*#__PURE__*/React__default["default"].createElement(VendorHeader$1, null, /*#__PURE__*/React__default["default"].createElement(VendorBackButton, {
+  return /*#__PURE__*/React__default["default"].createElement(VendorSelectionContainer, null, /*#__PURE__*/React__default["default"].createElement(VendorHeader$1, {
+    ref: headerRef
+  }, /*#__PURE__*/React__default["default"].createElement(VendorRoute, null, /*#__PURE__*/React__default["default"].createElement(VendorBackButton, {
     onClick: onBack
   }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default["default"].createElement(VendorBackTitle, null, "Selected Vendors")), /*#__PURE__*/React__default["default"].createElement(VendorSelectionTitle, null, "Add New Vendor"), /*#__PURE__*/React__default["default"].createElement(VendorSearch, {
     type: "search",
     placeholder: "Search",
     value: search,
     onChange: e => setSearch(e.target.value)
-  }), /*#__PURE__*/React__default["default"].createElement(VendorSearchResult, null, search !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " "), /*#__PURE__*/React__default["default"].createElement(VendorList$1, null, filteredItems.map((item, idx) => /*#__PURE__*/React__default["default"].createElement(VendorItem, {
+  }), /*#__PURE__*/React__default["default"].createElement(VendorSearchResult, null, search !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React__default["default"].createElement(VendorList$1, {
+    headerHeight: headerHeight
+  }, filteredItems.map((item, idx) => /*#__PURE__*/React__default["default"].createElement(VendorItem, {
     onClick: e => {
       if (onVendorClick) onVendorClick(item);
     },