sag_components 2.0.0-beta147 → 2.0.0-beta149

package/dist/index.esm.js

@@ -24318,23 +24318,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('');
@@ -38121,6 +38122,15 @@ const TableCell = styled.td`
   position: relative;
   transition: all 0.3s ease;
 
+  /* Special handling for tag cells - allow wrapping */
+  ${props => props.$fieldType === 'tag' && `
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    line-height: 1.5;
+    vertical-align: top;
+  `}
+
   /* CSS-only tooltip */
   &[data-tooltip]:hover::before {
     content: attr(data-tooltip);
@@ -38326,6 +38336,67 @@ const StatusCellCircle = styled.div`
     border: 1px solid white;
     background-color: ${props => props.backgroundColor};
 `;
+
+// NEW TAG STYLES
+const TagContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: flex-start;
+  max-width: 100%;
+  line-height: 1.5;
+`;
+const TagChip = styled.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  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;
+  
+  /* Dynamic colors via CSS custom properties */
+  background-color: ${props => props.$backgroundColor || '#F3F4F6'};
+  color: ${props => props.$textColor || '#374151'};
+  border-color: ${props => props.$borderColor || '#9CA3AF'};
+  
+  /* Tailwind-style transitions */
+  transition: all 0.15s ease-in-out;
+  
+  /* Hover effect for interactive tags */
+  ${props => props.$interactive && `
+    cursor: pointer;
+    &:hover {
+      opacity: 0.8;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  `}
+`;
+const TagOverflow = styled.span`
+  font-size: 12px;
+  font-weight: 500;
+  color: #6B7280;
+  font-family: "Poppins", sans-serif;
+  cursor: help;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 4px;
+  
+  &:hover {
+    color: #374151;
+  }
+`;
+const MultiTagWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-width: 100%;
+  align-items: flex-start;
+`;
 const TextareaWrapper = styled.div`
   position: relative;
   display: flex;
@@ -38757,6 +38828,12 @@ const TableBody = ({
       height: tooltipHeight
     };
   };
+
+  // Helper function to format tag text
+  const formatTagText = tag => {
+    if (typeof tag !== 'string') return tag;
+    return tag.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+  };
   const formatValue = (value, column, row, rowIndex) => {
     if (value === null || value === undefined) {
       return '';
@@ -38798,6 +38875,54 @@ const TableBody = ({
           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
+
+        // Handle single tag
+        if (typeof value === 'string') {
+          const colorConfig = colors[value] || defaultColor;
+          return /*#__PURE__*/React$1.createElement(TagContainer, null, /*#__PURE__*/React$1.createElement(TagChip, {
+            $backgroundColor: colorConfig.bg,
+            $textColor: colorConfig.text,
+            $borderColor: colorConfig.border,
+            $interactive: false,
+            title: value
+          }, formatTagText(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, {
+            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) => {
@@ -38964,7 +39089,7 @@ const TableBody = ({
                 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', `${offset}px`);
+                el.style.setProperty('--tooltip-height', `${height}px`);
                 el.setAttribute('data-tooltip', trashTooltipText);
               }
             }
@@ -39048,10 +39173,14 @@ TableBody.propTypes = {
   onRowClick: PropTypes.func,
   onSendClick: PropTypes.func,
   buttonColor: PropTypes.string,
+  buttonHoverColor: PropTypes.string,
+  selectedColor: PropTypes.string,
   onDeleteClick: PropTypes.func,
-  resetFocus: PropTypes.bool,
+  resetFocusIndex: PropTypes.bool,
+  changeFocusIndex: PropTypes.number,
   onFocusChange: PropTypes.func,
   indexToShimmer: PropTypes.number,
+  statuses: PropTypes.array,
   onCommentSave: PropTypes.func,
   commentTextLimit: PropTypes.number,
   ref: PropTypes.object
@@ -52262,21 +52391,33 @@ const DropdownList = styled.ul`
       `}
 `;
 const SectionDiv = styled.div`
-  &:nth-child(2),
-  &:nth-child(4){
-    border-top: 1px solid #e6e2e2ff;
-    padding-top: 16px;
+${({
+  $showBorder
+}) => {
+  switch ($showBorder) {
+    case 'Template Offer':
+      return css`border-top: 1px solid #e6e2e2ff;
+         margin-top: 8px;`;
+    case 'Last defined by you':
+      return css`border-bottom: 1px solid #e6e2e2ff;
+         padding-bottom: 8px;
+        margin-bottom: 8px;`;
+    default:
+      return css`border-top: none`;
   }
+}}
 `;
 const SectionTitle = styled.li`
   font-size: 14px;
   color: #bdbdbd;
-  padding: 12px 12px 0 12px;
+  padding: 8px 12px 0 12px;
+  margin: 8px 12px 0 12px;
   font-weight: 500;
   pointer-events: none;
+  list-style: none;
 `;
 const DropdownItem = styled.li`
-  padding: 8px 16px;
+  padding: 8px 12px;
   cursor: pointer; 
   display: flex;
   align-items: center;
@@ -52818,9 +52959,10 @@ const OverlayDropdown = _ref => {
     dropdownMaxHeight: dropdownMaxHeight,
     width: width,
     position: dropdownPosition
-  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement(SectionDiv, {
+  }, dataToRender.map((group, groupIndex) => group.items?.length > 0 && /*#__PURE__*/React$1.createElement(SectionDiv, {
+    $showBorder: group.overlayName,
     key: group.overlayCode
-  }, (groupIndex === 0 || groupIndex === 3) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
+  }, ['Template Offer', 'Last defined by you'].includes(group.overlayName) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
     key: item.value,
     selected: item.value === value,
     selectedColor: selectedColor,