analytica-frontend-lib 1.1.72 → 1.1.74

package/dist/Search/index.js

@@ -697,20 +697,19 @@ var DropdownMenu = ({
   };
   (0, import_react5.useEffect)(() => {
     if (open) {
-      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("pointerdown", handleClickOutside);
       document.addEventListener("keydown", handleDownkey);
     }
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("pointerdown", handleClickOutside);
       document.removeEventListener("keydown", handleDownkey);
     };
   }, [open]);
   (0, import_react5.useEffect)(() => {
-    setOpen(open);
     onOpenChange?.(open);
   }, [open, onOpenChange]);
   (0, import_react5.useEffect)(() => {
-    if (propOpen) {
+    if (propOpen !== void 0) {
       setOpen(propOpen);
     }
   }, [propOpen]);
@@ -837,6 +836,7 @@ var DropdownMenuItem = (0, import_react5.forwardRef)(
     onClick,
     variant = "menu",
     store: externalStore,
+    preventClose = false,
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
@@ -848,8 +848,17 @@ var DropdownMenuItem = (0, import_react5.forwardRef)(
         e.stopPropagation();
         return;
       }
-      onClick?.(e);
-      setOpen(false);
+      if (e.type === "click") {
+        onClick?.(e);
+      } else if (e.type === "keydown") {
+        if (e.key === "Enter" || e.key === " ") {
+          onClick?.(e);
+        }
+        props.onKeyDown?.(e);
+      }
+      if (!preventClose) {
+        setOpen(false);
+      }
     };
     const getVariantClasses = () => {
       if (variant === "profile") {
@@ -876,7 +885,11 @@ var DropdownMenuItem = (0, import_react5.forwardRef)(
         `,
         onClick: handleClick,
         onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") handleClick(e);
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            handleClick(e);
+          }
         },
         tabIndex: disabled ? -1 : 0,
         ...props,
@@ -942,10 +955,17 @@ var ProfileMenuHeader = (0, import_react5.forwardRef)(({ className, name, email,
   );
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
-var ProfileToggleTheme = ({ ...props }) => {
+var ProfileToggleTheme = ({
+  store: externalStore,
+  ...props
+}) => {
   const { themeMode, setTheme } = useTheme();
   const [modalThemeToggle, setModalThemeToggle] = (0, import_react5.useState)(false);
   const [selectedTheme, setSelectedTheme] = (0, import_react5.useState)(themeMode);
+  const internalStoreRef = (0, import_react5.useRef)(null);
+  internalStoreRef.current ??= createDropdownStore();
+  const store = externalStore ?? internalStoreRef.current;
+  const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -954,12 +974,20 @@ var ProfileToggleTheme = ({ ...props }) => {
   const handleSave = () => {
     setTheme(selectedTheme);
     setModalThemeToggle(false);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    setSelectedTheme(themeMode);
+    setModalThemeToggle(false);
+    setOpen(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       DropdownMenuItem,
       {
         variant: "profile",
+        preventClose: true,
+        store,
         iconLeft: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "svg",
           {
@@ -994,19 +1022,12 @@ var ProfileToggleTheme = ({ ...props }) => {
       Modal_default,
       {
         isOpen: modalThemeToggle,
-        onClose: () => setModalThemeToggle(false),
+        onClose: handleCancel,
         title: "Apar\xEAncia",
         size: "md",
         footer: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Button_default,
-            {
-              variant: "outline",
-              onClick: () => setModalThemeToggle(false),
-              children: "Cancelar"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button_default, { variant: "solid", onClick: () => handleSave(), children: "Salvar" })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button_default, { variant: "outline", onClick: handleCancel, children: "Cancelar" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button_default, { variant: "solid", onClick: handleSave, children: "Salvar" })
         ] }),
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-text-500", children: "Escolha o tema:" }),
@@ -1095,11 +1116,15 @@ var Search = (0, import_react6.forwardRef)(
     value,
     onChange,
     placeholder = "Buscar...",
+    onKeyDown: userOnKeyDown,
     ...props
   }, ref) => {
     const [dropdownOpen, setDropdownOpen] = (0, import_react6.useState)(false);
+    const [forceClose, setForceClose] = (0, import_react6.useState)(false);
+    const justSelectedRef = (0, import_react6.useRef)(false);
     const dropdownStore = (0, import_react6.useRef)(createDropdownStore()).current;
     const dropdownRef = (0, import_react6.useRef)(null);
+    const inputElRef = (0, import_react6.useRef)(null);
     const filteredOptions = (0, import_react6.useMemo)(() => {
       if (!options.length) {
         return [];
@@ -1107,24 +1132,35 @@ var Search = (0, import_react6.forwardRef)(
       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);
+    };
     (0, import_react6.useEffect)(() => {
+      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);
     };
     (0, import_react6.useEffect)(() => {
       const handleClickOutside = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-          setDropdownOpen(false);
-          dropdownStore.setState({ open: false });
+          setOpenAndNotify(false);
         }
       };
       if (showDropdown) {
@@ -1133,9 +1169,10 @@ var Search = (0, import_react6.forwardRef)(
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
       };
-    }, [showDropdown, dropdownStore]);
+    }, [showDropdown, dropdownStore, onDropdownChange]);
     const generatedId = (0, import_react6.useId)();
     const inputId = id ?? `search-${generatedId}`;
+    const dropdownId = `${inputId}-dropdown`;
     const handleClear = () => {
       if (onClear) {
         onClear();
@@ -1148,21 +1185,40 @@ var Search = (0, import_react6.forwardRef)(
       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__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
@@ -1170,30 +1226,30 @@ var Search = (0, import_react6.forwardRef)(
         className: `w-full max-w-lg md:w-[488px] ${containerClassName}`,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative flex items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "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__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react4.CaretLeft, {})
-              }
-            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "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
               }
@@ -1207,11 +1263,22 @@ var Search = (0, import_react6.forwardRef)(
                 "aria-label": "Limpar busca",
                 children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-6 h-6 text-text-800 flex items-center justify-center hover:text-text-600 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react4.X, {}) })
               }
+            ) }),
+            showSearchIcon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "p-0 border-0 bg-transparent cursor-pointer",
+                onMouseDown: handleSearchIconClick,
+                "aria-label": "Buscar",
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-6 h-6 text-text-800 flex items-center justify-center hover:text-text-600 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_phosphor_react4.MagnifyingGlass, {}) })
+              }
             ) })
           ] }),
           showDropdown && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenu_default, { open: showDropdown, onOpenChange: setDropdownOpen, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             DropdownMenuContent,
             {
+              id: dropdownId,
               className: "w-full mt-1",
               style: { maxHeight: dropdownMaxHeight },
               align: "start",