sag_components 2.0.0-beta154 → 2.0.0-beta156

package/dist/index.js

@@ -34630,15 +34630,16 @@ styled.css`
  * • onApply(start,end) – callback, both numbers (inclusive)
  * • onCancel()         – callback
  */
-const WeeksCalendar = ({
-  year,
-  defaultStartWeek = null,
-  defaultEndWeek = null,
-  backgroundColor = "#066768",
-  hoverBackgroundColor = "#E6F0F0",
-  onApply,
-  onCancel
-}) => {
+const WeeksCalendar = _ref => {
+  let {
+    year,
+    defaultStartWeek = null,
+    defaultEndWeek = null,
+    backgroundColor = "#066768",
+    hoverBackgroundColor = "#E6F0F0",
+    onApply,
+    onCancel
+  } = _ref;
   // state -------------------------------------------------
   const [startWeek, setStartWeek] = React$1.useState(defaultStartWeek);
   const [endWeek, setEndWeek] = React$1.useState(defaultEndWeek);
@@ -38379,22 +38380,35 @@ const TagContainer = styled__default["default"].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__default["default"].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__default["default"].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'};
@@ -38432,7 +38446,8 @@ const MultiTagWrapper = styled__default["default"].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__default["default"].div`
   position: relative;
@@ -38924,33 +38939,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__default["default"].createElement(TagContainer, null, /*#__PURE__*/React__default["default"].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__default["default"].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__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) => {
-            const colorConfig = colors[tag] || defaultColor;
-            return /*#__PURE__*/React__default["default"].createElement(TagChip, {
-              key: `${tag}-${index}`,
-              $backgroundColor: colorConfig.bg,
-              $textColor: colorConfig.text,
-              $borderColor: colorConfig.border,
-              $interactive: false,
-              title: tag
-            }, formatTagText(tag));
-          }), remainingCount > 0 && /*#__PURE__*/React__default["default"].createElement(TagOverflow, {
+          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)));
         }
@@ -53347,7 +53359,8 @@ const QuickFilterCards = _ref => {
   let {
     data = [],
     onCardToggle = () => {},
-    width = "100%"
+    width = "100%",
+    CardsContainerClassName = "QuickFilterCardsContainer"
   } = _ref;
   // local mirror so UI updates immediately even if parent is slow/not controlling
   const [items, setItems] = React$1.useState(data);
@@ -53366,7 +53379,7 @@ const QuickFilterCards = _ref => {
   };
   return /*#__PURE__*/React__default["default"].createElement(CardsContainer, {
     width: width,
-    className: "QuickFilterCardsContainer"
+    className: CardsContainerClassName
   }, items.map(_ref2 => {
     let {
       status,