sag_components 2.0.0-beta153 → 2.0.0-beta155

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 {
@@ -38365,22 +38369,35 @@ const TagContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  align-items: flex-start;
+  align-items: center; /* Center items vertically */
+  justify-content: flex-start;
   max-width: 100%;
   line-height: 1.5;
+  min-height: 32px; /* Ensure minimum height for centering */
+`;
+const TagChipTextWrapper = styled.div`
+  padding: 0 8px; /* Add consistent padding on left and right */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 `;
 const TagChip = styled.span`
   display: inline-flex;
   align-items: center;
-  padding: 2px 8px;
+  padding: 2px 0px;
   font-size: 12px;
   font-weight: 500;
   border-radius: 9999px; /* Tailwind's rounded-full */
-  white-space: nowrap;
   font-family: "Poppins", sans-serif;
   border: 1px solid;
   line-height: 1.3;
   
+  /* Handle min/max width - support minWidth */
+  min-width: ${props => props.$minWidth || "auto"};
+  max-width: ${props => props.$maxWidth || "100px"};
+  width: ${props => props.$minWidth ? props.$minWidth : "auto"};
+  
   /* Dynamic colors via CSS custom properties */
   background-color: ${props => props.$backgroundColor || '#F3F4F6'};
   color: ${props => props.$textColor || '#374151'};
@@ -38418,7 +38435,8 @@ const MultiTagWrapper = styled.div`
   flex-wrap: wrap;
   gap: 4px;
   max-width: 100%;
-  align-items: flex-start;
+  align-items: center; /* Center multiple tags vertically */
+  min-height: 32px; /* Ensure minimum height for centering */
 `;
 const TextareaWrapper = styled.div`
   position: relative;
@@ -38910,33 +38928,30 @@ const TableBody = ({
         const maxDisplay = tagConfig.maxDisplay || 3;
         const isMultiple = tagConfig.multiple !== false; // Default to true
 
-        // Handle single tag
-        if (typeof value === 'string') {
-          const colorConfig = colors[value] || defaultColor;
-          return /*#__PURE__*/React$1.createElement(TagContainer, null, /*#__PURE__*/React$1.createElement(TagChip, {
+        // Helper function to create a tag chip with proper tooltip
+        const createTagChip = (tagValue, index = 0) => {
+          const colorConfig = colors[tagValue] || defaultColor;
+          const formattedText = formatTagText(tagValue);
+          return /*#__PURE__*/React$1.createElement(TagChip, {
+            key: `${tagValue}-${index}`,
             $backgroundColor: colorConfig.bg,
             $textColor: colorConfig.text,
             $borderColor: colorConfig.border,
             $interactive: false,
-            title: value
-          }, formatTagText(value)));
+            title: formattedText // Always show full text in tooltip
+          }, /*#__PURE__*/React$1.createElement(TagChipTextWrapper, null, formattedText));
+        };
+
+        // Handle single tag
+        if (typeof value === 'string') {
+          return /*#__PURE__*/React$1.createElement(TagContainer, null, createTagChip(value));
         }
 
         // Handle multiple tags
         if (Array.isArray(value) && isMultiple) {
           const visibleTags = value.slice(0, maxDisplay);
           const remainingCount = value.length - maxDisplay;
-          return /*#__PURE__*/React$1.createElement(TagContainer, null, /*#__PURE__*/React$1.createElement(MultiTagWrapper, null, visibleTags.map((tag, index) => {
-            const colorConfig = colors[tag] || defaultColor;
-            return /*#__PURE__*/React$1.createElement(TagChip, {
-              key: `${tag}-${index}`,
-              $backgroundColor: colorConfig.bg,
-              $textColor: colorConfig.text,
-              $borderColor: colorConfig.border,
-              $interactive: false,
-              title: tag
-            }, formatTagText(tag));
-          }), remainingCount > 0 && /*#__PURE__*/React$1.createElement(TagOverflow, {
+          return /*#__PURE__*/React$1.createElement(TagContainer, null, /*#__PURE__*/React$1.createElement(MultiTagWrapper, null, visibleTags.map((tag, index) => createTagChip(tag, index)), remainingCount > 0 && /*#__PURE__*/React$1.createElement(TagOverflow, {
             title: `${remainingCount} more: ${value.slice(maxDisplay).map(tag => formatTagText(tag)).join(', ')}`
           }, "+", remainingCount)));
         }
@@ -42702,6 +42717,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 +42738,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 +52049,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 +52287,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 +52295,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 +52321,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"
-      }))));
+      })))));
     }))));
   }
 };