sag_components 2.0.0-beta276 → 2.0.0-beta277

package/dist/index.esm.js

@@ -36110,15 +36110,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;`;
@@ -36134,14 +36138,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;`;
@@ -36151,10 +36159,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":
@@ -36168,9 +36177,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 {
@@ -40839,7 +40848,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,
@@ -40850,7 +40873,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);
@@ -40860,17 +40884,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) {
@@ -40886,15 +40914,9 @@ const TableHeader = ({
         }
       });
       setFilterSelections(resetSelections);
-
-      // Reset filter state
       setFilterState({});
-
-      // Reset sort state
       setActiveSortColumn(null);
       setActiveSortValue(null);
-
-      // Close any open popups
       setVisibleFilterPopWrapper(null);
       setVisibleSortPopWrapper(null);
     }
@@ -40937,6 +40959,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) {
@@ -41029,11 +41059,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) {
@@ -41063,6 +41088,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 = {
@@ -41071,6 +41099,8 @@ const TableHeader = ({
       };
       return updated;
     });
+
+    // Update internal state immediately for responsive UI
     setFilterState(prev => ({
       ...prev,
       [columnKey]: selectionData.filterData
@@ -41207,6 +41237,7 @@ const TableHeader = ({
         placeholder: column.key === 'EventCode' ? 'Enter Event ID' : 'Search..',
         fieldHeight: "40px",
         onTyping: value => {
+          // Update internal state immediately
           setFilterState(prev => ({
             ...prev,
             [key]: value
@@ -41241,6 +41272,7 @@ const TableHeader = ({
           fields: currentFilterState.fields
         } : null,
         onApply: data => {
+          // Update internal state immediately
           setFilterState(prev => ({
             ...prev,
             [key]: data
@@ -47564,25 +47596,52 @@ styled.span`
   font-weight: 600;
 `;
 
+let FixedSizeList = null;
+try {
+  FixedSizeList = require('react-window').FixedSizeList;
+} catch (e) {
+  console.error('react-window not found:', e);
+}
+const VENDOR_ITEM_HEIGHT = 72;
 const NewItemList = ({
   onBack,
   onVendorClick,
   itemAndPackage
 }) => {
-  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
   const [headerHeight, setHeaderHeight] = useState(0);
   const headerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const timerRef = useRef(null);
   useEffect(() => {
     if (headerRef.current) {
       setHeaderHeight(headerRef.current.offsetHeight);
     }
   }, []);
-  const searchLower = search.toLowerCase();
-  const startsWithMatches = itemAndPackage.filter(i => i.name.toLowerCase().startsWith(searchLower));
-  const includesMatches = itemAndPackage.filter(i => !i.name.toLowerCase().startsWith(searchLower) && i.name.toLowerCase().includes(searchLower));
-  const filteredItems = [...startsWithMatches, ...includesMatches];
-
-  // Helper to highlight matched portions
+  const handleSearchChange = e => {
+    const value = e.target.value;
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setDebouncedSearch(value);
+    }, 100);
+  };
+  const filteredItems = useMemo(() => {
+    if (!debouncedSearch) return itemAndPackage;
+    const searchLower = debouncedSearch.toLowerCase();
+    const results = [];
+    const startsWithResults = [];
+    for (let i = 0; i < itemAndPackage.length; i++) {
+      const nameLower = itemAndPackage[i].name.toLowerCase();
+      if (nameLower.startsWith(searchLower)) {
+        startsWithResults.push(itemAndPackage[i]);
+      } else if (nameLower.includes(searchLower)) {
+        results.push(itemAndPackage[i]);
+      }
+    }
+    return [...startsWithResults, ...results];
+  }, [debouncedSearch, itemAndPackage]);
   const highlightMatch = (text, query) => {
     if (!query) return text;
     const regex = new RegExp(`(${query})`, "ig");
@@ -47592,18 +47651,51 @@ const NewItemList = ({
   };
   const hasValidStatus = pkg => pkg.hasOwnProperty("status") && pkg.status != null && pkg.status !== undefined && pkg.status !== "";
   const draftPackages = pkg => pkg.status === 1;
+  const VendorRow = ({
+    index,
+    style
+  }) => {
+    const item = filteredItems[index];
+    let packagesLength = 0;
+    let sentPackagesLength = 0;
+    if (item.packages !== null) {
+      packagesLength = item.packages.length;
+      sentPackagesLength = item.packages.filter(pkg => hasValidStatus(pkg) && !draftPackages(pkg)).length;
+    }
+    return /*#__PURE__*/React$1.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React$1.createElement(VendorItem, {
+      onClick: e => {
+        if (onVendorClick) {
+          onVendorClick(item);
+        }
+      }
+    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, debouncedSearch.toLowerCase())), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
+      const noPackagesSent = sentPackagesLength === 0;
+      if (noPackagesSent) {
+        return `0/${packagesLength} Packages Sent`;
+      } else {
+        return `${sentPackagesLength}/${packagesLength} Packages Sent`;
+      }
+    })())), /*#__PURE__*/React$1.createElement(VendorChevron, null, /*#__PURE__*/React$1.createElement(ArrowRightFullIcon, null))));
+  };
   return /*#__PURE__*/React$1.createElement(VendorSelectionContainer, null, /*#__PURE__*/React$1.createElement(VendorHeader$1, {
     ref: headerRef
   }, /*#__PURE__*/React$1.createElement(VendorRoute, null, /*#__PURE__*/React$1.createElement(VendorBackButton, {
     onClick: onBack
   }, /*#__PURE__*/React$1.createElement(ArrowLeftIcon, null)), /*#__PURE__*/React$1.createElement(VendorBackTitle, null, "Selected Vendors")), /*#__PURE__*/React$1.createElement(VendorSelectionTitle, null, "Add New Vendor"), /*#__PURE__*/React$1.createElement(VendorSearch, {
+    ref: searchInputRef,
     type: "search",
     placeholder: "Search",
-    value: search,
-    onChange: e => setSearch(e.target.value)
-  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, search !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
+    onChange: handleSearchChange
+  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, debouncedSearch !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
     headerHeight: headerHeight
-  }, /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => {
+  }, FixedSizeList ? /*#__PURE__*/React$1.createElement(FixedSizeList, {
+    height: window.innerHeight - headerHeight - 48,
+    itemCount: filteredItems.length,
+    itemSize: VENDOR_ITEM_HEIGHT,
+    width: "100%"
+  }, VendorRow) : /*#__PURE__*/React$1.createElement(VendorList$1, null, filteredItems.map((item, idx) => {
     let packagesLength = 0;
     let sentPackagesLength = 0;
     if (item.packages !== null) {
@@ -47613,12 +47705,11 @@ const NewItemList = ({
     return /*#__PURE__*/React$1.createElement(VendorItem, {
       key: idx,
       onClick: e => {
-        // Always call onVendorClick - it will handle the conversion from null to []
         if (onVendorClick) {
           onVendorClick(item);
         }
       }
-    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, searchLower)), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
+    }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer, null, /*#__PURE__*/React$1.createElement(VendorName$1, null, highlightMatch(item.name, debouncedSearch.toLowerCase())), packagesLength > 0 && /*#__PURE__*/React$1.createElement(VendorPackages, null, (() => {
       const noPackagesSent = sentPackagesLength === 0;
       if (noPackagesSent) {
         return `0/${packagesLength} Packages Sent`;