sag_components 2.0.0-beta173 → 2.0.0-beta174

package/dist/index.esm.js

@@ -10429,23 +10429,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -10887,22 +10888,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -38731,13 +38733,13 @@ const ExpandedContent = styled.div`
 `;
 
 // DROPDOWN STYLES
-const DropdownContainer$1 = styled.div`
+styled.div`
   position: relative;
   display: inline-block;
   width: 100%;
   font-family: "Poppins", sans-serif;
 `;
-const DropdownButton$1 = styled.button`
+styled.button`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -38770,7 +38772,7 @@ const DropdownButton$1 = styled.button`
     flex: 1;
   }
 `;
-const DropdownIcon = styled.div`
+styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -38785,7 +38787,7 @@ const DropdownIcon = styled.div`
     transform: rotate(180deg);
   `}
 `;
-const DropdownMenu = styled.div`
+styled.div`
   position: absolute;
   top: calc(100%);
   left: 0;
@@ -38818,7 +38820,7 @@ const DropdownMenu = styled.div`
     background: #94a3b8;
   }
 `;
-const DropdownOption = styled.div`
+styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -39066,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,
@@ -39455,30 +39628,18 @@ const TableBody = ({
         // 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"
-        })))));
+        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();
@@ -39519,9 +39680,9 @@ const TableBody = ({
       [dropdownKey]: false
     }));
 
-    // Fire the onDropdownSelected event
+    // Fire the onDropdownSelected event with columnKey instead of columnName
     if (onDropdownSelected) {
-      onDropdownSelected(row, selectedOption);
+      onDropdownSelected(row, selectedOption, columnKey);
     }
   };