@snapdragonsnursery/react-components 1.17.8 → 1.17.10

package/package.json

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

package/src/components/EmployeeSelect.jsx

@@ -26,12 +26,18 @@
 // - showSiteName?: boolean               // show site below name (default: true)
 // - showEmployeeId?: boolean             // show employee ID below name (default: false)
 // - showEmail?: boolean                  // show email below name (default: false)
-// - placeholder?: string
+// - placeholder?: string                 // select trigger placeholder (default: 'Select employee…')
+// - searchPlaceholder?: string           // search input placeholder (default: 'Search employees...')
 // - disabled?: boolean
 // - className?: string
 // - allowAll?: boolean                   // include "All employees" option
 // - allLabel?: string                    // custom label for all option
 // - maxHeight?: string                   // max height for dropdown (default: '160px')
+// - enableServerSearch?: boolean         // enable server-side search (default: false)
+// - onSearchChange?: (query: string) => void // callback for search query changes
+// - searchResults?: Array<employee>      // search results from server
+// - isSearching?: boolean                // loading state for server search
+// - requireSearch?: boolean              // hide results until user types (default: false)
 
 import React from "react";
 import { Users, Search } from "lucide-react";
@@ -56,6 +62,7 @@ export const EmployeeSelect = ({
   showEmployeeId = false,
   showEmail = false,
   placeholder = "Select employee…",
+  searchPlaceholder = "Search employees...",
   disabled = false,
   className,
   allowAll = false,
@@ -66,6 +73,7 @@ export const EmployeeSelect = ({
   onSearchChange = null,
   searchResults = [],
   isSearching = false,
+  requireSearch = false,
 }) => {
   const [searchTerm, setSearchTerm] = React.useState("");
   const [isOpen, setIsOpen] = React.useState(false);
@@ -172,8 +180,14 @@ export const EmployeeSelect = ({
       return a.fullName.localeCompare(b.fullName);
     });
 
+    // If requireSearch is true and no search term, show only selected item (if any)
+    if (requireSearch && !searchTerm) {
+      // Return only the currently selected item, or empty array if nothing selected
+      return searchFiltered.filter((e) => e.entraId === value);
+    }
+
     return searchFiltered;
-  }, [items, filter, groupBy, searchTerm, enableServerSearch, searchResults]);
+  }, [items, filter, groupBy, searchTerm, enableServerSearch, searchResults, requireSearch, value]);
 
   const selectedEmployee = processedItems.find((e) => e.entraId === value);
 
@@ -252,7 +266,7 @@ export const EmployeeSelect = ({
             <input
               ref={searchInputRef}
               type="text"
-              placeholder={enableServerSearch ? "Search employees..." : "Search employees..."}
+              placeholder={searchPlaceholder}
               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"
@@ -266,7 +280,13 @@ export const EmployeeSelect = ({
           </div>
         </div>
         {allowAll && <SelectItem value="__all__">{allLabel}</SelectItem>}
-        {groupBy === "site"
+        {requireSearch && !searchTerm && processedItems.length === 0 && (
+          <div className="px-2 py-6 text-center text-sm text-muted-foreground">
+            Start typing to search for employees...
+          </div>
+        )}
+        {(!requireSearch || searchTerm || processedItems.length > 0) && (
+          groupBy === "site"
           ? // Group by site
             Object.entries(
               processedItems.reduce((groups, employee) => {
@@ -322,7 +342,8 @@ export const EmployeeSelect = ({
                     {renderEmployeeItem(employee, isSelected)}
                   </SelectItem>
                 );
-              })}
+              })
+        )}
       </SelectContent>
     </Select>
   );