@snapdragonsnursery/react-components 1.17.3 → 1.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.17.3",
+  "version": "1.17.4",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/EmployeeSelect.jsx

@@ -61,9 +61,28 @@ export const EmployeeSelect = ({
   allowAll = false,
   allLabel = "All employees",
   maxHeight = "160px",
+  // New props for server-side search
+  enableServerSearch = false,
+  onSearchChange = null,
+  searchResults = [],
+  isSearching = false,
 }) => {
   const [searchTerm, setSearchTerm] = React.useState("");
   const [isOpen, setIsOpen] = React.useState(false);
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = React.useState("");
+
+  // Debounce search term for server-side search
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+      if (enableServerSearch && onSearchChange) {
+        onSearchChange(searchTerm);
+      }
+    }, 300); // 300ms debounce
+
+    return () => clearTimeout(timer);
+  }, [searchTerm, enableServerSearch, onSearchChange]);
+
   // Helper function to generate initials from full name
   const getInitials = (name) => {
     if (!name) return "??";
@@ -88,7 +107,9 @@ export const EmployeeSelect = ({
   };
 
   const processedItems = React.useMemo(() => {
-    const list = Array.isArray(items) ? [...items] : [];
+    // Use server search results if enabled, otherwise use items
+    const sourceList = enableServerSearch ? searchResults : items;
+    const list = Array.isArray(sourceList) ? [...sourceList] : [];
 
     // Filter by employee status
     const filtered = list.filter((e) => {
@@ -110,18 +131,20 @@ export const EmployeeSelect = ({
       }))
       .filter((e) => e.entraId); // Remove items without entra_id
 
-    // Apply search filter
-    const searchFiltered = mapped.filter((e) => {
-      if (!searchTerm) return true;
-      const searchLower = searchTerm.toLowerCase();
-      return (
-        e.fullName.toLowerCase().includes(searchLower) ||
-        e.siteName.toLowerCase().includes(searchLower) ||
-        e.roleName.toLowerCase().includes(searchLower) ||
-        e.employeeId.toLowerCase().includes(searchLower) ||
-        e.email.toLowerCase().includes(searchLower)
-      );
-    });
+    // Apply client-side search filter only if not using server search
+    const searchFiltered = enableServerSearch 
+      ? mapped // Server search already filtered
+      : mapped.filter((e) => {
+          if (!searchTerm) return true;
+          const searchLower = searchTerm.toLowerCase();
+          return (
+            e.fullName.toLowerCase().includes(searchLower) ||
+            e.siteName.toLowerCase().includes(searchLower) ||
+            e.roleName.toLowerCase().includes(searchLower) ||
+            e.employeeId.toLowerCase().includes(searchLower) ||
+            e.email.toLowerCase().includes(searchLower)
+          );
+        });
 
     // Sort based on grouping
     searchFiltered.sort((a, b) => {
@@ -139,7 +162,7 @@ export const EmployeeSelect = ({
     });
 
     return searchFiltered;
-  }, [items, filter, groupBy, searchTerm]);
+  }, [items, filter, groupBy, searchTerm, enableServerSearch, searchResults]);
 
   const selectedEmployee = processedItems.find((e) => e.entraId === value);
 
@@ -217,12 +240,17 @@ export const EmployeeSelect = ({
             <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <input
               type="text"
-              placeholder="Search employees..."
+              placeholder={enableServerSearch ? "Search employees (server-side)..." : "Search employees..."}
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
               className="w-full pl-8 pr-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 bg-background"
               onClick={(e) => e.stopPropagation()}
             />
+            {enableServerSearch && isSearching && (
+              <div className="absolute right-2 top-1/2 transform -translate-y-1/2">
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
+              </div>
+            )}
           </div>
         </div>
         {allowAll && <SelectItem value="__all__">{allLabel}</SelectItem>}