@ews-admin/global-design-system 1.1.13 → 1.1.15

package/dist/styles/theme-variables.css

@@ -0,0 +1,62 @@
+/* EWS Design System - Theme CSS Variables */
+/* This file should be imported in consuming applications */
+
+:root {
+  /* PROMED Theme (Default) - Professional theme for doctors/managers */
+  --ews-primary: #21596c;
+  --ews-primary-hover: #1a4756;
+  --ews-primary-light: #c0d0d4;
+  --ews-secondary: #3ba1a1;
+  --ews-secondary-hover: #308181;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+}
+
+/* Default theme when no data-theme is set */
+html:not([data-theme]) {
+  --ews-primary: #21596c;
+  --ews-primary-hover: #1a4756;
+  --ews-primary-light: #c0d0d4;
+  --ews-secondary: #3ba1a1;
+  --ews-secondary-hover: #308181;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+}
+
+/* MED Theme - Patient-friendly theme */
+[data-theme="MED"] {
+  --ews-primary: #3ba1a1;
+  --ews-primary-hover: #308181;
+  --ews-primary-light: #a8d5d5;
+  --ews-secondary: #6b73ff;
+  --ews-secondary-hover: #5a61e6;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+}
+
+/* PROMED Theme - Professional theme */
+[data-theme="PROMED"] {
+  --ews-primary: #21596c;
+  --ews-primary-hover: #1a4756;
+  --ews-primary-light: #c0d0d4;
+  --ews-secondary: #3ba1a1;
+  --ews-secondary-hover: #308181;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+}

package/dist/utils/index.d.ts

@@ -29,7 +29,7 @@ export declare function formatDate(date: Date | string | number, options?: Intl.
  * @param wait - Wait time in milliseconds
  * @returns Debounced function
  */
-export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+export declare function debounce<T extends (...args: unknown[]) => unknown>(func: T, wait: number): (...args: Parameters<T>) => void;
 /**
  * Utility function to generate unique ID
  * @param prefix - Optional prefix for the ID
@@ -44,7 +44,7 @@ export declare function generateId(prefix?: string): string;
 export declare const formatNumeric: (value: string) => string;
 /**
  * Utility function to validate phone numbers
- * Validates phone numbers with 1-15 digits, starting with a non-zero digit
+ * Validates phone numbers with 1-17 digits, optionally starting with + symbol
  * @param value - Phone number string to validate
  * @returns Boolean indicating if the phone number is valid
  */

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAIzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAMzD"}

package/package.json

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

package/src/components/Button/Button.tsx

@@ -12,7 +12,8 @@ export interface ButtonProps
     | "success"
     | "warning"
     | "error"
-    | "outline";
+    | "outline"
+    | "ghost";
   /**
    * Button size
    */
@@ -63,6 +64,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       error: "bg-ews-error text-white hover:bg-ews-error-hover",
       outline:
         "bg-transparent text-sm font-medium text-ews-primary hover:text-ews-primary/80",
+      ghost:
+        "border border-ews-primary text-ews-primary hover:bg-ews-primary hover:text-white disabled:border-gray-400 disabled:text-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-ews-primary",
     };
 
     const sizes = {

package/src/components/DropdownMultiSelect/DropdownMultiSelect.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useRef, useState } from "react";
+import { Control, Controller, FieldValues, Path } from "react-hook-form";
+import { cn } from "../../utils";
+import { Input } from "../Input";
+
+export interface DropdownMultiSelectProps<T extends FieldValues, TValue> {
+  options: { value: TValue; label: string }[];
+  name: Path<T>;
+  control?: Control<T>;
+  placeholder?: string;
+  onChange?: (value: TValue[]) => void;
+  value?: TValue[];
+  defaultValue?: TValue[];
+  onValidate?: (value: TValue[]) => boolean;
+  disabled?: boolean;
+  error?: string;
+  label?: string;
+  className?: string;
+  searchPlaceholder?: string;
+}
+
+const DropdownMultiSelect = <
+  T extends FieldValues,
+  TValue extends string | number | object
+>({
+  options,
+  name,
+  control,
+  placeholder = "Select options",
+  searchPlaceholder = "Search...",
+  onChange,
+  value: controlledValue,
+  defaultValue,
+  onValidate,
+  disabled = false,
+  error,
+  label,
+  className,
+}: DropdownMultiSelectProps<T, TValue>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [uncontrolledValue, setUncontrolledValue] = useState<
+    TValue[] | undefined
+  >(defaultValue);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+      setSearchTerm("");
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const removeAccents = (str: string) =>
+    str
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "")
+      .replace(/ç/g, "c")
+      .replace(/é|è|ê|ë/g, "e")
+      .replace(/à|á|â|ã|ä/g, "a")
+      .replace(/î|ï/g, "i")
+      .replace(/ô|ö/g, "o")
+      .replace(/ù|ú|û|ü/g, "u");
+
+  const getDisplayValue = (value: TValue) => {
+    if (typeof value === "string" || typeof value === "number") {
+      return String(value);
+    }
+    return options.find((opt) => opt.value === value)?.label || "";
+  };
+
+  const filteredOptions = options.filter((option) =>
+    removeAccents(option.label.toLowerCase()).includes(
+      removeAccents(searchTerm.toLowerCase())
+    )
+  );
+
+  const renderDropdown = ({
+    value = [] as TValue[],
+    onChange: fieldOnChange,
+  }: {
+    value: TValue[] | undefined;
+    onChange: (value: TValue[]) => void;
+  }) => (
+    <div className={cn("relative", className)} ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={handleToggle}
+        aria-label={name}
+        disabled={disabled}
+        className={cn(
+          "flex w-full items-center justify-between rounded-md border border-ews-gray-300 bg-white px-3 py-2 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-0 disabled:bg-ews-gray-50 disabled:text-ews-gray-500",
+          isOpen ? "rounded-b-none border-b-0" : "rounded-md",
+          error && "border-ews-error focus:ring-ews-error"
+        )}
+      >
+        <span className={cn("truncate", !value?.length && "text-ews-gray-500")}>
+          {value?.length > 0
+            ? value.map((v) => getDisplayValue(v)).join(", ")
+            : placeholder}
+        </span>
+        <span
+          className={cn(
+            "ml-2 w-4 h-4 transition-transform transform",
+            isOpen ? "rotate-180" : "rotate-0"
+          )}
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </span>
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 w-full bg-white rounded-b-md border border-t-0 shadow-lg border-ews-gray-300">
+          {/* Search Input */}
+          <div className="p-2 border-b border-ews-gray-200">
+            <Input
+              type="text"
+              placeholder={searchPlaceholder}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="p-0 border-0 shadow-none focus:ring-0"
+              size="sm"
+            />
+          </div>
+
+          {/* Scrollable Options List */}
+          <div className="overflow-y-auto max-h-48">
+            {filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <div
+                  key={getDisplayValue(option.value)}
+                  className="flex items-center p-2 cursor-pointer hover:bg-ews-gray-100"
+                  onClick={() => {
+                    const currentValue = value ?? [];
+                    const isSelected = currentValue.some(
+                      (item: TValue) =>
+                        JSON.stringify(item) === JSON.stringify(option.value)
+                    );
+                    const newValue = isSelected
+                      ? currentValue.filter(
+                          (item: TValue) =>
+                            JSON.stringify(item) !==
+                            JSON.stringify(option.value)
+                        )
+                      : [...currentValue, option.value];
+
+                    if (onValidate && !onValidate(newValue)) {
+                      return;
+                    }
+                    fieldOnChange(newValue);
+                    onChange?.(newValue);
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={(value ?? []).some(
+                      (item: TValue) =>
+                        JSON.stringify(item) === JSON.stringify(option.value)
+                    )}
+                    onChange={(e) => {
+                      e.stopPropagation();
+                      const currentValue = value ?? [];
+                      const isSelected = currentValue.some(
+                        (item: TValue) =>
+                          JSON.stringify(item) === JSON.stringify(option.value)
+                      );
+                      const newValue = isSelected
+                        ? currentValue.filter(
+                            (item: TValue) =>
+                              JSON.stringify(item) !==
+                              JSON.stringify(option.value)
+                          )
+                        : [...currentValue, option.value];
+
+                      if (onValidate && !onValidate(newValue)) {
+                        return;
+                      }
+                      fieldOnChange(newValue);
+                      onChange?.(newValue);
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                    className="mr-3 w-4 h-4 rounded border-ews-gray-300 text-ews-primary focus:ring-ews-primary"
+                  />
+                  <label className="text-sm cursor-pointer text-ews-gray-700">
+                    {option.label}
+                  </label>
+                </div>
+              ))
+            ) : (
+              <div className="p-2 text-sm text-ews-gray-500">
+                No options found
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  // Render controlled version with react-hook-form
+  if (control) {
+    return (
+      <Controller
+        name={name}
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <div>
+            {label && (
+              <label className="block mb-1 text-sm font-medium text-ews-gray-700">
+                {label}
+              </label>
+            )}
+            {renderDropdown({ value, onChange })}
+            {error && <p className="mt-1 text-sm text-ews-error">{error}</p>}
+          </div>
+        )}
+      />
+    );
+  }
+
+  // Render uncontrolled version
+  return (
+    <div>
+      {label && (
+        <label className="block mb-1 text-sm font-medium text-ews-gray-700">
+          {label}
+        </label>
+      )}
+      {renderDropdown({
+        value: controlledValue ?? uncontrolledValue,
+        onChange: (newValue) => {
+          if (controlledValue === undefined) {
+            setUncontrolledValue(newValue);
+          }
+          onChange?.(newValue);
+        },
+      })}
+      {error && <p className="mt-1 text-sm text-ews-error">{error}</p>}
+    </div>
+  );
+};
+
+export { DropdownMultiSelect };

package/src/components/DropdownMultiSelect/index.ts

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

package/src/components/Logo/Logo.tsx

@@ -1,31 +1,5 @@
 import { cn } from "../../utils";
-
-export interface LogoProps {
-  /**
-   * Logo size
-   */
-  size?: "sm" | "md" | "lg" | "xl";
-  /**
-   * Whether to show the tagline
-   */
-  showTagline?: boolean;
-  /**
-   * Whether to show only the icon (favicon version)
-   */
-  iconOnly?: boolean;
-  /**
-   * Logo variant - normal, white, or favicon
-   */
-  variant?: "normal" | "white" | "fullWhite" | "favicon";
-  /**
-   * Custom className
-   */
-  className?: string;
-  /**
-   * Click handler
-   */
-  onClick?: () => void;
-}
+import type { LogoProps } from "./Logo.types";
 
 const Logo = ({
   size = "md",
@@ -34,6 +8,9 @@ const Logo = ({
   variant = "normal",
   className,
   onClick,
+  customSrc,
+  alt = "MEDECINE 360 Logo",
+  clickable = false,
 }: LogoProps) => {
   const sizes = {
     sm: "h-8",
@@ -49,17 +26,21 @@ const Logo = ({
     xl: "h-16 w-16",
   };
 
-  // Get the appropriate logo image based on variant
-  // For iconOnly, always use favicon.ico
-  const logoSrc = iconOnly
-    ? "/favicon.ico"
-    : variant === "white"
+  // Get the appropriate logo image based on variant or custom source
+  // For iconOnly, always use favicon.ico unless customSrc is provided
+  const logoSrc =
+    customSrc ||
+    (iconOnly
+      ? "/favicon.ico"
+      : variant === "white"
       ? "/image/logoWhite.png"
       : variant === "fullWhite"
-        ? "/image/logoFullWhite.png"
-        : variant === "favicon"
-          ? "/favicon.ico"
-          : "/image/logo.png";
+      ? "/image/logoFullWhite.png"
+      : variant === "favicon"
+      ? "/favicon.ico"
+      : "/image/logo.png");
+
+  const isClickable = clickable || !!onClick;
 
   if (iconOnly) {
     return (
@@ -67,16 +48,33 @@ const Logo = ({
         className={cn(
           "flex items-center justify-center",
           iconSizes[size],
+          isClickable && "cursor-pointer",
           className
         )}
         onClick={onClick}
-        role={onClick ? "button" : undefined}
-        tabIndex={onClick ? 0 : undefined}
+        role={isClickable ? "button" : undefined}
+        tabIndex={isClickable ? 0 : undefined}
+        onKeyDown={
+          isClickable
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onClick?.();
+                }
+              }
+            : undefined
+        }
       >
         <img
           src={logoSrc}
-          alt="MEDECINE 360 Logo"
-          className="w-full h-full object-contain"
+          alt={alt}
+          className="object-contain w-full h-full"
+          onError={(e) => {
+            // Fallback to favicon if image fails to load
+            if (logoSrc !== "/favicon.ico") {
+              (e.target as unknown as { src: string }).src = "/favicon.ico";
+            }
+          }}
         />
       </div>
     );
@@ -84,19 +82,41 @@ const Logo = ({
 
   return (
     <div
-      className={cn("flex items-center", sizes[size], className)}
+      className={cn(
+        "flex items-center",
+        sizes[size],
+        isClickable && "cursor-pointer",
+        className
+      )}
       onClick={onClick}
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : undefined}
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onKeyDown={
+        isClickable
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick?.();
+              }
+            }
+          : undefined
+      }
     >
       {/* Logo Image */}
       <img
         src={logoSrc}
-        alt="MEDECINE 360 Logo"
-        className="h-full w-auto object-contain"
+        alt={alt}
+        className="object-contain w-auto h-full"
+        onError={(e) => {
+          // Fallback to favicon if image fails to load
+          if (logoSrc !== "/favicon.ico") {
+            (e.target as unknown as { src: string }).src = "/favicon.ico";
+          }
+        }}
       />
     </div>
   );
 };
 
+export type { LogoProps, LogoSize, LogoVariant } from "./Logo.types";
 export { Logo };

package/src/components/Logo/Logo.types.ts

@@ -0,0 +1,42 @@
+export type LogoSize = "sm" | "md" | "lg" | "xl";
+
+export type LogoVariant = "normal" | "white" | "fullWhite" | "favicon";
+
+export interface LogoProps {
+  /**
+   * Logo size
+   */
+  size?: LogoSize;
+  /**
+   * Whether to show the tagline
+   */
+  showTagline?: boolean;
+  /**
+   * Whether to show only the icon (favicon version)
+   */
+  iconOnly?: boolean;
+  /**
+   * Logo variant - normal, white, or favicon
+   */
+  variant?: LogoVariant;
+  /**
+   * Custom className
+   */
+  className?: string;
+  /**
+   * Click handler
+   */
+  onClick?: () => void;
+  /**
+   * Custom logo source URL (overrides variant)
+   */
+  customSrc?: string;
+  /**
+   * Alt text for the logo image
+   */
+  alt?: string;
+  /**
+   * Whether the logo is clickable (adds cursor pointer)
+   */
+  clickable?: boolean;
+}

package/src/components/Logo/index.ts

@@ -1,2 +1,2 @@
 export { Logo } from "./Logo";
-export type { LogoProps } from "./Logo";
+export type { LogoProps, LogoSize, LogoVariant } from "./Logo";

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -6,7 +6,7 @@ import { Input } from "../Input/Input";
 // Generic interface for searchable entities
 export interface SearchableEntity {
   id: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 interface SearchAutocompleteProps<T extends SearchableEntity> {

package/src/components/Select/Select.tsx

@@ -1,15 +1,22 @@
 import { ChevronDown, Search, X } from "lucide-react";
-import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
 import { cn } from "../../utils";
 import { Input } from "../Input";
 
-export interface SelectOption<T = any> {
+export interface SelectOption<T = unknown> {
   value: T;
   label: string;
   disabled?: boolean;
 }
 
-export interface SelectProps<T = any> {
+export interface SelectProps<T = unknown> {
   /**
    * Array of options to display
    */
@@ -149,7 +156,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       : options;
 
     // Calculate dropdown position based on available space
-    const calculateDropdownPosition = () => {
+    const calculateDropdownPosition = useCallback(() => {
       if (!containerRef.current) return;
 
       const containerRect = containerRef.current.getBoundingClientRect();
@@ -190,7 +197,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       } else {
         setDropdownPosition("bottom");
       }
-    };
+    }, [filteredOptions.length, searchable, maxHeight]);
 
     // Alternative calculation using actual dropdown element when available
     const calculateDropdownPositionWithElement = () => {
@@ -252,7 +259,13 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
           calculateDropdownPositionWithElement();
         });
       }
-    }, [isOpen, filteredOptions.length, searchable, maxHeight]);
+    }, [
+      isOpen,
+      filteredOptions.length,
+      searchable,
+      maxHeight,
+      calculateDropdownPosition,
+    ]);
 
     // Recalculate position on window resize
     useEffect(() => {
@@ -269,7 +282,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
         window.removeEventListener("resize", handleResize);
         window.removeEventListener("scroll", handleResize);
       };
-    }, [isOpen]);
+    }, [isOpen, calculateDropdownPosition]);
 
     // Handle keyboard navigation
     const handleKeyDown = (event: React.KeyboardEvent) => {
@@ -335,7 +348,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
     // Handle clear
     const handleClear = (event: React.MouseEvent) => {
       event.stopPropagation();
-      onChange?.(undefined as any, {} as SelectOption);
+      onChange?.(undefined as unknown, {} as SelectOption);
     };
 
     // Handle toggle