sag_components 2.0.0-beta110 → 2.0.0-beta112

package/dist/index.esm.js

@@ -27931,7 +27931,7 @@ Heatmap.propTypes = {
   barHeight: PropTypes.string.isRequired
 };
 
-const ButtonWrapper$2 = styled.div`
+const ButtonWrapper$3 = styled.div`
   width: fit-content;
   text-align: center;
 `;
@@ -28082,7 +28082,7 @@ const IconButton$1 = props => {
   const onCancelClickHandler = event => {
     onCancelClick(event);
   };
-  return /*#__PURE__*/React$1.createElement(ButtonWrapper$2, {
+  return /*#__PURE__*/React$1.createElement(ButtonWrapper$3, {
     id: "ButtonWrapper"
   }, /*#__PURE__*/React$1.createElement(IconButtonContainer, {
     download: true,
@@ -35866,9 +35866,12 @@ const TableContainer = styled.div`
     ${scrollableStyles$1}
 `;
 const TableBodyScrollWrapper = styled.div`
+    height: ${props => props.tableBodyHeight || '728px'};
+    min-height: ${props => props.tableBodyHeight || '728px'};
     max-height: ${props => props.tableBodyHeight || '728px'};
     overflow-y: auto;
     overflow-x: ${props => props.showHorizontalScroll ? 'auto' : 'hidden'};
+    position: relative;
     
     &::-webkit-scrollbar {
         height: 8px;
@@ -36347,6 +36350,7 @@ const FieldPop = props => {
   }, "\xD7")));
 };
 
+// FilterPop.style.js 
 const FilterPopContainer = styled.div`
     font-family: 'Poppins', sans-serif;
     width: ${props => props.width || '300px'};
@@ -36356,6 +36360,13 @@ const FilterPopContainer = styled.div`
     background-color: #fff;
     border-radius: 4px;
     box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
+    
+    /* Add this CSS for checkbox styling */
+    input[type="checkbox"] {
+        accent-color: ${props => props.accentColor || '#066768'};
+        width: 16px;
+        height: 16px;
+    }
 `;
 const Title$5 = styled.h6`
     font-size: 16px;
