sag_components 2.0.0-beta146 → 2.0.0-beta148

package/dist/index.esm.js

@@ -10320,24 +10320,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10779,23 +10778,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -23906,22 +23904,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24318,24 +24315,23 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35567,9 +35563,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -38122,6 +38118,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);
@@ -38327,6 +38332,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;
@@ -38758,6 +38824,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 '';
@@ -38799,6 +38871,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) => {
@@ -38965,7 +39085,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);
               }
             }
@@ -39049,10 +39169,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,16 +52386,19 @@ const DropdownList = styled.ul`
         top: 110%;
       `}
 `;
+const SectionDiv = styled.div`
+  &:nth-child(2),
+  &:nth-child(4){
+    border-top: 1px solid #e6e2e2ff;
+    padding-top: 16px;
+  }
+`;
 const SectionTitle = styled.li`
   font-size: 14px;
   color: #bdbdbd;
   padding: 12px 12px 0 12px;
   font-weight: 500;
   pointer-events: none;
-  &:not(:first-child) {
-    border-top: 1px solid #bdbdbd;
-    padding-top: 16px;
-  }
 `;
 const DropdownItem = styled.li`
   padding: 8px 16px;
@@ -52816,9 +52943,9 @@ const OverlayDropdown = _ref => {
     dropdownMaxHeight: dropdownMaxHeight,
     width: width,
     position: dropdownPosition
-  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement("div", {
+  }, dataToRender.map((group, groupIndex) => group.items && group.items.length > 0 && /*#__PURE__*/React$1.createElement(SectionDiv, {
     key: group.overlayCode
-  }, /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
+  }, (groupIndex === 0 || groupIndex === 3) && /*#__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,