sag_components 2.0.0-beta189 → 2.0.0-beta191

package/dist/index.js

@@ -12262,16 +12262,13 @@ const Td$1 = styled__default["default"].td`
 `;
 const Tr = styled__default["default"].tr`
   border-bottom: 1px solid #f3f4f6;
-  ${_ref => {
-  let {
-    enableHover,
-    selectHoverColor
-  } = _ref;
-  return enableHover && `&:hover {
+  ${({
+  enableHover,
+  selectHoverColor
+}) => enableHover && `&:hover {
       background-color: ${selectHoverColor};
       cursor: pointer;
-    }`;
-}}
+    }`}
 `;
 const InfoText = styled__default["default"].div`
   font-weight: 400;
@@ -39788,9 +39785,9 @@ const ChromeShimmerText = ({
 };
 
 // TableBody.jsx
-const TableBody = ({
-  columns,
-  data,
+const TableBody = /*#__PURE__*/React$1.forwardRef(({
+  columns = [],
+  data = [],
   onRowClick,
   onSendClick,
   buttonColor,
@@ -39824,9 +39821,8 @@ const TableBody = ({
   // New prop with default
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
-  onHeaderCheckboxClick = () => {},
-  ref = null
-}) => {
+  onHeaderCheckboxClick = () => {}
+}, ref) => {
   const [hoveredRowIndex, setHoveredRowIndex] = React$1.useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = React$1.useState(null);
   const [isCommentModalOpen, setIsCommentModalOpen] = React$1.useState(false);
@@ -39838,8 +39834,33 @@ const TableBody = ({
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [hasUserInteracted, setHasUserInteracted] = React$1.useState(false);
   const [hasInitialValue, setHasInitialValue] = React$1.useState(false);
+
+  // Early return for invalid data
+  if (!Array.isArray(data) || !Array.isArray(columns)) {
+    console.warn("TableBody: Invalid data or columns prop");
+    return null;
+  }
+
+  // Expose methods to parent component via ref
+  React$1.useImperativeHandle(ref, () => ({
+    clearFocus: () => {
+      setFocusedRowIndex(null);
+      setHoveredRowIndex(null);
+    },
+    setFocus: index => {
+      setFocusedRowIndex(index);
+    },
+    getFocusedIndex: () => {
+      return focusedRowIndex;
+    },
+    clearSelection: () => {
+      setFocusedRowIndex(null);
+      setHoveredRowIndex(null);
+      setOpenDropdowns({});
+    }
+  }), [focusedRowIndex]);
   React$1.useEffect(() => {
-    if (isCommentModalOpen && currentCommentRow !== null) {
+    if (isCommentModalOpen && currentCommentRow !== null && data[currentCommentRow]) {
       const initialText = data[currentCommentRow]?.Comments || "";
       setCommentText(initialText);
       setHasInitialValue(Boolean(initialText.trim()));
@@ -39852,7 +39873,7 @@ const TableBody = ({
     }
   }, [resetFocusIndex]);
   React$1.useEffect(() => {
-    if (changeFocusIndex) {
+    if (changeFocusIndex !== undefined && changeFocusIndex !== null) {
       setFocusedRowIndex(changeFocusIndex);
     }
   }, [changeFocusIndex]);
@@ -39904,41 +39925,46 @@ const TableBody = ({
 
   // Helper function to format tag text
   const formatTagText = tag => {
-    if (typeof tag !== "string") return tag;
+    if (typeof tag !== "string") return String(tag || "");
     return tag.replace(/-/g, " ").replace(/\b\w/g, l => l.toUpperCase());
   };
   const formatValue = (value, column, row, rowIndex) => {
-    if ((value === null || value === undefined) && column.fieldType?.toLowerCase() !== "comments") {
+    if ((value === null || value === undefined) && column?.fieldType?.toLowerCase() !== "comments") {
       return "";
     }
 
     // Find the tooltip text for the current value - can be used for different fieldTypes
     const getTooltipText = value => {
-      if (column.tooltipText && Array.isArray(column.tooltipText)) {
+      if (column?.tooltipText && Array.isArray(column.tooltipText)) {
         const tooltipItem = column.tooltipText.find(item => item.value === value);
         return tooltipItem ? tooltipItem.label : null;
       }
       return null;
     };
-    switch (column.fieldType?.toLowerCase()) {
+    switch (column?.fieldType?.toLowerCase()) {
       case "currency":
         if (column.format === "$0.00") {
-          return `$${parseFloat(value).toFixed(2)}`;
+          return `$${parseFloat(value || 0).toFixed(2)}`;
         }
         return value;
       case "text":
         return value?.toString() || "";
       case "number":
         if (column.format && column.format.includes(",")) {
-          return value.toLocaleString();
+          return (value || 0).toLocaleString();
         }
         return value;
       case "percentage":
-        return `${value}%`;
+        return `${value || 0}%`;
       case "date":
-        if (column.format === "MM/DD/YYYY") {
-          const date = new Date(value);
-          return `${(date.getMonth() + 1)?.toString().padStart(2, "0")}/${date.getDate()?.toString().padStart(2, "0")}/${date.getFullYear()}`;
+        if (column.format === "MM/DD/YYYY" && value) {
+          try {
+            const date = new Date(value);
+            return `${(date.getMonth() + 1)?.toString().padStart(2, "0")}/${date.getDate()?.toString().padStart(2, "0")}/${date.getFullYear()}`;
+          } catch (e) {
+            console.warn("Invalid date format:", value);
+            return value;
+          }
         }
         return value;
       case "boolean":
@@ -39997,17 +40023,21 @@ const TableBody = ({
         // Helper function to apply tooltip logic
         const applyTooltipLogic = (element, tooltipText) => {
           if (element && tooltipText && tooltipText.trim() !== "") {
-            const rect = element.getBoundingClientRect();
-            const {
-              offset,
-              height
-            } = calculateTooltipOffset(tooltipText);
-            element.style.setProperty("--tooltip-top", `${rect.top}px`);
-            element.style.setProperty("--tooltip-left", `${rect.left}px`);
-            element.style.setProperty("--tooltip-width", `${rect.width}px`);
-            element.style.setProperty("--tooltip-offset", `${offset}px`);
-            element.style.setProperty("--tooltip-height", `${height}px`);
-            element.setAttribute("data-tooltip", tooltipText);
+            try {
+              const rect = element.getBoundingClientRect();
+              const {
+                offset,
+                height
+              } = calculateTooltipOffset(tooltipText);
+              element.style.setProperty("--tooltip-top", `${rect.top}px`);
+              element.style.setProperty("--tooltip-left", `${rect.left}px`);
+              element.style.setProperty("--tooltip-width", `${rect.width}px`);
+              element.style.setProperty("--tooltip-offset", `${offset}px`);
+              element.style.setProperty("--tooltip-height", `${height}px`);
+              element.setAttribute("data-tooltip", tooltipText);
+            } catch (e) {
+              console.warn("Error applying tooltip:", e);
+            }
           }
         };
         const tooltipText = getTooltipText(value);
@@ -40065,7 +40095,7 @@ const TableBody = ({
         return value;
       case "status":
         const statusObj = statuses.find(status => status.status === value) || {};
-        const [palette0, palette1] = statusObj.palette;
+        const [palette0, palette1] = statusObj.palette || ["#F3F4F6", "#374151"];
         return /*#__PURE__*/React__default["default"].createElement(StatusCell$1, {
           color: palette1
         }, /*#__PURE__*/React__default["default"].createElement(StatusCellCircle, {
@@ -40081,27 +40111,31 @@ const TableBody = ({
           $buttonColor: buttonColor,
           ref: el => {
             if (el) {
-              if (hasComments) {
-                // Add tooltip if there are comments
-                const rect = el.getBoundingClientRect();
-                const {
-                  offset,
-                  height
-                } = calculateTooltipOffset(commentTooltipText);
-                el.style.setProperty("--tooltip-top", `${rect.top}px`);
-                el.style.setProperty("--tooltip-left", `${rect.left}px`);
-                el.style.setProperty("--tooltip-width", `${rect.width}px`);
-                el.style.setProperty("--tooltip-offset", `${offset}px`);
-                el.style.setProperty("--tooltip-height", `${height}px`);
-                el.setAttribute("data-tooltip", commentTooltipText);
-              } else {
-                // Remove tooltip if there are no comments
-                el.removeAttribute("data-tooltip");
-                el.style.removeProperty("--tooltip-top");
-                el.style.removeProperty("--tooltip-left");
-                el.style.removeProperty("--tooltip-width");
-                el.style.removeProperty("--tooltip-offset");
-                el.style.removeProperty("--tooltip-height");
+              try {
+                if (hasComments) {
+                  // Add tooltip if there are comments
+                  const rect = el.getBoundingClientRect();
+                  const {
+                    offset,
+                    height
+                  } = calculateTooltipOffset(commentTooltipText);
+                  el.style.setProperty("--tooltip-top", `${rect.top}px`);
+                  el.style.setProperty("--tooltip-left", `${rect.left}px`);
+                  el.style.setProperty("--tooltip-width", `${rect.width}px`);
+                  el.style.setProperty("--tooltip-offset", `${offset}px`);
+                  el.style.setProperty("--tooltip-height", `${height}px`);
+                  el.setAttribute("data-tooltip", commentTooltipText);
+                } else {
+                  // Remove tooltip if there are no comments
+                  el.removeAttribute("data-tooltip");
+                  el.style.removeProperty("--tooltip-top");
+                  el.style.removeProperty("--tooltip-left");
+                  el.style.removeProperty("--tooltip-width");
+                  el.style.removeProperty("--tooltip-offset");
+                  el.style.removeProperty("--tooltip-height");
+                }
+              } catch (e) {
+                console.warn("Error handling comment tooltip:", e);
               }
             }
           },
@@ -40125,17 +40159,21 @@ const TableBody = ({
             $buttonColor: buttonColor,
             ref: el => {
               if (el && trashTooltipText) {
-                const rect = el.getBoundingClientRect();
-                const {
-                  offset,
-                  height
-                } = calculateTooltipOffset(trashTooltipText);
-                el.style.setProperty("--tooltip-top", `${rect.top}px`);
-                el.style.setProperty("--tooltip-left", `${rect.left}px`);
-                el.style.setProperty("--tooltip-width", `${rect.width}px`);
-                el.style.setProperty("--tooltip-offset", `${offset}px`);
-                el.style.setProperty("--tooltip-height", `${height}px`);
-                el.setAttribute("data-tooltip", trashTooltipText);
+                try {
+                  const rect = el.getBoundingClientRect();
+                  const {
+                    offset,
+                    height
+                  } = calculateTooltipOffset(trashTooltipText);
+                  el.style.setProperty("--tooltip-top", `${rect.top}px`);
+                  el.style.setProperty("--tooltip-left", `${rect.left}px`);
+                  el.style.setProperty("--tooltip-width", `${rect.width}px`);
+                  el.style.setProperty("--tooltip-offset", `${offset}px`);
+                  el.style.setProperty("--tooltip-height", `${height}px`);
+                  el.setAttribute("data-tooltip", trashTooltipText);
+                } catch (e) {
+                  console.warn("Error handling trash tooltip:", e);
+                }
               }
             },
             onClick: e => {
@@ -40150,17 +40188,21 @@ const TableBody = ({
           return /*#__PURE__*/React__default["default"].createElement(DisabledTrashIconWrapper$1, {
             ref: el => {
               if (el && trashTooltipText) {
-                const rect = el.getBoundingClientRect();
-                const {
-                  offset,
-                  height
-                } = calculateTooltipOffset(trashTooltipText);
-                el.style.setProperty("--tooltip-top", `${rect.top}px`);
-                el.style.setProperty("--tooltip-left", `${rect.left}px`);
-                el.style.setProperty("--tooltip-width", `${rect.width}px`);
-                el.style.setProperty("--tooltip-offset", `${offset}px`);
-                el.style.setProperty("--tooltip-height", `${height}px`);
-                el.setAttribute("data-tooltip", trashTooltipText);
+                try {
+                  const rect = el.getBoundingClientRect();
+                  const {
+                    offset,
+                    height
+                  } = calculateTooltipOffset(trashTooltipText);
+                  el.style.setProperty("--tooltip-top", `${rect.top}px`);
+                  el.style.setProperty("--tooltip-left", `${rect.left}px`);
+                  el.style.setProperty("--tooltip-width", `${rect.width}px`);
+                  el.style.setProperty("--tooltip-offset", `${offset}px`);
+                  el.style.setProperty("--tooltip-height", `${height}px`);
+                  el.setAttribute("data-tooltip", trashTooltipText);
+                } catch (e) {
+                  console.warn("Error handling disabled trash tooltip:", e);
+                }
               }
             }
           }, /*#__PURE__*/React__default["default"].createElement(DisabledTrashIcon, {
@@ -40170,13 +40212,14 @@ const TableBody = ({
         }
         return null;
       case "dropdown":
+        if (!column) return null;
         const dropdownKey = `${rowIndex}-${column.key}`;
         const isOpen = openDropdowns[dropdownKey] || false;
         const dropdownOptions = column.dropdownOptions || [];
         const maxDropdownHeight = column.maxDropdownHeight || "200px";
-        const dropdownOptionsWidth = column.dropdownOptionsWidth; // Get from column config
-        const dropdownOptionsAlignment = column.dropdownOptionsAlignment || "right"; // Get from column config, default to 'right'
-        const placeholder = column.placeholder || "Select..."; // Get from column config, default to 'Select...'
+        const dropdownOptionsWidth = column.dropdownOptionsWidth;
+        const dropdownOptionsAlignment = column.dropdownOptionsAlignment || "right";
+        const placeholder = column.placeholder || "Select...";
 
         // Find the current selected option to display its label
         const currentOption = dropdownOptions.find(option => option.value === value);
@@ -40197,8 +40240,7 @@ const TableBody = ({
           selectedColor: selectedColor
         });
       case "checkbox":
-        const isChecked = Boolean(value); // Convert to boolean
-
+        const isChecked = Boolean(value);
         return /*#__PURE__*/React__default["default"].createElement("div", {
           style: {
             display: "flex",
@@ -40211,13 +40253,12 @@ const TableBody = ({
           type: "checkbox",
           checked: isChecked,
           onChange: e => handleCheckboxClick(row, column.key, e),
-          onClick: e => e.stopPropagation() // Prevent row click on checkbox click
-          ,
+          onClick: e => e.stopPropagation(),
           style: {
             width: "18px",
             height: "18px",
             cursor: "pointer",
-            accentColor: buttonColor // Use the theme color for checkbox
+            accentColor: buttonColor
           }
         }));
       default:
@@ -40233,7 +40274,6 @@ const TableBody = ({
   const handleExpandClick = (row, rowIndex, event) => {
     event.stopPropagation();
     if (onExpandRow) {
-      // Determine the expand status based on current state
       const expandStatus = expandedRows[rowIndex] ? "isClosed" : "isOpen";
       onExpandRow(row, rowIndex, expandStatus);
     }
@@ -40243,15 +40283,11 @@ const TableBody = ({
   const handleCheckboxClick = (row, columnKey, event) => {
     event.stopPropagation();
     const currentValue = row[columnKey];
-    const newValue = !currentValue; // Toggle the value
-
-    // Create updated row with new checkbox value
+    const newValue = !currentValue;
     const updatedRow = {
       ...row,
       [columnKey]: newValue
     };
-
-    // Fire the onCheckboxClick event with updated row
     if (onCheckboxClick) {
       onCheckboxClick({
         fullRow: updatedRow,
@@ -40275,14 +40311,10 @@ const TableBody = ({
   const handleDropdownOptionClick = (row, rowIndex, columnKey, selectedOption, event) => {
     event.stopPropagation();
     const dropdownKey = `${rowIndex}-${columnKey}`;
-
-    // Close the dropdown
     setOpenDropdowns(prev => ({
       ...prev,
       [dropdownKey]: false
     }));
-
-    // Fire the onDropdownSelected event with columnKey instead of columnName
     if (onDropdownSelected) {
       onDropdownSelected(row, selectedOption, columnKey);
     }
@@ -40298,72 +40330,109 @@ const TableBody = ({
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
-    key: rowIndex
-  }, /*#__PURE__*/React__default["default"].createElement(TableRow, {
-    "data-row-index": rowIndex,
-    className: indexToShimmer === rowIndex ? "shimmer-row" : "",
-    isFocused: focusedRowIndex === rowIndex,
-    selectedColor: selectedColor,
-    onMouseEnter: () => setHoveredRowIndex(rowIndex),
-    onMouseLeave: () => setHoveredRowIndex(null),
-    onClick: () => handleRowClick(row, rowIndex)
-  }, expandable && expandedContent[rowIndex] !== null ? /*#__PURE__*/React__default["default"].createElement(TableCell, {
-    $fieldType: "expand",
-    $minWidth: "16px",
-    $maxWidth: "16px"
-  }, /*#__PURE__*/React__default["default"].createElement(ExpandIcon, {
-    onClick: e => handleExpandClick(row, rowIndex, e),
-    $isExpanded: expandedRows[rowIndex] || false
-  }, expandedRows[rowIndex] ? /*#__PURE__*/React__default["default"].createElement(MenuItemOpenIcon, {
-    width: "12",
-    height: "12",
-    color: "#666"
-  }) : /*#__PURE__*/React__default["default"].createElement(ChervronRightIcon, {
-    width: "12",
-    height: "12",
-    fill: "#666"
-  }))) : expandable === true ? /*#__PURE__*/React__default["default"].createElement("div", null) : null, columns.map((column, columnIndex) => {
-    const value = row[column.key];
-    const formattedValue = formatValue(value, column, row, rowIndex);
-
-    // Use the chrome shimmer hook that only animates when this row matches indexToShimmer
-    const {
-      text: shimmerText,
-      isShimmering
-    } = useShimmerChromeEffect(formattedValue, rowIndex, indexToShimmer, columnIndex, columns.length);
-    return /*#__PURE__*/React__default["default"].createElement(TableCell, {
-      key: column.key,
-      ref: el => {
-        if (el && shouldShowTooltip(el)) {
-          const rect = el.getBoundingClientRect();
-          const {
-            offset,
-            height
-          } = calculateTooltipOffset(formattedValue.toString(), true);
-          el.style.setProperty("--cell-top", `${rect.top}px`);
-          el.style.setProperty("--cell-left", `${rect.left}px`);
-          el.style.setProperty("--cell-width", `${rect.width}px`);
-          el.style.setProperty("--cell-offset", `${offset}px`);
-          el.style.setProperty("--cell-height", `${height}px`);
-          el.setAttribute("data-tooltip", formattedValue);
+
+  // Return null if no data
+  if (data.length === 0) {
+    return /*#__PURE__*/React__default["default"].createElement(StyledTableBody, {
+      ref: ref
+    }, /*#__PURE__*/React__default["default"].createElement(TableRow, null, /*#__PURE__*/React__default["default"].createElement(TableCell, {
+      colSpan: columns.length
+    }, "No data available")));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledTableBody, {
+    ref: ref
+  }, data.map((row, rowIndex) => {
+    // Skip invalid rows
+    if (!row || typeof row !== 'object') {
+      console.warn(`Invalid row at index ${rowIndex}:`, row);
+      return null;
+    }
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      key: row.id || `row-${rowIndex}`
+    }, /*#__PURE__*/React__default["default"].createElement(TableRow, {
+      "data-row-index": rowIndex,
+      className: indexToShimmer === rowIndex ? "shimmer-row" : "",
+      isFocused: focusedRowIndex === rowIndex,
+      selectedColor: selectedColor,
+      onMouseEnter: () => setHoveredRowIndex(rowIndex),
+      onMouseLeave: () => setHoveredRowIndex(null),
+      onClick: () => handleRowClick(row, rowIndex)
+    }, expandable && expandedContent[rowIndex] !== undefined && expandedContent[rowIndex] !== null ? /*#__PURE__*/React__default["default"].createElement(TableCell, {
+      $fieldType: "expand",
+      $minWidth: "16px",
+      $maxWidth: "16px"
+    }, /*#__PURE__*/React__default["default"].createElement(ExpandIcon, {
+      onClick: e => handleExpandClick(row, rowIndex, e),
+      $isExpanded: expandedRows[rowIndex] || false
+    }, expandedRows[rowIndex] ? /*#__PURE__*/React__default["default"].createElement(MenuItemOpenIcon, {
+      width: "12",
+      height: "12",
+      color: "#666"
+    }) : /*#__PURE__*/React__default["default"].createElement(ChervronRightIcon, {
+      width: "12",
+      height: "12",
+      fill: "#666"
+    }))) : expandable === true ? /*#__PURE__*/React__default["default"].createElement(TableCell, {
+      $fieldType: "expand",
+      $minWidth: "16px",
+      $maxWidth: "16px"
+    }) : null, columns.map((column, columnIndex) => {
+      if (!column || !column.key) {
+        console.warn(`Invalid column at index ${columnIndex}:`, column);
+        return null;
+      }
+      const value = row[column.key];
+      const formattedValue = formatValue(value, column, row, rowIndex);
+
+      // Use the chrome shimmer hook safely
+      let shimmerText = formattedValue;
+      let isShimmering = false;
+      try {
+        const shimmerResult = useShimmerChromeEffect(formattedValue, rowIndex, indexToShimmer, columnIndex, columns.length);
+        if (shimmerResult) {
+          shimmerText = shimmerResult.text || formattedValue;
+          isShimmering = shimmerResult.isShimmering || false;
         }
-      },
-      $fieldType: column.fieldType?.toLowerCase(),
-      $color: column.color,
-      $minWidth: column.minWidth,
-      $maxWidth: column.maxWidth
-    }, column.fieldType?.toLowerCase() === "text" || column.fieldType?.toLowerCase() === "currency" || column.fieldType?.toLowerCase() === "number" || column.fieldType?.toLowerCase() === "percentage" || column.fieldType?.toLowerCase() === "date" || !column.fieldType ? /*#__PURE__*/React__default["default"].createElement(ChromeShimmerText, {
-      text: shimmerText,
-      isShimmering: isShimmering
-    }) : formattedValue);
-  })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React__default["default"].createElement(ExpandedRow, {
-    $expandedBackgroundColor: expandedBackgroundColor
-  }, /*#__PURE__*/React__default["default"].createElement(TableCell, {
-    colSpan: columns.length + 1
-  }, /*#__PURE__*/React__default["default"].createElement(ExpandedContent, {
-    $expandedBackgroundColor: expandedBackgroundColor
-  }, expandedContent[rowIndex] || null)))))), /*#__PURE__*/React__default["default"].createElement(MessageBox, {
+      } catch (e) {
+        console.warn("Error with shimmer effect:", e);
+      }
+      return /*#__PURE__*/React__default["default"].createElement(TableCell, {
+        key: `${column.key}-${rowIndex}`,
+        ref: el => {
+          if (el && shouldShowTooltip(el)) {
+            try {
+              const rect = el.getBoundingClientRect();
+              const {
+                offset,
+                height
+              } = calculateTooltipOffset(formattedValue.toString(), true);
+              el.style.setProperty("--cell-top", `${rect.top}px`);
+              el.style.setProperty("--cell-left", `${rect.left}px`);
+              el.style.setProperty("--cell-width", `${rect.width}px`);
+              el.style.setProperty("--cell-offset", `${offset}px`);
+              el.style.setProperty("--cell-height", `${height}px`);
+              el.setAttribute("data-tooltip", formattedValue);
+            } catch (e) {
+              console.warn("Error setting cell tooltip:", e);
+            }
+          }
+        },
+        $fieldType: column.fieldType?.toLowerCase(),
+        $color: column.color,
+        $minWidth: column.minWidth,
+        $maxWidth: column.maxWidth
+      }, column.fieldType?.toLowerCase() === "text" || column.fieldType?.toLowerCase() === "currency" || column.fieldType?.toLowerCase() === "number" || column.fieldType?.toLowerCase() === "percentage" || column.fieldType?.toLowerCase() === "date" || !column.fieldType ? /*#__PURE__*/React__default["default"].createElement(ChromeShimmerText, {
+        text: shimmerText,
+        isShimmering: isShimmering
+      }) : formattedValue);
+    })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React__default["default"].createElement(ExpandedRow, {
+      $expandedBackgroundColor: expandedBackgroundColor
+    }, /*#__PURE__*/React__default["default"].createElement(TableCell, {
+      colSpan: columns.length + 1
+    }, /*#__PURE__*/React__default["default"].createElement(ExpandedContent, {
+      $expandedBackgroundColor: expandedBackgroundColor
+    }, expandedContent[rowIndex] || null))));
+  })), /*#__PURE__*/React__default["default"].createElement(MessageBox, {
     title: "Add Comment",
     isOpen: isCommentModalOpen,
     onClose: handleCommentModalClose,
@@ -40388,7 +40457,7 @@ const TableBody = ({
     onBlur: handleBlur,
     onFocus: handleFocus
   }), /*#__PURE__*/React__default["default"].createElement(CharacterCount, null, commentText.length, "/", commentTextLimit))));
-};
+});
 TableBody.propTypes = {
   columns: PropTypes.array.isRequired,
   data: PropTypes.array.isRequired,
@@ -40405,10 +40474,14 @@ TableBody.propTypes = {
   statuses: PropTypes.array,
   onCommentSave: PropTypes.func,
   commentTextLimit: PropTypes.number,
+  expandable: PropTypes.bool,
+  expandedRows: PropTypes.object,
+  expandedContent: PropTypes.object,
+  onExpandRow: PropTypes.func,
+  expandedBackgroundColor: PropTypes.string,
   onDropdownSelected: PropTypes.func,
   onCheckboxClick: PropTypes.func,
-  onHeaderCheckboxClick: PropTypes.func,
-  ref: PropTypes.object
+  onHeaderCheckboxClick: PropTypes.func
 };
 TableBody.displayName = "TableBody";
 
@@ -44825,6 +44898,15 @@ const SelectionTitle = styled__default["default"].span`
   font-weight: 700;
   line-height: normal;
 `;
+const ErrorLabel = styled__default["default"].div`
+  color: red;
+  font-family: Poppins;
+  font-size: 12px;
+  height: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
 const BackTitle = styled__default["default"].span`
   margin-left: 4px;
   color: #212121;
@@ -44962,19 +45044,26 @@ const NewSubitem = ({
   vendor,
   onBack,
   addNewPackage,
+  updateExistingPackage,
   componentText = "Scale"
 }) => {
   const [negotiatedBrands, setNegotiatedBrands] = React$1.useState("");
   const [negotiatedComponent, setNegotiatedComponent] = React$1.useState(componentText);
-
+  const [isPackageDuplicated, setIsPackageDuplicated] = React$1.useState(false);
   // Form state
-  const isApplyEnabled = negotiatedBrands.trim().length > 2;
+  const [isApplyEnabled, setIsApplyEnabled] = React$1.useState(negotiatedBrands.trim().length > 2);
   React$1.useEffect(() => {
+    console.log("packageObject", vendor);
     if (!packageObject) return;
     if (!packageObject.brands) return;
     setNegotiatedBrands(packageObject.brands);
     setNegotiatedComponent(packageObject.component);
   }, [packageObject]);
+  React$1.useEffect(() => {
+    if (packageObject && packageObject.brands === negotiatedBrands) return;
+    setIsPackageDuplicated(vendor.packages.some(pkg => pkg.brands === negotiatedBrands));
+    setIsApplyEnabled(negotiatedBrands.trim().length > 2 && vendor.packages.some(pkg => pkg.brands === negotiatedBrands) === false);
+  }, [negotiatedBrands]);
   return /*#__PURE__*/React__default["default"].createElement(NewSubitemContainer, null, /*#__PURE__*/React__default["default"].createElement(Header, null, /*#__PURE__*/React__default["default"].createElement(BackButton, {
     onClick: onBack
   }, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, null)), /*#__PURE__*/React__default["default"].createElement(BackTitle, null, vendor.name)), /*#__PURE__*/React__default["default"].createElement(SelectionTitle, null, "Add Package"), /*#__PURE__*/React__default["default"].createElement(ButtonsContainer, null, /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -44992,7 +45081,11 @@ const NewSubitem = ({
   }), /*#__PURE__*/React__default["default"].createElement(Button$1, {
     leftIcon: "none",
     onClick: () => {
-      addNewPackage(vendor.name, negotiatedBrands, negotiatedComponent);
+      if (packageObject) {
+        updateExistingPackage(vendor.name, packageObject, negotiatedBrands, negotiatedComponent);
+      } else {
+        addNewPackage(vendor.name, negotiatedBrands, negotiatedComponent);
+      }
     },
     rightIcon: "none",
     size: "small",
@@ -45013,7 +45106,7 @@ const NewSubitem = ({
     onChange: e => setNegotiatedBrands(e.target.value),
     required: true,
     placeholder: "Specify by text the participated brands, divided by commas"
-  })), /*#__PURE__*/React__default["default"].createElement(NegotiatedContainer, null, /*#__PURE__*/React__default["default"].createElement(AddNegotiatedBrand, null, "Component ", /*#__PURE__*/React__default["default"].createElement("span", {
+  }), isPackageDuplicated ? /*#__PURE__*/React__default["default"].createElement(ErrorLabel, null, "Package already exists for that vendor, Please enter a unique package.") : /*#__PURE__*/React__default["default"].createElement(ErrorLabel, null)), /*#__PURE__*/React__default["default"].createElement(NegotiatedContainer, null, /*#__PURE__*/React__default["default"].createElement(AddNegotiatedBrand, null, "Component ", /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: "red"
     }
@@ -53697,10 +53790,6 @@ const ItemManagerPanel = _ref => {
   const [trashIsHovered, setTrashIsHovered] = React$1.useState(false);
   const [headerHeight, setHeaderHeight] = React$1.useState(0);
   const headerRef = React$1.useRef(null);
-  React$1.useEffect(() => {
-    console.log("Screen changed to:", screen);
-    console.log("Selected Vendor:", selectedVendor);
-  }, [screen, selectedVendor]);
   React$1.useEffect(() => {
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);