@snapdragonsnursery/react-components 1.17.10 → 1.18.0

package/package.json

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

package/src/components/EmployeeSelect.jsx

@@ -1,5 +1,6 @@
 // EmployeeSelect Component
 // A lightweight, searchable employee selector built with shadcn/ui primitives.
+// Redesigned as a combobox with search as the primary input.
 // Use this for simple employee selection with pre-loaded data. For advanced search
 // with server-side filtering, pagination, and complex filters, use EmployeeSearchModal instead.
 //
@@ -26,13 +27,13 @@
 // - 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                 // select trigger placeholder (default: 'Select employee…')
-// - searchPlaceholder?: string           // search input placeholder (default: 'Search employees...')
+// - placeholder?: string                 // search input placeholder (default: 'Search employees...')
+// - searchPlaceholder?: string           // alias for placeholder prop
 // - 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')
+// - maxHeight?: string                   // max height for dropdown (default: '300px')
 // - enableServerSearch?: boolean         // enable server-side search (default: false)
 // - onSearchChange?: (query: string) => void // callback for search query changes
 // - searchResults?: Array<employee>      // search results from server
@@ -40,17 +41,9 @@
 // - requireSearch?: boolean              // hide results until user types (default: false)
 
 import React from "react";
-import { Users, Search } from "lucide-react";
+import { Users, Search, X } from "lucide-react";
 import { cn } from "../lib/utils";
 
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/radix-select";
-
 export const EmployeeSelect = ({
   value,
   onChange,
@@ -61,14 +54,13 @@ export const EmployeeSelect = ({
   showSiteName = true,
   showEmployeeId = false,
   showEmail = false,
-  placeholder = "Select employee…",
-  searchPlaceholder = "Search employees...",
+  placeholder = "Search employees...",
+  searchPlaceholder,
   disabled = false,
   className,
   allowAll = false,
   allLabel = "All employees",
-  maxHeight = "160px",
-  // New props for server-side search
+  maxHeight = "300px",
   enableServerSearch = false,
   onSearchChange = null,
   searchResults = [],
@@ -77,27 +69,27 @@ export const EmployeeSelect = ({
 }) => {
   const [searchTerm, setSearchTerm] = React.useState("");
   const [isOpen, setIsOpen] = React.useState(false);
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = React.useState("");
-  const searchInputRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+
+  // Use searchPlaceholder if provided, otherwise use placeholder
+  const effectivePlaceholder = searchPlaceholder || placeholder;
 
   // Debounce search term for server-side search
   React.useEffect(() => {
     const timer = setTimeout(() => {
-      setDebouncedSearchTerm(searchTerm);
       if (enableServerSearch && onSearchChange) {
         onSearchChange(searchTerm);
       }
-    }, 300); // 300ms debounce
+    }, 300);
 
     return () => clearTimeout(timer);
   }, [searchTerm, enableServerSearch, onSearchChange]);
 
   // Maintain focus on search input when server results update
   React.useEffect(() => {
-    if (enableServerSearch && isOpen && searchInputRef.current && document.activeElement !== searchInputRef.current) {
-      // Only refocus if we previously had focus (i.e., user was typing)
+    if (enableServerSearch && isOpen && inputRef.current && document.activeElement !== inputRef.current) {
       if (searchTerm && !isSearching) {
-        searchInputRef.current.focus();
+        inputRef.current.focus();
       }
     }
   }, [searchResults, enableServerSearch, isOpen, searchTerm, isSearching]);
@@ -116,7 +108,6 @@ export const EmployeeSelect = ({
   // Helper function to get avatar color based on name
   const getAvatarColor = (name) => {
     if (!name) return "#6b7280";
-    // Generate a consistent color based on the name
     let hash = 0;
     for (let i = 0; i < name.length; i++) {
       hash = name.charCodeAt(i) + ((hash << 5) - hash);
@@ -126,19 +117,16 @@ export const EmployeeSelect = ({
   };
 
   const processedItems = React.useMemo(() => {
-    // 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) => {
       if (filter === "active") {
         return e.employee_status === "Active";
       }
-      return true; // 'all' - no filtering
+      return true;
     });
 
-    // Map to consistent structure
     const mapped = filtered
       .map((e) => ({
         entraId: String(e.entra_id || ""),
@@ -148,11 +136,10 @@ export const EmployeeSelect = ({
         employeeId: String(e.employee_id || ""),
         email: String(e.email || ""),
       }))
-      .filter((e) => e.entraId); // Remove items without entra_id
+      .filter((e) => e.entraId);
 
-    // Apply client-side search filter only if not using server search
-    const searchFiltered = enableServerSearch 
-      ? mapped // Server search already filtered
+    const searchFiltered = enableServerSearch
+      ? mapped
       : mapped.filter((e) => {
           if (!searchTerm) return true;
           const searchLower = searchTerm.toLowerCase();
@@ -165,7 +152,6 @@ export const EmployeeSelect = ({
           );
         });
 
-    // Sort based on grouping
     searchFiltered.sort((a, b) => {
       if (groupBy === "site") {
         const siteCompare = a.siteName.localeCompare(b.siteName);
@@ -180,44 +166,44 @@ 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, requireSearch, value]);
 
-  const selectedEmployee = processedItems.find((e) => e.entraId === value);
+  const selectedEmployee = processedItems.find((e) => e.entraId === value) || 
+    (enableServerSearch ? searchResults.find((e) => String(e.entra_id) === value) : items.find((e) => String(e.entra_id) === value));
+
+  const handleSelect = (employeeId) => {
+    onChange?.(employeeId);
+    setSearchTerm("");
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    onChange?.(undefined);
+    setSearchTerm("");
+  };
 
-  const renderEmployeeItem = (employee, isSelected = false) => (
-    <div className="flex items-center gap-2">
-      {showAvatar && !isSelected && (
+  const renderEmployeeItem = (employee) => (
+    <div className="flex items-center gap-2 p-2 hover:bg-accent rounded-md cursor-pointer">
+      {showAvatar && (
         <div
-          className="flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium text-white"
+          className="flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium text-white flex-shrink-0"
           style={{ backgroundColor: getAvatarColor(employee.fullName) }}
         >
           {getInitials(employee.fullName)}
         </div>
       )}
       <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="truncate">{employee.fullName}</span>
-        </div>
-        {showSiteName && employee.siteName && (
+        <div className="text-sm font-medium truncate">{employee.fullName}</div>
+        {(showSiteName || showEmail) && (
           <div className="text-xs text-muted-foreground truncate">
-            {employee.siteName}
-          </div>
-        )}
-        {showEmployeeId && employee.employeeId && (
-          <div className="text-xs text-muted-foreground truncate">
-            ID: {employee.employeeId}
-          </div>
-        )}
-        {showEmail && employee.email && (
-          <div className="text-xs text-muted-foreground truncate">
-            {employee.email}
+            {showSiteName && employee.siteName && <span>{employee.siteName}</span>}
+            {showSiteName && showEmail && employee.siteName && employee.email && <span> • </span>}
+            {showEmail && employee.email && <span>{employee.email}</span>}
           </div>
         )}
       </div>
@@ -225,127 +211,174 @@ export const EmployeeSelect = ({
   );
 
   return (
-    <Select
-      value={value || (allowAll ? "__all__" : undefined)}
-      onValueChange={(val) => {
-        if (val === "__all__") {
-          onChange?.(undefined);
-        } 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">
-          {selectedEmployee && showAvatar ? (
-            <div
-              className="flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium text-white"
-              style={{ backgroundColor: getAvatarColor(selectedEmployee.fullName) }}
-            >
-              {getInitials(selectedEmployee.fullName)}
-            </div>
-          ) : (
-            <Users className="h-4 w-4" />
-          )}
-          <SelectValue placeholder={placeholder} />
-        </div>
-      </SelectTrigger>
-      <SelectContent
-        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
-              ref={searchInputRef}
-              type="text"
-              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"
-              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 className={cn("relative", className)} disabled={disabled}>
+      {/* Selected value display */}
+      {selectedEmployee && (
+        <div className="mb-2 flex items-center justify-between bg-secondary px-3 py-2 rounded-md">
+          <div className="flex items-center gap-2 min-w-0">
+            {showAvatar && (
+              <div
+                className="flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium text-white flex-shrink-0"
+                style={{ backgroundColor: getAvatarColor(selectedEmployee.fullName) }}
+              >
+                {getInitials(selectedEmployee.fullName)}
               </div>
             )}
+            <div className="min-w-0">
+              <div className="text-sm font-medium truncate">{selectedEmployee.fullName}</div>
+              {showSiteName && selectedEmployee.siteName && (
+                <div className="text-xs text-muted-foreground truncate">{selectedEmployee.siteName}</div>
+              )}
+            </div>
           </div>
+          <button
+            onClick={handleClear}
+            className="ml-2 p-1 hover:bg-background rounded flex-shrink-0"
+            aria-label="Clear selection"
+          >
+            <X className="h-4 w-4" />
+          </button>
         </div>
-        {allowAll && <SelectItem value="__all__">{allLabel}</SelectItem>}
-        {requireSearch && !searchTerm && processedItems.length === 0 && (
-          <div className="px-2 py-6 text-center text-sm text-muted-foreground">
-            Start typing to search for employees...
+      )}
+
+      {/* Search input */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+        <input
+          ref={inputRef}
+          type="text"
+          placeholder={effectivePlaceholder}
+          value={searchTerm}
+          onChange={(e) => {
+            setSearchTerm(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
+          disabled={disabled}
+          className={cn(
+            "w-full pl-10 pr-10 py-2 text-sm border rounded-md",
+            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "bg-background transition-colors",
+            "placeholder:text-muted-foreground",
+            disabled && "opacity-50 cursor-not-allowed",
+          )}
+        />
+        {enableServerSearch && isSearching && (
+          <div className="absolute right-3 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>
         )}
-        {(!requireSearch || searchTerm || processedItems.length > 0) && (
-          groupBy === "site"
-          ? // Group by site
-            Object.entries(
-              processedItems.reduce((groups, employee) => {
-                const site = employee.siteName || "Other";
-                if (!groups[site]) groups[site] = [];
-                groups[site].push(employee);
-                return groups;
-              }, {})
-            ).map(([siteName, employees]) => (
-              <div key={siteName}>
-                <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-                  {siteName}
+        {searchTerm && !isSearching && (
+          <button
+            onClick={() => {
+              setSearchTerm("");
+              inputRef.current?.focus();
+            }}
+            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            aria-label="Clear search"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      {/* Results dropdown */}
+      {isOpen && (
+        <>
+          {/* Backdrop to close dropdown */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setIsOpen(false)}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") setIsOpen(false);
+            }}
+          />
+
+          {/* Results popover */}
+          <div
+            className="absolute top-full left-0 right-0 mt-1 bg-popover border rounded-md shadow-md z-50 overflow-hidden"
+            style={{ maxHeight }}
+          >
+            <div className="overflow-y-auto">
+              {requireSearch && !searchTerm && processedItems.length === 0 ? (
+                <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+                  Start typing to search for employees...
                 </div>
-                {employees.map((employee) => {
-                  const isSelected = value === employee.entraId;
-                  return (
-                    <SelectItem key={employee.entraId} value={employee.entraId}>
-                      {renderEmployeeItem(employee, isSelected)}
-                    </SelectItem>
-                  );
-                })}
-              </div>
-            ))
-          : groupBy === "role"
-            ? // Group by role
-              Object.entries(
-                processedItems.reduce((groups, employee) => {
-                  const role = employee.roleName || "Other";
-                  if (!groups[role]) groups[role] = [];
-                  groups[role].push(employee);
-                  return groups;
-                }, {})
-              ).map(([roleName, employees]) => (
-                <div key={roleName}>
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
-                    {roleName}
-                  </div>
-                  {employees.map((employee) => {
-                    const isSelected = value === employee.entraId;
-                    return (
-                      <SelectItem key={employee.entraId} value={employee.entraId}>
-                        {renderEmployeeItem(employee, isSelected)}
-                      </SelectItem>
-                    );
-                  })}
+              ) : processedItems.length === 0 ? (
+                <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+                  No employees found
                 </div>
-              ))
-            : // No grouping
-              processedItems.map((employee) => {
-                const isSelected = value === employee.entraId;
-                return (
-                  <SelectItem key={employee.entraId} value={employee.entraId}>
-                    {renderEmployeeItem(employee, isSelected)}
-                  </SelectItem>
-                );
-              })
-        )}
-      </SelectContent>
-    </Select>
+              ) : (
+                <>
+                  {allowAll && (
+                    <div
+                      onClick={() => handleSelect(undefined)}
+                      className="px-3 py-2 hover:bg-accent cursor-pointer border-b text-sm"
+                    >
+                      {allLabel}
+                    </div>
+                  )}
+                  {groupBy === "site"
+                    ? Object.entries(
+                        processedItems.reduce((groups, employee) => {
+                          const site = employee.siteName || "Other";
+                          if (!groups[site]) groups[site] = [];
+                          groups[site].push(employee);
+                          return groups;
+                        }, {})
+                      ).map(([siteName, employees]) => (
+                        <div key={siteName}>
+                          <div className="px-3 py-2 text-xs font-semibold text-muted-foreground bg-muted">
+                            {siteName}
+                          </div>
+                          {employees.map((employee) => (
+                            <div
+                              key={employee.entraId}
+                              onClick={() => handleSelect(employee.entraId)}
+                            >
+                              {renderEmployeeItem(employee)}
+                            </div>
+                          ))}
+                        </div>
+                      ))
+                    : groupBy === "role"
+                    ? Object.entries(
+                        processedItems.reduce((groups, employee) => {
+                          const role = employee.roleName || "Other";
+                          if (!groups[role]) groups[role] = [];
+                          groups[role].push(employee);
+                          return groups;
+                        }, {})
+                      ).map(([roleName, employees]) => (
+                        <div key={roleName}>
+                          <div className="px-3 py-2 text-xs font-semibold text-muted-foreground bg-muted">
+                            {roleName}
+                          </div>
+                          {employees.map((employee) => (
+                            <div
+                              key={employee.entraId}
+                              onClick={() => handleSelect(employee.entraId)}
+                            >
+                              {renderEmployeeItem(employee)}
+                            </div>
+                          ))}
+                        </div>
+                      ))
+                    : processedItems.map((employee) => (
+                        <div
+                          key={employee.entraId}
+                          onClick={() => handleSelect(employee.entraId)}
+                        >
+                          {renderEmployeeItem(employee)}
+                        </div>
+                      ))}
+                </>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
   );
 };