sag_components 2.0.0-beta172 → 2.0.0-beta174

package/dist/index.esm.js

@@ -38226,7 +38226,7 @@ const shimmerAnimation = css`
   }
 `;
 const StyledTableBody = styled.tbody`
-  background-color: white;
+  background-color: ${props => props.$isRowFocused ? props.$selectedColor : "white"};
   font-family: "Poppins", sans-serif;
   position: relative;
 `;
@@ -38239,6 +38239,11 @@ const TableRow = styled.tr`
 
   &:hover {
     background-color: #e6f0f0;
+    
+    /* Update dropdown buttons when row is hovered */
+    button {
+      background-color: #e6f0f0 !important;
+    }
   }
 
   &:last-child {
@@ -38259,7 +38264,7 @@ styled.div`
   background-color: white;
   color: #333;
   padding: 10px 16px;
-  border-radius: 4px;
+  border-radius: 0;
   font-family: "Poppins", sans-serif;
   font-size: 14px;
   font-weight: 400;
@@ -38315,6 +38320,12 @@ const TableCell = styled.td`
   ${props => props.$fieldType === 'expand' && `
     padding: 12px 8px 12px 0px;
   `}
+  
+  /* Special handling for dropdown cells - ensure proper overflow */
+  ${props => props.$fieldType === 'dropdown' && `
+    overflow: visible;
+    position: relative;
+  `}
 
   /* CSS-only tooltip */
   &[data-tooltip]:hover::before {
@@ -38721,6 +38732,124 @@ const ExpandedContent = styled.div`
   box-sizing: border-box;
 `;
 
+// DROPDOWN STYLES
+styled.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-family: "Poppins", sans-serif;
+`;
+styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 120px;  
+  background-color: ${props => props.$isRowFocused ? props.$selectedColor : "white"};
+  border: none;
+  border-radius: 0;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #212121;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background-color: #D1E7E7;
+  }
+  
+  &:focus {
+    outline: none;
+    background-color: #E6F0F0;
+  }
+  
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+    flex: 1;
+  }
+`;
+styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? '#B4D1D2' : 'white'};
+  border-radius: 4px;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+  
+  ${props => props.$isOpen && `
+    transform: rotate(180deg);
+  `}
+`;
+styled.div`
+  position: absolute;
+  top: calc(100%);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: white;
+  border: none;
+  border-radius: 0;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  font-family: "Poppins", sans-serif;
+  max-height: ${props => props.$maxDropdownHeight || '200px'};
+  overflow-y: auto;
+  padding: 16px;
+  
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+  }
+`;
+styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border-radius: 0;
+  border-left: 3px solid transparent;
+  background-color: white;
+  
+  &:hover {
+    background-color: #E6F0F0;
+  }
+  
+  ${props => props.$isSelected && `
+    background-color: #B4D1D2;
+    color: #374151;
+    font-weight: 500;
+    border-left: 3px solid #066768;
+    
+    &:hover {
+      background-color: #A3C9CA;
+    }
+  `}
+`;
+
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
     position: fixed;
@@ -38939,6 +39068,177 @@ const DisabledTrashIcon = ({
   }));
 };
 
+// DROPDOWN STYLES
+const DropdownContainer$1 = styled.div`
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-family: "Poppins", sans-serif;
+`;
+const DropdownButton$1 = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: 120px;  
+  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? props.$selectedColor : "white"};
+  border: none;
+  border-radius: 0;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #212121;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background-color: #D1E7E7;
+  }
+  
+  &:focus {
+    outline: none;
+    background-color: #E6F0F0;
+  }
+  
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+    flex: 1;
+  }
+`;
+const DropdownIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? '#B4D1D2' : 'white'};
+  border-radius: 4px;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+  
+  ${props => props.$isOpen && `
+    transform: rotate(180deg);
+  `}
+`;
+const DropdownMenu = styled.div`
+  position: absolute;
+  top: calc(100%);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: white;
+  border: none;
+  border-radius: 0;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  font-family: "Poppins", sans-serif;
+  max-height: ${props => props.$maxDropdownHeight || '200px'};
+  overflow-y: auto;
+  padding: 16px;
+  
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+  }
+  
+  &::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+  }
+`;
+const DropdownOption = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border-radius: 0;
+  border-left: 3px solid transparent;
+  background-color: white;
+  
+  &:hover {
+    background-color: #E6F0F0;
+  }
+  
+  ${props => props.$isSelected && `
+    background-color: #B4D1D2;
+    color: #374151;
+    font-weight: 500;
+    border-left: 3px solid #066768;
+    
+    &:hover {
+      background-color: #A3C9CA;
+    }
+  `}
+`;
+
+const Dropdown = ({
+  isOpen,
+  options,
+  selectedValue,
+  displayText,
+  onToggle,
+  onOptionSelect,
+  maxDropdownHeight,
+  isRowFocused = false,
+  isRowHovered = false,
+  selectedColor
+}) => {
+  return /*#__PURE__*/React$1.createElement(DropdownContainer$1, null, /*#__PURE__*/React$1.createElement(DropdownButton$1, {
+    onClick: onToggle,
+    $isOpen: isOpen,
+    $isRowFocused: isRowFocused,
+    $selectedColor: selectedColor
+  }, /*#__PURE__*/React$1.createElement("span", null, displayText), /*#__PURE__*/React$1.createElement(DropdownIcon, {
+    $isOpen: isOpen,
+    $isRowFocused: isRowFocused,
+    $isRowHovered: isRowHovered
+  }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+    width: "10",
+    height: "6",
+    color: "#212121"
+  }))), isOpen && /*#__PURE__*/React$1.createElement(DropdownMenu, {
+    $maxDropdownHeight: maxDropdownHeight
+  }, options.map((option, index) => /*#__PURE__*/React$1.createElement(DropdownOption, {
+    key: index,
+    onClick: e => onOptionSelect(option, e),
+    $isSelected: option.value === selectedValue
+  }, /*#__PURE__*/React$1.createElement("span", null, option.label), option.value === selectedValue && /*#__PURE__*/React$1.createElement(OkIcon, {
+    width: "24",
+    height: "24",
+    color: "#066768"
+  })))));
+};
+Dropdown.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired
+  })).isRequired,
+  selectedValue: PropTypes.string,
+  displayText: PropTypes.string.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  onOptionSelect: PropTypes.func.isRequired,
+  maxDropdownHeight: PropTypes.string,
+  isRowFocused: PropTypes.bool,
+  isRowHovered: PropTypes.bool,
+  selectedColor: PropTypes.string
+};
+
 // TableBody.jsx
 const TableBody = ({
   columns,
@@ -38974,12 +39274,14 @@ const TableBody = ({
   onExpandRow = () => {},
   expandedBackgroundColor = '#E6F0F0',
   // New prop with default
+  onDropdownSelected = () => {},
   ref = null
 }) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
   const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
   const [currentCommentRow, setCurrentCommentRow] = useState(null);
+  const [openDropdowns, setOpenDropdowns] = useState({});
 
   // TextArea logic states
   const [commentText, setCommentText] = useState('');
@@ -39317,6 +39619,27 @@ const TableBody = ({
           }));
         }
         return null;
