@ews-admin/global-design-system 1.14.0 → 1.17.1

package/package.json

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

package/src/components/ProfileImageUpload/ProfileImageUpload.tsx

@@ -4,8 +4,11 @@ import React, { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils";
 import { Modal } from "../Modal/Modal";
 
+const ACCEPTED_MIME_TYPES = ["image/jpeg", "image/png", "image/webp"] as const;
+export type AcceptedImageMimeType = (typeof ACCEPTED_MIME_TYPES)[number];
+
 export interface ProfileImageUploadProps {
-  /** Current image URL */
+  /** Current image URL — pass your default placeholder URL when no custom image is set */
   imageUrl: string;
   /** Alt text for accessibility */
   altText: string;
@@ -29,14 +32,24 @@ export interface ProfileImageUploadProps {
    * Pass `false` when `imageUrl` is a default/fallback image.
    */
   showDeleteButton?: boolean;
-  /** File input accept attribute (default: "image/*") */
-  accept?: string;
-  /** Max allowed file size in MB (default: 3) */
+  /**
+   * Accepted MIME types (default: JPEG, PNG, WEBP).
+   * Used for both the file-input `accept` attribute and client-side validation.
+   */
+  acceptedFormats?: AcceptedImageMimeType[];
+  /** Max allowed file size in MB (default: 5) */
   maxFileSizeMB?: number;
-  /** Called when a valid file is selected */
+  /**
+   * Optional aspect-ratio hint shown below the avatar (e.g. "1:1", "4:3").
+   * Pure informational — no cropping is enforced client-side.
+   */
+  aspectRatioHint?: string;
+  /** Called with the validated File once the user picks an acceptable file */
   onFileSelect: (file: File) => void;
   /** Called when the selected file exceeds `maxFileSizeMB` */
   onFileSizeExceeded?: () => void;
+  /** Called when the selected file's MIME type is not in `acceptedFormats` */
+  onInvalidFormat?: () => void;
   /** Called when the user confirms deletion in the modal */
   onDeleteConfirm: () => void;
   /** Deletion confirmation modal — title text */
@@ -114,10 +127,12 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
   uploadProgress = 0,
   isLoading = false,
   showDeleteButton = true,
-  accept = "image/*",
-  maxFileSizeMB = 3,
+  acceptedFormats = [...ACCEPTED_MIME_TYPES],
+  maxFileSizeMB = 5,
+  aspectRatioHint,
   onFileSelect,
   onFileSizeExceeded,
+  onInvalidFormat,
   onDeleteConfirm,
   deleteConfirmTitle,
   deleteConfirmMessage,
@@ -128,12 +143,20 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
   const [isHovered, setIsHovered] = useState(false);
   const [showConfirm, setShowConfirm] = useState(false);
 
+  const acceptAttr = acceptedFormats.join(",");
+
   const handleEditClick = () => fileInputRef.current?.click();
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
+    if (acceptedFormats.indexOf(file.type as AcceptedImageMimeType) === -1) {
+      onInvalidFormat?.();
+      e.target.value = "";
+      return;
+    }
+
     if (file.size > maxFileSizeMB * 1024 * 1024) {
       onFileSizeExceeded?.();
       e.target.value = "";
@@ -141,7 +164,7 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
     }
 
     onFileSelect(file);
-    e.target.value = ""; // allow re-selecting the same file
+    e.target.value = "";
   };
 
   const handleConfirmDelete = () => {
@@ -177,7 +200,7 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
           <input
             type="file"
             ref={fileInputRef}
-            accept={accept}
+            accept={acceptAttr}
             className="hidden"
             onChange={handleFileChange}
           />
@@ -210,6 +233,10 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
         </div>
 
         <UploadProgressBar progress={uploadProgress} isLoading={isLoading} />
+
+        {aspectRatioHint && (
+          <p className="mt-1 text-xs text-gray-400">Ratio: {aspectRatioHint}</p>
+        )}
       </div>
 
       {/* Delete confirmation */}

package/src/components/ProfileImageUpload/index.ts

@@ -1,2 +1,5 @@
 export { ProfileImageUpload } from "./ProfileImageUpload";
-export type { ProfileImageUploadProps } from "./ProfileImageUpload";
+export type {
+  AcceptedImageMimeType,
+  ProfileImageUploadProps,
+} from "./ProfileImageUpload";

package/src/components/Select/Select.tsx

@@ -100,6 +100,13 @@ export interface SelectProps<T = unknown> {
    * Custom render function for selected value
    */
   renderValue?: (option: SelectOption<T> | null) => React.ReactNode;
+  /**
+   * Custom render function for the trigger button content.
+   * When provided, replaces the selected-value/placeholder area and hides
+   * the built-in chevron so the trigger can render its own UI (e.g. a user
+   * avatar menu).
+   */
+  renderTrigger?: () => React.ReactNode;
 }
 
 const Select = forwardRef<HTMLDivElement, SelectProps>(
@@ -125,6 +132,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       clearable = false,
       renderOption,
       renderValue,
+      renderTrigger,
       ...props
     },
     ref
@@ -177,17 +185,6 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       // Add some buffer (20px) to prevent edge cases
       const buffer = 20;
 
-      console.log("Position calculation:", {
-        spaceBelow,
-        spaceAbove,
-        dropdownHeight,
-        viewportHeight,
-        containerBottom: containerRect.bottom,
-        shouldOpenTop:
-          spaceBelow < dropdownHeight + buffer &&
-          spaceAbove > dropdownHeight + buffer,
-      });
-
       // If there's not enough space below but enough space above, position on top
       if (
         spaceBelow < dropdownHeight + buffer &&
@@ -211,14 +208,6 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       const spaceAbove = containerRect.top;
       const actualDropdownHeight = dropdownRect.height;
 
-      console.log("Position calculation with element:", {
-        spaceBelow,
-        spaceAbove,
-        actualDropdownHeight,
-        viewportHeight,
-        containerBottom: containerRect.bottom,
-      });
-
       // If there's not enough space below but enough space above, position on top
       if (
         spaceBelow < actualDropdownHeight &&
@@ -436,39 +425,48 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
             {...props}
           >
             <div className="flex justify-between items-center">
-              <div className="flex-1 min-w-0">
-                {selectedOption ? (
-                  renderValue ? (
-                    renderValue(selectedOption)
-                  ) : (
-                    <span className="truncate">{selectedOption.label}</span>
-                  )
-                ) : (
-                  <span className="text-ews-gray-500">{placeholder}</span>
-                )}
-              </div>
+              {renderTrigger ? (
+                renderTrigger()
+              ) : (
+                <>
+                  <div className="flex-1 min-w-0">
+                    {selectedOption ? (
+                      renderValue ? (
+                        renderValue(selectedOption)
+                      ) : (
+                        <span className="truncate">{selectedOption.label}</span>
+                      )
+                    ) : (
+                      <span className="text-ews-gray-500">{placeholder}</span>
+                    )}
+                  </div>
 
-              <div className="flex items-center ml-2 space-x-1">
-                {clearable && selectedOption && !disabled && (
-                  <button
-                    type="button"
-                    onClick={handleClear}
-                    className="p-1 rounded hover:bg-ews-gray-100"
-                  >
-                    <X
-                      className={cn(iconSizeClasses[size], "text-ews-gray-400")}
+                  <div className="flex items-center ml-2 space-x-1">
+                    {clearable && selectedOption && !disabled && (
+                      <button
+                        type="button"
+                        onClick={handleClear}
+                        className="p-1 rounded hover:bg-ews-gray-100"
+                      >
+                        <X
+                          className={cn(
+                            iconSizeClasses[size],
+                            "text-ews-gray-400"
+                          )}
+                        />
+                      </button>
+                    )}
+                    <ChevronDown
+                      className={cn(
+                        iconSizeClasses[size],
+                        hasError ? "text-ews-error" : "text-ews-gray-400",
+                        disabled && "text-ews-gray-300",
+                        isOpen && "rotate-180 transition-transform"
+                      )}
                     />
-                  </button>
-                )}
-                <ChevronDown
-                  className={cn(
-                    iconSizeClasses[size],
-                    hasError ? "text-ews-error" : "text-ews-gray-400",
-                    disabled && "text-ews-gray-300",
-                    isOpen && "rotate-180 transition-transform"
-                  )}
-                />
-              </div>
+                  </div>
+                </>
+              )}
             </div>
           </div>
 

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { cn } from "../../utils";
+
+export interface TagProps {
+  label: string;
+  variant?: "primary" | "secondary" | "plain";
+  className?: string;
+}
+
+export const Tag: React.FC<TagProps> = ({
+  label,
+  variant = "plain",
+  className,
+}) => {
+  const variantClass =
+    variant === "primary"
+      ? "bg-ews-primary text-white"
+      : variant === "secondary"
+        ? "bg-ews-secondary text-white"
+        : "bg-gray-200 text-gray-800";
+
+  return (
+    <span
+      className={cn(
+        "inline-block rounded-md px-2.5 py-1 text-sm font-medium",
+        variantClass,
+        className
+      )}
+    >
+      {label}
+    </span>
+  );
+};

package/src/components/Tag/index.ts

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag";
+export type { TagProps } from "./Tag";

package/src/components/TagList/TagList.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { cn } from "../../utils";
+import { Tag, TagProps } from "../Tag/Tag";
+
+export interface TagListProps {
+  items: string[];
+  maxVisible?: number;
+  showMoreLabel: string;
+  showLessLabel: string;
+  variant?: TagProps["variant"];
+  className?: string;
+  /** Custom renderer for each tag. Overrides the default Tag component. */
+  renderTag?: (label: string, index: number) => React.ReactNode;
+}
+
+const DEFAULT_MAX = 3;
+
+export const TagList: React.FC<TagListProps> = ({
+  items,
+  maxVisible = DEFAULT_MAX,
+  showMoreLabel,
+  showLessLabel,
+  variant = "secondary",
+  className,
+  renderTag,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const hasMore = items.length > maxVisible;
+  const visible = expanded ? items : items.slice(0, maxVisible);
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setExpanded(prev => !prev);
+  };
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      {visible.map((label, i) =>
+        renderTag ? (
+          renderTag(label, i)
+        ) : (
+          <Tag key={i} label={label} variant={variant} />
+        )
+      )}
+      {hasMore && !expanded && (
+        <span className="text-sm text-gray-400">...</span>
+      )}
+      {hasMore && (
+        <button
+          onClick={handleToggle}
+          className="text-xs text-ews-primary hover:underline"
+        >
+          {expanded ? showLessLabel : showMoreLabel}
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/TagList/index.ts

@@ -0,0 +1,2 @@
+export { TagList } from "./TagList";
+export type { TagListProps } from "./TagList";

package/src/index.ts

@@ -17,7 +17,10 @@ export { Modal } from "./components/Modal";
 export type { ErrorField, ErrorObject, ModalProps } from "./components/Modal";
 
 export { ProfileImageUpload } from "./components/ProfileImageUpload";
-export type { ProfileImageUploadProps } from "./components/ProfileImageUpload";
+export type {
+  AcceptedImageMimeType,
+  ProfileImageUploadProps,
+} from "./components/ProfileImageUpload";
 
 export { DropdownMultiSelect } from "./components/DropdownMultiSelect";
 export type { DropdownMultiSelectProps } from "./components/DropdownMultiSelect";
@@ -37,6 +40,12 @@ export type { ThemeDebuggerProps } from "./components/ThemeDebugger";
 export { RegionSelect } from "./components/RegionSelect";
 export type { RegionSelectProps } from "./components/RegionSelect";
 
+export { Tag } from "./components/Tag";
+export type { TagProps } from "./components/Tag";
+
+export { TagList } from "./components/TagList";
+export type { TagListProps } from "./components/TagList";
+
 // Molecules
 export { SpecialtySearchAutocomplete } from "./molecules";
 export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";