@snapdragonsnursery/react-components 1.17.2 → 1.17.4

package/package.json

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

package/src/components/EmployeeSelect.jsx

@@ -34,7 +34,7 @@
 // - maxHeight?: string                   // max height for dropdown (default: '160px')
 
 import React from "react";
-import { Users } from "lucide-react";
+import { Users, Search } from "lucide-react";
 import { cn } from "../lib/utils";
 
 import {
@@ -61,7 +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 "??";
@@ -86,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) => {
@@ -108,8 +131,23 @@ export const EmployeeSelect = ({
       }))
       .filter((e) => e.entraId); // Remove items without entra_id
 
+    // 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
-    mapped.sort((a, b) => {
+    searchFiltered.sort((a, b) => {
       if (groupBy === "site") {
         const siteCompare = a.siteName.localeCompare(b.siteName);
         if (siteCompare !== 0) return siteCompare;
@@ -123,8 +161,8 @@ export const EmployeeSelect = ({
       return a.fullName.localeCompare(b.fullName);
     });
 
-    return mapped;
-  }, [items, filter, groupBy]);
+    return searchFiltered;
+  }, [items, filter, groupBy, searchTerm, enableServerSearch, searchResults]);
 
   const selectedEmployee = processedItems.find((e) => e.entraId === value);
 
@@ -170,8 +208,12 @@ export const EmployeeSelect = ({
         } else {
           onChange?.(val);
         }
+        setSearchTerm(""); // Clear search when selection is made
+        setIsOpen(false);
       }}
       disabled={disabled}
+      open={isOpen}
+      onOpenChange={setIsOpen}
     >
       <SelectTrigger className={cn("w-full", className)}>
         <div className="flex items-center gap-2">
@@ -192,6 +234,25 @@ export const EmployeeSelect = ({
         className="[&_[data-radix-select-viewport]]:max-h-[var(--select-max-height)] [&_[data-radix-select-viewport]]:overflow-y-auto [&>button[data-radix-select-scroll-up-button]]:hidden [&>button[data-radix-select-scroll-down-button]]:hidden"
         style={{ "--select-max-height": maxHeight }}
       >
+        {/* Search input */}
+        <div className="p-2 border-b">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              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>}
         {groupBy === "site"
           ? // Group by site