analytica-frontend-lib 1.1.72 → 1.1.73

package/dist/Search/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Search/Search.tsx
-import { CaretLeft, X as X2 } from "phosphor-react";
+import { X as X2, MagnifyingGlass } from "phosphor-react";
 import {
   forwardRef as forwardRef3,
   useState as useState3,
@@ -1086,11 +1086,15 @@ var Search = forwardRef3(
     value,
     onChange,
     placeholder = "Buscar...",
+    onKeyDown: userOnKeyDown,
     ...props
   }, ref) => {
     const [dropdownOpen, setDropdownOpen] = useState3(false);
+    const [forceClose, setForceClose] = useState3(false);
+    const justSelectedRef = useRef2(false);
     const dropdownStore = useRef2(createDropdownStore()).current;
     const dropdownRef = useRef2(null);
+    const inputElRef = useRef2(null);
     const filteredOptions = useMemo(() => {
       if (!options.length) {
         return [];
@@ -1098,24 +1102,35 @@ var Search = forwardRef3(
       const filtered = filterOptions(options, value || "");
       return filtered;
     }, [options, value]);
-    const showDropdown = controlledShowDropdown ?? (dropdownOpen && value && String(value).length > 0);
+    const showDropdown = !forceClose && (controlledShowDropdown ?? (dropdownOpen && value && String(value).length > 0));
+    const setOpenAndNotify = (open) => {
+      setDropdownOpen(open);
+      dropdownStore.setState({ open });
+      onDropdownChange?.(open);
+    };
     useEffect5(() => {
+      if (justSelectedRef.current) {
+        justSelectedRef.current = false;
+        return;
+      }
+      if (forceClose) {
+        setOpenAndNotify(false);
+        return;
+      }
       const shouldShow = Boolean(value && String(value).length > 0);
-      setDropdownOpen(shouldShow);
-      dropdownStore.setState({ open: shouldShow });
-      onDropdownChange?.(shouldShow);
-    }, [value, onDropdownChange, dropdownStore]);
+      setOpenAndNotify(shouldShow);
+    }, [value, forceClose, onDropdownChange, dropdownStore]);
     const handleSelectOption = (option) => {
+      justSelectedRef.current = true;
+      setForceClose(true);
       onSelect?.(option);
-      setDropdownOpen(false);
-      dropdownStore.setState({ open: false });
+      setOpenAndNotify(false);
       updateInputValue(option, ref, onChange);
     };
     useEffect5(() => {
       const handleClickOutside = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-          setDropdownOpen(false);
-          dropdownStore.setState({ open: false });
+          setOpenAndNotify(false);
         }
       };
       if (showDropdown) {
@@ -1124,9 +1139,10 @@ var Search = forwardRef3(
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
       };
-    }, [showDropdown, dropdownStore]);
+    }, [showDropdown, dropdownStore, onDropdownChange]);
     const generatedId = useId2();
     const inputId = id ?? `search-${generatedId}`;
