sag_components 2.0.0-beta192 → 2.0.0-beta193

package/dist/index.js

@@ -39932,341 +39932,423 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
     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") {
+    // Add safety checks at the start
+    if (!column) {
+      console.warn('formatValue called with null/undefined column');
       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)) {
-        const tooltipItem = column.tooltipText.find(item => item.value === value);
-        return tooltipItem ? tooltipItem.label : null;
+    try {
+      if ((value === null || value === undefined) && column?.fieldType?.toLowerCase() !== "comments") {
+        return "";
       }
-      return null;
-    };
-    switch (column?.fieldType?.toLowerCase()) {
-      case "currency":
-        if (column.format === "$0.00") {
-          return `$${parseFloat(value || 0).toFixed(2)}`;
-        }
-        return value;
-      case "text":
-        return value?.toString() || "";
-      case "number":
-        if (column.format && column.format.includes(",")) {
-          return (value || 0).toLocaleString();
+
+      // Find the tooltip text for the current value - can be used for different fieldTypes
+      const getTooltipText = value => {
+        try {
+          if (column?.tooltipText && Array.isArray(column.tooltipText)) {
+            const tooltipItem = column.tooltipText.find(item => item && item.value === value);
+            return tooltipItem ? tooltipItem.label : null;
+          }
+          return null;
+        } catch (e) {
+          console.warn('Error in getTooltipText:', e);
+          return null;
         }
-        return value;
-      case "percentage":
-        return `${value || 0}%`;
-      case "date":
-        if (column.format === "MM/DD/YYYY" && value) {
+      };
+      const fieldType = column?.fieldType?.toLowerCase() || 'text';
+      switch (fieldType) {
+        case "currency":
           try {
-            const date = new Date(value);
-            return `${(date.getMonth() + 1)?.toString().padStart(2, "0")}/${date.getDate()?.toString().padStart(2, "0")}/${date.getFullYear()}`;
+            if (column.format === "$0.00") {
+              const numValue = parseFloat(value || 0);
+              return `${isNaN(numValue) ? '0.00' : numValue.toFixed(2)}`;
+            }
+            return String(value || "");
           } catch (e) {
-            console.warn("Invalid date format:", value);
-            return value;
+            console.warn('Error formatting currency:', e);
+            return String(value || "");
           }
-        }
-        return value;
-      case "boolean":
-        return value ? "Yes" : "No";
-      case "array":
-        if (Array.isArray(value)) {
-          return value.join(", ");
-        }
-        return value;
-      case "tag":
-        if (!value) return "";
-        const tagConfig = column.tagConfig || {};
-        const colors = tagConfig.colors || {};
-        const defaultColor = tagConfig.defaultColor || {
-          bg: "#F3F4F6",
-          text: "#374151",
-          border: "#9CA3AF"
-        };
-        const maxDisplay = tagConfig.maxDisplay || 3;
-        const isMultiple = tagConfig.multiple !== false; // Default to true
-
-        // 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__default["default"].createElement(TagChip, {
-            key: `${tagValue}-${index}`,
-            $backgroundColor: colorConfig.bg,
-            $textColor: colorConfig.text,
-            $borderColor: colorConfig.border,
-            $interactive: false,
-            title: formattedText // Always show full text in tooltip
-          }, /*#__PURE__*/React__default["default"].createElement(TagChipTextWrapper, null, formattedText));
-        };
-
-        // Handle single tag
-        if (typeof value === "string") {
-          return /*#__PURE__*/React__default["default"].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__default["default"].createElement(TagContainer, null, /*#__PURE__*/React__default["default"].createElement(MultiTagWrapper, null, visibleTags.map((tag, index) => createTagChip(tag, index)), remainingCount > 0 && /*#__PURE__*/React__default["default"].createElement(TagOverflow, {
-            title: `${remainingCount} more: ${value.slice(maxDisplay).map(tag => formatTagText(tag)).join(", ")}`
-          }, "+", remainingCount)));
-        }
-
-        // Fallback for array treated as single tag
-        if (Array.isArray(value)) {
-          return formatValue(value[0], column, row, rowIndex);
-        }
-        return value;
-      case "packagestatus":
-        // Helper function to apply tooltip logic
-        const applyTooltipLogic = (element, tooltipText) => {
-          if (element && tooltipText && tooltipText.trim() !== "") {
-            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);
+        case "text":
+          return String(value || "");
+        case "number":
+          try {
+            if (column.format && column.format.includes(",")) {
+              const numValue = Number(value || 0);
+              return isNaN(numValue) ? String(value || "") : numValue.toLocaleString();
+            }
+            return String(value || "");
+          } catch (e) {
+            console.warn('Error formatting number:', e);
+            return String(value || "");
+          }
+        case "percentage":
+          return `${value || 0}%`;
+        case "date":
+          try {
+            if (column.format === "MM/DD/YYYY" && value) {
+              const date = new Date(value);
+              if (isNaN(date.getTime())) {
+                return String(value);
+              }
+              return `${(date.getMonth() + 1).toString().padStart(2, "0")}/${date.getDate().toString().padStart(2, "0")}/${date.getFullYear()}`;
             }
+            return String(value || "");
+          } catch (e) {
+            console.warn('Error formatting date:', e);
+            return String(value || "");
           }
-        };
-        const tooltipText = getTooltipText(value);
-        const lowerValue = value?.toLowerCase();
-        if (lowerValue === "empty") {
-          return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, {
-            ref: el => applyTooltipLogic(el, tooltipText)
-          }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
-            leftIcon: "Fly",
-            text: "Send",
-            borderRadius: "8px",
-            backgroundColor: "#FFF",
-            textColor: "#B1B1B1",
-            borderColor: "#D9D9D9",
-            hoverTextColor: "#B1B1B1",
-            hoverBackgroundColor: "#E6F0F0",
-            hoverBorderColor: "#D9D9D9",
-            disabledTextColor: "#B1B1B1",
-            disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
-            disabledBorderColor: "#D9D9D9",
-            width: "100px",
-            height: "32px",
-            disabled: true
-          }));
-        } else if (lowerValue === "draft") {
-          return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, {
-            ref: el => applyTooltipLogic(el, tooltipText)
-          }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
-            leftIcon: "Fly",
-            text: "Send",
-            borderRadius: "8px",
-            backgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
-            textColor: buttonColor,
-            borderColor: buttonColor,
-            hoverTextColor: buttonColor,
-            hoverBorderColor: buttonColor,
-            hoverBackgroundColor: "#E6F0F0",
-            activeBackgroundColor: "#D1E7E7",
-            width: "100px",
-            height: "32px",
-            onClick: e => {
-              e.stopPropagation();
-              onSendClick && onSendClick(row);
+        case "boolean":
+          return value ? "Yes" : "No";
+        case "array":
+          try {
+            if (Array.isArray(value)) {
+              return value.join(", ");
             }
-          }));
-        } else if (lowerValue === "sent") {
-          return /*#__PURE__*/React__default["default"].createElement(SentStatus, {
-            ref: el => applyTooltipLogic(el, tooltipText)
-          }, /*#__PURE__*/React__default["default"].createElement(OkIcon, {
-            width: "24",
-            height: "24",
-            color: "#5FCC70"
-          }), /*#__PURE__*/React__default["default"].createElement("span", null, "All Sent"));
-        }
-        return value;
-      case "status":
-        const statusObj = statuses.find(status => status.status === value) || {};
-        const [palette0, palette1] = statusObj.palette || ["#F3F4F6", "#374151"];
-        return /*#__PURE__*/React__default["default"].createElement(StatusCell$1, {
-          color: palette1
-        }, /*#__PURE__*/React__default["default"].createElement(StatusCellCircle, {
-          backgroundColor: palette0
-        }), /*#__PURE__*/React__default["default"].createElement("span", null, value));
-      case "comments":
-        const commentTextValue = value || "";
-        const hasComments = commentTextValue.trim().length > 0;
-
-        // Truncate tooltip text if longer than 150 characters
-        const commentTooltipText = commentTextValue.length > 150 ? commentTextValue.substring(0, 147) + "..." : commentTextValue;
-        return /*#__PURE__*/React__default["default"].createElement(CommentIconWrapper, {
-          $buttonColor: buttonColor,
-          ref: el => {
-            if (el) {
-              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);
-              }
+            return String(value || "");
+          } catch (e) {
+            console.warn('Error formatting array:', e);
+            return String(value || "");
+          }
+        case "tag":
+          try {
+            if (!value) return "";
+            const tagConfig = column.tagConfig || {};
+            const colors = tagConfig.colors || {};
+            const defaultColor = tagConfig.defaultColor || {
+              bg: "#F3F4F6",
+              text: "#374151",
+              border: "#9CA3AF"
+            };
+            const maxDisplay = tagConfig.maxDisplay || 3;
+            const isMultiple = tagConfig.multiple !== false;
+            const createTagChip = (tagValue, index = 0) => {
+              const colorConfig = colors[tagValue] || defaultColor;
+              const formattedText = formatTagText(tagValue);
+              return /*#__PURE__*/React__default["default"].createElement(TagChip, {
+                key: `${tagValue}-${index}`,
+                $backgroundColor: colorConfig.bg,
+                $textColor: colorConfig.text,
+                $borderColor: colorConfig.border,
+                $interactive: false,
+                title: formattedText
+              }, /*#__PURE__*/React__default["default"].createElement(TagChipTextWrapper, null, formattedText));
+            };
+            if (typeof value === "string") {
+              return /*#__PURE__*/React__default["default"].createElement(TagContainer, null, createTagChip(value));
             }
-          },
-          onClick: e => {
-            e.stopPropagation();
-            setCurrentCommentRow(rowIndex);
-            setIsCommentModalOpen(true);
+            if (Array.isArray(value) && isMultiple) {
+              const visibleTags = value.slice(0, maxDisplay);
+              const remainingCount = value.length - maxDisplay;
+              return /*#__PURE__*/React__default["default"].createElement(TagContainer, null, /*#__PURE__*/React__default["default"].createElement(MultiTagWrapper, null, visibleTags.map((tag, index) => createTagChip(tag, index)), remainingCount > 0 && /*#__PURE__*/React__default["default"].createElement(TagOverflow, {
+                title: `${remainingCount} more: ${value.slice(maxDisplay).map(tag => formatTagText(tag)).join(", ")}`
+              }, "+", remainingCount)));
+            }
+            if (Array.isArray(value)) {
+              return formatValue(value[0], column, row, rowIndex);
+            }
+            return String(value || "");
+          } catch (e) {
+            console.warn('Error formatting tag:', e);
+            return String(value || "");
           }
-        }, /*#__PURE__*/React__default["default"].createElement(CommentIcon, {
-          showCircle: hasComments,
-          circleColor: buttonColor
-        }));
-      case "trash":
-        // Only show trash icon when row is hovered
-        if (hoveredRowIndex !== rowIndex) {
-          return null;
-        }
-        const trashTooltipText = getTooltipText(value);
-        if (value === "ENABLED") {
-          return /*#__PURE__*/React__default["default"].createElement(TrashIconWrapper$1, {
-            $buttonColor: buttonColor,
-            ref: el => {
-              if (el && trashTooltipText) {
+        case "packagestatus":
+          try {
+            const applyTooltipLogic = (element, tooltipText) => {
+              if (element && tooltipText && tooltipText.trim() !== "") {
                 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);
+                  const rect = element.getBoundingClientRect();
+                  if (rect.width > 0 && rect.height > 0) {
+                    const tooltipInfo = calculateTooltipOffset(tooltipText);
+                    if (tooltipInfo) {
+                      const {
+                        offset,
+                        height
+                      } = tooltipInfo;
+                      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 handling trash tooltip:", e);
+                  console.warn("Error applying tooltip:", e);
                 }
               }
-            },
-            onClick: e => {
-              e.stopPropagation();
-              onDeleteClick && onDeleteClick(row);
+            };
+            const tooltipText = getTooltipText(value);
+            // Handle array values (like PackageStatusName)
+            const processedValue = Array.isArray(value) ? value[0] : value;
+            const lowerValue = String(processedValue || "").toLowerCase();
+            if (lowerValue === "empty") {
+              return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, {
+                ref: el => applyTooltipLogic(el, tooltipText)
+              }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+                leftIcon: "Fly",
+                text: "Send",
+                borderRadius: "8px",
+                backgroundColor: "#FFF",
+                textColor: "#B1B1B1",
+                borderColor: "#D9D9D9",
+                hoverTextColor: "#B1B1B1",
+                hoverBackgroundColor: "#E6F0F0",
+                hoverBorderColor: "#D9D9D9",
+                disabledTextColor: "#B1B1B1",
+                disabledBackgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
+                disabledBorderColor: "#D9D9D9",
+                width: "100px",
+                height: "32px",
+                disabled: true
+              }));
+            } else if (lowerValue === "draft") {
+              return /*#__PURE__*/React__default["default"].createElement(ButtonWrapper, {
+                ref: el => applyTooltipLogic(el, tooltipText)
+              }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+                leftIcon: "Fly",
+                text: "Send",
+                borderRadius: "8px",
+                backgroundColor: focusedRowIndex === rowIndex ? "#D1E7E7" : hoveredRowIndex === rowIndex ? "#E6F0F0" : "#FFF",
+                textColor: buttonColor,
+                borderColor: buttonColor,
+                hoverTextColor: buttonColor,
+                hoverBorderColor: buttonColor,
+                hoverBackgroundColor: "#E6F0F0",
+                activeBackgroundColor: "#D1E7E7",
+                width: "100px",
+                height: "32px",
+                onClick: e => {
+                  e.stopPropagation();
+                  onSendClick && onSendClick(row);
+                }
+              }));
+            } else if (lowerValue === "sent") {
+              return /*#__PURE__*/React__default["default"].createElement(SentStatus, {
+                ref: el => applyTooltipLogic(el, tooltipText)
+              }, /*#__PURE__*/React__default["default"].createElement(OkIcon, {
+                width: "24",
+                height: "24",
+                color: "#5FCC70"
+              }), /*#__PURE__*/React__default["default"].createElement("span", null, "All Sent"));
             }
-          }, /*#__PURE__*/React__default["default"].createElement(TrashIcon, {
-            width: "14",
-            height: "18"
-          }));
-        } else if (value === "DISABLED") {
-          return /*#__PURE__*/React__default["default"].createElement(DisabledTrashIconWrapper$1, {
-            ref: el => {
-              if (el && 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);
+            return String(processedValue || "");
+          } catch (e) {
+            console.warn('Error formatting packagestatus:', e);
+            return String(value || "");
+          }
+        case "status":
+          try {
+            const statusObj = statuses.find(status => status && status.status === value) || {};
+            const palette = statusObj.palette || ["#F3F4F6", "#374151"];
+            const [palette0, palette1] = palette;
+            return /*#__PURE__*/React__default["default"].createElement(StatusCell$1, {
+              color: palette1
+            }, /*#__PURE__*/React__default["default"].createElement(StatusCellCircle, {
+              backgroundColor: palette0
+            }), /*#__PURE__*/React__default["default"].createElement("span", null, String(value || "")));
+          } catch (e) {
+            console.warn('Error formatting status:', e);
+            return String(value || "");
+          }
+        case "comments":
+          try {
+            const commentTextValue = String(value || "");
+            const hasComments = commentTextValue.trim().length > 0;
+            const commentTooltipText = commentTextValue.length > 150 ? commentTextValue.substring(0, 147) + "..." : commentTextValue;
+            return /*#__PURE__*/React__default["default"].createElement(CommentIconWrapper, {
+              $buttonColor: buttonColor,
+              ref: el => {
+                if (el) {
+                  try {
+                    if (hasComments) {
+                      const rect = el.getBoundingClientRect();
+                      if (rect.width > 0 && rect.height > 0) {
+                        const tooltipInfo = calculateTooltipOffset(commentTooltipText);
+                        if (tooltipInfo) {
+                          const {
+                            offset,
+                            height
+                          } = tooltipInfo;
+                          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 {
+                      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);
+                  }
                 }
+              },
+              onClick: e => {
+                e.stopPropagation();
+                setCurrentCommentRow(rowIndex);
+                setIsCommentModalOpen(true);
               }
+            }, /*#__PURE__*/React__default["default"].createElement(CommentIcon, {
+              showCircle: hasComments,
+              circleColor: buttonColor
+            }));
+          } catch (e) {
+            console.warn('Error formatting comments:', e);
+            return String(value || "");
+          }
+        case "trash":
+          try {
+            if (hoveredRowIndex !== rowIndex) {
+              return null;
             }
-          }, /*#__PURE__*/React__default["default"].createElement(DisabledTrashIcon, {
-            width: "22",
-            height: "22"
-          }));
-        }
-        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;
-        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);
-        const displayText = currentOption ? currentOption.label : value || placeholder;
-        return /*#__PURE__*/React__default["default"].createElement(Dropdown, {
-          isOpen: isOpen,
-          options: dropdownOptions,
-          selectedValue: value,
-          displayText: displayText,
-          onToggle: e => handleDropdownClick(rowIndex, column.key, e),
-          onOptionSelect: (option, e) => handleDropdownOptionClick(row, rowIndex, column.key, option, e),
-          maxDropdownHeight: maxDropdownHeight,
-          dropdownOptionsWidth: dropdownOptionsWidth,
-          dropdownOptionsAlignment: dropdownOptionsAlignment,
-          placeholder: placeholder,
-          isRowFocused: focusedRowIndex === rowIndex,
-          isRowHovered: hoveredRowIndex === rowIndex,
-          selectedColor: selectedColor
-        });
-      case "checkbox":
-        const isChecked = Boolean(value);
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "100%",
-            height: "100%"
+            const trashTooltipText = getTooltipText(value);
+            const processedValue = String(value || "").toUpperCase();
+            if (processedValue === "ENABLED") {
+              return /*#__PURE__*/React__default["default"].createElement(TrashIconWrapper$1, {
+                $buttonColor: buttonColor,
+                ref: el => {
+                  if (el && trashTooltipText) {
+                    try {
+                      const rect = el.getBoundingClientRect();
+                      if (rect.width > 0 && rect.height > 0) {
+                        const tooltipInfo = calculateTooltipOffset(trashTooltipText);
+                        if (tooltipInfo) {
+                          const {
+                            offset,
+                            height
+                          } = tooltipInfo;
+                          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 => {
+                  e.stopPropagation();
+                  onDeleteClick && onDeleteClick(row);
+                }
+              }, /*#__PURE__*/React__default["default"].createElement(TrashIcon, {
+                width: "14",
+                height: "18"
+              }));
+            } else if (processedValue === "DISABLED") {
+              return /*#__PURE__*/React__default["default"].createElement(DisabledTrashIconWrapper$1, {
+                ref: el => {
+                  if (el && trashTooltipText) {
+                    try {
+                      const rect = el.getBoundingClientRect();
+                      if (rect.width > 0 && rect.height > 0) {
+                        const tooltipInfo = calculateTooltipOffset(trashTooltipText);
+                        if (tooltipInfo) {
+                          const {
+                            offset,
+                            height
+                          } = tooltipInfo;
+                          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, {
+                width: "22",
+                height: "22"
+              }));
+            }
+            return null;
+          } catch (e) {
+            console.warn('Error formatting trash:', e);
+            return null;
           }
-        }, /*#__PURE__*/React__default["default"].createElement("input", {
-          type: "checkbox",
-          checked: isChecked,
-          onChange: e => handleCheckboxClick(row, column.key, e),
-          onClick: e => e.stopPropagation(),
-          style: {
-            width: "18px",
-            height: "18px",
-            cursor: "pointer",
-            accentColor: buttonColor
+        case "dropdown":
+          try {
+            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;
+            const dropdownOptionsAlignment = column.dropdownOptionsAlignment || "right";
+            const placeholder = column.placeholder || "Select...";
+            const currentOption = dropdownOptions.find(option => option && option.value === value);
+            const displayText = currentOption ? currentOption.label : value || placeholder;
+            return /*#__PURE__*/React__default["default"].createElement(Dropdown, {
+              isOpen: isOpen,
+              options: dropdownOptions,
+              selectedValue: value,
+              displayText: displayText,
+              onToggle: e => handleDropdownClick(rowIndex, column.key, e),
+              onOptionSelect: (option, e) => handleDropdownOptionClick(row, rowIndex, column.key, option, e),
+              maxDropdownHeight: maxDropdownHeight,
+              dropdownOptionsWidth: dropdownOptionsWidth,
+              dropdownOptionsAlignment: dropdownOptionsAlignment,
+              placeholder: placeholder,
+              isRowFocused: focusedRowIndex === rowIndex,
+              isRowHovered: hoveredRowIndex === rowIndex,
+              selectedColor: selectedColor
+            });
+          } catch (e) {
+            console.warn('Error formatting dropdown:', e);
+            return String(value || "");
           }
-        }));
-      default:
-        // Treat default as text
-        return value?.toString() ?? "";
+        case "checkbox":
+          try {
+            const isChecked = Boolean(value);
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                height: "100%"
+              }
+            }, /*#__PURE__*/React__default["default"].createElement("input", {
+              type: "checkbox",
+              checked: isChecked,
+              onChange: e => handleCheckboxClick(row, column.key, e),
+              onClick: e => e.stopPropagation(),
+              style: {
+                width: "18px",
+                height: "18px",
+                cursor: "pointer",
+                accentColor: buttonColor
+              }
+            }));
+          } catch (e) {
+            console.warn('Error formatting checkbox:', e);
+            return String(value || "");
+          }
+        default:
+          return String(value || "");
+      }
+    } catch (error) {
+      console.error('Error in formatValue:', error, {
+        value,
+        column,
+        rowIndex
+      });
+      return String(value || "");
     }
   };
   const shouldShowTooltip = (element, content) => {
@@ -40333,15 +40415,7 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
       document.removeEventListener("click", handleClickOutside);
     };
   }, []);
-  console.log('TableBody Debug Info:', {
-    dataLength: data?.length,
-    columnsLength: columns?.length,
-    hasUseShimmerChromeEffect: typeof useShimmerChromeEffect,
-    hasChromeShimmerText: typeof ChromeShimmerText,
-    indexToShimmer,
-    sampleRow: data[0],
-    sampleColumn: columns[0]
-  });
+
   // Return null if no data
   if (data.length === 0) {
     return /*#__PURE__*/React__default["default"].createElement(StyledTableBody, {
@@ -40390,39 +40464,57 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
     }) : null, columns.map((column, columnIndex) => {
       if (!column || !column.key) {
         console.warn(`Invalid column at index ${columnIndex}:`, column);
-        return null;
+        return /*#__PURE__*/React__default["default"].createElement(TableCell, {
+          key: `invalid-${columnIndex}`
+        }, "Invalid Column");
       }
-      const value = row[column.key];
-      const formattedValue = formatValue(value, column, row, rowIndex);
-
-      // Use the chrome shimmer hook safely
-      let shimmerText = formattedValue;
-      let isShimmering = false;
+      let value, formattedValue, shimmerText, isShimmering;
       try {
-        const shimmerResult = useShimmerChromeEffect(formattedValue, rowIndex, indexToShimmer, columnIndex, columns.length);
-        if (shimmerResult) {
-          shimmerText = shimmerResult.text || formattedValue;
-          isShimmering = shimmerResult.isShimmering || false;
-        }
+        value = row[column.key];
+        formattedValue = formatValue(value, column, row, rowIndex) || "";
       } catch (e) {
-        console.warn("Error with shimmer effect:", e);
+        console.error("Error formatting value:", e);
+        formattedValue = "";
+      }
+
+      // Initialize shimmer defaults
+      shimmerText = formattedValue;
+      isShimmering = false;
+
+      // Only use shimmer hook for text-based fields
+      const isTextBasedField = column.fieldType?.toLowerCase() === "text" || column.fieldType?.toLowerCase() === "currency" || column.fieldType?.toLowerCase() === "number" || column.fieldType?.toLowerCase() === "percentage" || column.fieldType?.toLowerCase() === "date" || !column.fieldType;
+      if (isTextBasedField && typeof useShimmerChromeEffect === 'function') {
+        try {
+          const shimmerResult = useShimmerChromeEffect(String(formattedValue || ""), rowIndex, indexToShimmer, columnIndex, columns.length);
+          if (shimmerResult && typeof shimmerResult === 'object') {
+            shimmerText = shimmerResult.text || formattedValue;
+            isShimmering = Boolean(shimmerResult.isShimmering);
+          }
+        } 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)) {
+          if (el && formattedValue && 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);
+              if (rect.width > 0 && rect.height > 0) {
+                const tooltipInfo = calculateTooltipOffset(String(formattedValue), true);
+                if (tooltipInfo) {
+                  const {
+                    offset,
+                    height
+                  } = tooltipInfo;
+                  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", String(formattedValue));
+                }
+              }
             } catch (e) {
               console.warn("Error setting cell tooltip:", e);
             }
@@ -40432,10 +40524,10 @@ const TableBody = /*#__PURE__*/React$1.forwardRef(({
         $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,
+      }, isTextBasedField ? typeof ChromeShimmerText === 'function' ? /*#__PURE__*/React__default["default"].createElement(ChromeShimmerText, {
+        text: String(shimmerText || ""),
         isShimmering: isShimmering
-      }) : formattedValue);
+      }) : String(shimmerText || "") : formattedValue || "");
     })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React__default["default"].createElement(ExpandedRow, {
       $expandedBackgroundColor: expandedBackgroundColor
     }, /*#__PURE__*/React__default["default"].createElement(TableCell, {