@axzydev/axzy_ui_system 1.2.16 → 1.3.1

package/src/components/molecules/multi-select/multi-select.tsx

@@ -0,0 +1,386 @@
+import clsx from "clsx";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { FaCheck, FaChevronDown, FaSearch, FaTimes } from "react-icons/fa";
+import { ITMultiSelectOption, ITMultiSelectProps } from "./multi-select.props";
+import { theme } from "@/theme/theme";
+import { useFloatingPanel } from "@/hooks/useFloatingPanel";
+import { inputFieldStyle } from "@/utils/styles";
+import ITChip from "@/components/atoms/chip/chip";
+import ITText from "@/components/atoms/text/text";
+
+/**
+ * Multi-value select with searchable dropdown, removable chips, and keyboard navigation.
+ *
+ * Supports local filtering and remote search (`onSearch`), a collapsed chip
+ * summary (`maxVisibleChips`), and custom option templates (`renderOption`).
+ * The dropdown is portaled so it is never clipped by cards or overflow ancestors.
+ *
+ * @example
+ * <ITMultiSelect
+ *   label="Skills"
+ *   options={skills}
+ *   value={selected}
+ *   onChange={(values) => setSelected(values)}
+ * />
+ *
+ * @example
+ * <ITMultiSelect
+ *   label="Etiquetas"
+ *   options={tags}
+ *   value={selected}
+ *   onChange={(values) => setSelected(values)}
+ *   maxVisibleChips={2}
+ *   renderOption={(option, { isSelected }) => (
+ *     <span className={isSelected ? "font-bold" : ""}>{option.label}</span>
+ *   )}
+ * />
+ */
+export default function ITMultiSelect({
+  name,
+  label,
+  placeholder = "Selecciona opciones",
+  options,
+  value,
+  onChange,
+  onBlur,
+  valueField = "value",
+  labelField = "label",
+  disabled = false,
+  readOnly = false,
+  required = false,
+  touched,
+  error,
+  size = "md",
+  maxVisibleChips = 3,
+  clearable = true,
+  searchable = true,
+  onSearch,
+  isLoading = false,
+  noResultsMessage = "No se encontraron resultados",
+  renderOption,
+  className,
+}: ITMultiSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [localTouched, setLocalTouched] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const optionRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const { panelRef, style: panelStyle } = useFloatingPanel(controlRef, isOpen, {
+    estimatedHeight: 260,
+    matchWidth: true,
+  });
+
+  const selectedOptions = useMemo(
+    () => options.filter((opt) => value.includes(opt[valueField])),
+    [options, value, valueField]
+  );
+
+  const filteredOptions = useMemo(() => {
+    if (onSearch) return options;
+    if (!searchTerm) return options;
+    return options.filter((opt) =>
+      String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [options, searchTerm, onSearch, labelField]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const target = event.target as Node;
+      if (!containerRef.current?.contains(target) && !panelRef.current?.contains(target)) {
+        setIsOpen(false);
+        setIsFocused(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [panelRef]);
+
+  const inputTheme = (theme as any).input || {};
+
+  const isTouched = touched !== undefined ? touched : localTouched;
+  const isEmpty = value.length === 0;
+  const effectiveError =
+    error !== undefined && error !== false
+      ? error === true
+        ? "Este campo es requerido"
+        : error
+      : required && isEmpty
+      ? "Este campo es requerido"
+      : undefined;
+  const hasError = isTouched && !!effectiveError;
+  const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+
+  const getControlStyle = (): React.CSSProperties => {
+    const style = inputFieldStyle(inputTheme, size, { width: "100%", cursor: "text" });
+    style.display = "flex";
+    style.flexWrap = "wrap";
+    style.alignItems = "center";
+    style.gap = "0.375rem";
+    style.minHeight = "2.5rem";
+
+    if (disabled) {
+      style.backgroundColor = inputTheme.disabled?.backgroundColor || style.backgroundColor;
+      style.borderColor = inputTheme.disabled?.borderColor || style.borderColor;
+      style.opacity = 0.7;
+      style.cursor = "not-allowed";
+    }
+    if (hasError) {
+      style.borderColor = inputTheme.error?.borderColor || "red";
+    } else if (isFocused && !readOnly) {
+      style.boxShadow = inputTheme.focus?.ring;
+      style.borderColor = inputTheme.focus?.borderColor;
+    }
+    return style;
+  };
+
+  const open = () => {
+    if (disabled || readOnly) return;
+    setIsOpen(true);
+  };
+
+  const handleControlClick = () => {
+    if (disabled || readOnly) return;
+    inputRef.current?.focus();
+    open();
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    setSearchTerm(query);
+    open();
+    if (onSearch) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => onSearch(query), 500);
+    }
+  };
+
+  const toggleOption = (option: ITMultiSelectOption) => {
+    if (disabled || readOnly) return;
+    const optValue = option[valueField];
+    const isSelected = value.includes(optValue);
+    const nextValues = isSelected
+      ? value.filter((v) => v !== optValue)
+      : [...value, optValue];
+    const nextOptions = options.filter((opt) => nextValues.includes(opt[valueField]));
+    onChange?.(nextValues, nextOptions);
+  };
+
+  const handleClear = () => {
+    if (disabled || readOnly) return;
+    onChange?.([], []);
+    setSearchTerm("");
+    if (onSearch) onSearch("");
+    inputRef.current?.focus();
+  };
+
+  const moveActive = (dir: 1 | -1) => {
+    if (!filteredOptions.length) return;
+    const next =
+      activeIndex === -1
+        ? dir === 1
+          ? 0
+          : filteredOptions.length - 1
+        : (activeIndex + dir + filteredOptions.length) % filteredOptions.length;
+    setActiveIndex(next);
+    optionRefs.current[next]?.scrollIntoView({ block: "nearest" });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled || readOnly) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!isOpen) open();
+      else moveActive(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!isOpen) open();
+      else moveActive(-1);
+    } else if (e.key === "Enter") {
+      if (isOpen && activeIndex >= 0 && filteredOptions[activeIndex]) {
+        e.preventDefault();
+        toggleOption(filteredOptions[activeIndex]);
+      }
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    } else if (e.key === "Backspace" && searchTerm === "" && value.length > 0) {
+      e.preventDefault();
+      const nextValues = value.slice(0, -1);
+      const nextOptions = options.filter((opt) => nextValues.includes(opt[valueField]));
+      onChange?.(nextValues, nextOptions);
+    }
+  };
+
+  const handleFocus = () => {
+    if (disabled || readOnly) return;
+    setIsFocused(true);
+    open();
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    setLocalTouched(true);
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+
+  const visibleChips = selectedOptions.slice(0, maxVisibleChips);
+  const hiddenCount = selectedOptions.length - visibleChips.length;
+  const showClear = clearable && !disabled && !readOnly && value.length > 0;
+
+  return (
+    <div className={clsx("w-full flex flex-col gap-1.5", className)} ref={containerRef}>
+      {label && (
+        <ITText
+          as="label"
+          className={clsx("text-sm font-medium text-secondary-700 dark:text-slate-300", {
+            "text-danger-500": hasError,
+          })}
+        >
+          <ITText as="span">{label}</ITText>
+          {required && <ITText as="span" className="text-danger-500 ml-1">*</ITText>}
+        </ITText>
+      )}
+
+      <div className="relative">
+        <div
+          ref={controlRef}
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          aria-disabled={disabled}
+          onClick={handleControlClick}
+          className="flex items-center"
+          style={getControlStyle()}
+        >
+          {visibleChips.map((opt) => (
+            <ITChip
+              key={String(opt[valueField])}
+              label={String(opt[labelField])}
+              color="primary"
+              size="sm"
+              removable={!disabled && !readOnly}
+              onRemove={() => toggleOption(opt)}
+            />
+          ))}
+          {hiddenCount > 0 && (
+            <ITChip label={`+${hiddenCount}`} color="secondary" size="sm" />
+          )}
+
+          <input
+            ref={inputRef}
+            name={name}
+            type="text"
+            value={searchTerm}
+            onChange={handleSearchChange}
+            onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            readOnly={readOnly || !searchable}
+            placeholder={selectedOptions.length === 0 ? placeholder : ""}
+            autoComplete="off"
+            aria-autocomplete="list"
+            aria-activedescendant={activeIndex >= 0 ? `it-multiselect-opt-${activeIndex}` : undefined}
+            className="flex-1 min-w-[60px] bg-transparent outline-none border-none text-sm text-secondary-900 dark:text-slate-100"
+            style={{ padding: 0, fontSize: inputFieldStyle(inputTheme, size).fontSize }}
+          />
+
+          <div className="ml-auto flex items-center gap-2 pl-1 text-secondary-400 shrink-0">
+            {isLoading ? (
+              <div className="animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" />
+            ) : showClear ? (
+              <button
+                type="button"
+                aria-label="Limpiar selección"
+                title="Limpiar selección"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleClear();
+                }}
+                className="flex items-center justify-center hover:text-secondary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 rounded-full"
+              >
+                <FaTimes size={12} />
+              </button>
+            ) : (
+              <FaSearch size={13} className="pointer-events-none" />
+            )}
+            <FaChevronDown
+              size={12}
+              className={clsx("pointer-events-none transition-transform", isOpen && "rotate-180")}
+            />
+          </div>
+        </div>
+
+        {isOpen &&
+          createPortal(
+            <div
+              ref={panelRef}
+              role="listbox"
+              aria-multiselectable="true"
+              style={panelStyle}
+              className="bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden"
+            >
+              <div className="max-h-60 overflow-y-auto">
+                {filteredOptions.length > 0 ? (
+                  filteredOptions.map((option, index) => {
+                    const isSelected = value.includes(option[valueField]);
+                    return (
+                      <div
+                        id={`it-multiselect-opt-${index}`}
+                        key={String(option[valueField])}
+                        ref={(el) => { optionRefs.current[index] = el; }}
+                        role="option"
+                        aria-selected={isSelected}
+                        onMouseEnter={() => setActiveIndex(index)}
+                        onClick={() => toggleOption(option)}
+                        className={clsx(
+                          "flex items-center gap-2 px-4 py-2 text-sm cursor-pointer transition-colors",
+                          activeIndex === index && "bg-secondary-50 dark:bg-slate-800",
+                          isSelected
+                            ? "text-primary-700 dark:text-primary-300 font-medium"
+                            : "text-secondary-700 dark:text-slate-300"
+                        )}
+                      >
+                        <span
+                          className={clsx(
+                            "flex h-4 w-4 shrink-0 items-center justify-center rounded border",
+                            isSelected
+                              ? "bg-primary-500 border-primary-500 text-white"
+                              : "border-secondary-300 dark:border-slate-600"
+                          )}
+                        >
+                          {isSelected && <FaCheck size={9} />}
+                        </span>
+                        <span className="flex-1 truncate">
+                          {renderOption
+                            ? renderOption(option, { isSelected, searchTerm })
+                            : option[labelField]}
+                        </span>
+                      </div>
+                    );
+                  })
+                ) : (
+                  <ITText as="div" className="px-4 py-6 text-sm text-center text-secondary-500 italic">
+                    {isLoading ? "Cargando..." : noResultsMessage}
+                  </ITText>
+                )}
+              </div>
+            </div>,
+            document.body
+          )}
+      </div>
+
+      {hasError && (
+        <ITText as="p" className="text-danger-500 text-xs mt-1">{errorMessage}</ITText>
+      )}
+    </div>
+  );
+}

