sag_components 2.0.0-beta159 → 2.0.0-beta160

package/dist/index.esm.js

@@ -10375,23 +10375,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('');
@@ -10833,22 +10834,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('');
@@ -23959,21 +23961,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("");
@@ -24370,23 +24373,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('');
@@ -35618,9 +35622,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 {
@@ -36722,6 +36726,11 @@ const HeaderCell = styled.th`
     max-width: ${props => props.$maxWidth || '300px'};    
     width: auto;
     background-color: white;
+    
+    /* Special handling for expand cells - minimal padding */
+    ${props => props.$fieldType === 'expand' && `
+        padding: 12px 8px 12px 0px;
+    `}
 `;
 const ColumnContent = styled.div`
     display: flex;
@@ -37581,7 +37590,8 @@ const TableHeader = ({
   onFilter,
   onSelectAll,
   activeFilters = [],
-  activeSorts = []
+  activeSorts = [],
+  expandable = false
 }) => {
   const [focusedFilter, setFocusedFilter] = useState(null);
   const [focusedSort, setFocusedSort] = useState(null);
@@ -38021,7 +38031,11 @@ const TableHeader = ({
       onReset: () => handleSortReset(key)
     });
   };
-  return /*#__PURE__*/React$1.createElement(StyledTableHeader, null, /*#__PURE__*/React$1.createElement("tr", null, columns.map((column, index) => /*#__PURE__*/React$1.createElement(HeaderCell, {
+  return /*#__PURE__*/React$1.createElement(StyledTableHeader, null, /*#__PURE__*/React$1.createElement("tr", null, expandable && /*#__PURE__*/React$1.createElement(HeaderCell, {
+    $fieldType: "expand",
+    $minWidth: "16px",
+    $maxWidth: "16px"
+  }, /*#__PURE__*/React$1.createElement(ColumnContent, null, /*#__PURE__*/React$1.createElement(ColumnLabel, null))), columns.map((column, index) => /*#__PURE__*/React$1.createElement(HeaderCell, {
     key: column.key || index,
     $fieldType: column.fieldType?.toLowerCase(),
     $minWidth: column.minWidth,
@@ -38237,6 +38251,11 @@ const TableCell = styled.td`
     vertical-align: top;
   `}
 
+  /* Special handling for expand cells - minimal padding */
+  ${props => props.$fieldType === 'expand' && `
+    padding: 12px 8px 12px 0px;
+  `}
+
   /* CSS-only tooltip */
   &[data-tooltip]:hover::before {
     content: attr(data-tooltip);
@@ -38601,6 +38620,49 @@ const CharacterCount = styled.div`
   transition: color 0.2s ease;
 `;
 
+// EXPAND STYLES
+const ExpandIcon = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  font-family: "Poppins", sans-serif;
+  transition: all 0.2s ease;
+  user-select: none;
+  
+  &:hover {
+    background-color: #f0f0f0;
+    
+    svg path {
+      fill: #333;
+    }
+  }
+  
+  svg {
+    transition: all 0.2s ease;
+  }
+`;
+const ExpandedRow = styled.tr`
+  background-color: ${props => props.$expandedBackgroundColor || '#E6F0F0'};
+  
+  &:hover {
+    background-color: ${props => props.$expandedBackgroundColor || '#E6F0F0'};
+  }
+`;
+const ExpandedContent = styled.div`
+  padding: 16px;
+  background-color: ${props => props.$expandedBackgroundColor || '#E6F0F0'};
+  border-left: 3px solid #e0e0e0;
+  margin: 0;
+  
+  /* Ensure content doesn't interfere with table layout */
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 // MessageBox.styles.js
 const ModalOverlay = styled.div`
     position: fixed;
@@ -38848,6 +38910,12 @@ const TableBody = ({
   }],
   onCommentSave = () => {},
   commentTextLimit = 150,
+  expandable = false,
+  expandedRows = {},
+  expandedContent = {},
+  onExpandRow = () => {},
+  expandedBackgroundColor = '#E6F0F0',
+  // New prop with default
   ref = null
 }) => {
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
@@ -39199,8 +39267,19 @@ const TableBody = ({
   const shouldShowTooltip = (element, content) => {
     return element && element.scrollWidth > element.clientWidth;
   };
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(StyledTableBody, null, data.map((row, rowIndex) => /*#__PURE__*/React$1.createElement(TableRow, {
-    key: rowIndex,
+
+  // Handle expand click
+  const handleExpandClick = (row, rowIndex, event) => {
+    event.stopPropagation();
+    if (onExpandRow) {
+      // Determine the expand status based on current state
+      const expandStatus = expandedRows[rowIndex] ? 'isClosed' : 'isOpen';
+      onExpandRow(row, rowIndex, expandStatus);
+    }
+  };
+  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, {
     "data-row-index": rowIndex,
     className: indexToShimmer === rowIndex ? 'shimmer-row' : '',
     isFocused: focusedRowIndex === rowIndex,
@@ -39208,7 +39287,22 @@ const TableBody = ({
     onMouseEnter: () => setHoveredRowIndex(rowIndex),
     onMouseLeave: () => setHoveredRowIndex(null),
     onClick: () => handleRowClick(row, rowIndex)
-  }, columns.map(column => {
+  }, expandable && /*#__PURE__*/React$1.createElement(TableCell, {
+    $fieldType: "expand",
+    $minWidth: "16px",
+    $maxWidth: "16px"
+  }, /*#__PURE__*/React$1.createElement(ExpandIcon, {
+    onClick: e => handleExpandClick(row, rowIndex, e),
+    $isExpanded: expandedRows[rowIndex] || false
+  }, expandedRows[rowIndex] ? /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+    width: "12",
+    height: "12",
+    color: "#666"
+  }) : /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
+    width: "12",
+    height: "12",
+    fill: "#666"
+  }))), columns.map(column => {
     const value = row[column.key];
     const formattedValue = formatValue(value, column, row, rowIndex);
     return /*#__PURE__*/React$1.createElement(TableCell, {
@@ -39233,7 +39327,13 @@ const TableBody = ({
       $minWidth: column.minWidth,
       $maxWidth: column.maxWidth
     }, formattedValue);
-  })))), /*#__PURE__*/React$1.createElement(MessageBox, {
+  })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React$1.createElement(ExpandedRow, {
+    $expandedBackgroundColor: expandedBackgroundColor
+  }, /*#__PURE__*/React$1.createElement(TableCell, {
+    colSpan: columns.length + 1
+  }, /*#__PURE__*/React$1.createElement(ExpandedContent, {
+    $expandedBackgroundColor: expandedBackgroundColor
+  }, expandedContent[rowIndex] || null)))))), /*#__PURE__*/React$1.createElement(MessageBox, {
     title: "Add Comment",
     isOpen: isCommentModalOpen,
     onClose: handleCommentModalClose,
@@ -42552,6 +42652,13 @@ const Table = props => {
     isEditMode = false,
     editRowIndex = -1,
     onCommentSave = () => {},
+    // NEW: Props for expand functionality
+    expandable = false,
+    expandedRows = {},
+    expandedContent = {},
+    onExpandRow = () => {},
+    expandedBackgroundColor = '#E6F0F0',
+    // New prop
     // Accept ref as a regular prop
     ref = null
   } = props;
@@ -42674,7 +42781,8 @@ const Table = props => {
     columns: columns,
     onSort: onSort,
     onFilter: onFilter,
-    onSelectAll: onSelectAll
+    onSelectAll: onSelectAll,
+    expandable: expandable
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React$1.createElement(TableBody, {
     ref: tableBodyRef,
     columns: columns,
@@ -42689,7 +42797,12 @@ const Table = props => {
     buttonHoverColor: buttonHoverColor,
     resetFocusIndex: resetFocusIndex,
     changeFocusIndex: changeFocusIndex,
-    onFocusChange: handleTableFocusChange
+    onFocusChange: handleTableFocusChange,
+    expandable: expandable,
+    expandedRows: expandedRows,
+    expandedContent: expandedContent,
+    onExpandRow: onExpandRow,
+    expandedBackgroundColor: expandedBackgroundColor
   })), 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,