@ews-admin/global-design-system 1.27.0 → 1.28.0

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

@@ -17,6 +17,12 @@ export interface SpecialtySearchAutocompleteProps {
     title?: string;
     label?: string;
     getSelectedCountText?: (count: number) => React.ReactNode;
+    /**
+     * MED-1499: accessible label / tooltip of the button that removes a
+     * selected specialty from its chip. Defaults to the English
+     * "Remove specialty".
+     */
+    removeSpecialtyLabel?: string;
 }
 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,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"}
+{"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;IAC1D;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAChD,gCAAgC,CAuLjC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -41,6 +41,7 @@
     "@storybook/react": "^7.5.0",
     "@storybook/react-vite": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
+    "@testing-library/react": "14",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^8.44.0",
@@ -51,6 +52,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jest": "29",
+    "jest-environment-jsdom": "29",
     "postcss": "^8.5.6",
     "rollup": "^4.6.1",
     "rollup-plugin-dts": "^6.1.0",

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -22,6 +22,13 @@ interface SearchAutocompleteProps<T extends SearchableEntity> {
   minSearchLength?: number;
   debounceTime?: number;
   error?: string;
+  /**
+   * MED-1501: builds the hint appended to the placeholder while the search
+   * term is still too short. Return `null` (or an empty string) to suppress
+   * the hint entirely. Defaults to the English "(min. N characters)", so
+   * callers that do not pass it keep today's placeholder.
+   */
+  getMinCharactersHint?: (minSearchLength: number) => string | null;
 }
 
 export function SearchAutocomplete<T extends SearchableEntity>({
@@ -37,6 +44,7 @@ export function SearchAutocomplete<T extends SearchableEntity>({
   minSearchLength = 2,
   debounceTime = 300,
   error,
+  getMinCharactersHint = (min) => `(min. ${min} characters)`,
 }: SearchAutocompleteProps<T>) {
   const [searchTerm, setSearchTerm] = useState("");
   const [entities, setEntities] = useState<T[]>([]);
@@ -171,12 +179,17 @@ export function SearchAutocomplete<T extends SearchableEntity>({
     onSelect("");
   };
 
+  const minCharactersHint = getMinCharactersHint(minSearchLength);
+  const inputPlaceholder = minCharactersHint
+    ? `${placeholder} ${minCharactersHint}`
+    : placeholder;
+
   return (
     <div className="relative" ref={dropdownRef}>
       <div className="relative">
         <Input
           type="text"
-          placeholder={`${placeholder} (min. ${minSearchLength} characters)`}
+          placeholder={inputPlaceholder}
           value={selectedEntity ? "" : searchTerm}
           onChange={handleSearchChange}
           onFocus={() =>

package/src/components/Select/Select.tsx

@@ -107,6 +107,21 @@ export interface SelectProps<T = unknown> {
    * avatar menu).
    */
   renderTrigger?: () => React.ReactNode;
+  /**
+   * MED-1501: placeholder of the in-dropdown search input, so the caller can
+   * translate it. Defaults to the English "Search options...".
+   */
+  searchPlaceholder?: string;
+  /**
+   * MED-1501: text shown when a search matches no option, so the caller can
+   * translate it. Defaults to the English "No options found".
+   */
+  noOptionsFoundText?: string;
+  /**
+   * MED-1501: text shown when there is no option at all, so the caller can
+   * translate it. Defaults to the English "No options available".
+   */
+  noOptionsAvailableText?: string;
 }
 
 const Select = forwardRef<HTMLDivElement, SelectProps>(
@@ -133,6 +148,9 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       renderOption,
       renderValue,
       renderTrigger,
+      searchPlaceholder = "Search options...",
+      noOptionsFoundText = "No options found",
+      noOptionsAvailableText = "No options available",
       ...props
     },
     ref
@@ -495,7 +513,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
                       type="text"
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
-                      placeholder="Search options..."
+                      placeholder={searchPlaceholder}
                       leftIcon={
                         <Search className="w-4 h-4 text-ews-gray-400" />
                       }
@@ -511,7 +529,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
               >
                 {filteredOptions.length === 0 ? (
                   <div className="px-3 py-2 text-sm text-ews-gray-500">
-                    {searchTerm ? "No options found" : "No options available"}
+                    {searchTerm ? noOptionsFoundText : noOptionsAvailableText}
                   </div>
                 ) : (
                   filteredOptions.map((option, index) => {

package/src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { Stethoscope } from "lucide-react";
+import { Stethoscope, X } from "lucide-react";
 import React, { useCallback, useEffect, useState } from "react";
 import { MultiSearchAutocomplete } from "../../components/MultiSearchAutocomplete";
 import { cn } from "../../utils";
@@ -22,6 +22,12 @@ export interface SpecialtySearchAutocompleteProps {
   title?: string;
   label?: string;
   getSelectedCountText?: (count: number) => React.ReactNode;
+  /**
+   * MED-1499: accessible label / tooltip of the button that removes a
+   * selected specialty from its chip. Defaults to the English
+   * "Remove specialty".
+   */
+  removeSpecialtyLabel?: string;
 }
 
 export const SpecialtySearchAutocomplete: React.FC<
@@ -38,6 +44,7 @@ export const SpecialtySearchAutocomplete: React.FC<
   title = "Medical Specialties",
   label = "Select Specialties",
   getSelectedCountText,
+  removeSpecialtyLabel = "Remove specialty",
 }) => {
   const [filteredSpecialties, setFilteredSpecialties] = useState<Specialty[]>(
     []
@@ -83,6 +90,19 @@ export const SpecialtySearchAutocomplete: React.FC<
     [onSpecialtiesChange, maxSelections]
   );
 
+  // MED-1499: a selected specialty must be removable from its chip, not only
+  // by toggling it off again in the dropdown list.
+  const handleRemoveSpecialty = useCallback(
+    (specialtyToRemove: Specialty) => {
+      onSpecialtiesChange(
+        selectedSpecialties.filter(
+          (specialty) => specialty.id !== specialtyToRemove.id
+        )
+      );
+    },
+    [onSpecialtiesChange, selectedSpecialties]
+  );
+
   const getEntityById = useCallback(
     async (id: string): Promise<Specialty | undefined> => {
       return availableSpecialties.find((specialty) => specialty.id === id);
@@ -127,6 +147,16 @@ export const SpecialtySearchAutocomplete: React.FC<
         renderSelectedItem={(specialty) => (
           <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}
+            <button
+              type="button"
+              onClick={() => handleRemoveSpecialty(specialty)}
+              className="ml-2 text-ews-primary/60 hover:text-ews-primary"
+              disabled={disabled}
+              title={removeSpecialtyLabel}
+              aria-label={removeSpecialtyLabel}
+            >
+              <X className="w-3 h-3" />
+            </button>
           </span>
         )}
         renderListItem={(specialty, isSelected) => (