@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/typeahead.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react';
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
 
 // CSS for hover effects that work with both light and dark themes
 const typeaheadStyles = `
@@ -55,7 +56,7 @@ const typeaheadStyles = `
 
 export interface TypeaheadItem {
   id: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 interface TypeaheadProps<T extends TypeaheadItem> {
@@ -88,15 +89,15 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
     disabled = false,
     minSearchLength = 1,
     debounceMs = 300,
-    maxResults = 10
+    maxResults = 10,
   } = props;
 
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
   const [results, setResults] = useState<T[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  
+
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const resultsRef = useRef<HTMLDivElement>(null);
@@ -104,9 +105,9 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
 
   // Inject styles once
   useEffect(() => {
-    const styleId = 'typeahead-styles';
+    const styleId = "typeahead-styles";
     if (!document.getElementById(styleId)) {
-      const style = document.createElement('style');
+      const style = document.createElement("style");
       style.id = styleId;
       style.textContent = typeaheadStyles;
       document.head.appendChild(style);
@@ -125,13 +126,13 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
         try {
           const searchResults = await searchFn(query);
           // Filter out already selected items
-          const selectedIds = selectedItems.map(item => item.id);
-          const filteredResults = searchResults.filter(item => !selectedIds.includes(item.id));
+          const selectedIds = selectedItems.map((item) => item.id);
+          const filteredResults = searchResults.filter((item) => !selectedIds.includes(item.id));
           setResults(filteredResults.slice(0, maxResults));
           setIsOpen(filteredResults.length > 0);
           setSelectedIndex(-1);
         } catch (error) {
-          console.error('Search error:', error);
+          console.error("Search error:", error);
           setResults([]);
         } finally {
           setIsLoading(false);
@@ -159,13 +160,13 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
       }
     }
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // Handle backspace to remove last selected item when input is empty
-    if (e.key === 'Backspace' && query === '' && selectedItems.length > 0) {
+    if (e.key === "Backspace" && query === "" && selectedItems.length > 0) {
       e.preventDefault();
       const lastItem = selectedItems[selectedItems.length - 1];
       handleRemove(lastItem);
@@ -173,7 +174,7 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
     }
 
     // Handle tab to auto-select highlighted result (or first result if none highlighted)
-    if (e.key === 'Tab' && isOpen && results.length > 0) {
+    if (e.key === "Tab" && isOpen && results.length > 0) {
       e.preventDefault();
       const indexToSelect = selectedIndex >= 0 ? selectedIndex : 0;
       handleSelect(results[indexToSelect]);
@@ -183,25 +184,21 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
     if (!isOpen || results.length === 0) return;
 
     switch (e.key) {
-      case 'ArrowDown':
+      case "ArrowDown":
         e.preventDefault();
-        setSelectedIndex(prev => 
-          prev < results.length - 1 ? prev + 1 : 0
-        );
+        setSelectedIndex((prev) => (prev < results.length - 1 ? prev + 1 : 0));
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         e.preventDefault();
-        setSelectedIndex(prev => 
-          prev > 0 ? prev - 1 : results.length - 1
-        );
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : results.length - 1));
         break;
-      case 'Enter':
+      case "Enter":
         e.preventDefault();
         if (selectedIndex >= 0 && selectedIndex < results.length) {
           handleSelect(results[selectedIndex]);
         }
         break;
-      case 'Escape':
+      case "Escape":
         e.preventDefault();
         setIsOpen(false);
         setSelectedIndex(-1);
@@ -223,9 +220,9 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
       // Replace existing selection
       newSelectedItems = [item];
     }
-    
+
     onSelectionChange(newSelectedItems);
-    setQuery('');
+    setQuery("");
     setResults([]);
     setIsOpen(false);
     setSelectedIndex(-1);
@@ -233,15 +230,18 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
   };
 
   const handleRemove = (itemToRemove: T) => {
-    const newSelectedItems = selectedItems.filter(item => item.id !== itemToRemove.id);
+    const newSelectedItems = selectedItems.filter((item) => item.id !== itemToRemove.id);
     onSelectionChange(newSelectedItems);
     inputRef.current?.focus();
   };
 
   const defaultRenderBadge = (item: T) => {
-    // Extract display text - try common properties
-    const displayText = (item as any).name || (item as any).title || (item as any).label || item.id;
-    return displayText;
+    const r = item as Record<string, unknown>;
+    const str = (k: string) => {
+      const v = r[k];
+      return typeof v === "string" ? v : undefined;
+    };
+    return str("name") || str("title") || str("label") || item.id;
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -257,10 +257,7 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
   return (
     <div ref={containerRef} className="position-relative">
       {/* Input container with badges inside */}
-      <div 
-        className="typeahead-input-container"
-        onClick={() => inputRef.current?.focus()}
-      >
+      <div className="typeahead-input-container" onClick={() => inputRef.current?.focus()}>
         {/* Selected Items as Badges inside input */}
         {selectedItems.map((item) => (
           <div
@@ -272,12 +269,12 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
               type="button"
               className="btn-close btn-close-white position-absolute"
               style={{
-                right: '2px',
-                top: '50%',
-                transform: 'translateY(-50%)',
-                fontSize: '0.5rem',
-                width: '10px',
-                height: '10px'
+                right: "2px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                fontSize: "0.5rem",
+                width: "10px",
+                height: "10px",
               }}
               onClick={(e) => {
                 e.stopPropagation();
@@ -293,7 +290,7 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
         <input
           ref={inputRef}
           type="text"
-          className="typeahead-input"
+          className={`typeahead-input ${className}`}
           placeholder={selectedItems.length > 0 && !multiSelect ? "Selection made" : placeholder}
           value={query}
           onChange={handleInputChange}
@@ -304,38 +301,39 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
 
         {/* Loading indicator */}
         {isLoading && (
-          <div className="position-absolute" style={{
-            right: '8px',
-            top: '50%',
-            transform: 'translateY(-50%)'
-          }}>
+          <div
+            className="position-absolute"
+            style={{
+              right: "8px",
+              top: "50%",
+              transform: "translateY(-50%)",
+            }}
+          >
             <div className="spinner-border spinner-border-sm text-secondary" role="status">
               <span className="visually-hidden">Loading...</span>
             </div>
           </div>
         )}
       </div>
-      
+
       {isOpen && results.length > 0 && (
-        <div 
+        <div
           ref={resultsRef}
           className="position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg"
-          style={{ 
+          style={{
             zIndex: 1000,
-            maxHeight: '300px',
-            overflowY: 'auto'
+            maxHeight: "300px",
+            overflowY: "auto",
           }}
         >
           {results.map((item, index) => (
             <div
               key={item.id}
               className={`px-3 py-2 border-bottom typeahead-item ${
-                index === selectedIndex 
-                  ? 'bg-primary text-white' 
-                  : 'bg-body text-body'
+                index === selectedIndex ? "bg-primary text-white" : "bg-body text-body"
               }`}
-              style={{ 
-                cursor: 'pointer'
+              style={{
+                cursor: "pointer",
               }}
               onClick={() => handleSelect(item)}
               onMouseEnter={() => setSelectedIndex(index)}
@@ -345,9 +343,9 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
           ))}
         </div>
       )}
-      
+
       {isOpen && query.length >= minSearchLength && results.length === 0 && !isLoading && (
-        <div 
+        <div
           className="position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg px-3 py-2 text-muted"
           style={{ zIndex: 1000 }}
         >
@@ -356,4 +354,4 @@ export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
       )}
     </div>
   );
-}
+}