@ews-admin/global-design-system 1.1.18 → 1.1.20

package/dist/index.d.ts

@@ -384,11 +384,15 @@ interface Specialty {
 interface SpecialtySearchAutocompleteProps {
     selectedSpecialties: Specialty[];
     onSpecialtiesChange: (specialties: Specialty[]) => void;
+    specialties: Specialty[];
     placeholder?: string;
     className?: string;
     disabled?: boolean;
     maxSelections?: number;
     showSelectedCount?: boolean;
+    title?: string;
+    label?: string;
+    getSelectedCountText?: (count: number) => React.ReactNode;
 }
 declare const SpecialtySearchAutocomplete: React.FC<SpecialtySearchAutocompleteProps>;
 

package/dist/index.esm.js

@@ -1944,46 +1944,26 @@ const ThemeDebugger = ({ className = "", }) => {
                                     : "bg-gray-200 text-gray-700"}`, children: "MED" })] }), jsxs("div", { className: "grid grid-cols-2 gap-2 mt-4", children: [jsx("div", { className: "bg-ews-primary text-white p-2 rounded text-center", children: "Primary" }), jsx("div", { className: "bg-ews-secondary text-white p-2 rounded text-center", children: "Secondary" }), jsx("div", { className: "bg-ews-success text-white p-2 rounded text-center", children: "Success" }), jsx("div", { className: "bg-ews-warning text-white p-2 rounded text-center", children: "Warning" })] })] })] }));
 };
 
-const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, }) => {
-    const [specialties, setSpecialties] = useState([]);
+const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, specialties: availableSpecialties, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, title = "Medical Specialties", label = "Select Specialties", getSelectedCountText, }) => {
+    const [filteredSpecialties, setFilteredSpecialties] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-    // Mock API call - replace with actual API
+    // Filter specialties based on search term
     const fetchSpecialties = useCallback(async (searchTerm) => {
         setIsLoading(true);
         try {
-            // Simulate API delay
-            await new Promise((resolve) => setTimeout(resolve, 300));
-            // Mock data - replace with actual API call
-            const mockSpecialties = [
-                { id: "1", code: "CARD", label: "Cardiology" },
-                { id: "2", code: "DERM", label: "Dermatology" },
-                { id: "3", code: "ENDO", label: "Endocrinology" },
-                { id: "4", code: "GAST", label: "Gastroenterology" },
-                { id: "5", code: "HEMA", label: "Hematology" },
-                { id: "6", code: "NEUR", label: "Neurology" },
-                { id: "7", code: "ONCO", label: "Oncology" },
-                { id: "8", code: "ORTH", label: "Orthopedics" },
-                { id: "9", code: "PED", label: "Pediatrics" },
-                { id: "10", code: "PSYC", label: "Psychiatry" },
-                { id: "11", code: "RAD", label: "Radiology" },
-                { id: "12", code: "SURG", label: "Surgery" },
-                { id: "13", code: "UROL", label: "Urology" },
-                { id: "14", code: "GYN", label: "Gynecology" },
-                { id: "15", code: "OPHT", label: "Ophthalmology" },
-            ];
             // Filter based on search term
-            const filtered = mockSpecialties.filter((specialty) => specialty.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            const filtered = availableSpecialties.filter((specialty) => specialty.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
                 specialty.code.toLowerCase().includes(searchTerm.toLowerCase()));
-            setSpecialties(filtered);
+            setFilteredSpecialties(filtered);
         }
         catch (error) {
-            console.error("Error fetching specialties:", error);
-            setSpecialties([]);
+            console.error("Error filtering specialties:", error);
+            setFilteredSpecialties([]);
         }
         finally {
             setIsLoading(false);
         }
-    }, []);
+    }, [availableSpecialties]);
     // Initial load
     useEffect(() => {
         fetchSpecialties("");
@@ -1996,11 +1976,13 @@ const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesCh
         onSpecialtiesChange(items);
     }, [onSpecialtiesChange, maxSelections]);
     const getEntityById = useCallback(async (id) => {
-        return specialties.find((specialty) => specialty.id === id);
-    }, [specialties]);
-    return (jsxs("div", { className: cn("space-y-3", className), children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "flex justify-center items-center w-8 h-8 rounded-lg bg-secondary-100", children: jsx(Stethoscope, { className: "w-4 h-4 text-secondary-600" }) }), jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Medical Specialties" })] }), jsx("div", { children: jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Select Specialties" }) }), jsx(MultiSearchAutocomplete, { items: specialties, selectedItems: selectedSpecialties, onSelectionChange: handleSelectionChange, onSearch: fetchSpecialties, getEntityById: getEntityById, getPrimaryText: (specialty) => specialty.label, getSecondaryText: (specialty) => specialty.code, placeholder: placeholder, disabled: disabled, loading: isLoading, multiple: true, keepOpenOnSelect: true, className: "w-full", renderSelectedItem: (specialty) => (jsx("span", { className: "inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-ews-primary/10 text-ews-primary border border-ews-primary/20", children: specialty.label })), renderListItem: (specialty, isSelected) => (jsxs("div", { className: "flex items-center space-x-3", children: [jsx("div", { className: cn("w-5 h-5 border-2 rounded flex items-center justify-center", isSelected
+        return availableSpecialties.find((specialty) => specialty.id === id);
+    }, [availableSpecialties]);
+    return (jsxs("div", { className: cn("space-y-3", className), children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "flex justify-center items-center w-8 h-8 rounded-lg bg-secondary-100", children: jsx(Stethoscope, { className: "w-4 h-4 text-secondary-600" }) }), jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title || "Medical Specialties" })] }), jsx("div", { children: jsx("label", { className: "block mb-2 text-sm font-medium text-gray-700", children: label || "Select Specialties" }) }), jsx(MultiSearchAutocomplete, { items: filteredSpecialties, selectedItems: selectedSpecialties, onSelectionChange: handleSelectionChange, onSearch: fetchSpecialties, getEntityById: getEntityById, getPrimaryText: (specialty) => specialty.label, getSecondaryText: (specialty) => specialty.code, placeholder: placeholder, disabled: disabled, loading: isLoading, multiple: true, keepOpenOnSelect: true, className: "w-full", renderSelectedItem: (specialty) => (jsx("span", { className: "inline-flex items-center px-3 py-1 text-sm font-medium rounded-full border bg-ews-primary/10 text-ews-primary border-ews-primary/20", children: specialty.label })), renderListItem: (specialty, isSelected) => (jsxs("div", { className: "flex items-center space-x-3", children: [jsx("div", { className: cn("flex justify-center items-center w-5 h-5 rounded border-2", isSelected
                                 ? "bg-ews-primary border-ews-primary"
-                                : "border-ews-gray-300"), children: isSelected && (jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }), jsxs("div", { className: "flex flex-col", children: [jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: specialty.label }), jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: specialty.code })] })] })) }), showSelectedCount && selectedSpecialties.length > 0 && (jsxs("div", { className: "flex items-center justify-between text-sm text-gray-600", children: [jsxs("span", { children: [selectedSpecialties.length, " specialty", selectedSpecialties.length !== 1 ? "ies" : "", " selected"] }), maxSelections && (jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
+                                : "border-ews-gray-300"), children: isSelected && (jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) })) }), jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: specialty.label })] })) }), showSelectedCount && selectedSpecialties.length > 0 && (jsxs("div", { className: "flex justify-between items-center text-sm text-gray-600", children: [jsx("span", { children: getSelectedCountText
+                            ? getSelectedCountText(selectedSpecialties.length)
+                            : `${selectedSpecialties.length} specialty${selectedSpecialties.length !== 1 ? "ies" : ""} selected` }), maxSelections && (jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
 };
 
 export { ArrowRight, Button, Check, DoctorIcon, DropdownMultiSelect, Icon, Input, Logo, Modal, MultiSearchAutocomplete, PatientIcon, Search, SearchAutocomplete, Select, SpecialtySearchAutocomplete, ThemeDebugger, ThemeProvider, ThemeToggle, UserIcon, cn, debounce, formatCurrency, formatDate, formatNumeric, generateId, isValidPhoneNumber, useDebounce, useDebouncedCallback, useSelectField, useTheme };