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

package/dist/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.d.ts

@@ -8,11 +8,15 @@ export interface Specialty {
 export 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;
 }
 export declare const SpecialtySearchAutocomplete: React.FC<SpecialtySearchAutocompleteProps>;
 //# sourceMappingURL=SpecialtySearchAutocomplete.d.ts.map

package/dist/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpecialtySearchAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACtD;AAED,MAAM,WAAW,gCAAgC;IAC/C,mBAAmB,EAAE,SAAS,EAAE,CAAC;IACjC,mBAAmB,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAChD,gCAAgC,CAmLjC,CAAC"}
+{"version":3,"file":"SpecialtySearchAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACtD;AAED,MAAM,WAAW,gCAAgC;IAC/C,mBAAmB,EAAE,SAAS,EAAE,CAAC;IACjC,mBAAmB,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IACxD,WAAW,EAAE,SAAS,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAC3D;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAChD,gCAAgC,CA+JjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx

@@ -13,11 +13,15 @@ export interface Specialty {
 export 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;
 }
 
 export const SpecialtySearchAutocomplete: React.FC<
@@ -25,56 +29,43 @@ export const SpecialtySearchAutocomplete: React.FC<
 > = ({
   selectedSpecialties = [],
   onSpecialtiesChange,
+  specialties: availableSpecialties,
   placeholder = "Search and select medical specialties...",
   className = "",
   disabled = false,
   maxSelections,
   showSelectedCount = true,
+  title = "Medical Specialties",
+  label = "Select Specialties",
+  getSelectedCountText,
 }) => {
-  const [specialties, setSpecialties] = useState<Specialty[]>([]);
+  const [filteredSpecialties, setFilteredSpecialties] = useState<Specialty[]>(
+    []
+  );
   const [isLoading, setIsLoading] = useState(false);
 
-  // Mock API call - replace with actual API
-  const fetchSpecialties = useCallback(async (searchTerm: string) => {
-    setIsLoading(true);
-    try {
-      // Simulate API delay
-      await new Promise((resolve) => setTimeout(resolve, 300));
-
-      // Mock data - replace with actual API call
-      const mockSpecialties: Specialty[] = [
-        { 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()) ||
-          specialty.code.toLowerCase().includes(searchTerm.toLowerCase())
-      );
+  // Filter specialties based on search term
+  const fetchSpecialties = useCallback(
+    async (searchTerm: string) => {
+      setIsLoading(true);
+      try {
+        // Filter based on search term
+        const filtered = availableSpecialties.filter(
+          (specialty) =>
+            specialty.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            specialty.code.toLowerCase().includes(searchTerm.toLowerCase())
+        );
 
-      setSpecialties(filtered);
-    } catch (error) {
-      console.error("Error fetching specialties:", error);
-      setSpecialties([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
+        setFilteredSpecialties(filtered);
+      } catch (error) {
+        console.error("Error filtering specialties:", error);
+        setFilteredSpecialties([]);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [availableSpecialties]
+  );
 
   // Initial load
   useEffect(() => {
@@ -94,9 +85,9 @@ export const SpecialtySearchAutocomplete: React.FC<
 
   const getEntityById = useCallback(
     async (id: string): Promise<Specialty | undefined> => {
-      return specialties.find((specialty) => specialty.id === id);
+      return availableSpecialties.find((specialty) => specialty.id === id);
     },
-    [specialties]
+    [availableSpecialties]
   );
 
   return (
@@ -107,20 +98,20 @@ export const SpecialtySearchAutocomplete: React.FC<
           <Stethoscope className="w-4 h-4 text-secondary-600" />
         </div>
         <h3 className="text-lg font-semibold text-gray-900">
-          Medical Specialties
+          {title || "Medical Specialties"}
         </h3>
       </div>
 
       {/* Label */}
       <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Select Specialties
+        <label className="block mb-2 text-sm font-medium text-gray-700">
+          {label || "Select Specialties"}
         </label>
       </div>
 
       {/* MultiSearchAutocomplete component */}
       <MultiSearchAutocomplete<Specialty>
-        items={specialties}
+        items={filteredSpecialties}
         selectedItems={selectedSpecialties}
         onSelectionChange={handleSelectionChange}
         onSearch={fetchSpecialties}
@@ -134,7 +125,7 @@ export const SpecialtySearchAutocomplete: React.FC<
         keepOpenOnSelect={true}
         className="w-full"
         renderSelectedItem={(specialty) => (
-          <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">
+          <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">
             {specialty.label}
           </span>
         )}
@@ -142,7 +133,7 @@ export const SpecialtySearchAutocomplete: React.FC<
           <div className="flex items-center space-x-3">
             <div
               className={cn(
-                "w-5 h-5 border-2 rounded flex items-center justify-center",
+                "flex justify-center items-center w-5 h-5 rounded border-2",
                 isSelected
                   ? "bg-ews-primary border-ews-primary"
                   : "border-ews-gray-300"
@@ -162,34 +153,27 @@ export const SpecialtySearchAutocomplete: React.FC<
                 </svg>
               )}
             </div>
-            <div className="flex flex-col">
-              <span
-                className={cn(
-                  "font-medium",
-                  isSelected ? "text-ews-primary" : "text-gray-900"
-                )}
-              >
-                {specialty.label}
-              </span>
-              <span
-                className={cn(
-                  "text-sm",
-                  isSelected ? "text-ews-primary/70" : "text-gray-500"
-                )}
-              >
-                {specialty.code}
-              </span>
-            </div>
+            <span
+              className={cn(
+                "font-medium",
+                isSelected ? "text-ews-primary" : "text-gray-900"
+              )}
+            >
+              {specialty.label}
+            </span>
           </div>
         )}
       />
 
       {/* Selected count display */}
       {showSelectedCount && selectedSpecialties.length > 0 && (
-        <div className="flex items-center justify-between text-sm text-gray-600">
+        <div className="flex justify-between items-center text-sm text-gray-600">
           <span>
-            {selectedSpecialties.length} specialty
-            {selectedSpecialties.length !== 1 ? "ies" : ""} selected
+            {getSelectedCountText
+              ? getSelectedCountText(selectedSpecialties.length)
+              : `${selectedSpecialties.length} specialty${
+                  selectedSpecialties.length !== 1 ? "ies" : ""
+                } selected`}
           </span>
           {maxSelections && (
             <span className="text-gray-400">