package/src/components/molecules/search-select/search-select.doc.mdx

@@ -29,6 +29,9 @@ Searchable dropdown select with support for local client-side filtering and remo
 | `onSearch` | `(query: string) => void` | — | Callback for server-side search. Receives the search query string. |
 | `isLoading` | `boolean` | `false` | Whether options are being loaded from an external API. |
 | `noResultsMessage` | `string` | `"No se encontraron resultados"` | Message displayed when no results match the search. |
+| `renderOption` | `(option, state: { isSelected, searchTerm }) => ReactNode` | — | Custom template for each dropdown option. |
+| `clearable` | `boolean` | `true` | Shows a clear (X) button inside the input. |
+| `onClear` | `() => void` | — | Callback fired when the clear button is pressed. |
 
 ## Usage
 
@@ -64,6 +67,8 @@ import { ITSearchSelect } from '@axzydev/axzy_ui_system';
 - Validation states: `error` string displays inline, `touched` gates error visibility, `required` adds a red asterisk.
 - `readOnly` mode renders the selected value as non-interactive text.
 - Supports `className` for style overrides and width control.
+- **Custom options**: `renderOption` replaces the default option rendering and receives `{ isSelected, searchTerm }`.
+- **Clear button**: an (X) button appears inside the input when there is a search term or a selected value; `clearable={false}` disables it. Clearing resets the search and selection, and calls `onSearch("")` / `onClear()`.
 
 ## Stories
 

