@snapdragonsnursery/react-components 1.17.9 → 1.17.10

package/package.json

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

package/src/components/EmployeeSelect.jsx

@@ -37,6 +37,7 @@
 // - 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";
@@ -72,6 +73,7 @@ export const EmployeeSelect = ({
   onSearchChange = null,
   searchResults = [],
   isSearching = false,
+  requireSearch = false,
 }) => {
   const [searchTerm, setSearchTerm] = React.useState("");
   const [isOpen, setIsOpen] = React.useState(false);
@@ -178,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);
 
@@ -272,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) => {
@@ -328,7 +342,8 @@ export const EmployeeSelect = ({
                     {renderEmployeeItem(employee, isSelected)}
                   </SelectItem>
                 );
-              })}
+              })
+        )}
       </SelectContent>
     </Select>
   );