sag_components 2.0.0-beta145 → 2.0.0-beta146

package/dist/index.js

@@ -43462,6 +43462,7 @@ const Tooltip = styled__default["default"].div`
   z-index: 10;
   white-space: nowrap;
   transition: opacity 0.2s;
+  max-height: 600px;
 
   &::after {
     content: '';
@@ -43479,7 +43480,6 @@ const ExpandButtonWrapper = styled__default["default"].div`
   display: flex;
   justify-content: center;
   align-items: center;
-
   &:hover ${Tooltip},
   &:focus-within ${Tooltip} {
     visibility: visible;
@@ -51840,14 +51840,20 @@ var successAnimation = {
 };
 
 const SAMPLE_VENDORS = ["Colgate-Palmolive", "Unilever", "P&G", "Kellog’s", "Coca-Cola Company", "Pepsico", "Colgate-Palmolive", "Unilever", "P&G", "Kellog’s", "Coca-Cola Company", "Pepsico", "Colgate-Palmolive", "Unilever", "P&G", "Kellog’s", "Coca-Cola Company", "Pepsico"];
-const COLLAPSED_COUNT = 7;
 const SuccessScreen = ({
   width = "100%",
   height = "100%",
   packagesCount = 7,
   vendorsCount = 3,
-  vendors = SAMPLE_VENDORS
+  vendors = SAMPLE_VENDORS,
+  maxVisibleVendors = 12
 }) => {
+  const [visibleCount, setVisibleCount] = React$1.useState(() => Math.min(vendors.length, maxVisibleVendors));
+  React$1.useEffect(() => {
+    const count = Math.min(maxVisibleVendors, vendors.length);
+    setVisibleCount(count);
+  }, [vendors, maxVisibleVendors]);
+  const hiddenVendors = vendors.slice(visibleCount);
   return /*#__PURE__*/React__default["default"].createElement(SuccessScreenContainer, {
     width: width,
     height: height
@@ -51858,9 +51864,9 @@ const SuccessScreen = ({
     },
     animationData: successAnimation,
     loop: false
-  })), /*#__PURE__*/React__default["default"].createElement(SuccessHeader, null, /*#__PURE__*/React__default["default"].createElement(SuccessTitle, null, "Packages", /*#__PURE__*/React__default["default"].createElement("br", null), " Successfully Sent"), /*#__PURE__*/React__default["default"].createElement(SuccessSubtitle, null, /*#__PURE__*/React__default["default"].createElement("b", null, packagesCount), " packages have been sent to", " ", /*#__PURE__*/React__default["default"].createElement("b", null, vendorsCount), " vendors")), /*#__PURE__*/React__default["default"].createElement(DividerLine, null), /*#__PURE__*/React__default["default"].createElement(VendorListWrapper, null, /*#__PURE__*/React__default["default"].createElement(VendorList, null, vendors.slice(0, COLLAPSED_COUNT).map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(VendorListItem, {
+  })), /*#__PURE__*/React__default["default"].createElement(SuccessHeader, null, /*#__PURE__*/React__default["default"].createElement(SuccessTitle, null, "Packages", /*#__PURE__*/React__default["default"].createElement("br", null), " Successfully Sent"), /*#__PURE__*/React__default["default"].createElement(SuccessSubtitle, null, /*#__PURE__*/React__default["default"].createElement("b", null, packagesCount), " packages have been sent to", " ", /*#__PURE__*/React__default["default"].createElement("b", null, vendorsCount), " vendors")), /*#__PURE__*/React__default["default"].createElement(DividerLine, null), /*#__PURE__*/React__default["default"].createElement(VendorListWrapper, null, /*#__PURE__*/React__default["default"].createElement(VendorList, null, vendors.slice(0, visibleCount).map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(VendorListItem, {
     key: idx
-  }, vendor))), /*#__PURE__*/React__default["default"].createElement(ExpandButtonWrapper, null, /*#__PURE__*/React__default["default"].createElement(ExpandButton, {
+  }, vendor))), hiddenVendors.length > 0 && /*#__PURE__*/React__default["default"].createElement(ExpandButtonWrapper, null, /*#__PURE__*/React__default["default"].createElement(ExpandButton, {
     tabIndex: 0
   }, "\u2022\u2022\u2022"), /*#__PURE__*/React__default["default"].createElement(Tooltip, null, vendors.map((vendor, idx) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
     key: idx
@@ -51880,7 +51886,8 @@ const ItemManagerPanel = _ref => {
     setItemAndPackage,
     linkColor = "#212121",
     backgroundColor = 'white',
-    buttonTooltipText = "Please fill out all forms before sending."
+    buttonTooltipText = "Please fill out all forms before sending.",
+    maxVisibleVendors = 12
   } = _ref;
   const [screen, setScreen] = React$1.useState("initial");
   const [selectedVendor, setSelectedVendor] = React$1.useState(null);
@@ -52035,7 +52042,8 @@ const ItemManagerPanel = _ref => {
       height: height,
       packagesCount: itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0),
       vendorsCount: itemAndPackage.filter(item => item.packages !== null).length.toString(),
-      vendors: itemAndPackage.filter(item => item.packages !== null).map(item => item.name)
+      vendors: itemAndPackage.filter(item => item.packages !== null).map(item => item.name),
+      maxVisibleVendors: maxVisibleVendors
     });
   }
   if (screen === "subitemdetail") {