package/src/components/molecules/search-select/search-select.props.ts

@@ -1,4 +1,4 @@
-import { FocusEvent } from "react";
+import { FocusEvent, ReactNode } from "react";
 import { SizesTypes } from "@/types/sizes.types";
 
 /** Represents an option in the search-select dropdown. */
@@ -51,4 +51,13 @@ export interface ITSearchSelectProps {
   isLoading?: boolean;
   /** Message displayed when no results are found. Default: "No se encontraron resultados". */
   noResultsMessage?: string;
+  /** Custom template for each option in the dropdown list. Receives the option and its state (`isSelected`, `searchTerm`). */
+  renderOption?: (
+    option: ITSearchSelectOption,
+    state: { isSelected: boolean; searchTerm: string }
+  ) => ReactNode;
+  /** Shows a clear (X) button inside the input. Default: true. */
+  clearable?: boolean;
+  /** Callback fired when the clear button is pressed. */
+  onClear?: () => void;
 }

package/src/components/molecules/search-select/search-select.stories.tsx

@@ -106,6 +106,24 @@ export const RemoteAPI: Story = {
   },
 };
 
+export const CustomOptionTemplate: Story = {
+  render: (args) => <SearchSelectWrapper {...args} />,
+  args: {
+    name: "search-select",
+    label: "Usuario (template personalizado)",
+    options: options,
+    placeholder: "Busca un usuario...",
+    renderOption: (option, { isSelected, searchTerm }) => (
+      <div className="flex items-center justify-between gap-2">
+        <span className={isSelected ? "font-semibold" : ""}>{option.label}</span>
+        {searchTerm && (
+          <span className="text-xs text-secondary-400">{option.label}</span>
+        )}
+      </div>
+    ),
+  },
+};
+
 export const WithError: Story = {
   render: (args) => <SearchSelectWrapper {...args} />,
   args: {

package/src/components/molecules/search-select/search-select.tsx

@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
+import { createPortal } from "react-dom";
 import clsx from "clsx";
-import { FaSearch } from "react-icons/fa";
+import { FaSearch, FaTimes } from "react-icons/fa";
 import { ITSearchSelectProps, ITSearchSelectOption } from "./search-select.props";
 import { theme, inputSizeTokens } from "@/theme/theme";
+import { useFloatingPanel } from "@/hooks/useFloatingPanel";
 import ITText from "@/components/atoms/text/text";
 
 /**
@@ -32,6 +34,18 @@ import ITText from "@/components/atoms/text/text";
  *   value={selectedUser}
  *   onChange={(value) => setSelectedUser(value)}
  * />
+ *
+ * // Custom option template + clear button
+ * <ITSearchSelect
+ *   label="User"
+ *   options={users}
+ *   value={selectedUser}
+ *   onChange={(value) => setSelectedUser(value)}
+ *   onClear={() => console.log("cleared")}
+ *   renderOption={(option, { isSelected }) => (
+ *     <span className={isSelected ? "font-bold" : ""}>{option.label}</span>
+ *   )}
+ * />
  * ```
  */
 export default function ITSearchSelect({
@@ -54,14 +68,24 @@ export default function ITSearchSelect({
   isLoading = false,
   noResultsMessage = "No se encontraron resultados",
   size = "md",
+  renderOption,
+  clearable = true,
+  onClear,
 }: ITSearchSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const [localTouched, setLocalTouched] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const inputWrapperRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  // Panel position (rendered in a portal so it escapes overflow/transform ancestors).
+  const { panelRef, style: panelStyle } = useFloatingPanel(inputWrapperRef, isOpen, {
+    estimatedHeight: 260,
+    matchWidth: true,
+  });
+
   // Encontrar la opción seleccionada inicialmente
   const selectedOption = useMemo(() => {
     return options.find((opt) => opt[valueField] === value);
@@ -77,7 +101,10 @@ export default function ITSearchSelect({
   // Cerrar el dropdown al hacer click afuera
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+      const target = event.target as Node;
+      const inContainer = containerRef.current?.contains(target);
+      const inPanel = panelRef.current?.contains(target);
+      if (!inContainer && !inPanel) {
         setIsOpen(false);
       }
     }
@@ -86,13 +113,16 @@ export default function ITSearchSelect({
   }, []);
 
   // Filtrado local de opciones (Modo 1)
+  const selectedLabel = selectedOption ? String(selectedOption[labelField]) : "";
   const filteredOptions = useMemo(() => {
     if (onSearch) return options; // Modo API
-    if (!searchTerm || !isFocused) return options;
+    // Show every option while the input still displays the selected label;
+    // filter only once the user actually types a different query.
+    if (!searchTerm || !isFocused || searchTerm === selectedLabel) return options;
     return options.filter((opt) =>
       String(opt[labelField]).toLowerCase().includes(searchTerm.toLowerCase())
     );
-  }, [options, searchTerm, onSearch, labelField, isFocused]);
+  }, [options, searchTerm, selectedLabel, onSearch, labelField, isFocused]);
 
   // Manejar cambio en el input
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -116,6 +146,16 @@ export default function ITSearchSelect({
     setIsOpen(false);
   };
 
+  const handleClear = () => {
+    setSearchTerm("");
+    setIsOpen(true);
+    if (onSearch) onSearch("");
+    if (value !== undefined && value !== null && value !== "") {
+      onChange?.("", undefined);
+    }
+    onClear?.();
+  };
+
   const handleFocus = () => {
     if (disabled || readOnly) return;
     setIsFocused(true);
@@ -145,6 +185,9 @@ export default function ITSearchSelect({
 
   const hasError = isTouched && !!effectiveError;
   const errorMessage = typeof effectiveError === "string" ? effectiveError : "Este campo es requerido";
+
+  const showClearButton =
+    clearable && !disabled && !readOnly && (searchTerm.length > 0 || !isEmpty);
   
   const getInputStyle = () => {
     const sizeConfig = inputSizeTokens[size] ?? inputSizeTokens.md;
@@ -196,7 +239,7 @@ export default function ITSearchSelect({
       )}
 
       <div className="relative">
-        <div className="relative flex items-center">
+        <div ref={inputWrapperRef} className="relative flex items-center">
           <input
             type="text"
             name={name}
@@ -211,40 +254,71 @@ export default function ITSearchSelect({
             style={getInputStyle()}
             autoComplete="off"
           />
-          <div className="absolute right-3 flex items-center gap-2 text-secondary-400 pointer-events-none">
-             {isLoading && <div className="animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" />}
-             {!isLoading && <FaSearch size={14} className={clsx({ "text-primary-500": isFocused })} />}
+          <div className="absolute right-3 flex items-center gap-2 text-secondary-400">
+             {isLoading && (
+               <div className="pointer-events-none animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" />
+             )}
+             {!isLoading && showClearButton && (
+               <button
+                 type="button"
+                 aria-label="Limpiar"
+                 title="Limpiar"
+                 onMouseDown={(e) => {
+                   e.preventDefault();
+                   handleClear();
+                 }}
+                 className="flex items-center justify-center text-secondary-400 hover:text-secondary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 rounded-full"
+               >
+                 <FaTimes size={14} />
+               </button>
+             )}
+             {!isLoading && !showClearButton && (
+               <FaSearch size={14} className={clsx("pointer-events-none", { "text-primary-500": isFocused })} />
+             )}
           </div>
         </div>
 
-        {/* Dropdown Panel */}
-        {isOpen && (
-          <div className="absolute z-[70] w-full mt-1 bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top">
+        {/* Dropdown Panel (portal: escapes overflow-hidden / transform ancestors) */}
+        {isOpen &&
+          createPortal(
+            <div
+              ref={panelRef}
+              style={panelStyle}
+              className="bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top"
+            >
             <div className="max-h-60 overflow-y-auto">
               {filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <ITText
-                    as="div"
-                    key={option[valueField]}
-                    onClick={() => handleSelect(option)}
-                    className={clsx(
-                      "px-4 py-2 text-sm cursor-pointer transition-colors",
-                      value === option[valueField]
-                        ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium"
-                        : "hover:bg-secondary-50 dark:hover:bg-slate-800 text-secondary-700 dark:text-slate-300"
-                    )}
-                  >
-                    <ITText as="span">{option[labelField]}</ITText>
-                  </ITText>
-                ))
+                filteredOptions.map((option) => {
+                  const isSelected = value === option[valueField];
+                  return (
+                    <ITText
+                      as="div"
+                      key={option[valueField]}
+                      onClick={() => handleSelect(option)}
+                      className={clsx(
+                        "px-4 py-2 text-sm cursor-pointer transition-colors",
+                        isSelected
+                          ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium"
+                          : "hover:bg-secondary-50 dark:hover:bg-slate-800 text-secondary-700 dark:text-slate-300"
+                      )}
+                    >
+                      {renderOption ? (
+                        renderOption(option, { isSelected, searchTerm })
+                      ) : (
+                        <ITText as="span">{option[labelField]}</ITText>
+                      )}
+                    </ITText>
+                  );
+                })
               ) : (
                 <ITText as="div" className="px-4 py-6 text-sm text-center text-secondary-500 italic">
                   {isLoading ? "Cargando..." : noResultsMessage}
                 </ITText>
               )}
             </div>
-          </div>
-        )}
+            </div>,
+            document.body
+          )}
       </div>
 
       {/* Error Message */}