sag_components 2.0.0-beta145 → 2.0.0-beta147

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

@@ -24318,24 +24318,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -43452,6 +43451,7 @@ const Tooltip = styled.div`
   z-index: 10;
   white-space: nowrap;
   transition: opacity 0.2s;
+  max-height: 600px;
 
   &::after {
     content: '';
@@ -43469,7 +43469,6 @@ const ExpandButtonWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-
   &:hover ${Tooltip},
   &:focus-within ${Tooltip} {
     visibility: visible;
@@ -51830,14 +51829,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 +51853,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 +51875,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 +52031,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") {
@@ -52254,16 +52261,19 @@ const DropdownList = styled.ul`
         top: 110%;
       `}
 `;
+const SectionDiv = styled.div`
+  &:nth-child(2),
+  &:nth-child(4){
+    border-top: 1px solid #e6e2e2ff;
+    padding-top: 16px;
+  }
+`;
 const SectionTitle = styled.li`
   font-size: 14px;
   color: #bdbdbd;
   padding: 12px 12px 0 12px;
   font-weight: 500;
   pointer-events: none;
-  &:not(:first-child) {
-    border-top: 1px solid #bdbdbd;
-    padding-top: 16px;
-  }
 `;
 const DropdownItem = styled.li`
   padding: 8px 16px;
@@ -52808,9 +52818,9 @@ const OverlayDropdown = _ref => {
     dropdownMaxHeight: dropdownMaxHeight,
     width: width,
     position: dropdownPosition
-  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement("div", {
+  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement(SectionDiv, {
     key: group.overlayCode
-  }, /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
+  }, (groupIndex === 0 || groupIndex === 3) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
     key: item.value,
     selected: item.value === value,
     selectedColor: selectedColor,