analytica-frontend-lib 1.1.72 → 1.1.73

package/dist/index.mjs

@@ -1815,7 +1815,7 @@ var Input = forwardRef9(
 var Input_default = Input;
 
 // src/components/Search/Search.tsx
-import { CaretLeft, X as X3 } from "phosphor-react";
+import { X as X3, MagnifyingGlass } from "phosphor-react";
 import {
   forwardRef as forwardRef11,
   useState as useState7,
@@ -2731,11 +2731,15 @@ var Search = forwardRef11(
     value,
     onChange,
     placeholder = "Buscar...",
+    onKeyDown: userOnKeyDown,
     ...props
   }, ref) => {
     const [dropdownOpen, setDropdownOpen] = useState7(false);
+    const [forceClose, setForceClose] = useState7(false);
+    const justSelectedRef = useRef4(false);
     const dropdownStore = useRef4(createDropdownStore()).current;
     const dropdownRef = useRef4(null);
+    const inputElRef = useRef4(null);
     const filteredOptions = useMemo2(() => {
       if (!options.length) {
         return [];
@@ -2743,24 +2747,35 @@ var Search = forwardRef11(
       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);
+    };
     useEffect7(() => {
+      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);
     };
     useEffect7(() => {
       const handleClickOutside = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-          setDropdownOpen(false);
-          dropdownStore.setState({ open: false });
+          setOpenAndNotify(false);
         }
       };
       if (showDropdown) {
@@ -2769,9 +2784,10 @@ var Search = forwardRef11(
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
       };
-    }, [showDropdown, dropdownStore]);
+    }, [showDropdown, dropdownStore, onDropdownChange]);
     const generatedId = useId7();
     const inputId = id ?? `search-${generatedId}`;
+    const dropdownId = `${inputId}-dropdown`;
     const handleClear = () => {
       if (onClear) {
         onClear();
@@ -2784,21 +2800,40 @@ var Search = forwardRef11(
       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__ */ jsxs14(
       "div",
       {
@@ -2806,30 +2841,30 @@ var Search = forwardRef11(
         className: `w-full max-w-lg md:w-[488px] ${containerClassName}`,
         children: [
           /* @__PURE__ */ jsxs14("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ jsx21("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx21(
-              "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__ */ jsx21(CaretLeft, {})
-              }
-            ) }),
             /* @__PURE__ */ jsx21(
               "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
               }
@@ -2843,11 +2878,22 @@ var Search = forwardRef11(
                 "aria-label": "Limpar busca",
                 children: /* @__PURE__ */ jsx21("span", { className: "w-6 h-6 text-text-800 flex items-center justify-center hover:text-text-600 transition-colors", children: /* @__PURE__ */ jsx21(X3, {}) })
               }
+            ) }),
+            showSearchIcon && /* @__PURE__ */ jsx21("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx21(
+              "button",
+              {
+                type: "button",
+                className: "p-0 border-0 bg-transparent cursor-pointer",
+                onMouseDown: handleSearchIconClick,
+                "aria-label": "Buscar",
+                children: /* @__PURE__ */ jsx21("span", { className: "w-6 h-6 text-text-800 flex items-center justify-center hover:text-text-600 transition-colors", children: /* @__PURE__ */ jsx21(MagnifyingGlass, {}) })
+              }
             ) })
           ] }),
           showDropdown && /* @__PURE__ */ jsx21(DropdownMenu_default, { open: showDropdown, onOpenChange: setDropdownOpen, children: /* @__PURE__ */ jsx21(
             DropdownMenuContent,
             {
+              id: dropdownId,
               className: "w-full mt-1",
               style: { maxHeight: dropdownMaxHeight },
               align: "start",
@@ -7046,7 +7092,7 @@ import {
   cloneElement as cloneElement6,
   useState as useState14
 } from "react";
-import { CaretLeft as CaretLeft2, CaretRight as CaretRight4 } from "phosphor-react";
+import { CaretLeft, CaretRight as CaretRight4 } from "phosphor-react";
 import { jsx as jsx41, jsxs as jsxs29 } from "react/jsx-runtime";
 var createMenuStore = (onValueChange) => create7((set) => ({
   value: "",
@@ -7312,7 +7358,7 @@ var MenuOverflow = ({
             className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
             "data-testid": "scroll-left-button",
             children: [
-              /* @__PURE__ */ jsx41(CaretLeft2, { size: 16 }),
+              /* @__PURE__ */ jsx41(CaretLeft, { size: 16 }),
               /* @__PURE__ */ jsx41("span", { className: "sr-only", children: "Scroll left" })
             ]
           }
@@ -8795,7 +8841,7 @@ function useApiConfig(api) {
 // src/components/Quiz/Quiz.tsx
 import {
   BookOpen,
-  CaretLeft as CaretLeft3,
+  CaretLeft as CaretLeft2,
   CaretRight as CaretRight5,
   Clock as Clock2,
   SquaresFour
@@ -10255,7 +10301,7 @@ var QuizTitle = forwardRef20(
             /* @__PURE__ */ jsx48(
               IconButton_default,
               {
-                icon: /* @__PURE__ */ jsx48(CaretLeft3, { size: 24 }),
+                icon: /* @__PURE__ */ jsx48(CaretLeft2, { size: 24 }),
                 size: "md",
                 "aria-label": "Voltar",
                 onClick: handleBackClick
@@ -10512,7 +10558,7 @@ var QuizFooter = forwardRef20(
                   size: "medium",
                   variant: "link",
                   action: "primary",
-                  iconLeft: /* @__PURE__ */ jsx48(CaretLeft3, { size: 18 }),
+                  iconLeft: /* @__PURE__ */ jsx48(CaretLeft2, { size: 18 }),
                   onClick: () => {
                     goToPreviousQuestion();
                   },