sag_components 2.0.0-beta172 → 2.0.0-beta173

package/dist/index.esm.js

@@ -10429,24 +10429,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('');
@@ -10888,23 +10887,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('');
@@ -38226,7 +38224,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 +38237,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 +38262,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 +38318,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 +38730,124 @@ const ExpandedContent = styled.div`
   box-sizing: border-box;
 `;
 
+// 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.$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;
+    }
+  `}
+`;
+
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
     position: fixed;
@@ -38974,12 +39101,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 +39446,39 @@ 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(DropdownContainer$1, null, /*#__PURE__*/React$1.createElement(DropdownButton$1, {
+          onClick: e => handleDropdownClick(rowIndex, column.key, e),
+          $isOpen: isOpen,
+          $isRowFocused: focusedRowIndex === rowIndex,
+          $selectedColor: selectedColor
+        }, /*#__PURE__*/React$1.createElement("span", null, displayText), /*#__PURE__*/React$1.createElement(DropdownIcon, {
+          $isOpen: isOpen,
+          $isRowFocused: focusedRowIndex === rowIndex,
+          $isRowHovered: hoveredRowIndex === rowIndex
+        }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+          width: "10",
+          height: "6",
+          color: "#212121"
+        }))), isOpen && /*#__PURE__*/React$1.createElement(DropdownMenu, {
+          $maxDropdownHeight: maxDropdownHeight
+        }, dropdownOptions.map((option, index) => /*#__PURE__*/React$1.createElement(DropdownOption, {
+          key: index,
+          onClick: e => handleDropdownOptionClick(row, rowIndex, column.key, option, e),
+          $isSelected: option.value === value
+        }, /*#__PURE__*/React$1.createElement("span", null, option.label), option.value === value && /*#__PURE__*/React$1.createElement(OkIcon, {
+          width: "24",
+          height: "24",
+          color: "#066768"
+        })))));
       default:
         // Treat default as text
         return value.toString();
@@ -39335,6 +39497,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
+    if (onDropdownSelected) {
+      onDropdownSelected(row, selectedOption);
+    }
+  };
+
+  // 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 +39633,7 @@ TableBody.propTypes = {
   statuses: PropTypes.array,
   onCommentSave: PropTypes.func,
   commentTextLimit: PropTypes.number,
+  onDropdownSelected: PropTypes.func,
   ref: PropTypes.object
 };
 TableBody.displayName = 'TableBody';
@@ -42791,6 +42992,7 @@ const Table = props => {
     onExpandRow = () => {},
     expandedBackgroundColor = '#E6F0F0',
     // New prop
+    onDropdownSelected = () => {},
     // Accept ref as a regular prop
     ref = null
   } = props;
@@ -42937,7 +43139,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,