sag_components 2.0.0-beta154 → 2.0.0-beta155

package/dist/index.esm.js

@@ -38369,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'};
@@ -38422,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;
@@ -38914,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)));
         }