+    const dropdownId = `${inputId}-dropdown`;
     const handleClear = () => {
       if (onClear) {
         onClear();
@@ -1139,21 +1155,40 @@ var Search = forwardRef3(
       e.stopPropagation();
       handleClear();
     };
-    const handleLeftIconClick = () => {
-      if (ref && "current" in ref && ref.current) {
-        ref.current.blur();
-      }
+    const handleSearchIconClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setTimeout(() => {
+        inputElRef.current?.focus();
+      }, 0);
     };
     const handleInputChange = (e) => {
+      setForceClose(false);
       onChange?.(e);
       onSearch?.(e.target.value);
     };
+    const handleKeyDown = (e) => {
+      userOnKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (showDropdown && filteredOptions.length > 0) {
+          handleSelectOption(filteredOptions[0]);
+        } else if (value) {
+          onSearch?.(String(value));
+          setForceClose(true);
+          setOpenAndNotify(false);
+        }
+      }
+    };
     const getInputStateClasses = (disabled2, readOnly2) => {
       if (disabled2) return "cursor-not-allowed opacity-40";
       if (readOnly2) return "cursor-default focus:outline-none !text-text-900";
       return "hover:border-border-400";
     };
-    const showClearButton = value && !disabled && !readOnly;
+    const hasValue = String(value ?? "").length > 0;
+    const showClearButton = hasValue && !disabled && !readOnly;
+    const showSearchIcon = !hasValue && !disabled && !readOnly;
     return /* @__PURE__ */ jsxs5(
       "div",
       {
@@ -1161,30 +1196,30 @@ var Search = forwardRef3(
         className: `w-full max-w-lg md:w-[488px] ${containerClassName}`,
         children: [
           /* @__PURE__ */ jsxs5("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ jsx7("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx7(
-              "button",
-              {
-                type: "button",
-                className: "w-6 h-6 text-text-800 flex items-center justify-center bg-transparent border-0 p-0 cursor-pointer hover:text-text-600 transition-colors",
-                onClick: handleLeftIconClick,
-                "aria-label": "Voltar",
-                children: /* @__PURE__ */ jsx7(CaretLeft, {})
-              }
-            ) }),
             /* @__PURE__ */ jsx7(
               "input",
               {
-                ref,
+                ref: (node) => {
+                  if (ref) {
+                    if (typeof ref === "function") ref(node);
+                    else
+                      ref.current = node;
+                  }
+                  inputElRef.current = node;
+                },
                 id: inputId,
                 type: "text",
-                className: `w-full py-0 px-4 pl-10 ${showClearButton ? "pr-10" : "pr-4"} font-normal text-text-900 focus:outline-primary-950 border rounded-full bg-background focus:bg-primary-50 border-border-300 focus:border-2 focus:border-primary-950 h-10 placeholder:text-text-600 ${getInputStateClasses(disabled, readOnly)} ${className}`,
+                className: `w-full py-0 px-4 pr-10 font-normal text-text-900 focus:outline-primary-950 border rounded-full bg-background focus:bg-primary-50 border-border-300 focus:border-2 focus:border-primary-950 h-10 placeholder:text-text-600 ${getInputStateClasses(disabled, readOnly)} ${className}`,
                 value,
                 onChange: handleInputChange,
+                onKeyDown: handleKeyDown,
                 disabled,
                 readOnly,
                 placeholder,
                 "aria-expanded": showDropdown ? "true" : void 0,
                 "aria-haspopup": options.length > 0 ? "listbox" : void 0,
+                "aria-controls": showDropdown ? dropdownId : void 0,
+                "aria-autocomplete": "list",
                 role: options.length > 0 ? "combobox" : void 0,
                 ...props
               }
@@ -1198,11 +1233,22 @@ var Search = forwardRef3(
                 "aria-label": "Limpar busca",
                 children: /* @__PURE__ */ jsx7("span", { className: "w-6 h-6 text-text-800 flex items-center justify-center hover:text-text-600 transition-colors", children: /* @__PURE__ */ jsx7(X2, {}) })
               }
+            ) }),
+            showSearchIcon && /* @__PURE__ */ jsx7("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: "p-0 border-0 bg-transparent cursor-pointer",
+                onMouseDown: handleSearchIconClick,
+                "aria-label": "Buscar",
+                children: /* @__PURE__ */ jsx7("span", { className: "w-6 h-6 text-text-800 flex items-center justify-center hover:text-text-600 transition-colors", children: /* @__PURE__ */ jsx7(MagnifyingGlass, {}) })
+              }
             ) })
           ] }),
           showDropdown && /* @__PURE__ */ jsx7(DropdownMenu_default, { open: showDropdown, onOpenChange: setDropdownOpen, children: /* @__PURE__ */ jsx7(
             DropdownMenuContent,
             {
+              id: dropdownId,
               className: "w-full mt-1",
               style: { maxHeight: dropdownMaxHeight },
               align: "start",