@ftdata/ui 0.0.7 → 0.0.8

package/dist/components/Input/index.d.ts

@@ -6,7 +6,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     helpText?: string;
     success?: boolean;
     width?: string | number;
-    icon: IconsNames | JSX.Element;
+    icon?: IconsNames | JSX.Element;
     textField?: string;
     margin?: string;
     required?: boolean;

package/dist/components/Menu/index.d.ts

@@ -7,6 +7,7 @@ interface MenuProps {
     logo: JSX.Element;
     items: MenuItemData[];
     translate: (key: string) => string;
+    active?: string;
 }
-export default function Menu({ background, fontcolor, subMenusBackground, logo, items, translate, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export default function Menu({ background, fontcolor, subMenusBackground, logo, items, translate, active, }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Menu/index.js

@@ -1,12 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ContainerLogo, ItemMenu, ItemsContainer, MenuAside, MenuHeader, SubItemsContainer, SubItemsHeader, SubItemsWrapper, SubMenuItem } from "./styles.js";
 import createMenus from "./helpers/createMenus.js";
 import { Icon } from "@ftdata/f-icons";
-function Menu({ background, fontcolor, subMenusBackground, logo, items, translate }) {
+function Menu({ background, fontcolor, subMenusBackground, logo, items, translate, active }) {
     const [expand, setExpand] = useState(false);
     const [submenus, setSubmenus] = useState([]);
     const [isClosingSubmenu, setIsClosingSubmenu] = useState(false);
+    const menuRef = useRef(null);
     const menus = createMenus(items, translate);
     const toggleMenu = ()=>{
         if (expand) return void setTimeout(()=>{
@@ -32,7 +33,22 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
             setIsClosingSubmenu(false);
         }, 400);
     };
+    useEffect(()=>{
+        const handleClickOutside = (event)=>{
+            if (expand && menuRef.current && !menuRef.current.contains(event.target)) {
+                setExpand(false);
+                setSubmenus([]);
+            }
+        };
+        if (expand) document.addEventListener("mousedown", handleClickOutside);
+        return ()=>{
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [
+        expand
+    ]);
     return /*#__PURE__*/ jsxs(MenuAside, {
+        ref: menuRef,
         background: background,
         onClick: expand ? ()=>null : toggleMenu,
         $expand: expand,
@@ -51,7 +67,7 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                                 })
                             }),
                             /*#__PURE__*/ jsx("span", {
-                                children: translate("close_menu")
+                                children: translate("menu")
                             })
                         ]
                     }),
@@ -66,6 +82,7 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                         fontcolor: fontcolor,
                         onClick: (event)=>handleClickItem(event, menu.submenus, menu.callback),
                         $expand: expand || void 0,
+                        $active: menu.label === translate(active || ""),
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: menu.icon

package/dist/components/Menu/styles.js

@@ -61,7 +61,7 @@ const MenuAside = styled_components.aside`
   flex-direction: column;
   gap: 1.5rem;
   height: 100vh;
-  padding: 1rem 0.5rem;
+  padding: 0.5rem;
   position: relative;
   transition: width 0.3s ease-in-out;
   width: ${({ $expand })=>$expand ? "18.75rem" : "3.5rem"};
@@ -86,7 +86,7 @@ const ContainerLogo = styled_components.div`
     align-items: center;
     display: flex;
     justify-content: center;
-    max-height: 6.25rem;
+    max-height: 8rem;
     max-width: 100%;
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "exports": {
     ".": {