@@ -36378,6 +36389,12 @@ const CheckboxLabel = styled.label`
   font-size: 14px;
   font-weight: 400;
   color: #212121;
+  cursor: pointer;
+  
+  &:hover {
+    background-color: #E6F0F0;   
+  }
+  
   > span {
     width: ${props => props.width};
     white-space: nowrap;
@@ -36385,7 +36402,7 @@ const CheckboxLabel = styled.label`
     text-overflow: ellipsis;
   }
 `;
-const ButtonWrapper$1 = styled.div`
+const ButtonWrapper$2 = styled.div`
     text-align: right;
 `;
 const ResetButton$1 = styled.button`
@@ -36397,9 +36414,11 @@ const ResetButton$1 = styled.button`
     cursor: pointer;
 
   &:hover {
+    // color: #066768;
   }
 
   &:active {
+    // color: #066768;
   }
 `;
 
@@ -36432,22 +36451,8 @@ const FilterPop = props => {
     return initialState;
   };
 
-  // Use the passed selectedAttributes from parent, fallback to initial state if empty
-  const [selectedAttributes, setSelectedAttributes] = useState(() => {
-    // If propSelectedAttributes has values, use it; otherwise use initial state
-    const hasValues = Object.keys(propSelectedAttributes).length > 0;
-    return hasValues ? propSelectedAttributes : createInitialState();
-  });
-
-  // Use ref to track if we're programmatically updating to avoid loops
-  const isProgrammaticUpdate = useRef(false);
-
-  // Sync with parent's selectedAttributes when they change
-  useEffect(() => {
-    if (Object.keys(propSelectedAttributes).length > 0) {
-      setSelectedAttributes(propSelectedAttributes);
-    }
-  }, [propSelectedAttributes]);
+  // Use props directly, fallback to initial state only if props are empty
+  const selectedAttributes = Object.keys(propSelectedAttributes).length > 0 ? propSelectedAttributes : createInitialState();
 
   // Helper function to get non-"All" items
   const getNonAllItems = () => {
@@ -36505,19 +36510,16 @@ const FilterPop = props => {
     }
   };
   const handleCheckboxChange = attribute => {
-    // console.log(`Checkbox changed: ${attribute}`);
-
     if (attribute === 'All') {
-      // If "Select All" is clicked
-      const newState = !selectedAttributes.All;
+      // If "Select All" is clicked - determine new state based on current "Select All" state
+      const currentSelectAllState = selectedAttributes.All || false;
+      const newState = !currentSelectAllState;
       const updatedAttributes = {};
 
       // Set all items to the same state as "Select All"
       fullList.forEach(item => {
         updatedAttributes[item.value] = newState;
       });
-      isProgrammaticUpdate.current = true;
-      setSelectedAttributes(updatedAttributes);
 
       // Call onCheck callback with new efficient structure
       const filterData = createFilterData(updatedAttributes);
@@ -36533,14 +36535,8 @@ const FilterPop = props => {
         [attribute]: !selectedAttributes[attribute]
       };
 
-      // Don't automatically update "Select All" here - let useEffect handle it
-      setSelectedAttributes(updatedAttributes);
-
       // Call onCheck callback with new efficient structure
       const filterData = createFilterData(updatedAttributes);
-      // console.log('Just checked/unchecked:', attribute);
-      // console.log('Filter data:', filterData);
-
       onCheck({
         changedItem: attribute,
         filterData: filterData,
@@ -36548,40 +36544,9 @@ const FilterPop = props => {
       });
     }
   };
-
-  // Update "Select All" state based on other selections
-  useEffect(() => {
-    // Skip if this was a programmatic update
-    if (isProgrammaticUpdate.current) {
-      isProgrammaticUpdate.current = false;
-      return;
-    }
-    const selectAllItem = fullList.find(item => item.value === 'All');
-    if (!selectAllItem) return;
-    const allSelected = areAllNonAllItemsSelected();
-    const currentSelectAllState = selectedAttributes.All;
-
-    // Only update "Select All" if its state should actually change
-    if (allSelected !== currentSelectAllState) {
-      const updatedAttributes = {
-        ...selectedAttributes,
-        [selectAllItem.value]: allSelected
-      };
-      setSelectedAttributes(updatedAttributes);
-
-      // Also notify parent of the change with new efficient structure
-      const filterData = createFilterData(updatedAttributes);
-      onCheck({
-        changedItem: 'selectAll',
-        filterData: filterData,
-        allItems: updatedAttributes
-      });
-    }
-  }, [Object.keys(selectedAttributes).filter(key => key !== 'All').map(key => selectedAttributes[key]).join(',')]);
   const handleReset = () => {
     // Reset to the original default state (all selected)
     const resetState = createInitialState();
-    setSelectedAttributes(resetState);
 
     // Call the onReset callback
     onReset();
@@ -36624,7 +36589,8 @@ const FilterPop = props => {
   })];
   return /*#__PURE__*/React$1.createElement(FilterPopContainer, {
     width: width,
-    height: height
+    height: height,
+    accentColor: color // Pass color as prop to styled component
   }, /*#__PURE__*/React$1.createElement(Title$5, null, menuName), /*#__PURE__*/React$1.createElement(CheckboxGroup, {
     style: {
       display: doubleColumn ? 'grid' : 'flex',
@@ -36634,21 +36600,31 @@ const FilterPop = props => {
   }, sortedList.map(item => {
     const isSelectAll = item.value === 'All';
     const checkboxProps = isSelectAll ? getSelectAllCheckboxProps() : {};
+    const isChecked = isSelectAll ? checkboxProps.checked : selectedAttributes[item.value] || false;
     return /*#__PURE__*/React$1.createElement(CheckboxLabel, {
       width: !doubleColumn ?? width,
-      key: item.value
+      key: `${item.value}-${JSON.stringify(selectedAttributes)}`
     }, /*#__PURE__*/React$1.createElement("input", {
       type: "checkbox",
-      checked: isSelectAll ? checkboxProps.checked : selectedAttributes[item.value] || false,
-      style: {
-        accentColor: color
+      checked: isChecked,
+      ref: el => {
+        if (el) {
+          // Handle indeterminate for Select All FIRST
+          if (isSelectAll) {
+            el.indeterminate = checkboxProps.indeterminate;
+          }
+
+          // FORCE DOM SYNC - manually set DOM state to match React state
+          if (el.checked !== isChecked) {
+            el.checked = isChecked;
+          }
+        }
       },
-      ref: isSelectAll ? el => {
-        if (el) el.indeterminate = checkboxProps.indeterminate;
-      } : null,
-      onChange: () => handleCheckboxChange(item.value)
+      onChange: e => {
+        handleCheckboxChange(item.value);
+      }
     }), /*#__PURE__*/React$1.createElement("span", null, item.label));
-  })), /*#__PURE__*/React$1.createElement(ButtonWrapper$1, null, /*#__PURE__*/React$1.createElement(ResetButton$1, {
+  })), /*#__PURE__*/React$1.createElement(ButtonWrapper$2, null, /*#__PURE__*/React$1.createElement(ResetButton$1, {
     onClick: handleReset,
     disabled: areAllNonAllItemsSelected() && selectedAttributes.All
   }, "Reset")));
@@ -36873,7 +36849,7 @@ const Checkmark = styled.span`
   font-weight: bold;
   font-size: 16px;
 `;
-const ButtonWrapper = styled.div`
+const ButtonWrapper$1 = styled.div`
     text-align: right;
     padding: 4px 8px;
 `;
