sag_components 2.0.0-beta145 → 2.0.0-beta147

package/dist/index.js

@@ -24328,24 +24328,23 @@ const IconContainer$2 = styled__default["default"].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] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState('');
@@ -43462,6 +43461,7 @@ const Tooltip = styled__default["default"].div`
   z-index: 10;
   white-space: nowrap;
   transition: opacity 0.2s;
+  max-height: 600px;
 
   &::after {
     content: '';
@@ -43479,7 +43479,6 @@ const ExpandButtonWrapper = styled__default["default"].div`
   display: flex;
   justify-content: center;
   align-items: center;
-
   &:hover ${Tooltip},
   &:focus-within ${Tooltip} {
     visibility: visible;
@@ -51840,14 +51839,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 +51863,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 +51885,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 +52041,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") {
@@ -52264,16 +52271,19 @@ const DropdownList = styled__default["default"].ul`
         top: 110%;
       `}
 `;
+const SectionDiv = styled__default["default"].div`
+  &:nth-child(2),
+  &:nth-child(4){
+    border-top: 1px solid #e6e2e2ff;
+    padding-top: 16px;
+  }
+`;
 const SectionTitle = styled__default["default"].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__default["default"].li`
   padding: 8px 16px;
@@ -52818,9 +52828,9 @@ const OverlayDropdown = _ref => {
     dropdownMaxHeight: dropdownMaxHeight,
     width: width,
     position: dropdownPosition
-  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React__default["default"].createElement(SectionDiv, {
     key: group.overlayCode
-  }, /*#__PURE__*/React__default["default"].createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React__default["default"].createElement(DropdownItem, {
+  }, (groupIndex === 0 || groupIndex === 3) && /*#__PURE__*/React__default["default"].createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React__default["default"].createElement(DropdownItem, {
     key: item.value,
     selected: item.value === value,
     selectedColor: selectedColor,