sag_components 2.0.0-beta274 → 2.0.0-beta275

package/dist/index.esm.js

@@ -10581,23 +10581,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('');
@@ -11039,22 +11040,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('');
@@ -24165,21 +24167,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("");
@@ -24636,25 +24639,26 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  height,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop,
-  dropdownHeight
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    height,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop,
+    dropdownHeight
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -36113,15 +36117,19 @@ const ToggleInput = styled.input`
 const ToggleSlider = styled.span`
   display: block;
   position: relative;
-  background: ${({
-  checked,
-  disabled
-}) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
+  background: ${_ref => {
+  let {
+    checked,
+    disabled
+  } = _ref;
+  return checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0";
+}};
   border-radius: 999px;
   transition: background 0.2s;
-  ${({
-  size
-}) => {
+  ${_ref2 => {
+  let {
+    size
+  } = _ref2;
   switch (size) {
     case "s":
       return css`width: 40px; height: 20px;`;
@@ -36137,14 +36145,18 @@ const ToggleSlider = styled.span`
     left: 3px;
     top: 50%;
     transform: translateY(-50%);
-    background: ${({
-  disabled
-}) => disabled ? "#D0D0D0" : "#fff"};
+    background: ${_ref3 => {
+  let {
+    disabled
+  } = _ref3;
+  return disabled ? "#D0D0D0" : "#fff";
+}};
     border-radius: 50%;
     transition: left 0.2s, width 0.2s, height 0.2s;
-    ${({
-  size
-}) => {
+    ${_ref4 => {
+  let {
+    size
+  } = _ref4;
   switch (size) {
     case "s":
       return css`width: 14px; height: 14px;`;
@@ -36154,10 +36166,11 @@ const ToggleSlider = styled.span`
       return css`width: 20px; height: 20px;`;
   }
 }}
-    left: ${({
-  checked,
-  size
-}) => {
+    left: ${_ref5 => {
+  let {
+    checked,
+    size
+  } = _ref5;
   if (!checked) return "3px";
   switch (size) {
     case "s":
@@ -40841,7 +40854,21 @@ const SortIcon = ({
   }));
 };
 
-// TableHeader.jsx
+// TableHeader.jsx - Updated with debounce
+
+// Inline debounce hook
+const useDebounce = (value, delay = 1500) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
 const TableHeader = ({
   columns,
   onSort,
@@ -40852,7 +40879,8 @@ const TableHeader = ({
   expandable = false,
   onHeaderCheckboxClick = () => {},
   headerCheckboxStates = {},
-  resetFiltersKey = 0 // NEW: Add this prop
+  resetFiltersKey = 0,
+  debounceDelay = 500 // NEW: Add debounce delay prop (default 500ms)
 }) => {
   const [focusedFilter, setFocusedFilter] = useState(null);
   const [focusedSort, setFocusedSort] = useState(null);
@@ -40862,17 +40890,21 @@ const TableHeader = ({
     top: 0,
     left: 0
   });
+
+  // Internal state that updates immediately (for UI responsiveness)
   const [filterState, setFilterState] = useState({});
   const [filterSelections, setFilterSelections] = useState({});
   const [activeSortColumn, setActiveSortColumn] = useState(null);
   const [activeSortValue, setActiveSortValue] = useState(null);
+
+  // Debounced values (these will be passed to parent after delay)
+  const debouncedFilterState = useDebounce(filterState, debounceDelay);
   const iconRefs = useRef({});
   const popupRef = useRef(null);
 
-  // NEW: Reset internal state when resetFiltersKey changes
+  // 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) {
@@ -40888,15 +40920,9 @@ const TableHeader = ({
         }
       });
       setFilterSelections(resetSelections);
-
-      // Reset filter state
       setFilterState({});
-
-      // Reset sort state
       setActiveSortColumn(null);
       setActiveSortValue(null);
-
-      // Close any open popups
       setVisibleFilterPopWrapper(null);
       setVisibleSortPopWrapper(null);
     }
@@ -40939,6 +40965,14 @@ const TableHeader = ({
       return hasChanges ? newSelections : prevSelections;
     });
   }, [columns]);
+
+  // 🎯 KEY CHANGE: Use debounced value to trigger parent callback
+  useEffect(() => {
+    // Only call onFilter if there's actual filter data
+    if (Object.keys(debouncedFilterState).length > 0) {
+      onFilter(debouncedFilterState);
+    }
+  }, [debouncedFilterState, onFilter]);
   const isFilterInDefaultState = columnKey => {
     const filterData = filterState[columnKey];
     if (!filterData) {
@@ -41031,11 +41065,6 @@ const TableHeader = ({
     setVisibleSortPopWrapper(prevKey => prevKey === key ? null : key);
     setVisibleFilterPopWrapper(null);
   };
-  useEffect(() => {
-    if (Object.keys(filterState).length > 0) {
-      onFilter(filterState);
-    }
-  }, [filterState]);
   const handleFilter = key => {
     const iconElement = iconRefs.current[`filter-${key}`];
     if (iconElement) {
@@ -41065,6 +41094,9 @@ const TableHeader = ({
       onSort(columnKey, null);
     }
   };
+
+  // 🎯 Filter changes update immediately in UI (filterState)
+  // But parent callback is triggered only after debounce
   const handleFilterSelectionChange = (columnKey, selectionData) => {
     setFilterSelections(prev => {
       const updated = {
@@ -41073,6 +41105,8 @@ const TableHeader = ({
       };
       return updated;
     });
+
+    // Update internal state immediately for responsive UI
     setFilterState(prev => ({
       ...prev,
       [columnKey]: selectionData.filterData
@@ -41209,6 +41243,7 @@ const TableHeader = ({
         placeholder: column.key === 'EventCode' ? 'Enter Event ID' : 'Search..',
         fieldHeight: "40px",
         onTyping: value => {
+          // Update internal state immediately
           setFilterState(prev => ({
             ...prev,
             [key]: value
@@ -41243,6 +41278,7 @@ const TableHeader = ({
           fields: currentFilterState.fields
         } : null,
         onApply: data => {
+          // Update internal state immediately
           setFilterState(prev => ({
             ...prev,
             [key]: data