@@ -36968,7 +36944,7 @@ const SortPop = props => {
     }
   }, /*#__PURE__*/React$1.createElement(TruncatedText$1, null, item.label), item.value === value && /*#__PURE__*/React$1.createElement(Checkmark, {
     color: color
-  }, "\u2713")))), /*#__PURE__*/React$1.createElement(ButtonWrapper, null, /*#__PURE__*/React$1.createElement(ResetButton, {
+  }, "\u2713")))), /*#__PURE__*/React$1.createElement(ButtonWrapper$1, null, /*#__PURE__*/React$1.createElement(ResetButton, {
     onClick: handleReset,
     disabled: value === null // Disable reset if no value is selected
   }, "Reset")));
@@ -37240,7 +37216,9 @@ const TableHeader = ({
     // Remove onSort call - we only want to call it when selection is made
   };
   useEffect(() => {
-    onFilter(filterState);
+    if (Object.keys(filterState).length > 0) {
+      onFilter(filterState);
+    }
   }, [filterState]);
   const handleFilter = key => {
     const iconElement = iconRefs.current[`filter-${key}`];
@@ -37281,25 +37259,25 @@ const TableHeader = ({
     }
   };
 
-  // Handle filter selection changes - Updated to work with new FilterPop data structure
+  // Handle filter selection changes - Updated to work with stateless FilterPop
   const handleFilterSelectionChange = (columnKey, selectionData) => {
-    // Store the filter selections (keeping existing structure for UI state)
-    setFilterSelections(prev => ({
-      ...prev,
-      [columnKey]: selectionData.allItems
-    }));
+    // Force immediate synchronous update using callback form
+    setFilterSelections(prev => {
+      const updated = {
+        ...prev,
+        [columnKey]: selectionData.allItems
+      };
+      return updated;
+    });
 
-    // Update the filter state with the new efficient structure
-    const {
-      filterData
-    } = selectionData;
+    // Also update filter state
     setFilterState(prev => ({
       ...prev,
-      [columnKey]: filterData
+      [columnKey]: selectionData.filterData
     }));
   };
 
-  // Handle filter reset - Updated to work with new FilterPop data structure
+  // Handle filter reset - Updated to work with stateless FilterPop
   const handleFilterReset = columnKey => {
     const column = columns.find(col => col.key === columnKey);
     if (column && column.filterOptions) {
@@ -37311,6 +37289,8 @@ const TableHeader = ({
       fullList.forEach(item => {
         resetState[item.value] = true;
       });
+
+      // Update filter selections immediately
       setFilterSelections(prev => ({
         ...prev,
         [columnKey]: resetState
@@ -37410,7 +37390,7 @@ const TableHeader = ({
     return isFocused || isActive || hasSelection;
   };
 
-  // Update showColumnFilter to use persistent selections
+  // Update showColumnFilter to pass current filterSelections to stateless FilterPop
   const showColumnFilter = column => {
     const {
       key,
@@ -37762,6 +37742,12 @@ styled.div`
     align-items: center;
     gap: 8px;
 `;
+const ButtonWrapper = styled.div`
+    display: inline-block;
+    position: relative;
+    
+    ${tooltipStyles}
+`;
 const SentStatus = styled.div`
     display: flex;
     align-items: center;
@@ -37932,7 +37918,7 @@ const TableBody = ({
       }
       return null;
     };
-    switch (column.fieldType.toLowerCase()) {
+    switch (column.fieldType?.toLowerCase()) {
       case 'currency':
         if (column.format === '$0.00') {
           return `$${parseFloat(value).toFixed(2)}`;
@@ -37961,8 +37947,28 @@ const TableBody = ({
         }
         return value;
       case 'packagestatus':
-        if (value === 'EMPTY') {
-          return /*#__PURE__*/React$1.createElement(Button$1, {
+        // Helper function to apply tooltip logic
+        const applyTooltipLogic = (element, tooltipText) => {
+          if (element && tooltipText && tooltipText.trim() !== '') {
+            const rect = element.getBoundingClientRect();
+            const {
+              offset,
+              height
+            } = calculateTooltipOffset(tooltipText);
+            element.style.setProperty('--tooltip-top', `${rect.top}px`);
+            element.style.setProperty('--tooltip-left', `${rect.left}px`);
+            element.style.setProperty('--tooltip-width', `${rect.width}px`);
+            element.style.setProperty('--tooltip-offset', `${offset}px`);
+            element.style.setProperty('--tooltip-height', `${height}px`);
+            element.setAttribute('data-tooltip', tooltipText);
+          }
+        };
+        const tooltipText = getTooltipText(value);
+        const lowerValue = value?.toLowerCase();
+        if (lowerValue === 'empty') {
+          return /*#__PURE__*/React$1.createElement(ButtonWrapper, {
+            ref: el => applyTooltipLogic(el, tooltipText)
+          }, /*#__PURE__*/React$1.createElement(Button$1, {
             leftIcon: "Fly",
             text: "Send",
             borderRadius: "8px",
@@ -37978,9 +37984,11 @@ const TableBody = ({
             width: "100px",
             height: "32px",
             disabled: true
-          });
-        } else if (value === 'DRAFT') {
-          return /*#__PURE__*/React$1.createElement(Button$1, {
+          }));
+        } else if (lowerValue === 'draft') {
+          return /*#__PURE__*/React$1.createElement(ButtonWrapper, {
+            ref: el => applyTooltipLogic(el, tooltipText)
+          }, /*#__PURE__*/React$1.createElement(Button$1, {
             leftIcon: "Fly",
             text: "Send",
             borderRadius: "8px",
@@ -37994,28 +38002,13 @@ const TableBody = ({
             width: "100px",
             height: "32px",
             onClick: e => {
-              e.stopPropagation(); // Prevent onRowClick from firing
+              e.stopPropagation();
               onSendClick && onSendClick(row);
             }
-          });
-        } else if (value === 'SENT') {
-          const tooltipText = getTooltipText(value);
+          }));
+        } else if (lowerValue === 'sent') {
           return /*#__PURE__*/React$1.createElement(SentStatus, {
-            ref: el => {
-              if (el && tooltipText) {
-                const rect = el.getBoundingClientRect();
-                const {
-                  offset,
-                  height
-                } = calculateTooltipOffset(tooltipText);
-                el.style.setProperty('--tooltip-top', `${rect.top}px`);
-                el.style.setProperty('--tooltip-left', `${rect.left}px`);
-                el.style.setProperty('--tooltip-width', `${rect.width}px`);
-                el.style.setProperty('--tooltip-offset', `${offset}px`);
-                el.style.setProperty('--tooltip-height', `${height}px`);
-                el.setAttribute('data-tooltip', tooltipText);
-              }
-            }
+            ref: el => applyTooltipLogic(el, tooltipText)
           }, /*#__PURE__*/React$1.createElement(OkIcon, {
             width: "24",
             height: "24",
@@ -41353,7 +41346,7 @@ const Table = props => {
   return /*#__PURE__*/React$1.createElement(TableWrapper, {
     width: width,
     height: height
-  }, /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
+  }, /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title$7, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, data.length === 0 ? 'No Events' : `${counter} Events`)), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
     text: "New Event",
@@ -41361,15 +41354,7 @@ const Table = props => {
     backgroundColor: sideButtonColor,
     hoverBackgroundColor: sideButtonHoverColor,
     onClick: onSideButtonClick
-  })), children, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__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, "You haven't created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React$1.createElement(Button$1, {
-    height: "45px",
-    leftIcon: "Plus",
-    text: "New Event",
-    borderRadius: "12px",
-    backgroundColor: buttonColor,
-    hoverBackgroundColor: buttonHoverColor,
-    onClick: onButtonClick
-  })) : /*#__PURE__*/React$1.createElement(TableContainer, {
+  })), children, /*#__PURE__*/React$1.createElement(TableContainer, {
     showHorizontalScroll: showHorizontalScroll
   }, /*#__PURE__*/React$1.createElement(TableBodyScrollWrapper, {
     tableBodyHeight: tableBodyHeight,
@@ -41387,6 +41372,14 @@ const Table = props => {
     onSendClick: onSendClick,
     onDeleteClick: onDeleteClick,
     buttonColor: buttonColor
+  })), data.length === 0 && /*#__PURE__*/React$1.createElement(NoEventsParent, null, /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, showNoDataInSearch ? /*#__PURE__*/React$1.createElement(NoDataInSearchIcon, null) : /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__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, "You haven't created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let's get started and create your first one!")), !showNoDataInSearch && /*#__PURE__*/React$1.createElement(Button$1, {
+    height: "45px",
+    leftIcon: "Plus",
+    text: "New Event",
+    borderRadius: "12px",
+    backgroundColor: buttonColor,
+    hoverBackgroundColor: buttonHoverColor,
+    onClick: onButtonClick
   }))), isLoading && /*#__PURE__*/React$1.createElement(LoadingWrapper, null, /*#__PURE__*/React$1.createElement(Lottie, {
     style: {
       width: "24px",