sag_components 2.0.0-beta246 → 2.0.0-beta247

package/dist/index.esm.js

@@ -10581,24 +10581,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('');
@@ -11040,23 +11039,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('');
@@ -24167,22 +24165,21 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24639,26 +24636,25 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    error,
-    errorMessage,
-    labelColor,
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    dropdownHeight
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  error,
+  errorMessage,
+  labelColor,
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  dropdownHeight
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36112,19 +36108,15 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${_ref => {
-  let {
-    checked,
-    disabled
-  } = _ref;
-  return checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0";
-}};
+  background: ${({
+  checked,
+  disabled
+}) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
   border-radius: 999px;
   transition: background 0.2s;
-  ${_ref2 => {
-  let {
-    size
-  } = _ref2;
+  ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36140,18 +36132,14 @@ const ToggleSlider = styled.span`
     left: 3px;
     top: 50%;
     transform: translateY(-50%);
-    background: ${_ref3 => {
-  let {
-    disabled
-  } = _ref3;
-  return disabled ? "#D0D0D0" : "#fff";
-}};
+    background: ${({
+  disabled
+}) => disabled ? "#D0D0D0" : "#fff"};
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${_ref4 => {
-  let {
-    size
-  } = _ref4;
+    ${({
+  size
+}) => {
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -36161,11 +36149,10 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${_ref5 => {
-  let {
-    checked,
-    size
-  } = _ref5;
+    left: ${({
+  checked,
+  size
+}) => {
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -36179,9 +36166,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 {
@@ -40799,7 +40786,8 @@ const TableHeader = ({
   activeSorts = [],
   expandable = false,
   onHeaderCheckboxClick = () => {},
-  headerCheckboxStates = {}
+  headerCheckboxStates = {},
+  resetFiltersKey = 0 // NEW: Add this prop
 }) => {
   const [focusedFilter, setFocusedFilter] = useState(null);
   const [focusedSort, setFocusedSort] = useState(null);
@@ -40810,21 +40798,46 @@ const TableHeader = ({
     left: 0
   });
   const [filterState, setFilterState] = useState({});
-
-  // Add persistent filter selections state
   const [filterSelections, setFilterSelections] = useState({});
+  const [activeSortColumn, setActiveSortColumn] = useState(null);
+  const [activeSortValue, setActiveSortValue] = useState(null);
+  const iconRefs = useRef({});
+  const popupRef = useRef(null);
 
-  // MODIFIED: Changed to track only ONE active sort (single column key and value)
-  const [activeSortColumn, setActiveSortColumn] = useState(null); // Only one column key
-  const [activeSortValue, setActiveSortValue] = useState(null); // Only one sort value
+  // NEW: Reset internal state when resetFiltersKey changes
+  useEffect(() => {
+    if (resetFiltersKey > 0) {
+      // Reset filter selections to default (all selected)
+      const resetSelections = {};
+      columns.forEach(column => {
+        if (column.filter && column.filterOptions) {
+          const initialState = {};
+          const fullList = [{
+            value: 'All',
+            label: 'Select All'
+          }, ...column.filterOptions];
+          fullList.forEach(item => {
+            initialState[item.value] = true;
+          });
+          resetSelections[column.key] = initialState;
+        }
+      });
+      setFilterSelections(resetSelections);
 
-  // Refs to track icon button positions
-  const iconRefs = useRef({});
+      // Reset filter state
+      setFilterState({});
 
-  // Ref for the popup content to measure its dimensions
-  const popupRef = useRef(null);
+      // Reset sort state
+      setActiveSortColumn(null);
+      setActiveSortValue(null);
+
+      // Close any open popups
+      setVisibleFilterPopWrapper(null);
+      setVisibleSortPopWrapper(null);
+    }
+  }, [resetFiltersKey, columns]);
 
-  // FIXED: Initialize filter selections ONLY for new columns, preserve existing selections
+  // Initialize filter selections for new columns
   useEffect(() => {
     setFilterSelections(prevSelections => {
       const newSelections = {
@@ -40832,7 +40845,6 @@ const TableHeader = ({
       };
       let hasChanges = false;
       columns.forEach(column => {
-        // Only initialize if column doesn't exist in state yet
         if (column.filter && column.filterOptions && !newSelections[column.key]) {
           const initialState = {};
           const fullList = [{
@@ -40845,69 +40857,48 @@ const TableHeader = ({
           newSelections[column.key] = initialState;
           hasChanges = true;
         } else if (column.filter && column.filterOptions && newSelections[column.key]) {
-          // Column exists - check if we need to add new options that appeared
           const currentSelections = newSelections[column.key];
           const newOptions = column.filterOptions.filter(opt => currentSelections[opt.value] === undefined);
-
-          // Only update if there are genuinely new options
           if (newOptions.length > 0) {
             const updatedSelections = {
               ...currentSelections
             };
             newOptions.forEach(opt => {
-              updatedSelections[opt.value] = true; // New options start selected
+              updatedSelections[opt.value] = true;
             });
             newSelections[column.key] = updatedSelections;
             hasChanges = true;
           }
         }
       });
-
-      // Only return new object if there were actual changes
       return hasChanges ? newSelections : prevSelections;
     });
   }, [columns]);
-
-  // Helper function to check if filter is in default state (all items selected)
   const isFilterInDefaultState = columnKey => {
     const filterData = filterState[columnKey];
     if (!filterData) {
-      return true; // No filter applied
+      return true;
     }
-
-    // For range filters, check if "All weeks" is selected
     if (filterData.selectedRadio) {
       return filterData.selectedRadio === 'all weeks';
     }
-
-    // Check if it's in "select all" state with no exclusions
     return filterData.isSelectAll && filterData.excluded?.length === 0 && filterData.included?.length === 0;
   };
-
-  // Helper function to determine filter icon state
   const getFilterIconState = columnKey => {
     const isFocused = focusedFilter === columnKey;
     const isActive = activeFilters.includes(columnKey);
     const isDefault = isFilterInDefaultState(columnKey);
-
-    // If it's in default state (all selected), show as default
     if (isDefault) {
       return 'default';
     }
-
-    // If focused or active and not in default state, show as active
     if (isFocused || isActive) {
       return 'active';
     }
-
-    // If has filter applied but not default, show as active
     if (filterState[columnKey]) {
       return 'active';
     }
     return 'default';
   };
-
-  // Enhanced function to calculate position with viewport boundary detection
   const calculatePopPosition = (iconElement, popupWidth = 300, popupHeight = 400) => {
     if (!iconElement) return {
       top: 0,
@@ -40918,32 +40909,20 @@ const TableHeader = ({
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    let top = rect.bottom + scrollTop + 4; // 4px gap below the icon
+    let top = rect.bottom + scrollTop + 4;
     let left = rect.left + scrollLeft;
-
-    // Check if popup would overflow right edge of viewport
     if (left + popupWidth > viewportWidth) {
-      // Position to the left of the icon instead
       left = rect.right + scrollLeft - popupWidth;
-
-      // If it still overflows on the left, clamp to viewport
       if (left < 0) {
-        left = 8; // Small margin from edge
+        left = 8;
       }
     }
-
-    // Check if popup would overflow bottom edge of viewport
     if (rect.bottom + popupHeight > viewportHeight) {
-      // Position above the icon instead
-      top = rect.top + scrollTop - popupHeight - 4; // 4px gap above the icon
-
-      // If it still overflows on the top, clamp to viewport
+      top = rect.top + scrollTop - popupHeight - 4;
       if (top < scrollTop) {
-        top = scrollTop + 8; // Small margin from top
+        top = scrollTop + 8;
       }
     }
-
-    // Ensure left position doesn't go negative
     if (left < 0) {
       left = 8;
     }
@@ -40952,16 +40931,12 @@ const TableHeader = ({
       left
     };
   };
-
-  // Function to estimate popup dimensions based on content type
   const getEstimatedPopupDimensions = columnKey => {
     const column = columns.find(col => col.key === columnKey);
     if (!column) return {
       width: 300,
       height: 400
     };
-
-    // Default dimensions
     let width = 300;
     let height = 400;
     if (column.freeTextFilter) {
@@ -40971,8 +40946,7 @@ const TableHeader = ({
       width = 300;
       height = 300;
     } else if (column.filterOptions) {
-      // Estimate height based on number of options
-      const optionCount = column.filterOptions.length + 1; // +1 for "Select All"
+      const optionCount = column.filterOptions.length + 1;
       height = Math.min(Math.max(optionCount * 32 + 100, 200), 500);
     } else if (column.sortOptions) {
       const optionCount = column.sortOptions.length;
@@ -40983,8 +40957,6 @@ const TableHeader = ({
       height
     };
   };
-
-  // Update handleSort to remove onSort call (only opens/closes popup)
   const handleSort = key => {
     const iconElement = iconRefs.current[`sort-${key}`];
     if (iconElement) {
@@ -40992,7 +40964,7 @@ const TableHeader = ({
       setPopPosition(calculatePopPosition(iconElement, dimensions.width, dimensions.height));
     }
     setVisibleSortPopWrapper(prevKey => prevKey === key ? null : key);
-    setVisibleFilterPopWrapper(null); // Hide filter PopWrapper when sort PopWrapper is shown
+    setVisibleFilterPopWrapper(null);
   };
   useEffect(() => {
     if (Object.keys(filterState).length > 0) {
@@ -41006,46 +40978,29 @@ const TableHeader = ({
       setPopPosition(calculatePopPosition(iconElement, dimensions.width, dimensions.height));
     }
     setVisibleFilterPopWrapper(prevKey => prevKey === key ? null : key);
-    setVisibleSortPopWrapper(null); // Hide sort PopWrapper when filter PopWrapper is shown
+    setVisibleSortPopWrapper(null);
   };
-
-  // MODIFIED: Handle sort selection - Reset previous sort and apply new one
   const handleSortSelectionChange = (columnKey, sortValue) => {
-    // If selecting a new column, reset the previous sort
     if (activeSortColumn && activeSortColumn !== columnKey) {
-      // Clear the previous sort
       setActiveSortColumn(columnKey);
       setActiveSortValue(sortValue);
     } else {
-      // Same column or first sort
       setActiveSortColumn(columnKey);
       setActiveSortValue(sortValue);
     }
-
-    // Close the popup after selection
     setVisibleSortPopWrapper(null);
-
-    // Call onSort with both column key and selected sort value
     if (onSort) {
       onSort(columnKey, sortValue);
     }
   };
-
-  // MODIFIED: Handle sort reset - Clear the active sort
   const handleSortReset = columnKey => {
-    // Clear the active sort state
     setActiveSortColumn(null);
     setActiveSortValue(null);
-
-    // Call onSort to notify that sort was reset
     if (onSort) {
       onSort(columnKey, null);
     }
   };
-
-  // Handle filter selection changes - Updated to work with stateless FilterPop
   const handleFilterSelectionChange = (columnKey, selectionData) => {
-    // Force immediate synchronous update using callback form
     setFilterSelections(prev => {
       const updated = {
         ...prev,
@@ -41053,15 +41008,11 @@ const TableHeader = ({
       };
       return updated;
     });
-
-    // Also update filter state
     setFilterState(prev => ({
       ...prev,
       [columnKey]: selectionData.filterData
     }));
   };
-
-  // Handle filter reset - Updated to work with stateless FilterPop
   const handleFilterReset = columnKey => {
     const column = columns.find(col => col.key === columnKey);
     if (column && column.filterOptions) {
@@ -41073,14 +41024,10 @@ const TableHeader = ({
       fullList.forEach(item => {
         resetState[item.value] = true;
       });
-
-      // Update filter selections immediately
       setFilterSelections(prev => ({
         ...prev,
         [columnKey]: resetState
       }));
-
-      // Set filter state to "select all" structure
       const resetFilterData = {
         excluded: [],
         included: [],
@@ -41092,8 +41039,6 @@ const TableHeader = ({
       }));
     }
   };
-
-  // Update the click outside handlers
   useEffect(() => {
     const handleClickOutside = event => {
       if (!event.target.closest(`[data-column="${visibleFilterPopWrapper}"]`) && !event.target.closest('.pop-wrapper')) {
@@ -41116,8 +41061,6 @@ const TableHeader = ({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [visibleSortPopWrapper]);
-
-  // Enhanced position update with better dimension handling
   useEffect(() => {
     const updatePosition = () => {
       if (visibleSortPopWrapper) {
@@ -41134,12 +41077,10 @@ const TableHeader = ({
         }
       }
     };
-
-    // Debounce the position update for better performance
     let timeoutId;
     const debouncedUpdatePosition = () => {
       clearTimeout(timeoutId);
-      timeoutId = setTimeout(updatePosition, 16); // ~60fps
+      timeoutId = setTimeout(updatePosition, 16);
     };
     window.addEventListener('scroll', debouncedUpdatePosition, {
       passive: true
@@ -41167,21 +41108,14 @@ const TableHeader = ({
   const shouldShowActiveIcon = key => {
     return isFilterActive(key) || isFilterFocused(key);
   };
-
-  // MODIFIED: Check if THIS specific column has an active sort
   const shouldShowActiveSortIcon = key => {
     const isFocused = focusedSort === key;
     const isActive = activeSorts.includes(key);
     const hasSelection = activeSortColumn === key && activeSortValue !== null;
     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,
@@ -41189,8 +41123,6 @@ const TableHeader = ({
       });
     }
   };
-
-  // UPDATED: showColumnFilter with fixed RangePop integration
   const showColumnFilter = column => {
     const {
       key,
@@ -41225,7 +41157,6 @@ const TableHeader = ({
         }
       });
     } else if (rangeFilter) {
-      // Get the current filter state for this column to persist values
       const currentFilterState = filterState[key];
       return /*#__PURE__*/React$1.createElement(RangePop, {
         menuName: title,
@@ -41269,8 +41200,6 @@ const TableHeader = ({
       });
     }
   };
-
-  // MODIFIED: Pass the selected value only for the active sort column
   const showColumnSort = column => {
     const {
       key,
@@ -41280,8 +41209,6 @@ const TableHeader = ({
     if (!sortOptions || sortOptions.length === 0) {
       return null;
     }
-
-    // Only show selected value if this is the active sort column
     const selectedValue = activeSortColumn === key ? activeSortValue : null;
     return /*#__PURE__*/React$1.createElement(SortPop, {
       width: "300px",
@@ -46928,7 +46855,6 @@ const Table = props => {
     noDataInSearchMessage = "Try to refine your query and search again",
     noDataIcon = "Plus",
     noDataSearchIcon = "Plus",
-    // NEW: Props for NoEventsParent section
     noEventsTitle = "You haven't created any events yet",
     noEventsSubtitle = "Let's get started and create your first one!",
     noEventsButtonText = "New Event",
@@ -46940,17 +46866,14 @@ const Table = props => {
     changeFocusIndex,
     onTableFocusChange = () => {},
     clearFocusOnOutsideClick = true,
-    // NEW: Props for edit mode focus management
     isEditMode = false,
     editRowIndex = -1,
     onCommentSave = () => {},
-    // NEW: Props for expand functionality
     expandable = false,
     expandedRows = {},
     expandedContent = {},
     onExpandRow = () => {},
     expandedBackgroundColor = '#E6F0F0',
-    // New prop
     onDropdownSelected = () => {},
     onCheckboxClick = () => {},
     onHeaderCheckboxClick = () => {},
@@ -46958,32 +46881,25 @@ const Table = props => {
     onHeroClick = () => {},
     dotIndicatorColor = '#34D399',
     onEditableClick = () => {},
-    // Accept ref as a regular prop
+    resetFiltersKey = 0,
+    // NEW: Add this prop
     ref = null
   } = props;
   const scrollWrapperRef = useRef(null);
   const tableBodyRef = useRef(null);
   const tableContainerRef = useRef(null);
   const [hasTriggered, setHasTriggered] = useState(false);
-
-  // Expose method to clear table focus to parent components
   const clearTableFocus = () => {
     if (tableBodyRef.current) {
       tableBodyRef.current.clearFocus();
     }
   };
-
-  // Handle focus change from TableBody
   const handleTableFocusChange = focusedRowIndex => {
     onTableFocusChange(focusedRowIndex);
   };
-
-  // Handle comment save - pass through to parent
   const handleCommentSave = (rowIndex, commentText) => {
     onCommentSave(rowIndex, commentText);
   };
-
-  // Expose methods to parent components via ref (if ref is provided)
   useImperativeHandle(ref, () => ({
     clearTableFocus,
     getTableBodyRef: () => tableBodyRef.current
@@ -46997,17 +46913,13 @@ const Table = props => {
         scrollHeight,
         clientHeight
       } = scrollWrapper;
-
-      // Calculate if we're near the bottom
       const isNearBottom = scrollTop + clientHeight >= scrollHeight - 56 * lastRowsThreshold;
       if (isNearBottom && data.length > 0) {
-        // Trigger event only if it hasn't been triggered yet
         if (!hasTriggered) {
           onLastRowsReached();
           setHasTriggered(true);
         }
       } else {
-        // Reset trigger when user scrolls back up outside the threshold
         if (hasTriggered) {
           setHasTriggered(false);
         }
@@ -47016,14 +46928,10 @@ const Table = props => {
     scrollWrapper.addEventListener('scroll', handleScroll);
     return () => scrollWrapper.removeEventListener('scroll', handleScroll);
   }, [onLastRowsReached, data.length, lastRowsThreshold, hasTriggered]);
-
-  // Handle outside click to clear focus - UPDATED to respect edit mode
   useEffect(() => {
-    if (!clearFocusOnOutsideClick || isEditMode) return; // Don't clear focus during edit mode
-
+    if (!clearFocusOnOutsideClick || isEditMode) return;
     const handleOutsideClick = event => {
       if (tableContainerRef.current && !tableContainerRef.current.contains(event.target)) {
-        // Click is outside the table container
         if (tableBodyRef.current) {
           tableBodyRef.current.clearFocus();
         }
@@ -47033,8 +46941,7 @@ const Table = props => {
     return () => {
       document.removeEventListener('mousedown', handleOutsideClick);
     };
-  }, [clearFocusOnOutsideClick, isEditMode]); // Added isEditMode to dependency array
-
+  }, [clearFocusOnOutsideClick, isEditMode]);
   const getNoDataIcon = icon => {
     switch (icon) {
       case "Event":
@@ -47052,7 +46959,6 @@ const Table = props => {
       case "Upc":
         return /*#__PURE__*/React$1.createElement(NoSearchUpcIcon, null);
       case "Ntt":
-        // Nothing to Track
         return /*#__PURE__*/React$1.createElement(NothingToTrackIcon, null);
       default:
         return null;
@@ -47086,7 +46992,8 @@ const Table = props => {
     onSelectAll: onSelectAll,
     expandable: expandable,
     onHeaderCheckboxClick: onHeaderCheckboxClick,
-    headerCheckboxStates: headerCheckboxStates
+    headerCheckboxStates: headerCheckboxStates,
+    resetFiltersKey: resetFiltersKey
   }), columns.length > 0 && data.length > 0 && /*#__PURE__*/React$1.createElement(TableBody, {
     ref: tableBodyRef,
     columns: columns,
@@ -47137,8 +47044,6 @@ const Table = props => {
     id: "LoaderWrapper"
   }, /*#__PURE__*/React$1.createElement(Loader, null)))));
 };
-
-// Add displayName for better debugging
 Table.displayName = 'Table';
 
 const Card = styled$1.div`