sag_components 2.0.0-beta312 → 2.0.0-beta314

package/dist/index.esm.js

@@ -36215,15 +36215,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;`;
@@ -36239,14 +36243,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;`;
@@ -36256,10 +36264,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":
@@ -36273,9 +36282,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 {
@@ -47940,7 +47949,10 @@ const NewItemList = ({
   itemAndPackage,
   searchValue = "",
   onSearchChange = null,
+  searchResults = null,
+  // Server-side search results (separate from itemAndPackage)
   filteredVendors = null,
+  // Deprecated: use searchResults instead
   isSearchLoading = false,
   onLastRowsReached = () => {},
   lastRowsThreshold = 3
@@ -47971,20 +47983,32 @@ const NewItemList = ({
     }
   };
 
+  // Resolve searchResults (prefer new prop, fallback to deprecated filteredVendors)
+  const serverSearchResults = searchResults !== null ? searchResults : filteredVendors;
+
   // DEFINE filteredItems BEFORE using it
+  // Logic:
+  // - When NOT searching: show static itemAndPackage (never changes length)
+  // - When searching with external/server-side search: show searchResults (can change length)
+  // - When searching with internal search: filter itemAndPackage locally
   const filteredItems = useMemo(() => {
-    // Use external results if provided
-    if (filteredVendors !== null) {
-      return filteredVendors;
-    }
-
     // Safety check
     if (!itemAndPackage || !Array.isArray(itemAndPackage)) {
       return [];
     }
 
-    // Internal filtering
-    if (!currentSearchValue) return itemAndPackage;
+    // No search value = show static itemAndPackage list
+    if (!currentSearchValue) {
+      return itemAndPackage;
+    }
+
+    // Has search value - determine which source to use
+    if (isExternalSearch && serverSearchResults !== null) {
+      // Server-side search: use separate searchResults array (can have different length)
+      return serverSearchResults;
+    }
+
+    // Internal/client-side filtering of itemAndPackage
     const searchLower = currentSearchValue.toLowerCase();
     const results = [];
     const startsWithResults = [];
@@ -47997,7 +48021,7 @@ const NewItemList = ({
       }
     }
     return [...startsWithResults, ...results];
-  }, [currentSearchValue, itemAndPackage, filteredVendors]);
+  }, [currentSearchValue, itemAndPackage, serverSearchResults, isExternalSearch]);
 
   // ONLY ONE scroll detection useEffect
   useEffect(() => {
@@ -48070,7 +48094,7 @@ const NewItemList = ({
     type: "search",
     placeholder: "Search",
     onChange: handleSearchChange
-  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, isSearchLoading ? "Searching..." : currentSearchValue !== "" ? `${filteredItems.length} Vendor${filteredItems.length !== 1 ? "s" : ""} Found` : "..."), "F"), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
+  }), /*#__PURE__*/React$1.createElement(VendorSearchResult, null, isSearchLoading ? "Searching..." : currentSearchValue !== "" ? `${filteredItems.length === 0 ? "No" : filteredItems.length} Vendors Found` : " ")), /*#__PURE__*/React$1.createElement(VendorListWrapper$1, {
     ref: scrollWrapperRef,
     headerHeight: headerHeight
   }, FixedSizeList ? /*#__PURE__*/React$1.createElement(FixedSizeList, {
@@ -57326,7 +57350,10 @@ const ItemManagerPanel = _ref => {
     SubTitleColor = "#8B8989",
     searchValue = "",
     onSearchChange = null,
+    searchResults = null,
+    // Server-side search results (separate from itemAndPackage)
     filteredVendors = null,
+    // Deprecated: use searchResults instead
     isSearchLoading = false,
     isLoading = false,
     isLoadingText = "Loading Vendors...",
@@ -57554,6 +57581,7 @@ const ItemManagerPanel = _ref => {
       onVendorClick: handleVendorClick,
       searchValue: searchValue,
       onSearchChange: onSearchChange,
+      searchResults: searchResults,
       filteredVendors: filteredVendors,
       isSearchLoading: isSearchLoading,
       onLastRowsReached: onLastRowsReached,