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

package/dist/index.js

@@ -1946,46 +1946,26 @@ const ThemeDebugger = ({ className = "", }) => {
                                     : "bg-gray-200 text-gray-700"}`, children: "MED" })] }), jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2 mt-4", children: [jsxRuntime.jsx("div", { className: "bg-ews-primary text-white p-2 rounded text-center", children: "Primary" }), jsxRuntime.jsx("div", { className: "bg-ews-secondary text-white p-2 rounded text-center", children: "Secondary" }), jsxRuntime.jsx("div", { className: "bg-ews-success text-white p-2 rounded text-center", children: "Success" }), jsxRuntime.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] = React.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] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
-    // Mock API call - replace with actual API
+    // Filter specialties based on search term
     const fetchSpecialties = React.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
     React.useEffect(() => {
         fetchSpecialties("");
@@ -1998,11 +1978,13 @@ const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesCh
         onSpecialtiesChange(items);
     }, [onSpecialtiesChange, maxSelections]);
     const getEntityById = React.useCallback(async (id) => {
-        return specialties.find((specialty) => specialty.id === id);
-    }, [specialties]);
-    return (jsxRuntime.jsxs("div", { className: cn("space-y-3", className), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx("div", { className: "flex justify-center items-center w-8 h-8 rounded-lg bg-secondary-100", children: jsxRuntime.jsx(Stethoscope, { className: "w-4 h-4 text-secondary-600" }) }), jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Medical Specialties" })] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Select Specialties" }) }), jsxRuntime.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) => (jsxRuntime.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) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.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 (jsxRuntime.jsxs("div", { className: cn("space-y-3", className), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntime.jsx("div", { className: "flex justify-center items-center w-8 h-8 rounded-lg bg-secondary-100", children: jsxRuntime.jsx(Stethoscope, { className: "w-4 h-4 text-secondary-600" }) }), jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title || "Medical Specialties" })] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("label", { className: "block mb-2 text-sm font-medium text-gray-700", children: label || "Select Specialties" }) }), jsxRuntime.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) => (jsxRuntime.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) => (jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.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 && (jsxRuntime.jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntime.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" }) })) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: specialty.label }), jsxRuntime.jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: specialty.code })] })] })) }), showSelectedCount && selectedSpecialties.length > 0 && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm text-gray-600", children: [jsxRuntime.jsxs("span", { children: [selectedSpecialties.length, " specialty", selectedSpecialties.length !== 1 ? "ies" : "", " selected"] }), maxSelections && (jsxRuntime.jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
+                                : "border-ews-gray-300"), children: isSelected && (jsxRuntime.jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntime.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" }) })) }), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("span", { className: cn("font-medium", isSelected ? "text-ews-primary" : "text-gray-900"), children: specialty.label }), jsxRuntime.jsx("span", { className: cn("text-sm", isSelected ? "text-ews-primary/70" : "text-gray-500"), children: specialty.code })] })] })) }), showSelectedCount && selectedSpecialties.length > 0 && (jsxRuntime.jsxs("div", { className: "flex justify-between items-center text-sm text-gray-600", children: [jsxRuntime.jsx("span", { children: getSelectedCountText
+                            ? getSelectedCountText(selectedSpecialties.length)
+                            : `${selectedSpecialties.length} specialty${selectedSpecialties.length !== 1 ? "ies" : ""} selected` }), maxSelections && (jsxRuntime.jsxs("span", { className: "text-gray-400", children: [selectedSpecialties.length, "/", maxSelections] }))] }))] }));
 };
 
 exports.ArrowRight = ArrowRight;