karsten-design-system 1.2.67 → 1.2.68

package/dist/index.js

@@ -486,6 +486,7 @@ function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setO
     const [openSidebar, setOpenSidebar] = useState(false);
     const [openUserConfig, setOpenUserConfig] = useState(false);
     const userConfigRef = useRef(null);
+    const iconButtonRef = useRef(null);
     useEffect(() => {
         function handleClickOutside(event) {
             if (userConfigRef.current &&
@@ -507,26 +508,18 @@ function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setO
     useEffect(() => {
         function handleClickOutsideSidebar(event) {
             if (sidebarRef.current &&
-                !sidebarRef.current.contains(event.target)) {
+                !sidebarRef.current.contains(event.target) &&
+                !(iconButtonRef.current &&
+                    iconButtonRef.current.contains(event.target))) {
                 setOpenSidebar(false);
             }
         }
-        if (openSidebar) {
-            document.addEventListener('mousedown', handleClickOutsideSidebar);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutsideSidebar);
-            };
-        }
-        // if (openSidebar) {
-        //   document.addEventListener('mousedown', handleClickOutsideSidebar)
-        // } else {
-        //   document.removeEventListener('mousedown', handleClickOutsideSidebar)
-        // }
-        // return () => {
-        //   document.removeEventListener('mousedown', handleClickOutsideSidebar)
-        // }
-    }, [openSidebar]);
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16  border-b border-b-light-200 flex flex-row justify-between items-center px-8 shadow-header dark:bg-dark-100 dark:border-b-dark-400", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), "aria-label": "Abrir menu lateral", children: jsx("i", { className: `${openSidebar ? 'pi pi-list' : 'pi pi-bars'} text-light-950 cursor-pointer hover:text-light-900 text-xl mt-1 }` }) }), jsx(Link$1, { className: "cursor-pointer", to: redirect, "aria-label": "Ir para p\u00E1gina inicial", children: jsx(LogoSmall, {}) }, "logo-link")] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none mt-1", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-light-950 cursor-pointer hover:text-light-900" }) })), jsxs("div", { ref: userConfigRef, className: "relative", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenUserConfig(!openUserConfig), "aria-label": "Abrir menu de configura\u00E7\u00F5es do usu\u00E1rio", children: jsxs("p", { className: "text-light-950 hover:text-light-900 font-roboto font-bold cursor-pointer transition-colors duration-200", children: [helloTranslation, ", ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 z-20 p-2 -bottom-1 translate-y-full shadow-container rounded-md bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 rounded hover:bg-light-300 dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: jsx("a", { onClick: () => {
+        document.addEventListener('mousedown', handleClickOutsideSidebar);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutsideSidebar);
+        };
+    }, []);
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "w-100 min-h-16  border-b border-b-light-200 flex flex-row justify-between items-center px-8 shadow-header dark:bg-dark-100 dark:border-b-dark-400", children: [jsxs("div", { className: "flex flex-row items-center gap-4", children: [jsx("button", { ref: iconButtonRef, className: "bg-transparent border-none", onClick: () => setOpenSidebar(!openSidebar), "aria-label": "Abrir menu lateral", children: jsx("i", { className: `${openSidebar ? 'pi pi-list' : 'pi pi-bars'} text-light-950 cursor-pointer hover:text-light-900 text-xl mt-1 }` }) }), jsx(Link$1, { className: "cursor-pointer", to: redirect, "aria-label": "Ir para p\u00E1gina inicial", children: jsx(LogoSmall, {}) }, "logo-link")] }), jsxs("div", { className: "relative flex flex-row gap-4 items-center", children: [isRenderNotifications && (jsx("button", { className: "bg-transparent border-none mt-1", onClick: () => setOpenNotifications(true), "aria-label": "Abrir notifica\u00E7\u00E3o", children: jsx("i", { className: "pi pi-bell text-light-950 cursor-pointer hover:text-light-900" }) })), jsxs("div", { ref: userConfigRef, className: "relative", children: [jsx("button", { className: "bg-transparent border-none", onClick: () => setOpenUserConfig(!openUserConfig), "aria-label": "Abrir menu de configura\u00E7\u00F5es do usu\u00E1rio", children: jsxs("p", { className: "text-light-950 hover:text-light-900 font-roboto font-bold cursor-pointer transition-colors duration-200", children: [helloTranslation, ", ", username] }) }), openUserConfig && (jsx("div", { className: `absolute w-100 z-20 p-2 -bottom-1 translate-y-full shadow-container rounded-md bg-light-500 dark:text-light-500 dark:bg-dark-100 dark:border dark:border-dark-500 dark:shadow-dark-400`, children: jsx("ul", { children: userConfigItems.map(({ id, title, onClick, path }) => (jsx("li", { className: "p-2 rounded hover:bg-light-300 dark:bg-dark-100 dark:text-light-500 dark:hover:bg-dark-400", children: jsx("a", { onClick: () => {
                                                         if (onClick)
                                                             onClick();
                                                         setOpenUserConfig(false);