analytica-frontend-lib 1.1.72 → 1.1.74

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,
@@ -2333,20 +2333,19 @@ var DropdownMenu = ({
   };
   useEffect6(() => {
     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]);
   useEffect6(() => {
-    setOpen(open);
     onOpenChange?.(open);
   }, [open, onOpenChange]);
   useEffect6(() => {
-    if (propOpen) {
+    if (propOpen !== void 0) {
       setOpen(propOpen);
     }
   }, [propOpen]);
@@ -2473,6 +2472,7 @@ var DropdownMenuItem = forwardRef10(
     onClick,
     variant = "menu",
     store: externalStore,
+    preventClose = false,
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
@@ -2484,8 +2484,17 @@ var DropdownMenuItem = forwardRef10(
         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") {
@@ -2512,7 +2521,11 @@ var DropdownMenuItem = forwardRef10(
         `,
         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,
@@ -2578,10 +2591,17 @@ var ProfileMenuHeader = forwardRef10(({ className, name, email, store: _store, .
   );
 });
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
-var ProfileToggleTheme = ({ ...props }) => {
+var ProfileToggleTheme = ({
+  store: externalStore,
+  ...props
+}) => {
   const { themeMode, setTheme } = useTheme();
   const [modalThemeToggle, setModalThemeToggle] = useState6(false);
   const [selectedTheme, setSelectedTheme] = useState6(themeMode);
+  const internalStoreRef = useRef3(null);
+  internalStoreRef.current ??= createDropdownStore();
+  const store = externalStore ?? internalStoreRef.current;
+  const setOpen = useStore3(store, (s) => s.setOpen);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -2590,12 +2610,20 @@ var ProfileToggleTheme = ({ ...props }) => {
   const handleSave = () => {
     setTheme(selectedTheme);
     setModalThemeToggle(false);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    setSelectedTheme(themeMode);
+    setModalThemeToggle(false);
+    setOpen(false);
   };
   return /* @__PURE__ */ jsxs13(Fragment2, { children: [
     /* @__PURE__ */ jsx20(
       DropdownMenuItem,
       {
         variant: "profile",
+        preventClose: true,
+        store,
         iconLeft: /* @__PURE__ */ jsx20(
           "svg",
           {
@@ -2630,19 +2658,12 @@ var ProfileToggleTheme = ({ ...props }) => {
       Modal_default,
       {
         isOpen: modalThemeToggle,
-        onClose: () => setModalThemeToggle(false),
+        onClose: handleCancel,
         title: "Apar\xEAncia",
         size: "md",
         footer: /* @__PURE__ */ jsxs13("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ jsx20(
-            Button_default,
-            {
-              variant: "outline",
-              onClick: () => setModalThemeToggle(false),
-              children: "Cancelar"
-            }
-          ),
-          /* @__PURE__ */ jsx20(Button_default, { variant: "solid", onClick: () => handleSave(), children: "Salvar" })
+          /* @__PURE__ */ jsx20(Button_default, { variant: "outline", onClick: handleCancel, children: "Cancelar" }),
+          /* @__PURE__ */ jsx20(Button_default, { variant: "solid", onClick: handleSave, children: "Salvar" })
         ] }),
         children: /* @__PURE__ */ jsxs13("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsx20("p", { className: "text-sm text-text-500", children: "Escolha o tema:" }),
@@ -2731,11 +2752,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 +2768,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 +2805,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 +2821,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 +2862,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 +2899,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 +7113,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 +7379,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 +8862,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 +10322,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 +10579,7 @@ var QuizFooter = forwardRef20(
                   size: "medium",
                   variant: "link",
                   action: "primary",
-                  iconLeft: /* @__PURE__ */ jsx48(CaretLeft3, { size: 18 }),
+                  iconLeft: /* @__PURE__ */ jsx48(CaretLeft2, { size: 18 }),
                   onClick: () => {
                     goToPreviousQuestion();
                   },