sag_components 2.0.0-beta177 → 2.0.0-beta179

package/dist/index.esm.js

@@ -10545,23 +10545,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('');
@@ -11003,22 +11004,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('');
@@ -24129,21 +24131,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24540,23 +24543,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('');
@@ -35872,9 +35876,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 {
@@ -37841,7 +37845,9 @@ const TableHeader = ({
   onSelectAll,
   activeFilters = [],
   activeSorts = [],
-  expandable = false
+  expandable = false,
+  onHeaderCheckboxClick = () => {},
+  headerCheckboxStates = {}
 }) => {
   const [focusedFilter, setFocusedFilter] = useState(null);
   const [focusedSort, setFocusedSort] = useState(null);
@@ -38191,6 +38197,20 @@ const TableHeader = ({
     return isFocused || isActive || hasSelection;
   };
 
+  // Handle header checkbox click
+  const handleHeaderCheckboxClick = (columnKey, event) => {
+    // Don't prevent the default checkbox behavior
+    const newValue = event.target.checked;
+
+    // Fire the callback with column info and new value - let parent handle state
+    if (onHeaderCheckboxClick) {
+      onHeaderCheckboxClick({
+        columnName: columnKey,
+        checked: newValue
+      });
+    }
+  };
+
   // Update showColumnFilter to pass current filterSelections to stateless FilterPop
   const showColumnFilter = column => {
     const {
@@ -38294,7 +38314,24 @@ const TableHeader = ({
     type: "checkbox",
     onChange: e => handleCheckboxChange(column.key, e.target.checked),
     "data-column": column.key
-  }), /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
+  }), column.fieldType?.toLowerCase() === 'checkbox' && column.showCheckboxInTitle !== false && /*#__PURE__*/React$1.createElement(ColumnCheckbox, {
+    type: "checkbox",
+    checked: headerCheckboxStates[column.key] || false,
+    onChange: e => handleHeaderCheckboxClick(column.key, e),
+    "data-column": column.key,
+    style: {
+      width: '18px',
+      height: '18px',
+      marginLeft: '10px',
+      // Moved 5px more to the right (was 5px)
+      cursor: 'pointer',
+      accentColor: '#066768',
+      // Use the same green color as row checkboxes
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }), column.fieldType?.toLowerCase() !== 'checkbox' && /*#__PURE__*/React$1.createElement(ColumnLabel, null, column.title), (column.filter || column.sort) && /*#__PURE__*/React$1.createElement(ColumnActions, null, column.sort && /*#__PURE__*/React$1.createElement(IconButton, {
     ref: el => iconRefs.current[`sort-${column.key}`] = el,
     onClick: () => handleSort(column.key),
     onMouseEnter: () => setFocusedSort(column.key),
@@ -39270,8 +39307,19 @@ const DropdownButton$1 = styled.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  min-width: 120px;  
-  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? props.$selectedColor : "white"};
+  min-width: 120px;
+  background-color: ${props => {
+  // When row is being hovered (regardless of focus state), use hover color
+  if (props.$isRowHovered) {
+    return props.$selectedColor; // Use selected color for row hover
+  }
+  // Row focused/selected state (only when NOT hovering the row) - should use selected color
+  if (props.$isRowFocused) {
+    return props.$selectedColor; // Use selected color when row is focused/selected
+  }
+  // Default
+  return 'white';
+}};
   border: none;
   border-radius: 0;
   font-family: "Poppins", sans-serif;
@@ -39304,7 +39352,22 @@ const DropdownIcon = styled.div`
   justify-content: center;
   width: 20px;
   height: 20px;
-  background-color: ${props => props.$isRowFocused || props.$isRowHovered ? '#B4D1D2' : 'white'};
+  background-color: ${props => {
+  // Highest Priority: dropdown-specific hover takes precedence over everything
+  if (props.$isDropdownHovered) {
+    return '#B4D1D2'; // Green color when specifically hovering this dropdown
+  }
+  // When row is being hovered (regardless of focus state), other dropdowns should use hover color
+  if (props.$isRowHovered) {
+    return '#E6F0F0'; // Light gray when row is hovered but not this specific dropdown
+  }
+  // Row focused/selected state (only when NOT hovering the row) - should use green color
+  if (props.$isRowFocused) {
+    return '#B4D1D2'; // Green color when row is focused/selected but not being hovered
+  }
+  // Default
+  return 'white';
+}};
   border-radius: 4px;
   margin-left: 8px;
   transition: all 0.2s ease;
@@ -39316,8 +39379,14 @@ const DropdownIcon = styled.div`
 const DropdownMenu = styled.div`
   position: absolute;
   top: calc(100%);
-  left: 0;
-  right: 0;
+  ${props => {
+  if (props.$dropdownOptionsAlignment === 'left') {
+    return props.$dropdownOptionsWidth ? `left: 0; width: ${props.$dropdownOptionsWidth};` : 'left: 0; right: 0;';
+  } else {
+    // Default: right alignment
+    return props.$dropdownOptionsWidth ? `right: 0; width: ${props.$dropdownOptionsWidth};` : 'left: 0; right: 0;';
+  }
+}}
   z-index: 1000;
   background-color: white;
   border: none;
@@ -39386,23 +39455,41 @@ const Dropdown = ({
   maxDropdownHeight,
   isRowFocused = false,
   isRowHovered = false,
-  selectedColor
+  selectedColor,
+  dropdownOptionsWidth,
+  dropdownOptionsAlignment = 'right',
+  placeholder = 'Select...'
 }) => {
-  return /*#__PURE__*/React$1.createElement(DropdownContainer$1, null, /*#__PURE__*/React$1.createElement(DropdownButton$1, {
+  const [isDropdownHovered, setIsDropdownHovered] = useState(false);
+
+  // Reset dropdown hover state when dropdown closes
+  useEffect(() => {
+    if (!isOpen) {
+      setIsDropdownHovered(false);
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/React$1.createElement(DropdownContainer$1, {
+    onMouseEnter: () => setIsDropdownHovered(true),
+    onMouseLeave: () => setIsDropdownHovered(false)
+  }, /*#__PURE__*/React$1.createElement(DropdownButton$1, {
     onClick: onToggle,
     $isOpen: isOpen,
     $isRowFocused: isRowFocused,
+    $isRowHovered: isRowHovered,
     $selectedColor: selectedColor
   }, /*#__PURE__*/React$1.createElement("span", null, displayText), /*#__PURE__*/React$1.createElement(DropdownIcon, {
     $isOpen: isOpen,
     $isRowFocused: isRowFocused,
-    $isRowHovered: isRowHovered
+    $isRowHovered: isRowHovered,
+    $isDropdownHovered: isDropdownHovered
   }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
     width: "10",
     height: "6",
     color: "#212121"
   }))), isOpen && /*#__PURE__*/React$1.createElement(DropdownMenu, {
-    $maxDropdownHeight: maxDropdownHeight
+    $maxDropdownHeight: maxDropdownHeight,
+    $dropdownOptionsWidth: dropdownOptionsWidth,
+    $dropdownOptionsAlignment: dropdownOptionsAlignment
   }, options.map((option, index) => /*#__PURE__*/React$1.createElement(DropdownOption, {
     key: index,
     onClick: e => onOptionSelect(option, e),
@@ -39426,7 +39513,10 @@ Dropdown.propTypes = {
   maxDropdownHeight: PropTypes.string,
   isRowFocused: PropTypes.bool,
   isRowHovered: PropTypes.bool,
-  selectedColor: PropTypes.string
+  selectedColor: PropTypes.string,
+  dropdownOptionsWidth: PropTypes.string,
+  dropdownOptionsAlignment: PropTypes.oneOf(['left', 'right']),
+  placeholder: PropTypes.string
 };
 
 // TableBody.jsx
@@ -39465,6 +39555,8 @@ const TableBody = ({
   expandedBackgroundColor = '#E6F0F0',
   // New prop with default
   onDropdownSelected = () => {},
+  onCheckboxClick = () => {},
+  onHeaderCheckboxClick = () => {},
   ref = null
 }) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
@@ -39814,10 +39906,13 @@ const TableBody = ({
         const isOpen = openDropdowns[dropdownKey] || false;
         const dropdownOptions = column.dropdownOptions || [];
         const maxDropdownHeight = column.maxDropdownHeight || '200px';
+        const dropdownOptionsWidth = column.dropdownOptionsWidth; // Get from column config
+        const dropdownOptionsAlignment = column.dropdownOptionsAlignment || 'right'; // Get from column config, default to 'right'
+        const placeholder = column.placeholder || 'Select...'; // Get from column config, default to 'Select...'
 
         // Find the current selected option to display its label
         const currentOption = dropdownOptions.find(option => option.value === value);
-        const displayText = currentOption ? currentOption.label : value || 'Select...';
+        const displayText = currentOption ? currentOption.label : value || placeholder;
         return /*#__PURE__*/React$1.createElement(Dropdown, {
           isOpen: isOpen,
           options: dropdownOptions,
@@ -39826,10 +39921,37 @@ const TableBody = ({
           onToggle: e => handleDropdownClick(rowIndex, column.key, e),
           onOptionSelect: (option, e) => handleDropdownOptionClick(row, rowIndex, column.key, option, e),
           maxDropdownHeight: maxDropdownHeight,
+          dropdownOptionsWidth: dropdownOptionsWidth,
+          dropdownOptionsAlignment: dropdownOptionsAlignment,
+          placeholder: placeholder,
           isRowFocused: focusedRowIndex === rowIndex,
           isRowHovered: hoveredRowIndex === rowIndex,
           selectedColor: selectedColor
         });
+      case 'checkbox':
+        const isChecked = Boolean(value); // Convert to boolean
+
+        return /*#__PURE__*/React$1.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%'
+          }
+        }, /*#__PURE__*/React$1.createElement("input", {
+          type: "checkbox",
+          checked: isChecked,
+          onChange: e => handleCheckboxClick(row, column.key, e),
+          onClick: e => e.stopPropagation() // Prevent row click on checkbox click
+          ,
+          style: {
+            width: '18px',
+            height: '18px',
+            cursor: 'pointer',
+            accentColor: buttonColor // Use the theme color for checkbox
+          }
+        }));
       default:
         // Treat default as text
         return value.toString();
@@ -39849,6 +39971,28 @@ const TableBody = ({
     }
   };
 
+  // Handle checkbox click
+  const handleCheckboxClick = (row, columnKey, event) => {
+    event.stopPropagation();
+    const currentValue = row[columnKey];
+    const newValue = !currentValue; // Toggle the value
+
+    // Create updated row with new checkbox value
+    const updatedRow = {
+      ...row,
+      [columnKey]: newValue
+    };
+
+    // Fire the onCheckboxClick event with updated row
+    if (onCheckboxClick) {
+      onCheckboxClick({
+        fullRow: updatedRow,
+        columnName: columnKey,
+        checked: newValue
+      });
+    }
+  };
+
   // Handle dropdown click
   const handleDropdownClick = (rowIndex, columnKey, event) => {
     event.stopPropagation();
@@ -39896,7 +40040,7 @@ const TableBody = ({
     onMouseEnter: () => setHoveredRowIndex(rowIndex),
     onMouseLeave: () => setHoveredRowIndex(null),
     onClick: () => handleRowClick(row, rowIndex)
-  }, expandable && /*#__PURE__*/React$1.createElement(TableCell, {
+  }, expandable && expandedContent[rowIndex] !== null && /*#__PURE__*/React$1.createElement(TableCell, {
     $fieldType: "expand",
     $minWidth: "16px",
     $maxWidth: "16px"
@@ -39985,6 +40129,8 @@ TableBody.propTypes = {
   onCommentSave: PropTypes.func,
   commentTextLimit: PropTypes.number,
   onDropdownSelected: PropTypes.func,
+  onCheckboxClick: PropTypes.func,
+  onHeaderCheckboxClick: PropTypes.func,
   ref: PropTypes.object
 };
 TableBody.displayName = 'TableBody';
@@ -43344,6 +43490,9 @@ const Table = props => {
     expandedBackgroundColor = '#E6F0F0',
     // New prop
     onDropdownSelected = () => {},
+    onCheckboxClick = () => {},
+    onHeaderCheckboxClick = () => {},
+    headerCheckboxStates = {},
     // Accept ref as a regular prop
     ref = null
   } = props;
@@ -43470,7 +43619,9 @@ const Table = props => {
     onSort: onSort,
     onFilter: onFilter,
     onSelectAll: onSelectAll,
-    expandable: expandable
+    expandable: expandable,
+    onHeaderCheckboxClick: onHeaderCheckboxClick,
+    headerCheckboxStates: headerCheckboxStates
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React$1.createElement(TableBody, {
     ref: tableBodyRef,
     columns: columns,
@@ -43491,7 +43642,9 @@ const Table = props => {
     expandedContent: expandedContent,
     onExpandRow: onExpandRow,
     expandedBackgroundColor: expandedBackgroundColor,
-    onDropdownSelected: onDropdownSelected
+    onDropdownSelected: onDropdownSelected,
+    onCheckboxClick: onCheckboxClick,
+    onHeaderCheckboxClick: onHeaderCheckboxClick
   })), 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,