sag_components 2.0.0-beta211 → 2.0.0-beta213

package/dist/index.esm.js

@@ -34625,7 +34625,7 @@ const ModalBody = styled.div`
   width: 100%;
   height: 100%;
 `;
-const TooltipContent$1 = styled.span`
+const TooltipContent$3 = styled.span`
   color: #212121;
   font-family: Poppins;
   font-size: 14px;
@@ -34698,7 +34698,7 @@ const ModalWithOverlay = props => {
   }), showOkButton && (disableOkButton && tooltipContent !== '' ? /*#__PURE__*/React$1.createElement(Tooltip$2, {
     direction: "top",
     topFactor: -0.85,
-    content: /*#__PURE__*/React$1.createElement(TooltipContent$1, {
+    content: /*#__PURE__*/React$1.createElement(TooltipContent$3, {
       dangerouslySetInnerHTML: {
         __html: tooltipContent
       }
@@ -35759,7 +35759,8 @@ const Input$2 = _ref => {
     rightIconOnClick,
     multiline = false,
     rows = 3,
-    maxLength
+    maxLength,
+    regex
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -35778,13 +35779,19 @@ const Input$2 = _ref => {
   };
   const handleInputChange = e => {
     setIsFocused(true);
-    setInputValue(e.target.value);
+    let newValue = e.target.value; // ← CHANGE: use let instead of const
+
+    // ← ADD THIS: Apply filter pattern if provided
+    if (regex) {
+      newValue = newValue.replace(regex, "");
+    }
+    setInputValue(newValue); // ← CHANGE: use newValue instead of e.target.value
     if (inputRef?.current) {
       inputRef?.current?.focus();
     }
     onChange({
-      newValue: e.target.value || ""
-    });
+      newValue: newValue || ""
+    }); // ← CHANGE: use newValue instead of e.target.value
   };
   const handleContainerClick = e => {
     if (onClick && typeof onClick === "function") {
@@ -35947,7 +35954,8 @@ Input$2.propTypes = {
   password: PropTypes.bool,
   multiline: PropTypes.bool,
   rows: PropTypes.number,
-  maxLength: PropTypes.number
+  maxLength: PropTypes.number,
+  regex: PropTypes.instanceOf(RegExp)
 };
 Input$2.defaultProps = {
   placeHolder: "Type...",
@@ -35970,7 +35978,8 @@ Input$2.defaultProps = {
   password: false,
   multiline: false,
   rows: 3,
-  maxLength: undefined
+  maxLength: undefined,
+  regex: undefined
 };
 
 const ToggleSwitchLabel = styled.label`
@@ -39556,7 +39565,7 @@ const CloseButton = styled.button`
     transform: scale(0.95);
   }
 `;
-const TooltipContent = styled.span`
+const TooltipContent$2 = styled.span`
   color: #212121;
   font-family: Poppins;
   font-size: 14px;
@@ -39645,7 +39654,7 @@ const MessageBox = _ref => {
     direction: "top",
     showTooltip: isDisabled,
     topFactor: -0.85,
-    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+    content: /*#__PURE__*/React$1.createElement(TooltipContent$2, {
       dangerouslySetInnerHTML: {
         __html: tooltipContent
       }
@@ -39733,7 +39742,7 @@ const TrashIcon = ({
 const DisabledTrashIcon = ({
   width = "22",
   height = "22",
-  color = "#D9D9D9"
+  color = "#B1B1B1"
 }) => {
   return /*#__PURE__*/React$1.createElement("svg", {
     width: width,
@@ -39746,7 +39755,7 @@ const DisabledTrashIcon = ({
     fill: color
   }), /*#__PURE__*/React$1.createElement("path", {
     d: "M0.853591 21.8534L0.146484 21.1463L21.1463 0.146484L21.8534 0.853591L0.853591 21.8534Z",
-    fill: "#D9D9D9"
+    fill: "#B1B1B1"
   }));
 };
 
@@ -44470,12 +44479,12 @@ const VendorItem$1 = styled$1.div`
   cursor: pointer;
   
   &:hover {
-    background: #f7f7fa;
+    background: #E6F0F0;
       .trash-icon svg path {
         fill: #B1B1B1;
       }
       .trash-icon-disabled svg path {
-        fill: #D9D9D9;
+        fill: #B1B1B1;
       }
   }
 `;
@@ -44538,6 +44547,14 @@ const CustomTooltip$1 = styled$1(Tooltip$2)`
     }
   }
 `;
+const TooltipContent$1 = styled$1.span`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 const Container$1 = styled$1.div`
   display: flex;
   align-items: center;
@@ -44634,6 +44651,7 @@ const DisabledTrashIconWrapper = styled$1.div`
   &[data-tooltip]:hover::after {
     left: calc(var(--tooltip-left, 0px) + var(--tooltip-width, 0px) / 2 - 50px);
   }
+
 `;
 const TrashIconWrapper = styled$1.div`
   ${baseIconWrapperStyles}
@@ -44959,8 +44977,19 @@ const Item$1 = styled.div`
     .trash-icon svg path {
       fill: #b1b1b1;
     }
+    .trash-icon-disabled svg path {
+      fill: #B1B1B1;
+    }
   }
 `;
+const TooltipContent = styled.span`
+  color: #212121;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 const Title$2 = styled.div`
   font-size: 14px;
   overflow: hidden;
@@ -45150,6 +45179,7 @@ const NewSubitemList = props => {
     linkColor
   } = props;
   const [isHovered, setIsHovered] = useState(false);
+  const [trashIsHovered, setTrashIsHovered] = useState(false);
   const vendorItems = itemAndPackage.find(i => i.name === vendor.name).packages || [];
   const onDeletePackage = item => {
     const updatedPackages = vendorItems.filter(pkg => pkg.brands !== item.brands);
@@ -45184,6 +45214,8 @@ const NewSubitemList = props => {
   };
   const handleMouseEnter = () => setIsHovered(true);
   const handleMouseLeave = () => setIsHovered(false);
+  const handleMouseTrashEnter = () => setTrashIsHovered(true);
+  const handleMouseTrashLeave = () => setTrashIsHovered(false);
   return /*#__PURE__*/React$1.createElement(NewSubitemContainer$1, null, /*#__PURE__*/React$1.createElement(Header$1, null, /*#__PURE__*/React$1.createElement(BackButton$1, {
     onClick: onBack
   }, /*#__PURE__*/React$1.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React$1.createElement(BackTitle$1, null, "All Vendors")), /*#__PURE__*/React$1.createElement(SelectionTitle$1, null, vendor.name), /*#__PURE__*/React$1.createElement(AddButtonContainer, null, /*#__PURE__*/React$1.createElement(LinkButton, {
@@ -45200,7 +45232,11 @@ const NewSubitemList = props => {
     ref: el => setupTooltip(el, "Package was Sent")
   }, /*#__PURE__*/React$1.createElement(CustomTooltip, {
     hideTooltip: isHovered,
-    content: "Package was Sent",
+    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+      dangerouslySetInnerHTML: {
+        __html: "Package was Sent"
+      }
+    }),
     topFactor: 0,
     direction: "right"
   }, item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(PackageSendIcon, {
@@ -45212,14 +45248,25 @@ const NewSubitemList = props => {
     }
   }, item.brands && /*#__PURE__*/React$1.createElement(Title$2, {
     title: item.brands
-  }, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
+  }, item.brands), item.component && /*#__PURE__*/React$1.createElement(ComponentContainer, null, item.component[0]), /*#__PURE__*/React$1.createElement(Chevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), item.status && Number(item.status) > 1 ? /*#__PURE__*/React$1.createElement(CustomTooltip, {
+    hideTooltip: trashIsHovered,
+    content: /*#__PURE__*/React$1.createElement(TooltipContent, {
+      dangerouslySetInnerHTML: {
+        __html: "Package cannot be deleted since it<br/> has been sent to the vendor as a form."
+      }
+    }),
+    topFactor: 0,
+    direction: "left"
+  }, /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
     className: "trash-icon-disabled"
 
     // ref={(el) => setupTooltip(el, trashTooltipText)}
   }, /*#__PURE__*/React$1.createElement(DisabledTrashIcon, {
+    onMouseEnter: handleMouseTrashEnter,
+    onMouseLeave: handleMouseTrashLeave,
     width: "22",
     height: "22"
-  })) : /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
+  }))) : /*#__PURE__*/React$1.createElement(TrashIconWrapper, {
     className: "trash-icon",
     onClick: e => {
       e.stopPropagation();
@@ -54132,7 +54179,7 @@ const ItemManagerPanel = _ref => {
     linkColor = "#212121",
     backgroundColor = 'white',
     buttonTooltipText = "Please fill out all forms before sending.",
-    trashTooltipText = 'Package cannot be deleted since it<br/> has been sent to the vendor as a form.',
+    trashTooltipText = 'Vendor cannot be deleted since its  packages <br/> have already been sent as a form.',
     maxVisibleVendors = 12,
     componentText = "Scale"
   } = _ref;
@@ -54338,7 +54385,11 @@ const ItemManagerPanel = _ref => {
       ref: headerRef
     }, /*#__PURE__*/React$1.createElement(Container$1, null, /*#__PURE__*/React$1.createElement(TitleContainer, null, /*#__PURE__*/React$1.createElement(SectionTitle$1, null, "Vendors"), /*#__PURE__*/React$1.createElement(SubtitleContainer, null, /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).length.toString(), " ", "Vendors", " "), /*#__PURE__*/React$1.createElement("span", null, "\xB7"), /*#__PURE__*/React$1.createElement(Subtitle$1, null, itemAndPackage.filter(item => item.packages !== null).reduce((acc, item) => acc + (item.packages ? item.packages.length : 0), 0), " ", "Packages"))), editMode && /*#__PURE__*/React$1.createElement(ButtonContainer, null, /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
       hideTooltip: !disabledSendForms,
-      content: buttonTooltipText,
+      content: /*#__PURE__*/React$1.createElement(TooltipContent$1, {
+        dangerouslySetInnerHTML: {
+          __html: buttonTooltipText
+        }
+      }),
       topFactor: 2,
       direction: "bottom"
     }, /*#__PURE__*/React$1.createElement(Button$1, {
@@ -54388,9 +54439,15 @@ const ItemManagerPanel = _ref => {
         } else {
           return `${sentPackagesLength}/${packagesLength} Packages Sent`;
         }
-      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), sentPackagesLength > 0 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, null, /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
+      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), sentPackagesLength > 0 ? /*#__PURE__*/React$1.createElement(DisabledTrashIconWrapper, {
+        className: "trash-icon-disabled"
+      }, /*#__PURE__*/React$1.createElement(CustomTooltip$1, {
         hideTooltip: trashIsHovered,
-        content: trashTooltipText,
+        content: /*#__PURE__*/React$1.createElement(TooltipContent$1, {
+          dangerouslySetInnerHTML: {
+            __html: trashTooltipText
+          }
+        }),
         topFactor: 0,
         direction: "left"
       }, /*#__PURE__*/React$1.createElement(DisabledTrashIcon, {