+      case 'dropdown':
+        const dropdownKey = `${rowIndex}-${column.key}`;
+        const isOpen = openDropdowns[dropdownKey] || false;
+        const dropdownOptions = column.dropdownOptions || [];
+        const maxDropdownHeight = column.maxDropdownHeight || '200px';
+
+        // Find the current selected option to display its label
+        const currentOption = dropdownOptions.find(option => option.value === value);
+        const displayText = currentOption ? currentOption.label : value || 'Select...';
+        return /*#__PURE__*/React$1.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,
+          isRowFocused: focusedRowIndex === rowIndex,
+          isRowHovered: hoveredRowIndex === rowIndex,
+          selectedColor: selectedColor
+        });
       default:
         // Treat default as text
         return value.toString();
@@ -39335,6 +39658,44 @@ const TableBody = ({
       onExpandRow(row, rowIndex, expandStatus);
     }
   };
+
+  // Handle dropdown click
+  const handleDropdownClick = (rowIndex, columnKey, event) => {
+    event.stopPropagation();
+    const dropdownKey = `${rowIndex}-${columnKey}`;
+    setOpenDropdowns(prev => ({
+      ...prev,
+      [dropdownKey]: !prev[dropdownKey]
+    }));
+  };
+
+  // Handle dropdown option selection
+  const handleDropdownOptionClick = (row, rowIndex, columnKey, selectedOption, event) => {
+    event.stopPropagation();
+    const dropdownKey = `${rowIndex}-${columnKey}`;
+
+    // Close the dropdown
+    setOpenDropdowns(prev => ({
+      ...prev,
+      [dropdownKey]: false
+    }));
+
+    // Fire the onDropdownSelected event with columnKey instead of columnName
+    if (onDropdownSelected) {
+      onDropdownSelected(row, selectedOption, columnKey);
+    }
+  };
+
+  // Close all dropdowns when clicking outside
+  React$1.useEffect(() => {
+    const handleClickOutside = () => {
+      setOpenDropdowns({});
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React$1.createElement(React$1.Fragment, {
     key: rowIndex
   }, /*#__PURE__*/React$1.createElement(TableRow, {
@@ -39433,6 +39794,7 @@ TableBody.propTypes = {
   statuses: PropTypes.array,
   onCommentSave: PropTypes.func,
   commentTextLimit: PropTypes.number,
+  onDropdownSelected: PropTypes.func,
   ref: PropTypes.object
 };
 TableBody.displayName = 'TableBody';
@@ -42791,6 +43153,7 @@ const Table = props => {
     onExpandRow = () => {},
     expandedBackgroundColor = '#E6F0F0',
     // New prop
+    onDropdownSelected = () => {},
     // Accept ref as a regular prop
     ref = null
   } = props;
@@ -42937,7 +43300,8 @@ const Table = props => {
     expandedRows: expandedRows,
     expandedContent: expandedContent,
     onExpandRow: onExpandRow,
-    expandedBackgroundColor: expandedBackgroundColor
+    expandedBackgroundColor: expandedBackgroundColor,
+    onDropdownSelected: onDropdownSelected
   })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? getNoDataSearchIcon(noDataSearchIcon) : getNoDataIcon(noDataIcon)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noDataInSearchTitle), /*#__PURE__*/React$1.createElement("br", null), noDataInSearchMessage) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("strong", null, noEventsTitle), /*#__PURE__*/React$1.createElement("br", null), noEventsSubtitle)), !showNoDataInSearch && showNoEventsButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: noEventsButtonIcon,