sag_components 2.0.0-beta145 → 2.0.0-beta146

package/dist/index.d.ts

@@ -1509,7 +1509,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, }: {
+declare function ItemManagerPanel({ width, height, disableSection, onSendForms, editMode, disabledSendForms, AllFormsSent, itemAndPackage, setItemAndPackage, linkColor, backgroundColor, buttonTooltipText, maxVisibleVendors }: {
     width?: string;
     height?: string;
     disableSection?: boolean;
@@ -1522,6 +1522,7 @@ declare function ItemManagerPanel({ width, height, disableSection, onSendForms,
     linkColor?: string;
     backgroundColor?: string;
     buttonTooltipText?: string;
+    maxVisibleVendors?: number;
 }): react_jsx_runtime.JSX.Element;
 
 /**

package/dist/index.esm.js

@@ -43452,6 +43452,7 @@ const Tooltip = styled.div`
   z-index: 10;
   white-space: nowrap;
   transition: opacity 0.2s;
+  max-height: 600px;
 
   &::after {
     content: '';
@@ -43469,7 +43470,6 @@ const ExpandButtonWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-
   &:hover ${Tooltip},
   &:focus-within ${Tooltip} {
     visibility: visible;
@@ -51830,14 +51830,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] = useState(() => Math.min(vendors.length, maxVisibleVendors));
+  useEffect(() => {
+    const count = Math.min(maxVisibleVendors, vendors.length);
+    setVisibleCount(count);
+  }, [vendors, maxVisibleVendors]);
+  const hiddenVendors = vendors.slice(visibleCount);
   return /*#__PURE__*/React$1.createElement(SuccessScreenContainer, {
     width: width,
     height: height
@@ -51848,9 +51854,9 @@ const SuccessScreen = ({
     },
     animationData: successAnimation,
     loop: false
-  })), /*#__PURE__*/React$1.createElement(SuccessHeader, null, /*#__PURE__*/React$1.createElement(SuccessTitle, null, "Packages", /*#__PURE__*/React$1.createElement("br", null), " Successfully Sent"), /*#__PURE__*/React$1.createElement(SuccessSubtitle, null, /*#__PURE__*/React$1.createElement("b", null, packagesCount), " packages have been sent to", " ", /*#__PURE__*/React$1.createElement("b", null, vendorsCount), " vendors")), /*#__PURE__*/React$1.createElement(DividerLine, null), /*#__PURE__*/React$1.createElement(VendorListWrapper, null, /*#__PURE__*/React$1.createElement(VendorList, null, vendors.slice(0, COLLAPSED_COUNT).map((vendor, idx) => /*#__PURE__*/React$1.createElement(VendorListItem, {
+  })), /*#__PURE__*/React$1.createElement(SuccessHeader, null, /*#__PURE__*/React$1.createElement(SuccessTitle, null, "Packages", /*#__PURE__*/React$1.createElement("br", null), " Successfully Sent"), /*#__PURE__*/React$1.createElement(SuccessSubtitle, null, /*#__PURE__*/React$1.createElement("b", null, packagesCount), " packages have been sent to", " ", /*#__PURE__*/React$1.createElement("b", null, vendorsCount), " vendors")), /*#__PURE__*/React$1.createElement(DividerLine, null), /*#__PURE__*/React$1.createElement(VendorListWrapper, null, /*#__PURE__*/React$1.createElement(VendorList, null, vendors.slice(0, visibleCount).map((vendor, idx) => /*#__PURE__*/React$1.createElement(VendorListItem, {
     key: idx
-  }, vendor))), /*#__PURE__*/React$1.createElement(ExpandButtonWrapper, null, /*#__PURE__*/React$1.createElement(ExpandButton, {
+  }, vendor))), hiddenVendors.length > 0 && /*#__PURE__*/React$1.createElement(ExpandButtonWrapper, null, /*#__PURE__*/React$1.createElement(ExpandButton, {
     tabIndex: 0
   }, "\u2022\u2022\u2022"), /*#__PURE__*/React$1.createElement(Tooltip, null, vendors.map((vendor, idx) => /*#__PURE__*/React$1.createElement(React$1.Fragment, {
     key: idx
@@ -51870,7 +51876,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] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
@@ -52025,7 +52032,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") {