sag_components 2.0.0-beta153 → 2.0.0-beta154

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

package/dist/index.esm.js

@@ -10347,23 +10347,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10805,22 +10806,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -23931,21 +23933,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24342,23 +24345,24 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35590,9 +35594,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -42702,6 +42706,10 @@ const CustomTooltip = styled(Tooltip$2)`
     &::before {
       left: 90%;
     }
+    ${props => props.trashIcon && `width: 150px;
+      white-space: normal;
+      max-height: 50px;
+      margin-top: 8px;`}
   }
 `;
 const Container$1 = styled.div`
@@ -42719,7 +42727,9 @@ const Trash$1 = styled.div`
   height: 24px;
   padding: 0 12px;
   cursor: pointer;
-
+  ${props => props.disabled && `opacity: 0.5;
+      pointer-events: none;
+      user-select: none;`};
   svg {
     pointer-events: none;
   }
@@ -52028,6 +52038,7 @@ const ItemManagerPanel = _ref => {
     linkColor = "#212121",
     backgroundColor = 'white',
     buttonTooltipText = "Please fill out all forms before sending.",
+    trashTooltipText = 'Package cannot be deleted since it has been sent to the vendor as a form.',
     maxVisibleVendors = 12
   } = _ref;
   const [screen, setScreen] = useState("initial");
@@ -52265,6 +52276,7 @@ const ItemManagerPanel = _ref => {
       headerHeight: headerHeight
     }, /*#__PURE__*/React$1.createElement(VendorList$2, null, itemAndPackage.filter(item => item.packages !== null).map((item, idx) => {
       const packagesLength = item.packages.length;
+      const sentPackagesLength = item.packages.filter(pkg => hasValidStatus(pkg) && !draftPackages(pkg)).length;
       return /*#__PURE__*/React$1.createElement(VendorItem$1, {
         key: idx
       }, /*#__PURE__*/React$1.createElement(DotContainer, null, packagesLength === 0 && /*#__PURE__*/React$1.createElement(RedDot, null)), /*#__PURE__*/React$1.createElement(LineContainer, {
@@ -52272,14 +52284,20 @@ const ItemManagerPanel = _ref => {
           handleVendorClick(item);
         }
       }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
-        const sentPackagesLength = item.packages.filter(pkg => hasValidStatus(pkg) && !draftPackages(pkg)).length;
         const noPackagesSent = sentPackagesLength === 0;
         if (noPackagesSent) {
           return `0/${packagesLength} sent`;
         } else {
           return `${sentPackagesLength}/${packagesLength} sent`;
         }
-      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(Trash$1, {
+      })())), /*#__PURE__*/React$1.createElement(VendorChevron$1, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))), /*#__PURE__*/React$1.createElement(CustomTooltip, {
+        hideTooltip: !sentPackagesLength > 0,
+        content: trashTooltipText,
+        topFactor: 2,
+        direction: "left",
+        trashIcon: true
+      }, /*#__PURE__*/React$1.createElement(Trash$1, {
+        disabled: sentPackagesLength > 0,
         className: "trash-icon",
         onClick: () => {
           onDeleteVendor(item);
@@ -52292,7 +52310,7 @@ const ItemManagerPanel = _ref => {
         xmlns: "http://www.w3.org/2000/svg"
       }, /*#__PURE__*/React$1.createElement("path", {
         d: "M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM14 1H10.5L9.5 0H4.5L3.5 1H0V3H14V1Z"
-      }))));
+      })))));
     }))));
   }
 };