@ews-admin/global-design-system 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -28,6 +28,7 @@
     "@babel/preset-env": "^7.23.0",
     "@babel/preset-react": "^7.22.0",
     "@babel/preset-typescript": "^7.23.0",
+    "@eslint/js": "^9.36.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -41,13 +42,13 @@
     "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.0",
+    "@typescript-eslint/parser": "^8.44.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.21",
-    "eslint": "^8.53.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "postcss": "^8.5.6",
     "rollup": "^4.6.1",
     "rollup-plugin-dts": "^6.1.0",

package/src/components/Input/Input.tsx

@@ -40,6 +40,10 @@ export interface InputProps
    * Whether to show password toggle for password inputs
    */
   showPasswordToggle?: boolean;
+  /**
+   * Whether the input is required (shows red asterisk)
+   */
+  required?: boolean;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -55,6 +59,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       rightIcon,
       fullWidth = false,
       showPasswordToggle = false,
+      required = false,
       id,
       type = "text",
       ...props
@@ -102,11 +107,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             className="block text-sm font-medium text-ews-gray-700"
           >
             {label}
+            {required && <span className="ml-1 text-ews-error">*</span>}
           </label>
         )}
         <div className="relative">
           {leftIcon && (
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
               <span className={cn("text-ews-gray-400", iconSizes[size])}>
                 {leftIcon}
               </span>
@@ -127,7 +133,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             {...props}
           />
           {rightIcon && !shouldShowPasswordToggle && (
-            <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <div className="flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none">
               <span className={cn("text-ews-gray-400", iconSizes[size])}>
                 {rightIcon}
               </span>
@@ -136,13 +142,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {shouldShowPasswordToggle && (
             <button
               type="button"
-              className="absolute inset-y-0 right-0 pr-3 flex items-center"
+              className="flex absolute inset-y-0 right-0 items-center pr-3"
               onClick={() => setShowPassword(!showPassword)}
               tabIndex={-1}
             >
               <span
                 className={cn(
-                  "text-ews-gray-400 hover:text-ews-gray-600 transition-colors",
+                  "transition-colors text-ews-gray-400 hover:text-ews-gray-600",
                   iconSizes[size]
                 )}
               >

package/src/components/Logo/Logo.tsx

@@ -29,7 +29,7 @@ export interface LogoProps {
 
 const Logo = ({
   size = "md",
-  showTagline = true,
+  showTagline: _showTagline = true,
   iconOnly = false,
   variant = "normal",
   className,

package/src/components/MultiSearchAutocomplete/MultiSearchAutocomplete.tsx

@@ -31,7 +31,7 @@ export function MultiSearchAutocomplete<T extends SearchableEntity>({
   selectedItems,
   onSelectionChange,
   onSearch,
-  getEntityById,
+  getEntityById: _getEntityById,
   getPrimaryText,
   getSecondaryText,
   placeholder,

package/src/components/Select/Select.tsx

@@ -0,0 +1,553 @@
+import { ChevronDown, Search, X } from "lucide-react";
+import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../utils";
+
+export interface SelectOption<T = any> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps<T = any> {
+  /**
+   * Array of options to display
+   */
+  options: SelectOption<T>[];
+  /**
+   * Current selected value
+   */
+  value?: T;
+  /**
+   * Callback when selection changes
+   */
+  onChange?: (value: T, option: SelectOption<T>) => void;
+  /**
+   * Placeholder text when no option is selected
+   */
+  placeholder?: string;
+  /**
+   * Label for the select
+   */
+  label?: string;
+  /**
+   * Helper text to display below the select
+   */
+  helperText?: string;
+  /**
+   * Error message to display
+   */
+  error?: string;
+  /**
+   * Whether the select is in an error state
+   */
+  isError?: boolean;
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Whether the select is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether the select is required
+   */
+  required?: boolean;
+  /**
+   * Whether the select is searchable
+   */
+  searchable?: boolean;
+  /**
+   * Whether the select allows multiple selections
+   */
+  multiple?: boolean;
+  /**
+   * Custom class name for the select element
+   */
+  selectClassName?: string;
+  /**
+   * Custom class name for the container
+   */
+  containerClassName?: string;
+  /**
+   * Custom class name for the dropdown
+   */
+  dropdownClassName?: string;
+  /**
+   * Maximum height of the dropdown
+   */
+  maxHeight?: number;
+  /**
+   * Whether to show clear button
+   */
+  clearable?: boolean;
+  /**
+   * Custom render function for options
+   */
+  renderOption?: (
+    option: SelectOption<T>,
+    isSelected: boolean
+  ) => React.ReactNode;
+  /**
+   * Custom render function for selected value
+   */
+  renderValue?: (option: SelectOption<T> | null) => React.ReactNode;
+}
+
+const Select = forwardRef<HTMLDivElement, SelectProps>(
+  (
+    {
+      options = [],
+      value,
+      onChange,
+      placeholder = "Select an option...",
+      label,
+      helperText,
+      error,
+      isError = false,
+      size = "md",
+      disabled = false,
+      required = false,
+      searchable = false,
+      multiple: _multiple = false,
+      selectClassName,
+      containerClassName,
+      dropdownClassName,
+      maxHeight = 200,
+      clearable = false,
+      renderOption,
+      renderValue,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = useId();
+    const selectId = `select-${generatedId}`;
+    const hasError = isError || !!error;
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [dropdownPosition, setDropdownPosition] = useState<"bottom" | "top">(
+      "bottom"
+    );
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const optionRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+    // Find selected option
+    const selectedOption = options.find((option) => option.value === value);
+
+    // Filter options based on search term
+    const filteredOptions = searchable
+      ? options.filter((option) =>
+          option.label.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+      : options;
+
+    // Calculate dropdown position based on available space
+    const calculateDropdownPosition = () => {
+      if (!containerRef.current) return;
+
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      // More accurate height calculation
+      const optionHeight = 40; // Approximate height per option
+      const searchHeight = searchable ? 60 : 0;
+      const padding = 16; // py-1 = 8px top + 8px bottom
+      const dropdownHeight = Math.min(
+        maxHeight,
+        filteredOptions.length * optionHeight + searchHeight + padding
+      );
+
+      const spaceBelow = viewportHeight - containerRect.bottom;
+      const spaceAbove = containerRect.top;
+
+      // 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 &&
+        spaceAbove > dropdownHeight + buffer
+      ) {
+        setDropdownPosition("top");
+      } else {
+        setDropdownPosition("bottom");
+      }
+    };
+
+    // Alternative calculation using actual dropdown element when available
+    const calculateDropdownPositionWithElement = () => {
+      if (!containerRef.current || !dropdownRef.current) return;
+
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const dropdownRect = dropdownRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      const spaceBelow = viewportHeight - containerRect.bottom;
+      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 &&
+        spaceAbove > actualDropdownHeight
+      ) {
+        setDropdownPosition("top");
+      } else {
+        setDropdownPosition("bottom");
+      }
+    };
+
+    // Handle click outside
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(event.target as Node)
+        ) {
+          setIsOpen(false);
+          setSearchTerm("");
+          setFocusedIndex(-1);
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    // Calculate position when dropdown opens
+    useEffect(() => {
+      if (isOpen) {
+        // First calculation based on estimated height
+        calculateDropdownPosition();
+
+        // Second calculation after dropdown is rendered with actual height
+        requestAnimationFrame(() => {
+          calculateDropdownPositionWithElement();
+        });
+      }
+    }, [isOpen, filteredOptions.length, searchable, maxHeight]);
+
+    // Recalculate position on window resize
+    useEffect(() => {
+      const handleResize = () => {
+        if (isOpen) {
+          calculateDropdownPosition();
+        }
+      };
+
+      window.addEventListener("resize", handleResize);
+      window.addEventListener("scroll", handleResize);
+
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("scroll", handleResize);
+      };
+    }, [isOpen]);
+
+    // Handle keyboard navigation
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (disabled) return;
+
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setFocusedIndex((prev) =>
+              prev < filteredOptions.length - 1 ? prev + 1 : 0
+            );
+          }
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setFocusedIndex((prev) =>
+              prev > 0 ? prev - 1 : filteredOptions.length - 1
+            );
+          }
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (
+            isOpen &&
+            focusedIndex >= 0 &&
+            focusedIndex < filteredOptions.length
+          ) {
+            handleSelect(filteredOptions[focusedIndex]);
+          } else if (!isOpen) {
+            setIsOpen(true);
+          }
+          break;
+        case "Escape":
+          event.preventDefault();
+          setIsOpen(false);
+          setSearchTerm("");
+          setFocusedIndex(-1);
+          break;
+        case "Tab":
+          setIsOpen(false);
+          setSearchTerm("");
+          setFocusedIndex(-1);
+          break;
+      }
+    };
+
+    // Handle option selection
+    const handleSelect = (option: SelectOption) => {
+      if (option.disabled) return;
+
+      onChange?.(option.value, option);
+      setIsOpen(false);
+      setSearchTerm("");
+      setFocusedIndex(-1);
+    };
+
+    // Handle clear
+    const handleClear = (event: React.MouseEvent) => {
+      event.stopPropagation();
+      onChange?.(undefined as any, {} as SelectOption);
+    };
+
+    // Handle toggle
+    const handleToggle = () => {
+      if (disabled) return;
+      setIsOpen(!isOpen);
+      if (!isOpen && searchable) {
+        setTimeout(() => inputRef.current?.focus(), 0);
+      }
+    };
+
+    // Scroll focused option into view
+    useEffect(() => {
+      if (focusedIndex >= 0 && optionRefs.current[focusedIndex]) {
+        optionRefs.current[focusedIndex]?.scrollIntoView({
+          block: "nearest",
+        });
+      }
+    }, [focusedIndex]);
+
+    const sizeClasses = {
+      sm: "text-sm px-3 py-1.5",
+      md: "text-sm px-3 py-2",
+      lg: "text-base px-4 py-2.5",
+    };
+
+    const iconSizeClasses = {
+      sm: "w-4 h-4",
+      md: "w-4 h-4",
+      lg: "w-5 h-5",
+    };
+
+    return (
+      <div className={cn("w-full", containerClassName)} ref={containerRef}>
+        {label && (
+          <label
+            htmlFor={selectId}
+            className={cn(
+              "block text-sm font-medium mb-1",
+              hasError ? "text-ews-error" : "text-ews-gray-700",
+              disabled && "text-ews-gray-400"
+            )}
+          >
+            {label}
+            {required && <span className="ml-1 text-ews-error">*</span>}
+          </label>
+        )}
+
+        <div className="relative">
+          {/* Custom select trigger */}
+          <div
+            ref={ref as React.RefObject<HTMLDivElement>}
+            role="combobox"
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+            aria-labelledby={label ? selectId : undefined}
+            tabIndex={disabled ? -1 : 0}
+            onKeyDown={handleKeyDown}
+            onClick={handleToggle}
+            className={cn(
+              // Base styles
+              "ews-select-trigger w-full bg-white border rounded-md shadow-sm transition-colors cursor-pointer",
+              "focus:outline-none focus:ring-2 focus:ring-offset-0",
+              "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-ews-gray-50",
+
+              // Size
+              sizeClasses[size],
+
+              // Border and focus states
+              hasError
+                ? "border-ews-error focus:border-ews-error focus:ring-ews-error/20"
+                : "border-ews-gray-300 focus:border-ews-primary focus:ring-ews-primary/20",
+
+              // Hover state
+              !disabled && !hasError && "hover:border-ews-gray-400",
+
+              // Text color
+              "text-ews-gray-900",
+
+              // Padding for icons
+              "pr-10",
+
+              selectClassName
+            )}
+            {...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>
+
+              <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"
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Custom dropdown */}
+          {isOpen && (
+            <div
+              ref={dropdownRef}
+              role="listbox"
+              className={cn(
+                "absolute z-50 w-full bg-white rounded-md border shadow-lg border-ews-gray-300",
+                "focus:outline-none",
+                dropdownPosition === "top"
+                  ? "bottom-full mb-1"
+                  : "top-full mt-1",
+                dropdownClassName
+              )}
+              style={{ maxHeight: `${maxHeight}px` }}
+            >
+              {/* Search input */}
+              {searchable && (
+                <div className="p-2 border-b border-ews-gray-200">
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 w-4 h-4 transform -translate-y-1/2 text-ews-gray-400" />
+                    <input
+                      ref={inputRef}
+                      type="text"
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
+                      placeholder="Search options..."
+                      className="py-2 pr-3 pl-9 w-full text-sm rounded-md border border-ews-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ews-primary/20 focus:border-ews-primary"
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Options list */}
+              <div
+                className="overflow-auto py-1"
+                style={{ maxHeight: `${maxHeight - (searchable ? 60 : 0)}px` }}
+              >
+                {filteredOptions.length === 0 ? (
+                  <div className="px-3 py-2 text-sm text-ews-gray-500">
+                    {searchTerm ? "No options found" : "No options available"}
+                  </div>
+                ) : (
+                  filteredOptions.map((option, index) => {
+                    const isSelected = option.value === value;
+                    const isFocused = index === focusedIndex;
+
+                    return (
+                      <div
+                        key={`${String(option.value)}-${index}`}
+                        ref={(el) => (optionRefs.current[index] = el)}
+                        role="option"
+                        aria-selected={isSelected}
+                        onClick={() => handleSelect(option)}
+                        className={cn(
+                          "px-3 py-2 text-sm cursor-pointer transition-colors",
+                          isSelected && "bg-ews-primary text-white",
+                          !isSelected && isFocused && "bg-ews-gray-100",
+                          !isSelected && !isFocused && "hover:bg-ews-gray-50",
+                          option.disabled && "opacity-50 cursor-not-allowed"
+                        )}
+                      >
+                        {renderOption ? (
+                          renderOption(option, isSelected)
+                        ) : (
+                          <span className="truncate">{option.label}</span>
+                        )}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Helper text or error message */}
+        {(helperText || error) && (
+          <div className="mt-1">
+            {error ? (
+              <p className="text-sm text-ews-error">{error}</p>
+            ) : (
+              <p className="text-sm text-ews-gray-500">{helperText}</p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export { Select };

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectOption, SelectProps } from "./Select";