@snapdragonsnursery/react-components 1.17.2 → 1.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.17.2",
+  "version": "1.17.3",
   "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 {
@@ -62,6 +62,8 @@ export const EmployeeSelect = ({
   allLabel = "All employees",
   maxHeight = "160px",
 }) => {
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const [isOpen, setIsOpen] = React.useState(false);
   // Helper function to generate initials from full name
   const getInitials = (name) => {
     if (!name) return "??";
@@ -108,8 +110,21 @@ 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)
+      );
+    });
+
     // 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 +138,8 @@ export const EmployeeSelect = ({
       return a.fullName.localeCompare(b.fullName);
     });
 
-    return mapped;
-  }, [items, filter, groupBy]);
+    return searchFiltered;
+  }, [items, filter, groupBy, searchTerm]);
 
   const selectedEmployee = processedItems.find((e) => e.entraId === value);
 
@@ -170,8 +185,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 +211,20 @@ 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="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()}
+            />
+          </div>
+        </div>
         {allowAll && <SelectItem value="__all__">{allLabel}</SelectItem>}
         {groupBy === "site"
           ? // Group by site